Semantic HTML tags

HTML, which stands for HyperText Markup Language, is not typically considered a programming language. However, it remains one of the oldest and most widely used markup languages in the world for creating websites.

Even if you're using popular frameworks like React, Angular, Vue, Remix, or Next.js, you will still find yourself incorporating HTML markup tags. That's because HTML plays an integral role in the web development process.

When it comes to HTML tags, there are over 100 different tags to choose from, and it's important to use the most suitable ones for your specific requirements.

And that's where this blog post will help you. In this blog post, we will deep dive into one of the most crucial and fascinating concepts of HTML: Semantic HTML tags.

But why should you care?

As a web developer, it is essential to have a solid understanding of the precise HTML tags at your disposal. By mastering semantic HTML tags, you will unlock the ability to create well-structured, accessible, and search engine-friendly websites.

With that said, let's dive right in and explore the world of semantic HTML tags.

What are Semantic HTML Tags

Semantic HTML tags have the power to elevate your web development game. These carefully crafted tags are designed to convey their meaning when implemented.

According to w3schools, a semantic element or tag effectively communicates its purpose to both the browser and the developer.

Just imagine a web page without semantic elements—it would resemble a jigsaw puzzle with missing info! But fear not, because semantic tags like <table>, <header>, <nav>, and <footer> come to the rescue.

Moreover, there are numerous other semantic elements, such as <section>, <main>, <article>, <figure>, <aside>, <time>, and many more.

By looking at these examples, it becomes evident that these tags clearly define their purpose.

In contrast, non-semantic elements fail to provide the intended meaning, lacking a clear identity. While they may be versatile and useful for styling, they often leave browsers and developers confused, questioning the true purpose behind the code.

For instance, <div>, <span>, and similar elements fall into this category.

Now, let's explore some of the benefits the semantic HTML tags offer.

Benefits of Semantic Elements

Actually, semantic elements have a lot more benefits, but some of the best ones are:

1. Easy to Remember: As a web developer, semantic elements are easy to remember because they represent the actual meaning of what they're used for.

For instance, instead of using "div" everywhere, you can use specific semantic tags. Here's an example:

Using “div”:

Using semantic tags:

Clearly, the second option is much easier to remember.

2. SEO-Friendly: To reach a bigger audience, every website should use SEO (Search Engine Optimisation) tactics. 

SEO relies on a variety of techniques, such as applying precise meta tags and relevant keywords. Additionally, using semantic elements helps to improve SEO. These elements are critical in increasing a website's search engine exposure. 

Also, search engines can better grasp and interpret the structure and content of a website using special HTML tags that express the meaning of the content. This, in turn, aids search engines in appropriately ranking the website and presenting it to a larger audience in search results.

1. Easy to Read and Maintain: It is important to write clean code that is readily accessible and comprehensible by everyone while building an app or a website. In this case, semantic elements can also be beneficial.

Consider the following example, which uses semantic tags. This approach produces code that is not only visually pleasing, but also easier to read, and easier to maintain.

3. Improved Accessibility:  Semantic elements also provide web pages with meaningful structure, making it easier for screen readers and assistive technology to interpret and navigate the content.

As you can see from the above example, using semantic components adds a more meaningful structure to web pages.

4. Responsive Design and Mobile Optimization: Semantic elements are also helpful while creating responsive designs. Elements such as <main>, <article>, and <nav>, help in creating a responsive and mobile-friendly design.

By using these elements appropriately, you can structure your content in a way that adapts well to different screen sizes and devices, ensuring a seamless user experience across desktop and mobile platforms.

Key Semantic Elements in HTML

Talking about Semantic elements, there are a number of examples like <header>, <nav>, <main>, <section>, <aside>, <footer>, <code>, <time>, <details>, <summary>, and so on.

Let’s explore some of the key semantic elements.

1. <header> and <nav>

The <header> tag is mainly used to add the logo, title, and other information. The <nav> tag is usually used to add links to other pages or sections of the website.

For example:

2. <section>, <main>, and <article>

The <section> tag is primarily used to define a distinct section within a web page. It can be useful for various purposes, such as displaying a collection of blogs, presenting a form, or showcasing other types of content. Its versatility allows developers to effectively organize and structure different parts of a web page.

On the other hand, the <main> tag is specifically intended to represent the main content of a website. It signifies the primary focus or central topic of the page. When using the <main> tag, developers indicate that the enclosed content is crucial and directly relevant to the website's purpose.

