“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.
In this post:
Required knowledge:
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:
XrayYankeeZulu
When not to use them
Do not use them when there are alternative tags which are semantically appropriate.
For example:
<p>We should always endeavour to use <span style="font-weight: bold;">semantic</span> tags.</p>
<p>We should always endeavour to use <strong>semantic</strong> tags.</p>
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:
- HTML Semantic Elements. Available at: https://www.w3schools.com/html/html5_semantic_elements.asp (Accessed: 17 November 2023).