关于HTML语义化

标签的语义

通过标签判断内容语义,例如根据h1标签判断出内容是标题,
根据p标签判断内容是段落、< input >标签是输入框等;

判断标签是否语义化

去掉样式,看网页结构是否组织良好有序,是否仍然有很好的可读性;

为什么标签要语义化

1、搜索引擎友好;
2、更容易让屏幕阅读器读出网页内容;
3、去掉或样式丢失的时候能让页面呈现清晰的结构;
4、便于团队开发和维护;

如何使标签更具语义化

标题内容型
标题使用h标签而不是div class=h2,段落使用p标签,锚点使用a标签;
表单
分组表单用 fieldset 标签包起来,并用 legend 标签来说明的用途;
每个 input 标签对应的说明文本都需要使用 label 标签,并且通过 input 设置id属性,在<label>标签中设置“for=someId”来让说明文本和响应的<input>关联起来;
表格
表格标题要使用<caption>,表头使用<thead>包围,尾部使用 tfoot 包围,表头和一般单元格要区分开,表头用 th 一般单元格用 td;
应注意的问题

  • 尽可能减少使用无语义标签div和span;
  • 语义不明显,可以用p也可以使用div的情况下,尽量用p;
  • 不要使用纯样式标签,例如:b、font 和 u等,改用CSS设置;
  • 使用HTML5的结构元素(HTML5新特性)。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ## 什么是HTML语义化? 首先来回答第一个问题,什么是HTML语义化?简单来说就是,让人和机器更容易读懂内容。...
    pramper阅读 1,059评论 0 0
  • 什么是HTML语义化? 首先来回答第一个问题,什么是HTML语义化?简单来说就是,让人和机器更容易读懂内容。比如标...
    pramper阅读 1,638评论 0 1
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,683评论 1 92
  • 首先是关于语义(Semantics)和默认样式的区别,默认样式是浏览器设定的一些常用tag的表现形式,语义化的主要...
    DecadeHeart阅读 8,742评论 0 3
  • 1. HTML语义化背景介绍 讲到语义化,我们首先来聊聊html语义化的背景,HTML结构语义化,是最近几年才提出...
    阿布_0caf阅读 25,416评论 1 20