Web developers may use a combination of non-semantic HTML and Semantic HTML when building websites. The word semantic means “relating to meaning,” so semantic HTML tags give us information about the content between the opening and closing tags. By putting Semantic HTML to use, we can use HTML elements based on their meaning, not on how they are presented. HTML tags like <div> and <span> are not semantic elements since they provide no context as to what is inside of those tags. It is certainly ok to use these tags, but if you want to embed more meaning right into the markup of the pages themselves, then choosing Semantic HTML is the way to go.
Reduce Overuse Of <div> Tag
For a period of time in web development, designers tended to use the div element for almost all divisions of content on the page. Then, you could make use of CSS styling to apply style and arrange the div elements on the page. For example, instead of using a <div> element to contain our header information, we could use a <header> element, which is used as a heading section. By using a <header> tag instead of a <div>, we provide context as to what information is inside of the opening and closing tag.
| Non Semantic | Semantic |
 |
 |
What Is Semantic HTML Good For?
If you were to say that when the average user visits a semantic vs non-semantic web page that they likely wouldn’t notice a difference between the two, you would be right. So why use Semantic HTML then? There are a few reasons.
-
SEO: Semantic HTML improves the website Search Engine Optimization, which is the process of increasing the number of people that visit your webpage. Search engines are better able to understand and categorize your conent when Semantic HTML is in use.
With any luck, this leads to an increase in visitors to your website. -
Meaningful Source Code: Semantic HTML also makes the website’s source code easier to read for other web developers.
-
Accessibility: Semantic HTML makes webpages accessible since screen readers and browsers are able to interpret the code better. This is perfect for mobile devices and for people with disabilities.
Header And Navigation
Let’s look at some common uses of Semantic HTML now. The <header> and <nav> tags are two common ways to add semantic meaning to your HTML. A <header> is a container usually for either navigational links or introductory content containing <h1> to <h6> headings. A <nav> is used to define a block of navigation links such as menus and tables of contents. It is important to note that <nav> can be used inside of the <header> element but can also be used on its own.
<!DOCTYPE html>
<html>
<body>
<header>
<h1>Navigation Links</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#posts">Posts</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
</body>
</html>
Main And Footer
The <main> and <footer> elements are two additional structural tags to help with semantic markup. These elements along with <nav> and <header> help describe where an element is located based on conventional web development standards.
The <main> tag is used to wrap the most important content within a webpage. This tag is separate from the <footer> and the <nav> of a web page since these elements don’t contain the principal content. By using <main> as opposed to a <div> element, screen readers and web browsers are better able to identify that whatever is inside of the tag is the bulk of the content.
<!DOCTYPE html>
<html>
<body>
<header>
<h1>Navigation Links</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#posts">Posts</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
<main>
<p>The dominant content goes inside the main tag.</p>
</main>
<footer>
<p>Contact at 867 5309</p>
</footer>
</body>
</html>
Article and Section
The <section> and <article> tags go inside the body of a semantic webpage. <section> is used to define elements in a document, such as chapters, headings, or any other area of the document with the same theme. For example, content with the same theme such as articles about gardening can go under a single <section>. A website’s home page could be split into sections for the introduction, news items, contact information, and so on.
The <article> element contains content that makes sense on its own. <article> is often used for articles, blogs, comments, and so on. An <article> semantic element would help someone using a screen reader understand where the article content begins and ends.
<!DOCTYPE html>
<html>
<body>
<header>
<h1>Navigation Links</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#posts">Posts</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
<main>
<section>
<article>
<h2>How To Grow Peppers</h2>
<p>Set pepper plant seedlings out after the last spring frost. They grow well in raised beds, containers, and in-ground gardens.
Plant them 18 to 24 inches apart in a sunny, well-drained spot. Pepper plants need at least 6-8 hours of sunlight per day.</p>
</article>
</section>
</main>
<footer>
<p>Contact at 867 5309</p>
</footer>
</body>
</html>The Aside Element
The <aside> element is used to mark additional information that can enhance another element but isn’t required in order to understand the main content. This element can be used alongside other elements such as <article> or <section>. Some common uses of the <aside> element are for:
- Tidbits and fun facts
- Author details for an article
- Supporting external links
- Comments
- Suggestions
<!DOCTYPE html>
<html>
<body>
<header>
<h1>Navigation Links</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#posts">Posts</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
<main>
<section>
<article>
<h2>How To Grow Peppers</h2>
<p>Set pepper plant seedlings out after the last spring frost. They grow well in raised beds, containers, and in-ground gardens.
Plant them 18 to 24 inches apart in a sunny, well-drained spot. Pepper plants need at least 6-8 hours of sunlight per day.</p>
</article>
<aside>
<p>Note: Stay far away from Carolina Reaper peppers if you value your well being.</p>
</aside>
</section>
</main>
<footer>
<p>Contact at 867 5309</p>
</footer>
</body>
</html>Figure and Figcaption
With <aside>, we saw how we can put additional information next to a main piece of content, but what if we wanted to add an image or illustration? That is where <figure> and <figcaption> come in.
<figure> is an element used to surround media such as an image, illustration, diagram, code snippet, etc, which is referenced in the main flow of the document. Here is an example of how to use it.
<!DOCTYPE html>
<html>
<body>
<header>
<h1>Navigation Links</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#posts">Posts</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
<main>
<section>
<article>
<h2>How To Grow Peppers</h2>
<p>Set pepper plant seedlings out after the last spring frost. They grow well in raised beds, containers, and in-ground gardens.
Plant them 18 to 24 inches apart in a sunny, well-drained spot. Pepper plants need at least 6-8 hours of sunlight per day.</p>
</article>
<aside>
<p>Note: Stay far away from Carolina Reaper peppers if you value your well being.</p>
</aside>
</section>
<figure> <img src="/images/reaper.png" width="100" height="100">
<figcaption>Danger</figcaption>
</figure>
</main>
<footer>
<p>Contact at 867 5309</p>
</footer>
</body>
</html>
Audio and Attributes
An exciting aspect of semantic HTML is the ability to embed audio with audio controls using the <audio> element. The <audio> element is used to embed audio content into a document. Like <video>, <audio> uses src to link the audio source.
<!DOCTYPE html>
<html>
<body>
<header>
<h1>Navigation Links</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#posts">Posts</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
<main>
<section>
<article>
<h2>How To Grow Peppers</h2>
<p>Set pepper plant seedlings out after the last spring frost. They grow well in raised beds, containers, and in-ground gardens.
Plant them 18 to 24 inches apart in a sunny, well-drained spot. Pepper plants need at least 6-8 hours of sunlight per day.</p>
</article>
<aside>
<p>Note: Stay far away from Carolina Reaper peppers if you value your well being.</p>
</aside>
</section>
<figure> <img src="/images/reaper.png" width="100" height="100">
<figcaption>Danger</figcaption>
</figure>
<audio controls>
<source src="/audio/planting-peppers.mp3" type="audio/mp3">
</audio>
</main>
<footer>
<p>Contact at 867 5309</p>
</footer>
</body>
</html>
<video>
Video Media content is often a welcome addition to a website. By using a <video> element, we can add videos to our website. The <video> element makes it clear that a developer is attempting to display a video to the user.
Some attributes that can alter a video playback include:
- controls: When added in, a play/pause button will be added onto the video along with volume control and a fullscreen option.
- autoplay: The attribute which results in a video automatically playing as soon as the page is loaded.
- loop: This attribute results in the video continuously playing on repeat.
What Is Semantic HTML Summary
- Semantic HTML introduces meaning to a page through specific elements that provide context as to what is in between the tags.
- Semantic HTML is a modern standard and makes a website accessible for people who use screen readers to translate the webpage and improves your website’s SEO.
- <header>, <nav> , <main> and <footer> create the basic structure of the webpage.
- <section> defines elements in a document, such as chapters, headings, or any other area of the document with the same theme.
- <article> holds content that makes sense on its own such as articles, blogs, comments, etc.
- <aside> contains information that is related to the main content, but not required in order to understand the dominant information.
- <figure> encapsulates all types of media.
- <figcaption> is used to describe the media in <figure>.
- <video>, <embed>, and <audio> elements are used for media files.
