I briefly covered this in my Basics of HTML for Beginners post, however I wanted to come back to it in more detail and cover text formatting using HTML. We can add tags to our text content to give it more structure and style, helping readers follow along and letting web crawlers know what’s important to increase our SEO.
There are 6 levels of headings in HTML, these define the level of importance. For example on a blog, your blog title may be a
h1 tag while your post title may be a
<h1>Level 1 Heading</h1> <h2>Level 2 Heading</h2> <h3>Level 3 Heading</h3> <h5>Level 4 Heading</h5> <h5>Level 5 Heading</h5> <h6>Level 6 Heading</h6>
To separate sections of text we use the paragraph tag to add a space between the sections.
<p> This is a paragraph </p> <p> and this is a second paragraph </p>
To add a single line break we use
<br> this is an empty tag, meaning it doesn’t get wrapped around any code or need to be closed. It creates a blank line and sends the following code to the next line. Example:
This is one line and because I use <br>
It now goes to the next line. If I use <br><br>
It would skip two lines
To create a horizontal line across your webpage we use
Bolded text used to accomplished by wrapping the word you wanted bolded like so
<b>This is bolded</b>
However these days it is more common to use the following
<strong>This is bolded</strong>
The reason for this is that strong tells the browser that that font is important and by default makes it bold, but it can be further styled. If just wanting to make text more noticeable you can use bold. If the text is important like a subheading and you want web crawlers to treat it as an important piece of text then use strong.
Similar to above we used to wrap text that we want to be italic in
<i>This is in italic</i>
however now it is more common to use emphasise instead of italicise
<em>This is in italic</em>
Again, just like above web crawlers see italic as just styled text and emphasise as important so you can choose what situations each of these would be better for.
In the past we used strike which looked like
<strike>This is strikethrough</strike>
<s>This is strikethrough</s>
however this is no longer supported in HTML5 and so now we use
<del>This is strikethrough for text that is deleted or replaced</del>
For small text we can use the following
<small>For smaller text</small>
Previously we used the font tag to define a font like so
<font face="verdana" size="3" color="red">This is some text!</font>
but it is no longer supported. The reason I wanted to include this is because I see this used on blogs all the time! You should define fonts using CSS only! Here is a tutorial for adding fonts to your blog and how to associate them with certain text.