Why choose HTML5 semantic tags instead of div tags?

Question

Why use HTML5 semantic tags, such as headers, section, nav and article instead of simply using div and setting it to the preferred css?

I created a page and used these tags, but they are no different from div. What is their main purpose?

Are they just providing the appropriate label name when used, or do they do something else?

Please explain. I checked many websites but couldn't find these basics.

Answer 1

There is a good article about HTML5 semantics on HTML5Doctor.

Semantics have always been part of HTML, existing in some form. It helps you understand what's happening on the page.

In the old days, when almost everything used <div>, we still achieved semantics by giving it a "semantic" class name or id name.

These tags help in structuring and understanding the layout correctly.

If you do this:

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

and

<nav></nav>

or

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

and

<aside></aside>

There is no problem with

, but the latter provides better readability for you, crawlers, readers, etc.

Answer 2

Oxford Dictionary states the following:

As their name suggests, these tags are designed to enhance the meaning of your web pages. Good semantics play an important role in automatic processing of documents. This automatic processing happens more often than you realize - every website ranked by search engines is derived from the automatic processing of all websites.

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

However, the machine is stupid and cannot do this: Looking at the same page as yours, a web crawler will only see an image, a series of anchor tags, a text node, an input field, and an image with a link. There is another text node at the bottom. Now, how are they supposed to know which part of the document you intend to be the navigation or the main article, or some less important footnote? They can guess hints for specific elements by analyzing your document structure using some common criteria. For example, the

list of internal links is most likely some kind of page navigation, and the text at the end of the document is necessary but not too important content for the everyday viewer (legal disclaimer).

Now imagine if a normal

was used instead of the

element - the machine immediately knows what the purpose of this element is:

// 机器：好的，这个结构看起来可能是一个导航元素？
<div><ul><li><a href="internal_link">...</div>

// 机器：啊，一个导航元素！
<nav><ul><li><a>...</nav>

Now, the text inside the

tag - this is obviously the most important information on the page! On the left, that text node, the image, and the anchor node all belong to the same group because they are all grouped in the

tag, while at the bottom there is some text in the

element (they still don't know what that text means, but Now they can deduce it's some kind of fine print).

Example:
As a user (reading the page without looking at the actual markup), you don't care whether an element is contained in a or tag. In most browsers, both tabs will render identically - as italicized text - and as long as it's highlighted between the surrounding text, it serves its purpose.

However, there is a big difference from a semantic perspective:
means italic - it is just a hint to the browser to render it (in italics) and does not necessarily contain deeper semantic information.
means emphasis - it indicates important information. Now, browsers are no longer limited to italic instructions and can render them in italics, bold, underline, or in different colors... For the visually impaired, screen readers can amplify their voices - whichever method seems best in a given situation Perfect to emphasize this important message.

Final Thoughts:
Semantic tagging is not the end. There are also metadata, ontologies, resource description languages, and more, which further help connect data between different web pages and can even help create new knowledge!

For example, Wikipedia does a terrible job of presenting data semantically.

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

These three are all characters who served as the President of the United States at some point in time.

All three articles include a sidebar that displays this information and you can compare them (open both pages and switch back and forth), but they are not described semantically. Instead, if Wikipedia uses ontology to describe a person: http://dbpedia.org/ontology/Person

<!-- President是Politician的子类，Politician是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>

Now you (and the machine) can compare these three directly (on a dynamically generated page!) and even create new knowledge, such as showing a list of all US presidents - rather boring but also cool, such as the current one How many world leaders are there, how many female world leaders are there, who is the youngest leader, how many types of leaders are there (president/emperor/queen/dictator), who has served the longest, how many are there Height over 175cm and have brown eyes etc.

In short, good semantics are very cool (but technically difficult to implement and maintain).