自超文本标记语言&＃xff08;HTML&＃xff09;成为Web基础以来已有很长时间了。 从那时起&＃xff0c;许多事情发生了变化&＃xff0c;HTML文件的某些功能从理想变为负面。 因此&＃xff0c;曾经被认为对避免未经授权的复制有用的秘密标记或模糊的源代码&＃xff0c;似乎在我们今天生活在搜索引擎结果中的定位之争中是无稽之谈。
即使有工具来获得这些结果&＃xff0c;但由于过度使用元素来使网页结构&＃xff08;div标签&＃xff09;过多&＃xff0c;它们多次自发出现。 该标签履行了为页面布局赋予结构并为各种元素赋予位置的职责&＃xff0c;但通常会一次又一次地嵌套。 这种复杂性变成了div汤 &＃xff0c;带来了诸如使代码难以维护等后果。
对于我们十多年前开始学习网页设计的人来说&＃xff0c;尽管语义元素在2004年作为版本开发的一部分而到来&＃xff0c;但总是有使用
标签创建页面布局的诱惑。 HTML 5。
我们不能忽视的事实是&＃xff0c;现在我们的标记不仅需要出于维护原因对人类有意义&＃xff0c;而且对于出于SEO目的的搜索引擎以及对于用户代理在不同设备中的响应性以及屏幕阅读器也都具有意义。以改善其可访问性。
实际上&＃xff0c;选择非描述性标记元素作为创建布局的主要工具可能被认为是不好的做法。 万维网联盟&＃xff08;WC3&＃xff09;谈到
标签&＃xff1a;
“ div元素根本没有特殊含义……强烈建议作者将div元素视为万不得已的元素&＃xff0c;因为在没有其他元素适合的情况下。 使用更合适的元素代替div元素可以为读者提供更好的可访问性&＃xff0c;并为作者提供更容易的可维护性。”
这应该足以阻止滥用我们标记中的div标签。
那我们应该选择什么呢&＃xff1f; 当它来自语义HTML时&＃xff0c;人们倾向于只考虑HTML5附带的那些标记&＃xff0c;而没有意识到从早期版本开始&＃xff0c;有一些元素描述了它们的内容&＃xff0c;而无需额外的属性&＃xff1a;
- 定义缩写词和首字母缩写词
- 定义引用&＃xff0c;例如引文
-
- 定义了简短的内联引号
仅举一些例子。 以下是最新的标签及其含义
- 指定独立的&＃xff0c;独立的内容。
- 定义除放置内容之外的某些内容&＃xff08;如边栏&＃xff09;。
-
- 在图像上添加视觉说明。
- <图>将图像和标题分组在一起
- 包含文档的作者&＃xff0c;版权信息&＃xff0c;使用条款的链接&＃xff0c;联系信息等。
- 用作介绍性内容的容器。
- 指定文档的主要内容
- 定义标记/突出显示的文本
- 定义了一组导航链接。
- 内容的主题分组&＃xff0c;通常带有标题
- 定义
元素的可见标题 - <时间>定义日期/时间
我们已经看到了几乎所有需要添加到HTML文件中的所有内容的标签&＃xff0c;因此很明显&＃xff0c;我们总是有足够的空间在布局中包含语义元素。
总而言之&＃xff0c;好的标记传达了含义&＃xff0c;并讲述了其中的内容。 使用语义HTML元素&＃xff0c;可以使页面的源代码面向未来&＃xff0c;并确保人类和机器可以理解我们想要传达的内容。
From: https://hackernoon.com/semantic-html-tags-that-will-boost-your-markup-quality-v0c03328
京公网安备 11010802041100号