What is semantics in HTML?
In the last lesson, we learned about the basic structure of an HTML document and how to create elements using tags. We learned about the div tag, which is a generic container for grouping elements together. However, not all elements are created equal. Some elements have a specific meaning and purpose, and these are called semantic elements.
Why is semantics important?
Semantic elements are important because they provide meaning to the content of the page. They help search engines and assistive technologies understand the structure and purpose of the content. This improves accessibility for users with disabilities and helps search engines index the content correctly, which can improve the page’s ranking in search results.
What are semantic elements?
Semantic elements are tags with specific name, that often describes the content they contain. For example, the <header> element is used to define the header of a page or a section, while the <footer> element is used to define the footer. Other examples of semantic elements include <article>, <section>, <nav>, and <aside>. These elements have specific meanings and should be used to structure the content of the page.
Examples of semantic elements
Headings
Headings are used to define the structure of the content. They are defined using the <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> elements. The <h1> element is used for the main heading of the page, while the other headings are used for subheadings. For example:
<h1>Main Heading</h1>
<h2>Subheading 1</h2>
<h2>Subheading 2</h2>
<h3>Sub-subheading</h3>Paragraphs
Paragraphs are used to define blocks of text. They are defined using the <p> element. For example:
<p>This is a paragraph of text.</p>
<p>This is another paragraph of text.</p>Markers in text
Markers are used to highlight or emphasize text. They are defined using the <strong>, <em>, and <mark> elements. The <strong> element is used to indicate strong importance, the <em> element is used to indicate emphasis, and the <mark> element is used to highlight text. For example:
<p>This is a <strong>strong</strong> text.</p>
<p>This is an <em>emphasized</em> text.</p>
<p>This is a <mark>highlighted</mark> text.</p>This results in the following output:
This is a strong text.
This is an emphasized text.
This is a highlighted text.
Lists
Lists are used to define a list of items. They are defined using the <ul> (unordered list) and <ol> (ordered list) elements, along with the <li> (list item) element. For example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>This results in the following output:
- Item 1
- Item 2
- Item 3
- First item
- Second item
- Third item
Links
Links are used to create hyperlinks to other pages or resources. They are defined using the <a> (anchor) element. The href attribute is used to specify the URL of the link. For example:
<a href="https://example.com">This is a link</a>Link can do much more than just linking to another page. You can also specify the target of the link using the target attribute. For example, if you want the link to open in a new tab, you can use target="_blank":
<a href="https://google.com" target="_blank">
This is a link that opens in a new tab
</a>This is a link that opens in a new tab
You can also add a title to the link using the title attribute, which will be displayed as a tooltip when the user hovers over the link:
<a href="https://example.com" title="Go to example.com">
This is a link with a title
</a>This is a link with a title
You can create links to different sections of the same page using the id attribute. For example, if you have a section with an id of “about”, you can create a link to that section like this:
<a href="#navigation">Go to Navigation section</a>You can also create links to email addresses using the mailto: protocol. For example:
<a href="mailto:example@mail.com">Contact us via email</a>Navigation
The <nav> element is used to define a navigation section of the page. It is typically used to contain links to other pages or sections of the site. For example:
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>Images
The <img> element is used to insert images into the page. The src attribute is used to specify the URL of the image, and the alt attribute is used to provide alternative text for the image. For example:
<img src="image.jpg" alt="An image" width="300" height="200" />Video
The <video> element is used to embed video content in the page. The src attribute is used to specify the URL of the video file, and the controls attribute is used to add playback controls. For example:
<video src="video.mp4" controls width="600" height="400">
Your browser does not support the video tag.
</video>Audio
The <audio> element is used to embed audio content in the page. The src attribute is used to specify the URL of the audio file, and the controls attribute is used to add playback controls. For example:
<audio src="audio.mp3" controls>
Your browser does not support the audio tag.
</audio>Main tag
The <main> element is used to define the main content of the page. It is typically used to contain the primary content of the page, excluding headers, footers, and sidebars. For example:
<main>
<h1>Main Content</h1>
<p>This is the main content of the page.</p>
</main>Articles and sections
The <article> element is used to define a self-contained piece of content that can be distributed independently, such as a blog post or news article. The <section> element is used to define a section of the page that contains related content. For example:
<article>
<h2>Article Title</h2>
<p>This is the content of the article.</p>
</article>
<section>
<h2>Section Title</h2>
<p>This is the content of the section.</p>
</section>And many more like forms, iframes, scripts, styles, citations, blockquotes, horizontal lines, keyboard shortuts, dialog windows…
In the next lessons, we will explore all the elements in more detail and learn how to use them to create a well-structured and semantic HTML document.
HTML is a declarative language, which means that you describe what you want to achieve, and the browser takes care of the rest. You do not need to worry about how the browser renders the page, as long as you use the right tags and attributes. This is different from programming languages, where you need to write code that tells the computer what to do step by step.
Questions
About the author
Vasil Kostadinov
Software developer, specializing in React, Next.js and Astro for the frontend, as well as in Supabase and Strapi for the backend. Creates content in all shapes & sizes in his free time.