What does "semantic" mean?
To write semantic HTML is to give it meaning, rather than just describing how it should look in the browser.
Take this code snippet for example:
<div class="heading">My Heading</div>
<div class="paragraph">Here's a sentence I wrote just for you.</div>
While it is possible to write CSS to make your heading
and paragraph
classes appear as you like, software tooling that reads your markup has no idea what it means. It'll just see text within a div, and not know how the text in the first div relates to the second div.
Here's the semantic way of writing the previous example:
<h1>My Heading</h1>
<p>Here's a sentence I wrote just for you.</p>
The advantages of writing your HTML semantically are:
- You get a set of default styles for free (which you can override with CSS if you wish)
- Communication: Developers who read your code in the future instantly know what was intended - there is no ambiguity to semantic markup
- SEO: Search engines like Google look for
<h1>
tags to determine which keywords to associate your content with - Screen readers can now read your content as you intended
More examples of Semantic vs Non-semantic markup
Buttons
Good:
<button>Click me</button>
Bad:
<div>Click me</div>
Why is this bad?
Divs are not focusable by keyboards. We could make them focusable by adding tabindex="0"
, but this can still be hacky in the case of inputs.
Inputs
Good:
<input type="checkbox" />
Bad:
<div role="checkbox"></div>
Why is this bad?
As mentioned before, divs are not focusable by default. Adding tabindex="0"
here will make your div focusable, but then you would also need to write additional JavaScript to submit the value of your "checkbox" when the rest of the form submits.
Shameless plug
If you'd like more tips on how to improve your frontend, you can follow me on Twitter or subscribe to my newsletter as I regularly post articles there.
Top comments (4)
I think you missed some important parts of writing semantic HTML. A lot of people make a mistake by using div to wrapping everything. Tags that most people miss are
main
header
footer
section
etc. Using these tags can help in better SEO.Don't forget the useful
article
, andaside
as well.Thanks.
Which one is better for header and footer menu? With div or button?