HTML标签语义化

最新推荐文章于 2025-02-12 15:33:18 发布

white_g

最新推荐文章于 2025-02-12 15:33:18 发布

阅读量538

点赞数 1

分类专栏：项目技巧

本文链接：https://blog.youkuaiyun.com/stopllL/article/details/77861403

版权

项目技巧专栏收录该内容

5 篇文章

订阅专栏

前言

什么是标签语义化：

在合适的地方用合适的标签，用正确的标签做正确的事

什么是合适的标签

当用于包裹文本时：h1～h6,span,strong,em,p…
当用于渲染列表时： ul,li,ol,dd,dt,dl
当用于链接时：a
当用于布局时：head,nav,footer,main,section,div..

什么是正确的标签

标签用在了正确的地方就是正确的标签

想使用正确标签的前提是了解标签本身的意义，如果标签没有意义，那和div又有什么区别呢？（div标签为普通块级标签）

1. 关于div的理解：

理论上，我们应该在找不到比div更合适的标签的时候才选择div标签

先说说div标签，div标签为普通块级标签，可以认为他是毫无意义。正是因为他毫无意义，所以我们在网页上面看见了他太多的身影。你说这些标签用正确了吗？好像也没错！个人对乱用div标签进行布局的看法则是合适但不正确。

2.关于布局标签的替代：

头部标签使用header，可以理解为凡事你想给div命名head这类类名的div都应该替换为该标签。主要用来包含引导性帮助的功能区。
底部标签使用footer，一般用来包含网页底部版权信息等功能的功能区。
main标签用于主题内容区，页面直能出现一个该标签
nav标签则为导航标签，导航内容应包含在nav标签内部
常用的各种块级布局应该使用section标签，不过section标签作为块是希望块内出现对于的标题，理论section标签的划分是以同级h标签划分
页面悬挂内容等非页面主题内容部分使用aslide标签，寓意为挂件部分。比如悬浮广告，通知等使用该标签。
设计到文章的标签使用article标签

3.粗略的一个结构图

    <header>
        <!-- logo图标等 -->
        <h1><a><img /></a></h1>
    </header>
    <nav></nav>
    <main>
        <section>
            <h2>区域标题1</h2>
            <article>
                <h3>文章标题</h3>
                <time>发布时间</time>
                <address>作者地址信息</address>
                <p>正文第一段</p>
                <p>正文第二段</p>
                <p>正文第三段</p>
            </article>
        </section>
        <section>
            <h2>区域标题2</h2>
            <dl>
                <dt><img title="图片1"/></dt>
                <dd>图片1的描述</dd>
            </dl>
            <dl>
                <dt><img title="图片2"/></dt>
                <dd>图片2的描述</dd>
            </dl>
        </section>
        <section>
            <h2>区域标题3</h2>
            <ul>
                <li>有序列表1</li>
                <li>有序列表2</li>
                <li>有序列表3</li>
            </ul>
        </section>
    </main>
    <aslide>与网页主题内容无关的挂件如：公告信息，广告信息</aslide>
    <footer>
        <a href="http://blog.youkuaiyun.com/stopllL/article/details/74783444">友情链接</a>
        <p>版权信息</p>
    </footer>