《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 2.3 语义标记的重要性

简介:

本节书摘来异步社区《移动网页设计与开发 HTML5+CSS3+JavaScript》一书中的第2章,第2.3节,作者:【英】Peter Gasston,更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.3 语义标记的重要性

在继续探讨如何以不同的方式为页面添加更深层次的丰富含义之前,让我们先停下来问问“究竟为什么要使用语义?”我的意思是,我们通常都使用div元素来标记一个页面,难道这样做在本质上是错误的吗? (例如,使用以下代码块):

2c341dac536b2db8c902aa31099402f18ae7ec77

Divya Manian在一篇辩论性文章“Our Pointless Pursuit of Semantic Value”中也讨论了这个问题。在文章中,她认为,对于大多数人来说,过于强调语义标记就是浪费时间:

标记结构内容,但是,和我们教科书上所说的相比,选择标签所起的作用,实际上要小很多……
然而我要说,对于使用正确的语义元素,有两个很好的理由。第一,也是最平淡无奇的一个理由,使用正确的语义元素能够帮助我们制定一个约定俗成的标准,让编写的代码具有良好的可维护性。众所周知,如果使用语义元素,你的同事或继任者将能够在你的代码上工作,而不用学习你的名称方案。反过来也是一样的:如果你接手他人的代码,他或她如果按照标准来编码,你就会知道代码的情况到底如何。

还有另一个更深奥的原因,使用语义元素能增加内容的相关性(aboutness)。简单地说,相关性是衡量意义质量的一个标准,内容的相关性描述了内容的本质。

下面,我们来对这个原理做一个简单的说明,假设有一个网页,其中包含W.H.Auden的一首诗《葬礼蓝调》:

他是我的南北,我的西东。

是我作息的意义。

是我的日夜,欢唱谈话的内容。

我以为爱会永恒不朽……

……我错了
虽然我们知道这是一首关于死亡的诗,但是“死亡”这个词本身并没有出现在诗中。索引页的搜索引擎如何才能知道这首诗是关于什么主题,并且在该主题的搜索结果中找到它?当搜索引擎浏览该页面的链接文本时,在“阅读更多”的链接文本中没有提供上下文,可在 “W.H. Auden关于死亡的诗”的链接文本中提供了一些相关的信息检索。

正确使用语义元素能带来同样的好处。如果页面上所有的内容都用div来标记,内容就会没有上下文;反之,如果正确使用语义元素来标记页面,内容就会有上下文:

2b299ccb19c0e53347fc1fe24258305ed8af5a55

现在,哪些是重要标题,什么是主体内容,就非常清楚了。所以说,通过正确使用语义元素,可以赋予内容一些信息检索的相关性。

除了正确使用语义元素来标记内容,还可以使用很多其他方法来增加文档的含义,这些含义是机器所需的、而非用户所需(通常称为结构化数据)。例如,可以使用定义模式(微格式)中现有的属性和元素,或用新属性(RDFa和微数据)来扩展HTML。接下来,我们将一一对这些方法作简要介绍。

相关文章
|
25天前
|
开发框架 JavaScript 安全
js开发:请解释什么是Express框架,以及它在项目中的作用。
Express是Node.js的Web开发框架,简化路由管理,支持HTTP请求处理。它采用中间件系统增强功能,如日志和错误处理,集成多种模板引擎(EJS、Jade、Pug)用于HTML渲染,并提供安全中间件提升应用安全性。其可扩展性允许选用合适插件扩展功能,加速开发进程。
|
26天前
|
缓存 JavaScript 前端开发
js开发:请解释什么是Webpack,以及它在项目中的作用。
Webpack是开源的JavaScript模块打包器,用于前端项目构建,整合并优化JavaScript、CSS、图片等资源。它实现模块打包、代码分割以提升加载速度,同时进行资源优化和缓存。借助插件机制扩展功能,并支持热更新,加速开发流程。
17 4
|
26天前
|
缓存 JavaScript 数据安全/隐私保护
js开发:请解释什么是ES6的Proxy,以及它的用途。
`ES6`的`Proxy`对象用于创建一个代理,能拦截并自定义目标对象的访问和操作,应用于数据绑定、访问控制、函数调用的拦截与修改以及异步操作处理。
17 3
|
26天前
|
JavaScript
js开发:请解释什么是ES6的类(class),并说明它与传统构造函数的区别。
ES6的类提供了一种更简洁的面向对象编程方式,对比传统的构造函数,具有更好的可读性和可维护性。类使用`class`定义,`constructor`定义构造方法,`extends`实现继承,并可直接定义静态方法。示例展示了如何创建`Person`类、`Student`子类以及它们的方法调用。
21 2
|
4天前
|
开发框架 前端开发 JavaScript
采用C#.Net +JavaScript 开发的云LIS系统源码 二级医院应用案例有演示
技术架构:Asp.NET CORE 3.1 MVC + SQLserver + Redis等 开发语言:C# 6.0、JavaScript 前端框架:JQuery、EasyUI、Bootstrap 后端框架:MVC、SQLSugar等 数 据 库:SQLserver 2012
|
4天前
|
存储 前端开发 JavaScript
Sass:提升CSS开发效率的利器
Sass:提升CSS开发效率的利器
7 0
|
4天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
13 1
|
4天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
16天前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
|
26天前
|
Web App开发 JavaScript 前端开发
js开发:请解释什么是Node.js,以及它的应用场景。
Node.js是基于V8的JavaScript运行时,用于服务器端编程。它的事件驱动、非阻塞I/O模型使其在高并发实时应用中表现出色,如Web服务器、实时聊天、API服务、微服务、工具和跨平台桌面应用(使用Electron)。适用于高性能和实时需求场景。
18 4