When starting to learn HTML you will hear the term semantic markup. What does this mean and why is it important? Let's break it down and take a look at some examples.
What is semantic HTML?
Before we dive into semantic HTML let's define semantics:
semantics is the study of meanings. - Merriam-Webster
When we write our HTML structure we want to ensure we give it meaning. HTML provides a set of tags we can use to build the structure of our document. We want to consider the meaning of these tags so we can appropriately layout our site in such a way another developer, browser, and assistive technologies can understand.
Why is this important?
There are two main reasons why this is important:
It makes it easier to read the HTML. When you are reading through the document and see the element
<nav>right away you know that consists of some type of navigation.It's a great start to providing accessible websites. Assistive technologies, specifically a screen reader, will scan the document to get information. It helps assistive technologies to better associate the content of the site. For example, screen readers allow users to skip content based on headings, so ensuring you are using the correct heading structure and not skipping heading levels is important.
Examples of semantic elements
Below are some examples of semantic elements:
-
<form>- used to gather user input. -
<p>- used for creating paragraphs. -
<header>- used to define the header of the document or section. -
<section>- used to group related content. -
<footer>- used to provide a footer for the main document or a section. -
<nav>- used as the container element for navigation links. -
<h1-h6>- defines the heading levels of the document. -
<main> - used to define the main content of the site.
Conclusion
Semantic markup is used to give our document structure meaning. It provides developers a better understanding of the document and allows assistive technologies to do their jobs better.
If you haven't already please follow me on Twitter (@RoccoSangllino) where I share more information on web development.
Top comments (0)