Why Use an HTML5 Semantic Tag Instead of Div

Why use an HTML5 semantic tag instead of div?

The Oxford Dictionary states:

semantics: the branch of linguistics and logic concerned with meaning.

As their name says, these tags are meant to improve the meaning of your web page. Good semantics plays an important role the automated processing of documents. This automated processing happens more often than you realize - each website ranking from search engines is derived from automated processing of all the website out there.

If you visit a (well designed) web page, you as the human reader can immediately (visually) distinguish all the page elements and more importantly understand the content. In the top left you see the company logo, next to it is the site navigation, there is a search bar and some text about the company, a link to a product you can buy and a legal disclaimer at the bottom.

However, machines are dumb and cannot do this:
Looking at the same page as you, all the web crawler would see is an image, a list of anchors tags, a text node, an input field and an image with a link on it. At the bottom there is another text node.
Now, how should they know, what part of the document you intended to be the navigation or the main article, or some not-so-important footnote? They can guess by analyzing your document structure using some common criteria which are a hint for a specific element.
E.g. an ul list of internal links is most likely some kind of page navigation and the text at the end of the document is something necessary but not so important to the everyday viewer (the legal disclaimer).

Now imagine instead of a plain div, a nav element would be used – the machine immediately knows what the purpose of this element is:

// machine: okay, this structure looks like it might be a navigation element?
<div><ul><li><a href="internal_link">...</div>

// machine: ah, a navigation element!
<nav><ul><li><a>...</nav>

Now the text inside a main tag – this is clearly the most important information of the page! Over there to the left, that text node, the image and the anchor node all belong together, because they are grouped inside a section tag, and down at the bottom there is some text inside a footer element (they still don't know the meaning of that text, but now they can deduce it's some sort of fine print).

Example:

You, as the user (reading a page without seeing the actual markup), don't care if an element is enclosed in an <i> or <em> tag. In most browsers both of these tags will be rendered identically – as italic text – and as long as it stands out between the surrounding text it serves its purpose.

However, there is a big difference in terms of semantics:

<i> means italic - it's simply a presentational hint for the browser on how to render it (italic) and does not necessarily contain deeper semantic information.

<em> means emphasize - it indicates an important piece of information. Now the browser is not bound to the italic instruction any more, but could render it in italic or bold or underlined or in a different color... For visually impaired persons, the screen readers can raise the voice - whatever method seems most suited in a specific situation to emphasise this important information.

Final thought:

Semantic tags are not the end. There are things like metadata, ontologies, resource description languages which go a step further and help connect data between different web pages and can even help create new knowledge!

E.g. wikipedia is doing a really bad job at semantically presenting data.

https://en.wikipedia.org/wiki/Barack_Obama

https://en.wikipedia.org/wiki/Donald_Trump

https://en.wikipedia.org/wiki/Joe_Biden

All three are persons who at some point in time where president of the USA.

All three articles contain a sidebar that displays these information, and you can compare them (by opening both pages and then switching back and forth), but they are not semantically described.
Instead, if wikipedia used an ontology to describe a person: http://dbpedia.org/ontology/Person

<!-- President is a subclass of Politician which is a subclass of Person -->
<President> 
    <birthname>Barrack Hussein Obama II</birthname>
    <birthdate>1961-08-04</birthdate>
    <headOf>country::USA</headOf>
    <tenure>2009-01-20 – 2017-01-20</tenure>
</President>

Not only could you (and machines) now directly compare those three directly (on a dynamically generated page!), but you could even create new knowledge, e.g. show a list of all presidents of the United States - quite boring but also cool stuff like who are all the current world leaders, how many female world leaders do we have, who is the youngest leader, how many types of leaders are there (presidents/emperors/queens/dictators), who served the longest, how many of them are taller than 175cm and have brown eyes, etc. etc.

In conclusion, good semantics is super cool (but also – on a technical level – hard to achieve and maintain).

HTML5 semantic elements Vs. div tags

There really isn't a correct answer here. There is cases to use some of the new HTML5 semantic elements such as header, nav, or footer. But there is cases to just use div's as well.

It really comes down to your style as a dev. Me personally I like using the header, nav, and footer tags but using div's for most everything else.

To play devil's advocate with that though you could get a really long CSS selector like .section .row .column .some-item .another-item. That is bad. That would perform really slow. The way that selector works is it starts from .another-item and works its way backwards...

If you used some of the semantic elements it could make a better CSS selector and thus a faster page.

Are there any downsides to using html5 semantic tags over traditional divs?

Some older browsers don't recognize the html5 elements. At best this means you have to define default style rules for those elements in your CSS.

In some cases you might need to apply a shim, or in this case, a shiv:
https://css-tricks.com/snippets/javascript/make-html5-elements-work-in-old-ie/

Again, old browsers (I'm looking at you, IE) won't even recognize them as elements, so yes, it would likely change the structure of your DOM. Also, I've seen old browsers just output the html5 tags as plain text, so you see the <article> tag right there in your content.

---

If you happen to be in a situation where you can't support the new html5 elements, one handy workaround is to use divs and give them classes that match the desired element names. So for example you'd use:

<div class="article">
instead of
<article>

This approach has the benefit of sticking to the new "mental model", you can still think of your content in terms of articles and asides or whatnot. This approach also has the benefit of making it relatively straightforward to upgrade your code to full html5 spec at some point in the future, as all you have to do is search for the classes and replace the divs as appropriate.

HTML 5 semantic tags

Keep in mind that semantic tags are just a way to keep the code more human readable and to standardize pages.

This is because before most users would define just divs and then a class describing its role like nav, footer, header, etc.

For your first question; no, an aside element does not represent a "sidebar" per se. It just represents content that is related to the main content, but it's not part of the main topic of the page. You could use it to wrap the contents of a sidebar (which is in itself a UI component), but you can use it for other things as well.

From the HTML5 specification:

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

The element can be used for typographical effects like pull quotes or
sidebars, for advertising, for groups of nav elements, and for other
content that is considered separate from the main content of the page.

For your second question.

Yes, in HTML5 you can use divs or semantic tags whenever you like, but it is encouraged that you use semantics whenever possible; if there's no other tag you can use to define part of the document, then use a div without problems. You can use them interchangeably, at the end, most of them like main, section, footer, etc. are just divs with a different name to make it easier to read.

Why should I use 'li' instead of 'div'?

For semantic correctness. HTML has the ability to express lists of things, and it helps the Google robot, screen readers, and all manner of users who don't care solely about the presentation of the site understand your content better.

HTML5 semantic tag best practices

It doesn't matter too much which semantic tag you use. I would wrap the Carousel in a section tag. I would use figure for each image. Then you can also use figcaption if you need one.

As for the images below the carousel i would use a section tag again and inside this section i would have 3 article tags with the image inside each one. In the CSS give each one a width: 33% and a diaplay: inline; and float: left.

For the header text put it before the first article and text-align: center.

---

Related Topics