Use this instead of .divs

It can be quite tempting to use divs all around our page and call it a day, but that's not a practice you should use. Semantic tags help us know the meaning of the content and more importantly, it provides correctly organized content for screen readers, and at the end of the day we all love good accessibility practices!

Being a good A11y, among other things, means semantically separating the content on your page, but how do we do that?

Semantic tags

Semantic tags are those that identify the content they hold; they follow a structure and certain peculiarities, and the best part? There are over 100 of which you can choose from!

So before trying to 're-invent the wheel' have a look and see if a tag already exists for that element.

I'll walk you through the most used tags we can use to replace .divs:

Basic web development structure tags

header: used to identify the header of the page, it can have the logo of the company, a navigation or search bar, or any other elements.
```
<header> </header>
```
navigation: or nav is used to contain the navigation links.
```
<nav> </nav>
```
main: it includes content related to the central idea of the page.
```
<main> </main>
```
h1 - h6: headings of the page. It's preferred to only use ONE h1 element with higher hierarchy.
```
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
```
aside: contains content -aside- directly related to the main element.
```
<aside> </aside>
```
section: identifies a section of the main element.
```
<section> </section>
```
article: identifies independent content of the main element.
```
<article> </article>
```
p: for paragraphs or blocks of text.
```
<p> </p>
```
button: made to identify clickable buttons.
```
<button> </button>
```
img: holds images of the page.
```
<img src="" alt=""></img>
```
footer: mostly contains information about the author or copyright.
```
<footer></footer>
```
How would this look like?

Can also be like this:

Pretty neat huh! The possibilities are endless with how you organize your content.

Sooo... Should i get rid of divs?

Absolutely not! This is not the idea of this article, my friend. Divs are necessary, but they are considered non-semantic elements -just like the tag- which means they don't provide information about their content, making it awful for screen readers.

It can still be used to group elements with the tags we've seen so far; it is merely a pure container.

Some tips for accessibility with semantic HTML

Use ONE h1 per page, mostly for the main title.
Make sure other headings represent the content they're holding.
Use buttons! Don't go using span tags or 'click here' links.
Links should have correct and descriptive names.
Don't skip alt text on images.
Add labels to input fields.
Have the same functionality from :hover to :focus, some people are not using the mouse.
Don't be afraid of adding white space and making content readable.

Thank you so much for reading!! :) I hope you learned something new today.

☕If you enjoy my content Buy me a coffee It'll help me continue making quality blogs💕

Yuri's Notes

Yuri's Notes

Use this instead of .divs

.divs can be pretty useful, but they shouldn't be your go-to element for grouping and identifying content. Try these tags instead.

Table of contents

Semantic tags

Basic web development structure tags

How would this look like?

Sooo... Should i get rid of divs?

Some tips for accessibility with semantic HTML