Semantic HTML: Beginner’s Guide to Semantic Tags and Their Importance to Accessibility and SEO.

Introduction To Semantic HTML

Far too many beginners become so disturbed at the first introduction to semantic HTML. This topic seems confusing to many, but with the right material, it can be easy to understand and start using immediately.

Semantic HTML doesn’t have a weird meaning other than still using HTML elements with meaningful opening and closing tags. Speaking of meaningful, semantic elements, unlike non-semantic ones, can quickly give even non-developers a hint of what they do. Seeing semantic element tags like aside, header, section and more quickly gives you an idea of what they do on the webpage. Yes, that’s the whole idea of using semantic HTML.

Semantic HTML allows developers to enforce the meaning of information on websites and web applications. Semantic HTML provides healthy alternatives to using div and span, helping search engines better understand the content on webpages and aiding assistive technologies to present content better to users.

Why Should You Even Use Semantic HTML?

When I teach beginners, the same question is always on their lips: Why use it? Is it even mandatory for me to use semantic HTML? After this section, you'll find reasons to be convinced that leveraging semantic HTML gives real power in the development world.

1.Accessibility
The internet is a vast space featuring many users with different tastes and experiences. Some of these users are visually impaired, so they use assistive technologies like screen readers to engage with webpage content. Screen readers read aloud the content of web pages.

As a good developer, you must consider users with visual impairments and provide them with ways to have the best experience on your website or web application. So how do you achieve this? The answer is quite short and simple: semantic HTML.

Semantic HTML ensures your webpage content follows a meaningful structure that makes it easier for the screen reader to understand and read out loud. With non-semantic HTML, users may find it challenging to comprehend and navigate a website or web app if the screen reader just interprets a page as a collection of undifferentiated text.

2.Search Engine Optimization (SEO)
SEO is perhaps one of the key things to keep in mind when launching a website or web application. So, what is SEO? Imagine yourself on a rabbit chase to Google, Bing, and other search engines to research a disturbing coding concept. These search engines take your input/query and present you with the best-related content. This is possible because their algorithm understood the webpage content, thanks to semantic HTML.

Good use of semantic HTML gives your content a good shot at ranking high and better in the search results, as the search engines understand its context and relevance more accurately. Better SEO increases websites' visibility, consequently leading to more traffic.

3.Code Maintainability
A good code is one with a defined structure and clarity. We often write code that others will eventually read, either to improve upon or learn a thing or two from. A codebase with tons of

and and scarce semantic HTML is deficient and mostly difficult to read, understand, and maintain.

The clarity gained from using semantic HTML significantly helps developers reduce the time spent figuring out what different sections of a codebase do. This makes it relatively easy to maintain, update, upgrade, and collaborate with other developers.

Enough of the text; let’s see some actual code!

8 Commonly-Used Semantic HTML

1.header: The header element has opening and closing tags of header. It can be a semantic wrapper for many other elements you want to make an introductory part of a particular section. This element can be found anywhere on the webpage, and the usage and meaning would still not be lost. For instance, it can be found at the topmost part of a website, housing the primary navigation links, as you can see in the diagram below:

2.nav: The nav semantic element has opening and closing tags of nav, which can be interpreted as ‘navigation.’ It is always used to wrap links that can be used to navigate between pages on the same website or navigate to a completely new website. It is commonly used when there is more than one link involved. A perfect use case is shown in the picture below:

3.main: The main element has opening and closing tags of main. This HTML element is the semantic wrapper that embodies all the core content of the webpage, excluding the header, footer, aside, and nav. I often implore newbie developers to follow a popular page layout that features three sections in sequential order: header, main, and footer. This way, you can be sure to be on the safer side of semantic usage.

4.section: The section semantic element in HTML is best used for grouping related content on a webpage. It has opening and closing tags of section. We could liken this element to creating separate chapters in a book, each focusing on a theme.

In the development world, the section element is one of the very few that often comes into use. For instance, if you want to develop a landing page for a client, you could have your page broken into sections. You could have the hero section, about section, services section, how-it-works section, testimonial section, and more. This way, the section element keeps the landing page tidy and organized, making it easier for people and search engines to understand and fully interpret what different parts of your webpage are about.

You must note that the section semantic element makes the most sense when used inside the main. Therefore, the practice of three partitions of header, main, and footer still holds.

5.article: The article semantic element has open and closing tags of article. This element can provide a wrapper for content that stands independently of the rest of the document, such as product details, blog posts, etc.

