The definition of semantic is relating to meaning in language or logic. Semantic elements are not only smart when coding HTML, but also are important for other reasons as well. In this blog post I will elaborate more as to why it is important to create semantic HTML markup.

First off it is easier to develop and maintain semantic HTML code rather than to create junked-up code. Some examples of HTML semantic elements are:


<header> – Defines the header of the document or section
<main> – Defines the main content of a document, excluding global items like nav or footer
<nav> – Defines navigation links
<article> – Defines a self-contained piece of content within a document (blog posts, comments, etc.)
<section> – Defines a section within a document
<aside> – Defines content that is aside from main content; should be related to surrounding content
<figure> – Defines self-contained content that is independent (photos, illustrations, videos, etc.)
<mark> – Defines highlighted or important content
<figcaption> – Defines the caption for the figure
<hgroup> – Defines a group of header tags
<footer> – Defines the footer of a document
<time> – Defines the time


It is way better to use a semantic element for a page header for example than span junk.