What Is Semantic HTML?

To put it simply, Semantic HTML is developing HTML using semantic tags. This involves utilizing HTML tags that clearly define their purpose, such as <form> and <table>, which leads to better semantics and structure for your pages. In this article, we'll dive into what HTML semantic tags are and why it's beneficial to use them.

HTML Semantic Tags

While the generic <div> tag can be used for a wide range of elements on a page, using more specific HTML tags like <article>, <section>, and <button> can greatly enhance the semantic meaning of your HTML. There are over 100 semantic tags available in HTML, and some of the most commonly used ones include:

• header
• h1~h6
• hgroup
• nav
• main
• article
• section
• aside
• details
• time
• footer
• figure
• figcaption

Why Use HTML Semantic Tags

Improve SEO

Using semantic tags instead of non-semantic tags like div and span can help search engines better identify key words in titles and links, resulting in improved SEO for your pages.

Ease of Development

Utilizing semantic tags can make code more readable and help developers quickly understand the structure of web pages. For example, using button instead of div to create a button makes it more clear to other developers what the intended purpose of the element is. Additionally, semantic tags often have native functions that non-semantic tags do not have, making development easier.

HTML Accessibility

HTML semantic websites are more easily interpreted by devices like screen readers, assistive technology for blind users, and mobile devices. Accessibility, or "a11y," is becoming increasingly important in the front-end development industry, and the use of semantic tags is valued by many companies for this reason.