Text Formatting and Fonts in HTML – Basics of HTML #5

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.

DEMO

Headings

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 h2 or h3 tag.

<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>

Paragraphs

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>

Line Breaks

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

Horizontal Rule

To create a horizontal line across your webpage we use <hr>

Bold text

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.

Italic text

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.

Strikethrough text

In the past we used strike which looked like

<strike>This is strikethrough</strike>

and

<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>

Small text

For small text we can use the following

<small>For smaller text</small>

Font Properties

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.

Series of The Basics of HTML for Beginners

Entire Series of Posts

1. The Basics of HTML
2. Creating a text or image link and making it open in a new tab/window
3. Creating and using lists
4. Text Formatting in HTML – this post