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 a div and setting it to your preferred css? I created a web page and used these tags, but they are no different than divs. What is their main purpose? Do they just provide appropriate label names when used, or do they serve another purpose? Please explain. I checked many websites but couldn't find these basics.

P粉262926195 · Answer

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

, 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:

and

or

and

There is no problem with

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

P粉200138510 · Answer

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

Now imagine if a normal

was used instead of the

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

// 机器：好的，这个结构看起来可能是一个导航元素？
...


// 机器：啊，一个导航元素！
...

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

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


 
    Barrack Hussein Obama II
    1961-08-04
    country::USA
    2009-01-20 – 2017-01-20

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