HTML is made of a combination of semantic and non-semantic elements, also referred to as tags. Non-semantic elements are things like <div> and <span> which do not describe the contents of the element. The word “div” says nothing about what is contained in that element, so the tag name is useless for accessibility and SEO purposes.
By using HTML semantic tags, you communicate meaning or information about the content within the specified tag. This can work wonders for your website’s performance in various categories like SEO and accessibility. If you’re a beginner in HTML and CSS, you should have a strong understanding of HTML semantic tags before progressing to JavaScript or frameworks.
What Are Some Examples of HTML Semantic Tags?
There are over 100 semantic tags in HTML. The release of HTML5 brought even more new tags and elements you can use in your next project. Let’s discuss a few of the most popular:
<article>
Content that is presented in an article tag is independent and self-contained. Some common uses for the <article> element include forum posts, blog posts, and news stories.
<aside>
As the name implies, this tag defines content aside from the content it is placed in. It is most often used as a sidebar in a document and may or may not contain content related to the rest of the page.
<body>
This one is vital. The <body> tag defines the webpage’s body. This element contains your page’s content, from headings, paragraphs, and images to tables, lists, and links. You will still have content outside of this tag, such as your <head> tags, but there is only one <body> tag per document.
<figcaption>
This tag defines a caption for the <figure> element. The two tags go hand in hand and rely on each other. To use it, you must place the <figcaption tag as the first or last child of the <figure> element.
<figure>
This tag specifies self-contained content, like images, graphs, screenshots, code, and more.
This element’s content is related to the main flow, but its position is not, and if it is removed, the document should still flow normally.
<footer>
This tag defines a footer for a webpage or segment. You can have multiple footers in a single document, and they usually contain content like copyright and contact information, as well as links to related pages.
<header>
This tag defines a container for an overview of the page or a set of navigational links. A header may also contain a logo or headings for the document.
<main>
This tag defines the main content of a document. Similar to the <body> tag, there can only be one <main> element per document. Ideally, you should use this element to contain unique content that is not duplicated across the site, like sidebars, navigation links, and logos.
<nav>
As the name suggests, this tag defines a navigation area. You can place lists of links within this element, and screen readers can use it to figure out when to omit initial rendering or not.
<section>
This tag is very similar to the <article> tag. It defines standalone and unique sections of your webpage, like blog posts or articles. While the <section> tag is very general, it shouldn’t be used in place of <aside> or <nav> tags.
How Can HTML Semantic Tags Be Used to Improve the SEO of a Website?
Semantic HTML describes a syntax for better defining sections and layout of web pages, so they are more comprehensible for users and search engines alike. In addition to making web pages more informative and adaptable, it improves the ability of browsers and search engines like Google to interpret content, helping your webpage’s SEO.
When your content is optimized appropriately towards a set keyword, the easier it is for search engines to understand and index, the more likely it is to rank highly. Using tags like <article> helps search engines find your content faster because it is appropriately labeled.
How Can HTML Semantic Tags Improve the Accessibility of a Website?
The semantic HTML standard is considered to be the cornerstone of web accessibility. Because assistive technologies (which enable disabled users to browse the web) rely on semantics and meaning to convey information to their users, they depend upon the semantic structure and meaning of web pages.
Using HTML semantic tags to define your pages’ content and layout makes it easier for assistive technologies to navigate. Any improvement in the user experience is welcome, so taking full advantage of semantic tags is an intelligent move.
Final Thoughts: Start Using HTML Semantic Tags if You Don’t Already
The information overload can be unbearable if you trying to find the best way to learn how to build websites with HTML, CSS, and JavaScript. So much to learn, so much to practice, and so much to try out! But you will constantly struggle if you don’t build a solid foundation. Semantic HTML tags are one of those aspects of web development that is so crucial to know yet so often overlooked by beginners.
HTML is not hard to learn. And using semantic tags is one of the cornerstone HTML best practices. If you start using HTML semantic tags on all of your web pages, you will have built a good habit that rewards you with better-performing websites before long. Besides making your code more readable, semantic HTML tags increase your site’s SEO and make it more accessible.
Please comment if you have questions about HTML semantic tags or need guidance with anything, and I’ll be happy to help out!
