HTML5 增加的语义标签（元素）有什么意义？<nav><section><article><aside>

Question

如：<nav><section><article><aside><hgroup>

加不加整个页面没什么变化啊？

Answer 1

The following story is purely fictional. Although it is beautiful, it is wrong. If you have any questions, please read @Evian’s reply.

---

In html, all tags are treated equally, so N years ago, you could see a page like this.

<p id="list">
  <p class="iteam">java</p>
  <p class="iteam">PHP</p>
  <p class="iteam">python</p>
</p>

Later, tags evolved.

<ul>
  <li>java</li>
  <li>PHP</li>
  <li>python</li>
</ul>

Subsequently, html became more standardized:

<p id="header"></p>
<p id="footer"></p>
<p id="nav"></p>
<p id="sidebar"></p>

html continues to evolve:

<nav>
<section>
<article>
<aside>
<hgroup>

In short, it is becoming more and more semantic. Even in html5, you can still develop a website using only p.

Answer 2

This is an article I wrote before:

Their behavior is almost the same as <p>, but they are given semantics.
By using semantic markup, you can improve the readability of your code, allow browsers to better optimize your web pages (especially on mobile terminals), and allow search engine crawlers to better understand your web pages.

Full text: http://jyprince.me/program/656

Answer 3

Web pages are not just for viewers to see, nor are they only for mainstream browsers to parse.

Search engine spiders, page readers used by blind people, etc. Do you know the benefits of semantic tags?

Answer 4

In fact, it means literally. The purpose is to let others know what this block is for after seeing it. This way the entire document makes sense to read (compared to p). Personal opinion, for reference only.