“A semantic element clearly describes its meaning to both the browser and the developer.” [1]

HTML5 has provided a set of semantic HTML tags lacking in the original HTML versions. At one stage the term “divitis” described the multitude of <div>s inside <div>s which threatened to make HTML the digital version of spaghetti. The only greater threat was the use of <table>s for layout, the anathema of web developers of yesteryear.

What are they

The <div> & <span> tags server almost identical purposes, the main difference being that <div>s are block-level elements and <span>s are inline elements.

Quite simply:

<style>
	div, span {
		margin: 8px;
		border: 1px solid black;
		padding:10px;
	}
</style>
<div>Alpha</div><div>Bravo</div><div>Charlie</div>
<span>Xray</span><span>Yankee</span><span>Zulu</span>

The above code appears as follows in the browser:

Alpha
Bravo
Charlie

XrayYankeeZulu

When not to use them

Do not use them when there are alternative tags which are semantically appropriate.

For example:

When to use them

In this simple example, we use <span> tags to specify that some of the text is in a foreign language, namely French.

<p><span lang="fr">Sans serif</span> fonts are easier to read.</p>

See more about language and HTML in the Declaring language in HTML tutorial.


References:

  1. HTML Semantic Elements. Available at: https://www.w3schools.com/html/html5_semantic_elements.asp (Accessed: 17 November 2023).

By MisterFoxOnline

Mister Fox AKA @MisterFoxOnline is an ICT, IT and CAT Teacher who has just finished training as a Young Engineers instructor. He has a passion for technology and loves to find solutions to problems using the skills he has learned in the course of his IT career.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.