Formatting elements

The formatting tags should be used when for semantic reasons you want to emphasize a word or phrase. If you want to use italic or bold for style, you should style them in the CSS.

A common mistake is to use a formatting tag on the the whole paragraph.

Don’t do this:

<p><i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget ornare purus. Sed quis sagittis orci, dictum dignissim arcu. Fusce euismod augue vitae leo varius placerat. Morbi pharetra accumsan placerat. Fusce in blandit quam, a sagittis leo. Praesent viverra id tellus vitae vulputate. Maecenas elementum placerat erat, ut eleifend tortor faucibus id.</i></p>

Use classes instead:

<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget ornare purus. Sed quis sagittis orci, dictum dignissim arcu. Fusce euismod augue vitae leo varius placerat. Morbi pharetra accumsan placerat. Fusce in blandit quam, a sagittis leo. Praesent viverra id tellus vitae vulputate. Maecenas elementum placerat erat, ut eleifend tortor faucibus id.</p>

And style them in the CSS:

p.description {  
    font-style: italic;  
}

An even worse mistake is to use the tags <b> or <strong> on a heading. Headings are rendered as bold by default.

Don’t do this:

<h1><b>Heading of the document</b></h1>

All you need is this:

<h1>Heading of the document</h1>

The <span> tag

From MDN web docs:

The HTML <span> element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes).

Let’s take a look at their example:

Add the basil, pine nuts and garlic to a blender and blend into a paste.

Gradually add the olive oil while running the blender slowly.

Here’s the HTML:

<p>Add the <span class="ingredient">basil</span>, <span class="ingredient">pine nuts</span> and <span class="ingredient">garlic</span> to a blender and blend into a paste.</p>

<p>Gradually add the <span class="ingredient">olive oil</span> while running the blender slowly.</p>

 
And then, the CSS:

span.ingredient {  
    color: #f00;  
}

Use the <span> tag only inside another element, never on its own, and only as part of another element, not on the other element’s whole.