欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

HTML语义化 以及HTML5新的语义化标签

程序员文章站 2022-06-12 12:49:18
...

什么是语义化?
语义化就是用有一定语义的英文字母(标签)表示,尽量使用官方的有语义的标签。

为什么要语义化?
1、呈现好的内容结构和代码结构
2、提高用户体验(title、alt)
3、利用SEO,语义化能和搜索引擎建立良好的联系,有利于爬虫抓取更多的有效信息,爬虫依赖于标签来确定上下文和各个关键词的权重
4、方便其他设备解析以语义的方式来渲染网页
5、语义化更具可读性,遵循W3C标准,规范

构建页面要那些注意?
1、减少使用无语义的标签div和span
2、语义不明时,尽量用p(p默认有上下边距,可以兼容特殊终端)
3、不要使用纯样式的标签(b、font、u)改用css设置
4、需要强调的文本,包含在strong或者em(斜体)标签中(浏览器预设样式,能用CSS就不用它们)
5、使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td;
6、表单域要用fieldset标签包起来,并用legend标签说明表单的用途(fieldset 元素可将表单内的相关元素分组);
使用form表单中自带的fieldset与legend标签:

<form method="post">  
    <fieldset>  
        <legend><b>第一题</b></legend>  
        <p>题目题目题目</p>  
        <ul>  
            <li><input type="radio"  value="1" checked="checked" />一选项</li>  
            <li><input type="radio"  value="2" />二选项</li>  
            <li><input type="radio"  value="3" />三选项</li>  
        </ul>  
    </fieldset>  
    <fieldset>  
        <legend><b>第二题</b></legend>  
        <p>题目题目题目</p>  
        <ul>  
            <li><input type="radio"  value="1" checked="checked" />一选项</li>  
            <li><input type="radio"  value="2" />二选项</li>  
            <li><input type="radio"  value="3"/>三选项</li>  
        </ul>  
    </fieldset>  
</form>  

HTML语义化 以及HTML5新的语义化标签
7、每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

HTML新增的语义标签:
1、header 标签定义文档的页眉(网站标志、主导航、全站连接、搜索框)

2、nav

定义外部的内容 (外部的文章,文本)
4、footer

定义文档或者节的页脚(文档作者、版权信息、使用条款连接、联系信息)等
5、aside

<section>
    <header></header>
</section>
<section>
    <footer></footer>
</section>

7、main
显示页面的主题内容。每个页面只能包含一个main标签,main标签中不能包含网站标题、logo、主导航、版权声明等信息。

<main>
    <article>
        文章内容
    </article>
    <article>
        文章内容
   </article>
</main>

8、figure 用于对元素进行组合
9、

标签定义figure元素的标题,“figcaption”元素应该被置于“figure”元素的第一个和最后一个子元素的位置。

相关标签: HTML HTML5