Semantic HTML Elements

What is Semantic HTML?

In HTML, semantics refers to the meaning of the code.

A semantic element clearly describes its meaning to both the browser and the developer.

Non-Semantic Elements

Tags like <div> and <span> are non-semantic. They tell us absolutely nothing about their content. They are just empty boxes used by developers to group elements together for styling with CSS.

Semantic Elements

Tags like <form>, <table>, and <article> are semantic. Just by looking at the tag, you know exactly what kind of content is inside it!

Why is Semantic HTML Important?

In the early days of the web, developers built entire websites using nothing but thousands of <div> tags nested inside each other (often called “div soup”).

HTML5 introduced a whole new set of semantic tags to solve this problem. Using them is critical for two massive reasons:

1. Accessibility

Screen readers (used by visually impaired users) rely on semantic HTML. If you use a <div> for a button instead of a <button>, the screen reader won’t know it’s clickable. If you use semantic layout tags (like <nav> for navigation), screen reader users can easily jump straight to the navigation menu without listening to the whole page.

2. SEO (Search Engine Optimization)

Google and other search engines read your HTML to figure out what your website is about so they can rank it in search results. If your main blog post is wrapped in an <article> tag, Google instantly knows that this is the most important content on the page.

Key Takeaways

• Semantic HTML uses tags that clearly describe their purpose (like <form>).
• Non-semantic tags (like <div> and <span>) are just generic containers for styling.
• Semantic HTML is critical for Accessibility (screen readers) and SEO (Google search rankings).
• HTML5 introduced many new semantic layout tags to replace “div soup.”