At this point, I'm assuming you already have a basic understanding of tags in HTML and how they work; if not—you're in luck! I've got you covered with an article on that topic right here.
But for a quick recap, tags are the building blocks of a web page. They format the content that's within them. There are some tags strictly for presentation, and some for structure as well. One way you can categorize these tags is semantic and non-semantic.
You might hear that and go "Great!... So, what are semantic tags?"
Well, that's what we're going to cover right here in this post!
What are Semantic HTML Tags?
First, let's look at the meaning of the word semantic, which is "related to meaning." Semantic tags, therefore, define the meaning(or role) of their content—in other words, they indicate what kind of content is within.
Let's take, for example, the <div> and <span> tags. Just looking at them, you wouldn't know what kind of content is inside. These tags are for presentation, but not much else. But suppose you come across an <h1> tag? How about a <p>, or a <header> or <footer>? You could easily tell what they're meant to represent just by looking at them, right? That's what makes these latter tags and more like them semantic.
Why Should I Use Semantic Tags?
Readability and Structure
Semantic tags help with the readability and structure of a web page. This may not seem like much from an end user's point of view. But to a developer, it makes code more organized, a lot easier to read, and thus easier to work with. They know what code is for what part of the page, how it's to be presented, and what piece of content that code is supposed to be.
Accessibility
It's not important just for human readers to understand and navigate the different parts of the page, but for screen readers as well. Thus, good use of semantic tags is an important aspect of a site's accessibility, especially when it comes to assisting blind or visually impaired users.
SEO(Search Engine Optimization)
Since the purpose of semantic tags is to indicate the purpose of the content within them, they help search engine crawlers search through the page and figure out what it's about. Once they get an understanding, they can then see if it's relevant enough to show up high on a query's search result page.
Examples of Semantic Tags
| Tag | Meaning |
<main> | Contains the main content of the page |
<article> | Indicates independent, self-contained content |
<aside> | Contains content supplementary, but not critical, to the main content |
<nav> | Contains navigational links |
<section> | Defines a section of a larger piece of text |
<header> | Indicates a header at the top of a page. Contains introductory information |
<footer> | Indicates a footer at the bottom of a page. Usually contains information such as copyright and contact |
<h1> - <h6> | Defines headings of different levels. h1 indicates the main heading, while levels 2 - 6 are subheadings of various importance |
<p> | Indicates a paragraph of text |
<ol> | Defines an ordered(numbered) list |
<ul> | Defines an unordered list |
<table> | Contains a table |
<img> | Defines and image |
<figure> | Defines a figure |
<figcaption> | Contains the figure's caption |
As you can see, semantic HTML—when used appropriately—proves very useful in the organization and structure of a website. To recap, it provides site benefits of readability, SEO, and accessibility.
Was this post helpful in your understanding of semantic HTML? If so, please let me know! If there's anything you'd like to add or anything I missed, drop it in the comments below! Thanks!