With over 100 HTML elements, you can create your own markup in infinite ways, but which one will be the best?...
HTML semantics provide accessibility information about page structure and an element's role, name, and state, helping to convey the nature and purpose of content on web pages.
By using HTML elements instead of a div soup without any semantic value, you are helping users and Google's robots to understand your web content...
If a developer used a <div> instead of a <header>, the implicit role would be absent, unless provided with extra code. That means the HTML won't be as useful to the machines that interpret it.
Structuring content
You can first try to always use semantic landmarks like header, main, aside, footer and nav elements.
Then, you should also use the good HTML element for each purpose:
a
pwill be the direct parent of paragraph of text, not adivif you need a link or an anchor, use an
aelement, not abuttonif you need an action (like opening a modal, closing a burger menu, expanding some content, playing a media, validate a form), use a
<button>elementfor a title or a subtitle, prefer the
h1toh6elements and respect the orderif you have a list of items, use an
ul&licombo...
Naming things as they are
Just by this way, using semantic HTML, you can for instance tell to screen reader users that an component is a button, or a link or a list of items. A div alone will not provide any information about your content...
Elements like <div>s and <span>s are meaningless, inert. You can use them for layout and styling, but not to replace semantic HTML5, as it will require a lot of JavaScript to mimic the real HTML5 element.
Always choose an existing HTML5 element first!
Top comments (0)