关于HTML语义化

作者: 不忘初心___ | 来源:发表于2017-04-10 10:19 被阅读0次

标签的语义

通过标签判断内容语义,例如根据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新特性)。

相关文章

  • 2021-01-11

    html语义化标签 什么是HTML语义化 元素本身传达了关于标签所包含内容类型的一些信息。 语义化的意义 代码结构...

  • HTML-语义化-(iframe-a-form的使用)

    语义化 参考资料:semantic-html 关于语义化 HTML 以及前端架构的一点思考 如何理解 web ...

  • HTML: 标签语义化的理解

    一. 什么是 HTML 语义化 二. HTML 语义化网页的好处 三. 如何进行 HTML 语义化 四. 语义化标...

  • 关于HTML语义化

    标签的语义 通过标签判断内容语义,例如根据h1标签判断出内容是标题,根据p标签判断内容是段落、< input >标...

  • 如何理解HTML结构的语义化?

    1. HTML语义化背景介绍 讲到语义化,我们首先来聊聊html语义化的背景,HTML结构语义化,是最近几年才提出...

  • 前端面试常见问题——HTML篇

    1. HTML语义化 什么是HTML语义化 根据内容的结构化(内容语义化),选择合适的标签(代码语义化) 为什么要...

  • HTML语义化浅谈

    什么是HTML语义化 HTML语义化,是编写HTML代码的一种方式,根据内容的结构化(内容语义化),选择合适的标签...

  • HTML初探

    HTML、XML、XHTML之间的区别 HTML语义化 根据内容的结构化(内容语义化),选择合适的标签(代码语义化...

  • 怎样理解 HTML 语义化

    怎样理解 HTML 语义化 HTML 语义化是在 HTML5 里加入的一个概念。 为什么要加入语义化?我们先看看没...

  • 学html5不得不说的html5shiv.js和pug

    一.html5shiv.js 首先来说一下关于html5语义化的问题,语义化虽然很好,可是却存在很多兼容问题,经常...

网友评论

    本文标题:关于HTML语义化

    本文链接:https://www.haomeiwen.com/subject/yqqsattx.html