How to Begin with Semantic HTML
What does semantics mean in HTML?
HTML semantics refers to the tags in an HTML page that provide meaning rather than just presentation. It helps clarify HTML by better defining the various sections and layout of web pages.
Why HTML Structure Matters
Every web page has a structure that we have come to recognise and expect. Pages are divided into sections such as navigation menus, main content, footer content, and so on. This is so common that we recognise it instinctively, but what about those who are visually impaired?
When visually impaired users use semantic HTML, their screen reader, braille display, or other assistive technology can infer information about the website content from the element that it is contained within.
Regardless of how it appears, your page lacks structure without structuring elements. Those who are visually or otherwise impaired and use screen readers or other technologies rely on the document’s underlying structure. It’s easy to overlook… but it’s best practise to design web pages with this in mind, and it doesn’t require much extra effort.
Here is an example of some semantic elements that can be used to define different parts of a web page.
What are the Semantic HTML5 elements?
The use of HTML markup to enhance and reinforce the meaning of the page’s content rather than just the appearance of the content.
Semantic elements, as opposed to non-semantic elements such as <div> and <span>, have meaning and can be used to help define the page content.
List of new semantic elements
The semantic elements added in HTML5 are:
<article><aside><details><figcaption><figure><footer><header><main><mark><nav><section><summary><time>
Controlling Document Outlines
- Similar to a table of contents, HTML uses semantic elements such as headings and sectioning tags to describe the outline of the page’s contents.
- It enables you to skim and search your files
- identifies various types of content and how it relates to other content
- Headers and navigation can help in identifying the structure of the content
The <nav> element
- The
<nav>element defines a set of navigational links within a page- Intended for large blocks of navigational links
- Not all links in the document should be inside a
<nav>element
- Typically this will be at the top of the page
- The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
Example
<body>
<h1>Design anything. Publish anywhere.</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/">About</a></li>
<li><a href="/">Contact</a></li>
<li><a href="/events">Current Events</a></li>
</ul>
</nav>
</body>
- You can create unordered lists in the nav with anchor elements for links to other sections of your page, such as home, about, contact, FAQs, and so on.
- The
<nav>element is used to create a series of links within your website or page. It is used to inform the user that this is not part of the main content, but rather a link to another location.
The <article> element
- Specifies independent self-contained content
- Frequently confused with the element
- An article should make sense on its own and be distributable separately from the rest of the site.
- Forum posts
- Blog posts
- News stories
- Comments
- All of the above can essentially be included in an article element.
- The article element in a document, page, application, or site represents a complete, or self-contained, composition. This could be a magazine or newspaper article, a technical or scholarly article, an essay or report, a blog post, or another type of social media post.
Example
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web
browser today!</p>
</article>
The <section> element
- Defines document sections such as chapters, headers, footers, and any other sections of the document.
- Authors are encouraged to use the
<article>element instead when syndicating their content. - Instead of a generic container element for styling purposes, a thematic grouping of content is used.
- A generic section of a document or application is represented by the section element. In this context, a section is a thematic grouping of content. Each section should be identified by including a heading (h1-h6) element as a child of the section element.
- Essentially, each thematic group is its own section.
Example
<article>
<header>
<h2>Apples</h2>
<p>Tasty, delicious fruit!</p>
</header>
<p>The apple is the pomaceous fruit of
the apple tree.</p>
<section aria-label="Red apples.">
<h3>Red Delicious</h3>
<p>These bright red apples are the
most common found in many supermarkets.</p>
</section>
<section aria-label="Green apples.">
<h3>Granny Smith
</h3>
<p>These juicy, green apples make a great filling for apple pies.</p>
</section>
</article>
The <aside> element
- The sidebar is represented by the
<aside>element. - Designed to represent related content, such as that which might be found in a sidebar.
- The sidebar is one of the most common elements on a web page, but there was no semantic element to represent this type of content prior to HTML5.
- The aside element represents a page section that contains content that is tangentially related to the content of the parenting sectioning content but can be considered separate from it. In printed typography, such sections are frequently represented as sidebars.
Example
<aside>
<h2>The Netherlands</h2>
<p>The Netherlands is a country in northwest Europe known for its flat landscape of canals, tulip fields, windmills,
and cycling paths.</p>
</aside>
The <div> element
- The
<div>element is a non-semantic element - The tag has no meaning, but you’re grouping content so you can add ids and classes for CSS styling.
- Allows you to structure or section content without adding any semantic meaning to it. Anonymous grouping tag that has no real “meaning.”
- Instead, if there is a tag that conveys the semantic meaning of the text, it should be used.
Example
<div>
<h2>Learn to code by watching others
</h2>
<p>See how experienced developers solve problems in real-time. Watching scripted tutorials is great,
but understanding how developers think is invaluable.
</p>
</div>
The <main> element
- The main element represents the main content of a document or application’s body.
- The main content area of a document includes content that is unique to that document and excludes content that is repeated across a set of documents, such as site navigation links, copyright information, site logos and banners, and search forms (unless the primary function of the document or application is that of a search form).
- The main element has no effect on the document outline and does not section content.
- The main element may not be used as a descendant of an article, aside, footer, header, or navigation element.
Example
<main>
<p>A developer, also known as a software developer or software coder, builds computer applications by writing,
debugging, and executing the source of code in a computer application.</p>
<p>If you're someone who likes to learn new things, web development can be a rewarding field.
</p>
</main>
The <header> element
The <header> element represents a container for introductory content or a set of navigational links.
Example
<header>
<h1>Main heading of the document.</h1>
<p>In this section we are discussing .......</p>
</header>
The <footer> element
The <footer> element is a structural element used to identify the footer of a page, document, article, or section.
A footer typically contains section-specific information such as who wrote it, links to related documents, copyright data, and so on.
Example
<footer>
Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA.
</footer>
HTML Cheat Sheet
If you want to learn more about HTML, grab my cheat sheet which is available on Gumroad.
This product will assist you in learning the fundamental HTML elements in your Web Development journey. It is intended for both beginners and experts who want to brush up on their knowledge.
All of the resources are structured and organised in a straightforward and easy-to-read manner. They include interactive external links, images, tag names and code snippets to help you understand the topics better.
Further reading
Do you want to learn more about HTML Semantics? Then look at: Semantics – MDN Web Docs Glossary: Definitions of Web-related terms | MDN
See also
What is HTML? Basics Explained
What are the Six HTML Heading Tags?
What is an HTML Document’s Basic Structure?
If you liked this article, then please share. You can also find me on Twitter for more updates.
Top comments (0)