`
webcode
  • 浏览: 6079688 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

HTML语义化标签

 
阅读更多

什么是语义化标签?

HTML赋予了每个标签以不同的语义。高质量的HTML代码,要求我们在遵循HTML语法的同时,也应该遵循HTML的标签语义,如:

div 语义:Division(分隔)
span 语义:Span(范围)
ol 语义:Ordered List(排序列表)
ul 语义:Unordered List(不排序列表)
li 语义:List Item(列表项目)
...

HTML常用标签语义:

<Hx>

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作为标题使用,并且依据重要性递减。<h1>是最高的等级。

由于一些浏览器会默认地把 <h1> 元素显示为很大的字体,因此会有一些 web 开发者使用 <h2> 元素代替 <h1> 元素来显示最上层的标题。这样做不会对读者产生影响,但会使那些试图“理解网页结构

”的搜索引擎和其他软件感到迷惑。

请确保把 <h1> 用于最顶层的标题,<h2> 和 <h3> 用于较低的层级。


从语义上讲,它们应该适用于所有标题文字。

但这里会出现一个语义上的分歧。h1究竟该理解为一级标题呢还是理解为1号字体大小的标题。我通常理解为一级标题,一级标题下再有小标题就用h2。但是事实上回顾HTML设计之初,h1-h6后面的数字

更多的被理解为控制标题文字大小的。用h3或许只是为了使用三号大小的字体,而并非它就是三级标题。否则一级标题全用h1,个个都是斗大的字,又不得不用CSS来控制字号,感觉很累赘。所以,这是

一个待商榷的问题。
例如:

Code:
  1. <h1>标题1</h1>

  2. <h2>标题2</h2>

<b>标签与<strong>标签

<b>:标签语义为“加粗

<strong>:标签语义为“强调

当我们知道了<b>标签和<strong>标签的语义时,做SEO时就好决定用哪个来强调重要的关键字了,强调用<strong>,纯粹加粗用<b>


<ul>标签、<ol>标签、<li>标签

<ul>语义: 定义无序列表

<ol>语义:定义有序列表

<li>语义:定义列表项目

所以涉及到列表的项目,应该用<ul><li>或<ol><li>来布局,而不是用<table>或<p>甚至<span>,当然也可以用<dl><dt><dd>

应该要补充的是,别忘了li里面还可以再用ul或ol,形成第二级列表。

<dl>标签、<dt>标签、<dd>标签

<dl>语义:定义了定义列表

<dt>语义:定义了定义列表中的项目(即术语部分)

<dd>语义:定义列表中定义条目的定义部分

一些带标题的列表可采用<dl><dt><dd>自定义列表


<span>标签

<span>语义:被用来组合文档中的行内元素

列如:

Code:
  1. pspan{color:#ff0000;font-weight:bold;}

  2. <p>

  3. <span>提示:</span>:这是提示内容

  4. </p>

可以为 span 应用 id 或 class 属性,这样既可以增加适当的语义,又便于对 span 应用样式。


<table>、<th>、<td>、<caption>

<table>语义: 定义 HTML 表格

<th>语义: 定义表格内的表头单元格

<caption>语义: 定义表格标题


<button>标签、<input>标签、<textarea>标签

<button> 标签定义一个按钮

<input> 标签用于搜集用户信息,根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

<button> 控件 与 <input type="button"> 相比,提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或

多媒体内容。

<textarea>语义:定义多行的文本输入控件

<label> 标签

<label>语义: 为 input 元素定义标注(标记)

<center>,<font>不建议使用

分享到:
评论

相关推荐

    语义化标签兼容IE8以上文件

    语义化标签是HTML5中引入的一系列新特性,旨在提高网页内容的可读性和可访问性,同时优化搜索引擎优化(SEO)。这些标签为开发者提供了更精确的方式来描述页面内容,使得浏览器、屏幕阅读器和搜索引擎能更好地理解...

    语义化你的HTML标签和属性

    首先,我们要理解语义化标签与默认样式的差异。默认样式是浏览器对一些常见HTML标签的默认展示方式,如Hx系列标签(h1-h6)呈现为不同级别的标题,和用于强调文本。这些样式主要是为了让开发者直观理解标签的用途。...

    3.语义化标签.pdf_html5_

    HTML5是现代网页开发的标准,它引入了许多新特性,其中包括对语义化标签的强调。语义化标签在HTML5中的重要性不言而喻,它们不仅有助于提高代码的可读性和可维护性,还对搜索引擎优化(SEO)以及无障碍访问(Web ...

    HTML语义化的调查问卷源代码

    HTML语义化是网页制作中的一个关键概念,它关乎到网页内容的结构和可读性,对于搜索引擎优化(SEO)以及无障碍访问(Web Accessibility)都有着深远的影响。在本"HTML语义化的调查问卷源代码"中,我们可以深入探讨...

    语义化标签.html

    语义化标签.html

    html标签、html语义化

    在 HTML 5 中,HTML 标签被分为两类:结构性标签和语义化标签。结构性标签用来定义网页的基本结构,如 `&lt;html&gt;`、`&lt;head&gt;`、`&lt;body&gt;` 等。语义化标签用来定义网页的内容,如 `&lt;h1&gt;`、`&lt;p&gt;`、`&lt;img&gt;` 等。 HTML ...

    html5 语义化标签.docx

    HTML5的语义化标签是Web开发领域的一大进步,它为网页内容提供了更明确的结构和语义。在HTML5之前,开发者主要依赖`&lt;div&gt;`标签来组织页面结构,但这些`&lt;div&gt;`标签本身并没有传达任何特定的含义。语义化标签的引入...

    HTML:HTML5语义化标签解析.docx

    HTML:HTML5语义化标签解析.docx

    Web-前端html+css从入门到精通 124 HTML5新语义化标签(2).zip

    在这个"Web-前端html+css从入门到精通 124 HTML5新语义化标签(2)"的学习资源中,我们将深入探讨HTML5中的新语义化标签,这些标签是提升网页可读性、可访问性和SEO优化的关键元素。 首先,我们要理解什么是HTML5的...

    html5 语义化标签.pdf

    HTML5的引入带来了许多革新,其中之一就是语义化标签的使用。这些标签旨在增强网页的结构,提高可读性,并使搜索引擎更容易理解页面内容。在HTML5之前,开发者普遍使用`&lt;div&gt;`标签来组织页面结构,但这些`&lt;div&gt;`并...

    简单说下你理解的语义化,怎样来保证你写的符合语义化?HTML5语义化标签了解下?

    简单说下你理解的语义化,怎样来保证你写的符合语义化?HTML5语义化标签了解下?

    HTML5新特性之语义化标签

    HTML5新特性 简洁的DOCTYPE: HTML5 只有一个简单的文档类型:&lt;!DOCTYPE html&gt;,表示浏览器会按照标准模式解析。 简单易记的编码类型 你现在可以在meta 标签中使用...更加语义化的新增标签 比如说:、、、、 &lt;hea

    实验1 语义化标签(学生)1

    实验1的目的是让学生掌握HTML5中的语义化标签,并通过实际操作来理解这些标签的用法。实验分为三个任务: 任务1:Html5 语义化标签-列表嵌套 这个任务聚焦于列表的嵌套,主要涉及无序列表`&lt;ul&gt;`和有序列表`&lt;ol&gt;`的...

    语义化标签1

    语义化标签是HTML5中引入的一个重要概念,它的核心目标是通过标签的语义来描述页面内容,提高网页的可读性和可访问性,同时也有利于搜索引擎优化(SEO)。在网页设计中,正确使用语义化标签可以使得网页结构更加清晰...

    Web-前端html+css从入门到精通 125. HTML5新语义化标签(3).zip

    HTML5是现代网页开发的重要标准,它引入了许多新的特性和改进,其中一项重大创新就是引入了新的语义化标签。这些标签旨在使HTML文档结构更加清晰,提高网页内容的可读性和可访问性,同时也为搜索引擎优化(SEO)带来...

    Web-前端html+css从入门到精通 123. HTML5新语义化标签(1).zip

    本教程聚焦于HTML5中的新语义化标签,这些标签在构建更具有可读性、可维护性和无障碍性的网页中起到关键作用。让我们深入探讨一下这些新标签。 在HTML4时代,我们通常使用和标签来组织网页内容,但这些标签并没有...

    Web前端基础:HTML5语义化标签.pptx

    HTML5 是一种重要的前端技术,它为Web开发者提供了许多新的特性和改进,其中包括语义化标签的引入。这些标签的设计目的是增强网页内容的结构和意义,使得内容在没有CSS样式的情况下也能保持良好的逻辑结构,同时方便...

    04.语义化标签.html

    在网页中HTML专门用来负责网页的结构,所以在使用html标签时,应该关注的是标签的语义,而不是它的样式标题标签: h1 ~ h6 一共有六级标题 从h1~h6重要性递减,h1最重要,h6最不重要 h1在网页中的重要性仅次于...

    前端开发技术规范(命名规范、HTML 规范、语义化标签。。。)

    本文将详细阐述前端开发中的命名规范、HTML规范以及语义化标签的应用。 首先,命名规范是前端开发的基础,它规定了如何为项目、目录、文件及代码中的各种元素命名。项目命名应采用小写驼峰命名法(lowerCamelCase)...

Global site tag (gtag.js) - Google Analytics