A good number of websites are built with code written like the snippet below—and while this might 'get the job done', it is much more beneficial to write well structured, semantic HTML.
<div id="header">
<div class="header-main">Welcome to my website!</div>
<div class="header-text">Introduction</div>
</div>
<div id="nav">
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</div>
<div id="article">
<div class="article-header">
<div class="article-header-title">Title</div>
<div class="article-header-subtitle">Subtitle</div>
</div>
<div class="article-section">
<div class="article-section-text">Theory</div>
</div>
<div class="article-footer">
<div class="article-footer-text">Author Information</div>
</div>
</div>
<div id="main-side">
<div class="main-side-heading">Get To Know Us Better</div>
<div class="main-side-section">
<div class="main-side-section-text">Partners</div>
</div>
</div>
<div id="main-footer">
...
</div>
What is Semantic HTML?
Semantic simply refers to the correct meaning of words.
Semantic HTML, also referred to as semantic markup, therefore is HTML code that uses tags whose names convey their meaning and describe the content inside them. Its description is clear to the browser, developer and anyone else reading it.
Non-semantic tags such as the <div> and <span> tags are generic and do not bear in their names the purpose they are meant to serve. While fine to use in some cases, if a semantic tag is available for a specific use, it is best to use it before resorting to a non-semantic tag.
Importance of Semantic HTML
The benefits of writing semantic markup include:
If you want your website to be accessible to all, semantic HTML is a must. Visually impaired users rely on screen readers to verbally describe what is on a page, proper use of semantic HTML elements allow these screen readers to communicate your content more accurately.
Semantic HTML provides a standardized markup convention. This helps to make code readable when more than one developer might have to work on a codebase. The code is easier to understand and as a result, there is improvement in the work flow.
- Search Engine Optimization (SEO)
Writing semantic code provides a competitive advantage in SEO. SEO is the technique of optimizing web pages and their content to be easily discoverable by users searching for relevant terms. With the ever-growing number of websites, this is very important.
Search engines consider the content of a semantic tag as important keywords to influence the search rankings of a webpage.
Semantic tags such as <form> , <table> and <img> have always existed in HTML. However, HTML5 introduced even more useful semantic tags. Some of the tags are:
According to the HTML5 specification : The article element represents a section of content that forms an independent part of a document or site; for example, a magazine or newspaper article, or a blog entry.
That is, the content inside of an <article> tag should be able to stand alone or be reused outside of your webpage and still make sense.
The <aside> tag is used for information that is not a part of the primary content of the page, but indirectly related. For example, related links, definitions, author information, or pull quotes.
Note: Although, the tag does not automatically render as a sidebar, it is frequently styled as one.
The <footer> tag is used to identify the footer—bottom part of a page, document, article, or section.
It typically contains information about the author of the section, copyright data or links to related documents.
The <header> tag contains introductory information of the related content.
The <header> tag can be used as a header for the entire page, but can also be used as the header for an article, section or any other piece of content. The <header> tag however cannot be used in the <footer>, <address> or another <header> element.
The <main> tag represents the primary content of the document body. Its content should be unique and expand on the topic of the page.
There cannot be more than one visible <main> element in a single document—others, if present, must be hidden with the hidden attribute . Also, the <main> element must not be placed in the <article>, <aside>, <footer>, <header> or <nav> tags.
The <nav> tag contains the major block of navigation links and details such as table of contents and menu for the current or another page.
It is not necessary to place all the page's links within this tag. For a secondary menu, a <section> tag can be used.
The <section> tag is used to group related content together. It helps to split the page into sections and subsections.
The <section> tag should only be used if there is no other, more specific semantic tag available. It must almost always contain a heading.
Conclusion
A well structured, semantic HTML code should like this:
<header>
<h1>Welcome to my website!</h1>
<p>Introduction</p>
</header>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
<article>
<header>
<h1>Title</h1>
<h2>Subtitle</h2>
</header>
<section>
<h4>Theory</h4>
<p>Paragraph 1</p>
<h5>Subheading</h5>
<p>Paragraph 2</p>
</section>
<footer>
<h5>Author Information</h5>
<p>Paragraph</p>
</footer>
</article>
<aside>
<h2>Get To Know Us Better</h2>
<section>
<h4>Partners</h4>
</section>
<section>
<h4>Testimonials</h4>
</section>
</aside>
<footer>
...
</footer>
I think that you'd agree with me that this is much more readable than the previous code.
Semantics is a great feature of HTML that all developers should adopt for best practices.
Thank you for reading and I hope you found this post helpful. 💫
*Cover image credit: https://seekbrevity.com/semantic-markup-important-web-design/
