HTML5语义化的一些问题

1.什么是HTML5语义化：

根据内容的结构化，选择合适的标签，便于让开发者读者写出更优雅的代码的同时让机器以及浏览器更好的解析。

2.语义化好处：

1）在没有css情况下，也能呈现出好的内容结构。

2）加强用户体验，比如，alt,label等

3）有利于SEO：和搜索引擎建立良好的沟通，有助于爬抓取更多的信息，爬虫依赖于标签来确定上下文和各个关键字的权重。

4）方便其他设备解析

5）便于团队开发维护

3.写HTML代码需注意：

1）少写无意义的div和span

2）语义不明显时，需要使用div或者p时，尽量使用p。

3)不使用纯样式标签，如font,b,u,尽量使用css设置

4）需强调的文本，用strong,不用b,斜体为em,不用i

5)使用表格时，标题用caption,表头用thread，主体用tbody 尾部用tfoot，表头和一般单元格分开，表头用th。单元格用td

6)表单域用fieldset包围，并用legend标签说明表单用途

7）每个input标签对应的说明文本都要使用label标签，并通过为input标签设置id属性，在label标签中设置for=someld来说明文本和相对应的input关联起来

4）HTML5新增的语义化标签：

HTML5语义化的一些问题

1）header：可以包含h1-h6或hgroup作为标题，也可以包含目录，搜索框，一个nav,或者任何相关logo

2）footer：包含该节的基本信息：作者，相关文档链接，版权资料。。。

3）hgroup：包含连续多个的h1-h6,若只有一个h1-h6则不需要。

4）nav：代表页面导航链接区域。

5）aside：被包含在article元素中作为内容的附属信息部分，最典型的是侧边栏

<article>
    <p>内容</p>
    <aside>
        <h1>作者简介</h1>
        <p>生平荣耀富贵</p>
    </aside>
</article>

6）section：代表文档中的节或段。

<section>
    <h1>section是啥？</h1>
    <article>
        <h2>关于section</h1>
        <p>section的介绍</p>
        <section>
            <h3>关于其他</h3>
            <p>关于其他section的介绍</p>
        </section>
    </article>
</section>

7）article：代表在一个文档，页面或者网站中自成一体的内容

注意：article元素最容易和section，div容易混。当article嵌套article表示内部与外部是有关联的，当article嵌套section表示

表示从属关系，section嵌套article是内部为独立的整体，组成了一个section团体，而div就是想把元素组合或者给他们加样式用的。

HTML5语义化的一些问题

相关推荐