Skip to content

区块标签

div 分隔

<body>
    <div class="header">
        <div class="logo"></div>
        <div class="nav"></div>
    </div>
    <div class="banner"></div>
    <div class="content">
        <div class="aside"></div>
        <div class="main"></div>
    </div>
    <div class="footer"></div> 
</body>

区块分隔

<body>
    <!-- 网页头部 -->
    <header>
        <div class="logo">网页的logo</div>
        <nav>导航条</nav>
    </header>

    <!-- 网页核心 -->
    <main>
        <aside>广告</aside>
        <article>
            <h1>文章标题</h1>
            <section>部分1</section>
            <section>部分2</section>
            <section>部分3</section>
        </article>
    </main>
    <footer>页脚</footer>
</body>

区块标签

区块标签 说明
<section> 文档的区域，语义比div大
<article> 文档的核心文章内容，会被搜索引擎主要抓取
<aside> 文档的非必要相关内容，比如广告
<nav> 导航条
<header> 页头
<main> 网页核心部分
<footer> 页脚