HTML5新增了哪些语义化标签？

咱们做开发的，特别是老一批用DIV+CSS布局过来的人，肯定都经历过那个“DIV地狱”的年代。满屏都是<div id="header">、<div class="nav">，找段逻辑跟解谜似的。后来HTML5来了，这事儿才算有了转机。它带来了一组新的标签，说白了，就是给网页的不同部分起了个准确的名字。

以前的写法，你可能很熟悉：

<div class="header">
    <div class="nav">导航栏</div>
</div>
<div class="main">
    <div class="article">文章内容</div>
</div>
<div class="sidebar">侧边栏</div>
<div class="footer">页脚</div>

用上新标签之后，结构一下子就清晰了：

<header>
    <nav>导航栏</nav>
</header>
<main>
    <article>文章内容</article>
    <aside>侧边栏</aside>
</main>
<footer>页脚</footer>

你瞧，代码自己就在说话。<header>就是头，<nav>就是导航，<article>是一篇独立的文章，<aside>是旁边的补充内容，<footer>是脚注。这对我们开发者来说，维护起来省心多了，对浏览器和搜索引擎来说，理解页面结构也容易太多了。

这里面几个核心的标签你得知道：<header>、<footer>、<nav>、<main>、<article>、<section>、<aside>。它们本身没啥特殊样式，纯粹是为了定义结构。这种语义化的做法，对提升网站的可访问性帮助巨大，屏幕阅读器能更好地工作。而且，搜索引擎也更喜欢这种结构清晰的页面，对SEO来说是实打实的加分项。

所以说，现在写前端结构，别再DIV走天下了。把这些语义化标签用起来，代码更干净，协作也更方便，算是一个现代前端工程师的基本素养。