62

Why use HTML5 semantic tags like headers, section, nav, and article instead of simply div with the preferred css to it?

I created a webpage and used those tags, but they do not make a difference from div. What is their main purpose?

Is it only for the appropriate names for the tags while using it or more than that?

Please explain. I have gone through many sites, but I could not find these basics.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Rajaram Shelar
  • 7,537
  • 24
  • 66
  • 107
  • 10
    For the semantics they provide. They are all block level elements, so they will render the same, but from an accessibility point of view you should use the most appropriate element (e.g. screen readers may handle them differently). – James Allardice Jun 24 '13 at 09:23
  • 2
    I am not sure, but may be it helps search engine optimization. Also in future may be these are the tags which browsers will be supporting. – Narendra Jun 24 '13 at 09:24
  • 5
    > Why to use Html5 semantic tags Look up the meaning of "semantic" and you will have your answer. – Mark Simpson Jun 24 '13 at 09:26
  • @MarkSimpson Yes of course. But I can use some traditional elements instead of those elements – Rajaram Shelar Jun 24 '13 at 09:29
  • `But I can use some traditional elements instead of those elements` Sure you *can*. But is it a good idea? – Pekka Jun 24 '13 at 09:43
  • 1
    Why not stick to `span` elements exclusively and control display properties via CSS exclusively then? Because more built-in expressiveness is a good thing! – deceze Jun 24 '13 at 09:46
  • 3
    @MarkSimpson I chuckled at "meaning of semantic" ;) – xec Jun 24 '13 at 09:53
  • 1
    I don't think this is similar to li vs div. The above comments seem to ignore the fact that these tags are still not supported by older browsers (hint: IE<9). This is probably one of the considerations the questioner is taking into account.True, you can handle older browsers by using Modernizr and the like.... but that's already a down side – Danield Jun 24 '13 at 09:58
  • semantic means having some meaning ,so does the semantic elements in HTML5. It has some meaning associated with it ,which is helpful for screen readers etc. – Vikash Kumar May 08 '17 at 18:57

3 Answers3

87

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).

Christoph
  • 50,121
  • 21
  • 99
  • 128
  • Thanks for your answer can you just share what is automated processing of documents mechanism? – Rajaram Shelar Jun 24 '13 at 09:54
  • @eraj this is a complex matter, but I find the Purpose section of the [Semantic Web Wiki Article](http://en.wikipedia.org/wiki/Semantic_Web#Purpose) a good start to get familiar with the topic of semantic documents. – Christoph Jun 24 '13 at 10:02
  • 3
    @eraj the html5doctor article from badZoke is also quite good. In it's simplest form automated document processing would be the ranking of websites. The web-crawler grabs the content and tries to analyze it in order to rank the site according to it's over-all quality and relevance regarding you search-term. – Christoph Jun 24 '13 at 10:07
  • I love the effort @christoph and time you put in the article. But I guess most people will move away from your line of thought and go to the next YT video tutorial that is totally fine in using ` – theking2 Oct 12 '21 at 17:55
13

There's a nice little article on HTML5 semantics on HTML5Doctor.

Semantics have been a part of HTML in some form or another. It helps you understand what's happening where on the page.

Earlier when <div> was used for pretty much everything, we still implemented semantics by giving it a "semantic" class name or an id name.

These tags help in proper structuring and understanding of the layout.

If you do,

<div class="nav"></div>

as opposed to,

<nav></nav>

OR

<div class="sidebar"></div>

as opposed to,

<aside></aside>

there's nothing wrong, but the latter helps in providing better readability for you as well as crawlers, readers, etc..

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
painotpi
  • 6,894
  • 1
  • 37
  • 70
2

In the div tag you have to give an id which tells about what kind of content it is holding, either body, header, footer, etc.

While in case of semantic elements of HTML5, the name clearly defines what kind of code it is holding, and it is for which part of the website.

Semantic elements are <header>, <footer>, <section>, <aside>, etc.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
scottperison
  • 21
  • 1