HTML标签语义化和常用的标签

forkeep
375 阅读4分钟

如何理解标签语义化

HTML的历史

  1. 在一开始，没有前端的概念，页面的HTML都是后端程序员去写的，后端程序员在页面布局的时候使用的是table去布局，样式丑陋并且出现很多table嵌套的情况。
  2. 之后出现了一些有美工基础的人员做前端界面，当时使用的是DIV+CSS，全部标签使用DIV，并且配合CSS写一写样式，页面大有改观，但是HTML全部使用DIV仍然存在标签名没有意义的情况，页面各个结构无法直接明确它的意义。
  3. 在现在，前端程序员使用带有一定含义的标签比如<header>，<article>等标签替代全部用DIV，这样的书写方式就是语义化，有很强的可读性，并且对搜索引擎也友好的。

标签语义化好处

  • 便于后期维护，代码更加优雅
  • 让搜索引擎爬虫和其他辅助技术更好的解析
  • 增强可阅读性，利于无障碍阅读

常用的HTML标签

1. 结构的语义化标签

图片摘自网络，需要删除联系我

在页面结构上，以上图为例：

标签 语义
header 文档的介绍信息，标题、logo、slogan，搜索框，nav等
nav 文章导航栏，配合ul或者ol使用
main 文章主要信息
article 一份独立的内容
section 是页面的一个章节，与article相比更偏向于整体
aside 侧边栏
footer 页脚，包含作者、版权信息等

2. 内容的语义化标签

The HTML <figure> (Figure With Optional Caption) element represents
self-contained content, potentially with an optional caption, which is
specified using the (<figcaption>) element. The figure, its caption, and its
contents are referenced as a single unit.

通常 figure 元素被认为用来包裹图或图表，它还可以承载文档主要内容中引用的但不是冗余信息的任何内容(代码片段、引用、音频、视频等)。在文档流中可以把 figure 完全删除，而不会影响用户对主要内容的理解。

The HTML Mark Text element (<mark>) represents text which is marked or
highlighted for reference or notation purposes, due to the marked passage's
relevance or importance in the enclosing context.

mark标签表示被标记的或者高亮的引用或者需要注意的内容，基础样式是黄色背景高亮。

The HTML <time> element represents a specific period in time. It may include
the datetime attribute to translate dates into machine-readable format,
allowing for better search engine results or custom features such as
reminders.

HTML <time>元素表示特定的时间段。它可能包括datetime属性将日期转换为机器可读格式，以获得更好的搜索引擎结果或自定义功能，例如提醒。

The canvas element is part of HTML5 and allows for dynamic, scriptable
rendering of 2D and 3D shapes and bitmap images. It is a low level,
procedural model that updates a bitmap and does not have a built-in scene
graph. It provides an empty graphic zone on which specific JavaScript APIs
can draw (such as Canvas 2D or WebGL).

HTML 的<canvas> 元素提供了一个空白绘图区域，可以使用 APIs （比如 Canvas 2D 或 WebGL）来绘制图形。

这里有我写的一个canvas画板开源项目，点击这里体验一下吧

HTML <video> 元素 用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的
视频播放。你也可以将 <video>  标签用于音频内容，但是 <audio>元素可能在用户体验上更合适。

HTML <audio> 元素用于在文档中表示音频内容。 <audio>
元素可以包含多个音频资源， 这些音频资源可以使用 src 属性或者<source>
元素来进行描述； 浏览器将会选择最合适的一个来使用。对于不支持<audio>元素的
浏览器，<audio>元素也可以作为浏览器不识别的内容加入到文档中。

易混淆的标签

1. <em>、<b>、<strong>

  • <em>表示对文本内容的强调，目的并非传达重要性
  • <strong>表示强调的着重意味，强调的是传递内容的重要性，严重性，紧急性
  • <b>表示样式上的粗体，不强调重要性，也不影响语气，只是文本的特殊样式，常用语关键字。
avatar
文章
阅读
粉丝