Newbie developers have struggled to distinguish between the section and article elements. They are different in usage; you must understand this to use them correctly. In the picture below, you’ll notice I used an article inside the section element. This means the former can be a child element of the latter; it is just a wrapper.

6.blockquote: The blockquote semantic element has opening and closing tags of blockquote. This element is used to wrap text content that is an extended quotation. Let’s say you are building a website featuring user feedback. It is best practice to wrap this text feedback inside a blockquote. When the browser sees this semantic element, it indents the text content within, setting it apart from the surrounding text. blockquote has its use in citations, testimonials, etc.

7.figure and figcaption: Finally, the twins of semantic HTML 😂. These two can be likened to how you use WhatsApp to upload media content to your status. You often upload a picture or video and provide a caption for viewers to read to get more details about the uploaded media content.

Now, let us come back to the code. If you want to show a picture on your webpage, instead of wrapping it inside a div element, you can use the semantic figure and then use figcaption to provide a caption or more details about it. It is as simple as that.

8.footer: Ah, finally, the footer element! This semantic element is a container for the bottom-most part of a webpage, section, table, and many more. The content of the footer depends on its location on the webpage. If found in the bottom-most part of the webpage, it mainly contains secondary links, including terms of use, privacy policy, or any other links that cannot fit into the primary navigation in the header element.

Speaking of containing other links, footer is deemed the site map. What does that even mean? From this element, you can navigate to almost every page on the website or web application, thanks to the links it houses.

Does this mean nothing or no other element must come after the footer? Yes! Also, you must use this element correctly and ensure it serves its purpose.

Effective Use of Semantic HTML

Here is an essential section of this article, and that is because just knowing a few semantic elements doesn’t translate to using each of them properly. Therefore, this section will show you some of the best practices when using semantic HTML in practice and tips for beginners. Let us dive right into it.

Best Practices

1. Use Appropriate Elements: Choosing the semantic element that best suits the content and purpose of what you want to represent is always essential. It just doesn’t make sense when you use nav for content other than navigation links.

2. Be Consistent: It is best practice to apply semantic elements consistently across your website to preserve a healthy standard, all in the vein of reaping the utmost dividends of using semantic HTML.

3. Appropriate Nesting: In the pictures up there, there were times I used semantic elements in a nested way, just like having nav inside header and article inside section element. This is a healthy nesting; you must also follow the best practices.

4. Don’t Overuse: Ah, yes! This is very important. While semantic elements serve an excellent purpose for your website, it is equally important not to go overboard. Not every div or span in your code has to be replaced by semantic elements; no, it just doesn’t work that way. Only use semantic elements where they add meaningful value to the document structure.

5. Integrate Accessibility Features: I must admit that this is slightly above the beginner level, but you must know of its benefits anyway. Semantic HTML used alongside ARIA (Accessible Rich Internet Applications) holds absolute power, mainly when working on a complex application.

Tips for Beginners

1. Start with the Page Structure: Before you start adding content to your webpage, consider outlining the basic structure of the page using semantic elements. As we discussed in the previous section, you can divide your page into three parts using semantic elements: header, main, and footer. This way, you have a reasonable starting point. This approach can help you think about the content regarding meaning and purpose. You just have to do it right.

2. Learn Each Semantic Element: Before you start using, ensure you learn each semantic element well. This will prevent you from having trouble using them. You just need to understand their meanings and purposes, which will ultimately greatly improve the way you structure your content.

3. Keep SEO in Mind: Remember, SEO is one of the benefits of using semantic HTML. Therefore, keep SEO in mind by using semantic elements to convey the structure and importance of your content.

4. Practice: They say practice makes perfect. The adage is not lost in this context either. You must practice what you learn; learn and practice more. There is just no better way of saying it. Also, you must regularly review and refine your code to better apply semantic principles.

Final Words

Creating well-thought-out, accessible, and search-engine-friendly websites or web applications hinges on how well you understand and implement semantic HTML, which also extends its importance to enhancing the user experience.

It helps better when you consider semantic HTML to be the backbone of web content, providing meaning and structure. Understanding semantic HTML profoundly should spur you to ensure a more inclusive, efficient, and effective website that conveys the intended message.

You must always remember that the goal is to make the web a better, more accessible place for all. Therefore, embracing the power of semantic HTML to develop robust and user-friendly web pages puts you a step ahead of the competition.