In the world of web development, the distinction between code that simply “works” and code that excels in form, function and accessibility lies in the way it’s written.
An important factor in crafting superior web content is the implementation of semantic HTML tags. Semantic HTML is not about aesthetic design but about using HTML elements to convey the meaning of information on web pages. This approach not only clarifies the structure of content for developers and users but also enhances accessibility and search engine optimisation.
This article dives deep into what semantic HTML tags are, why you should use them, the different types of tags and best practices to make the most out of implementing them.
What Are Semantic HTML Tags?
An HTML tag is a fundamental component of the HTML (HyperText Markup Language) used to create web pages and applications. It’s a piece of code that describes a web page's structure, formatting and content to web browsers.
HTML tags are surrounded by angle brackets (<>), and they usually come in pairs: an opening tag and a closing tag, with the content in between. For example, <p> is a paragraph, <p> is the opening tag and </p> is the closing tag to represent a paragraph.
Now that you have a general understanding of what HTML tags are, it’s time to learn what semantic HTML tags are.
While HTML tags are used to describe the structure and format of a webpage, semantic HTML tags are used to define the meaning of the content the webpage contains. Examples of semantic HTML tags include <header>, <article>, <h2> and <footer>.
On the other hand, tags like <div> (a generic block-level element) and <span> (a generic inline element) are typical examples of non-semantic HTML tags, as they only serve as content holders without explaining the content they contain.
Why Use Semantic HTML Tags?
Besides the obvious reason that semantic HTML tags are easier to read and understand, what are the other reasons you should use semantic HTML tags?
Accessibility
When you look at a webpage, it’s easy to identify the various parts as they’re all visually laid out on the page. However, it’s not easy to see what’s on a webpage when you’re blind or visually impaired.
In cases like these, it’s important to have semantic HTML tags to allow readers to understand your content better because their screen readers will communicate your content more accurately.
SEO
Another important reason to use semantic HTML tags is for search engine optimisation (SEO).
Without implementing semantic HTML tags, search engine crawlers won’t know what your content is about. Instead, using semantic HTML tags gives crawlers a better understanding of your content. It increases the chances of your content being selected as a candidate for ranking on the search engine results pages (SERPs) for relevant keywords.
Essentially, pages with correctly implemented semantic HTML tags have an advantage over those that don’t when it comes to SEO.
Types of HTML Semantic Tags
Two of the most common types of semantic HTML tags include
- Semantic HTML tags for structure
- Semantic HTML tags for text
Semantic HTML tags for structure
Structural HTML tags were introduced when HTML4 was upgraded to HTML5. This is why semantic HTML structure tags are also known as HTML5 tags. These types of semantic HTML tags serve to group elements into sections and explain the content in each section.
Here is a breakdown of what semantic HTML tags for structure are:
- <header>: The header tag defines the content that is considered the introductory information of a page or section. Common elements found in the header include the organisation’s name and logo, primary navigation, a search bar and/or a shopping cart icon.
- <nav>: The navigation tag contains a list of different links to parts of the website.
- <main>: This tag contains the main content of a page (also known as the body). This is where visitors will spend most of their time. There should only be one <main> tag per page.
- <article>: This tag represents standalone content, such as a blog post, news article or user comments.
- <section>: The <section> tag groups nearby content of a similar theme. For example, you could assign a different <section> tag to two different H2s of a blog post.
- <aside>: This tag contains related content that isn’t part of the main content. For example, it could be a related posts list or a display ad sidebar.
- <footer>: The footer of a page that contains additional information, such as an address, legal information and a contact form.
Semantic HTML tags for text
Semantic HTML tags for text provide meaning to the content they enclose, making it clear what role or type of information that content plays on a webpage.
Here is a breakdown of what semantic HTML tags for text are:
- <p> (paragraph): A standalone paragraph of text.
- <h1>, <h2>, <h3>, <h4>, <h5>, <h6> (heading): A page heading (<h1>) is the top-level heading, and there should only be one per page. The proceeding tags are ordered by descending importance.
- <ol> (ordered list): A list of items that are displayed in a particular order. Browsers typically apply numbers to each item.
- <ul> (unordered list): A list of items in which order is unimportant. Browsers typically apply bullet points to each item.
- <a> (anchor): This is a hyperlink that takes you from one page to another.
- <q> (quote) and <blockquote>: <q> tags are used for shorter quotes and <blockquote> tags are used for longer quotes.
- <code>: A block of computer code.
- <em> (emphasis): This is used for text that should be emphasised. When using this tag, browsers automatically italicise text.
- <strong> (strong emphasis): This is used for text that should be strongly emphasised. When using this tag, browsers bold the text by default.
Best Practices for Semantic HTML
Now that you know the difference between semantic HTML tags for structure and text, let’s cover some of the best practices to ensure you’re implementing them correctly.
Use the appropriate tags for content
Choose the HTML element that most accurately describes the content and its role on the page. For example, use <article> for independent, self-contained content and <section> for thematic groupings of content.
Ensure proper document structure
Organise your HTML document with a logical structure, using <header>, <main> and <footer> to define areas of your page.
Utilise heading tags correctly
Use heading tags (<h1> through <h6>) to structure your content hierarchically. This helps screen readers and search engines understand the structure and importance of your content.
Avoid <div> and <span> abuse
While <div> and <span> tags are useful for styling, they don’t convey any semantic meaning. Only use these tags when there is no other semantic element that fits the content’s purpose.
Improve Your SEO With Anchor
In the world of digital marketing, so many elements fall under the SEO umbrella, one of them being semantic HTML tags. As mentioned above, using both semantic HTML tags for structure and text is beneficial for SEO and accessibility as it allows search engine crawlers and screen readers to understand your content.
Have you just created a website or are looking to improve your SEO by adding semantic HTML tags to your existing website but don’t know where to start? Look no further than Anchor Digital. Our SEO experts are well-versed in the world of semantic HTML tags and are ready to help your website jump to the top of SERPs.
Want to learn more? Drop us a line today.