Now, let's talk about the <article> tag. This tag is specifically designed to define a self-contained composition that can be independently distributed or reused. It is commonly used for blog posts, news articles, forum posts, or any other form of standalone content.

For example:

3. <figure> and <figcaption>

As the name implies, the <figure> tag is specifically used to incorporate images, illustrations, or diagrams into a web page. It provides a designated space to showcase visual elements that enhance the overall message or information conveyed on the page.

To complement the <figure> tag, we have the <figcaption> tag. This tag allows you to include a caption, description, or additional information about the content enclosed within the <figure> tag. By using the <figcaption> tag, you can provide context or further clarify the meaning of the visual element.

For example:

4. <h1>

You may be familiar with the <h1> tag, which is commonly used for the main heading of a section or a page. It holds significant importance in conveying the primary message or topic of the content. In fact, it can even be used within the Hero section to provide users with essential information right at the beginning

Now, let's talk about a way to group or combine a series of heading tags, ranging from <h1> to <h6>, with or without accompanying paragraph (<p>) tags.

For example:

5. <time>

As the name suggests, the <time> tag is used to provide information about a specific time or a range of time. This tag allows developers to mark up content that includes time-related details, such as a scheduled event, a publication date, or a duration. It enables developers to highlight and format dates within the content, such as the date of an article, a blog post, or an event.

6. <mark> and <strong>

The <mark> element is specifically designed to highlight or mark specific text within a document. It serves as a visual indicator, signaling that the marked text holds significance or importance.

On the other hand, the <strong> element is used to represent the strong importance, seriousness, or urgency of its contents. It allows developers to emphasize particular text, making it stand out and catch the reader's attention. The <strong> tag can be applied to highlight key points, important messages, or essential information within the document.

Certainly, both the <mark> and <strong> elements contribute to the visual and semantic enhancement of web content.

For example:

7. <aside> and <footer>

The <aside> element is widely used to distinguish various content from the main content of a web page. It is frequently employed for sections such as sidebars, where additional information may be inserted. In short, it is used for content that is relevant to but not necessary for the primary content, such as linked articles, advertising, or author biographies.

On the other hand, a web page's footer is typically located towards its end. It serves as a designated area to provide different kinds of information. This may include information about the organization or website, such as contact details, social media connections, copyright notices, and other relevant data.

In addition to the previously mentioned benefits, there are several other semantic elements that you can utilize when building an app or website. These include <details>, <form>, <summary>, <link>, <code>, <audio>, <video>, and more.

Best Practices for Using the Semantic HTML Tags

If you're wondering whether you should use semantic elements in all of your future projects, the quick answer is yes!

But before using the HTML Semantic tags, you need to be aware of several recommended practices.

1. Pick the appropriate tags: Choose tags that correspond to their goal. For instance, use the <nav> tag if you require a navigation bar, use the <article> tag for standalone content, and so on. Using tags that appropriately describe your content is crucial.
2. Avoid non-semantic elements: Use tags that give the content more meaning, such as <section>, <main>, or <aside>, rather than generic ones like <div> and <span>. For styling purposes, non-semantic tags are OK, but critical content shouldn't rely on them.
3. Don't overuse tags: Despite the importance of semantic HTML, avoid using too many tags. Use them when they genuinely contribute structure and significance. 
4. Enhance accessibility with ARIA attributes:  To provide more information, add ARIA attributes to semantic HTML elements. The “aria-label” attribute, for instance, may be used to provide alternate text to any images or icons on your website.
5. Date Element Correction: There's no <date> element in HTML. The correct element to represent dates is <time>. You can set the datetime attribute for date and time information:

1. Balance Semantic and Non-Semantic Elements: Non-semantic elements like <div> and <span> are still necessary for certain use cases, especially for styling and scripts. Use them judiciously and ensure they do not replace important semantic elements.

Keep in mind that while using semantic HTML tags is vital, doing this wisely and strategically is just as crucial. 

Working with semantic tags in Locofy.ai is straightforward. Its AI-powered Auto-Tagging feature scans your designs and provides semantic tag recommendations. Leveraging this functionality, Locofy.ai enables the transition from a static design to an interactive, SEO-friendly markup.

If you want to learn more about how to convert your Figma or Adobe XD designs to React, React Native, HTML/CSS, Nextjs, and more, check out our docs.