Semantic
HTML gives meaning to the HTML elements that you choose to use. Instead of generic elements such as divs or
paragraphs, you can use expressive semantic HTML elements that convey the purpose of their content and help
improve your code readability, accessibility to users using things such as screen readers, and also improve your
SEO.
I will outline the majority of the semantic HTML elements here including their syntax and use cases that I have
found for them. A full list and further information on all of them can of course be found at
W3Schools.
Header, Main, and Footer
If you go to most websites, you will see that there is a header at the top of the page that highlights the
website or brand name with some functionality such as a search bar or navigation links and should at least
contain one heading tag from h1 to h6. Scrolling to the bottom of the page you will commonly see a footer with
such things as contact information, social media links, and copywrite information. Everything between these two
is the main content of the page. This means that your HTML code for your
<body></body>
element will, in its most basic form, look like:
The
<nav></nav>
element highlights the navigation bar. It is commonly used as a child of the header element for site navigation
and utilises lists for the site links. Only sections of major navigation blocks are suitable for the
<nav></nav>
element. It might look something like:
Instead of splitting your page content into
<div></div>
elements, use
<section></section>
elements instead and save divs for generic containers for styling purposes. Think of a
<section></section>
being a subheading in a contents page that groups other elements such as titles, paragraphs and images into,
well, one section. They are expected to contain a header of some kind within them, so if your content does not
contain a header, it may not qualify as a section.
Article
<article></article>
elements are used for independent pieces of content that makes sense on their own. They will often contain their own
<header></header>
and
<section></section>
elements.
<article>
<h2>Article title</h2>
<p>Article text</p>
<blockquote>Some quote</blockquote>
<figure>
<img src="example.jpg" alt="Description of the image.">
<figcaption>A caption under the image that the user can read</figcaption>
</figure>
</article>
Aside
An
<aside></aside>
is used to mark additional information that can enhance another element such as a bibliography, comments or a
sidebar. If it is used within an article, it must relate specifically to that article and when used outside of
an article, it must relate to the page as a whole.
Blockquote
Blockquotes are used for longer quotes that require their own paragraph. These would work well in newspaper
articles or textbooks when highlighting key phrases or information.
Code
<article>
<p>One of my favourite quotations is:<p>
<blockquote>There is nothing noble in being superior to your fellow man; true nobility is being superior to your former self - Ernest Hemmingway</blockquote>
<p>I think about it everyday.</p>
</article>
Result
One of my favourite quotations is:
There is nothing noble in being superior to your fellow man; true
nobility is being superior to your former self - Ernest Hemmingway
I think about it everyday.
Figure and Figcaption
The
<figure></figure>
semantic HTML element groups media or visual content along with its caption or explanatory content to clearly
associate that media with related content. It includes the media, usually an
<img>
element, but could also be a
<video></video>
or an
<audio></audio>
element. It will often then have a descriptive
<figcaption></figcaption>
element.
<figure>
<img src="example.jpg" alt="Description of the image.">
<figcaption>A caption under the image that the user can read</figcaption>
</figure>
Picture
An
<img>
element is the basic, common way of displaying an image on HTML. However the
<picture></picture>
semantic HTML element provides functionality for providing various filetypes to ensure that the user's browser
can display the image along with the ability to provide different images depending on the screen size of the
user's device. The latter will be covered in the
media queries
responsivity section under CSS.
The syntax is a
<picture></picture>
element with a child or children
<source>
elements with type attributes usually providing the same image under different filetypes and an
<img>
element as final fallback.
The
<details></details>
element creates a small
widget.
The visible text to the user is inside a
<summary></summary>
element and when clicked, more information drops down below it. This extra information is included as the
second child of the
<details></details>
element and could be most things including text as a
<p></p>
or as an image as an
<img>
element. A use case that I have found during my web development journey has been with FAQs, so that the answer
to a question is shown when clicking on it. Otherwise, I use them in my documentation to display a screenshot
under some text when expanded to prevent the README.md file becoming to long when including all the images on
their own.
Code
<details>
<summary>Text to click</summary>
<p>Text that appears when clicked</p>
</details>
Result
Text to click
Text that appears when clicked
Address
The
<address></address>
element is used to encapsulate your, well, address. The key use case of this is in your footer where you can
provide contact information.
<address>
Address line 1<br>
Address line 2<br>
<a href="#"">Website link</a>
</address>