Semantics

Still remember the div and span tags? Let’s talk about why you shouldn’t use them and what you should use instead.

Downsides of Div and Span

Since you can put whatever you want inside div and span tags, the browser doesn’t know what you are using this tag for.

It might be obvious to you that you are showing the content of an article inside this div tag, but the browser doesn’t know that.

Div and span tags themselves don’t carry any meaning, unlike p tag which means paragraph, or h1 tag which means heading 1.

A bad example of overusing div and span.

Semantic Tags

You can use semantic tags which are meaningful to the browser that are introduced in HTML version 5

header tag: <header></header>
nav tag: <nav></nav>
main tag: <main></main>
article tag, footer tag, etc.

The diagram after using semantic tags will look something like this.

Using meaningful semantic tags rather than div and span.

There aren’t strict rules as to what semantic tags you need to use at where since different websites have different layouts.

It is also not to say that you should avoid using div and span tags completely, but if you feel like a part of the page is showing content that is different from the rest, then you can wrap the code inside a semantic tag.

Search Engine Optimization

Search Engine Optimization (SEO) is about how high up your website is ranked when doing a browser search.

Browsers will visit your website with a bot crawler and obtain information about them.

If the browser doesn’t understand your website, it is very likely that you will get a lower ranking.

There are many factors involved but is still a good practice to pay attention to semantic tags when writing HTML.