如何正确使用语义

2020年12月30日11:13:40 发表评论 32 次浏览

本文概述

在任何给定的网站上, 都有很多隐含的含义, 某些用户很容易理解。有很多的视觉线索和提示在网站上。通常情况下, 标题是比平常大的文本, 导航菜单以某种方式显示, 并且放大镜图标倾向于表示搜索功能。

没有这些视觉线索, 这些隐性关系中的大多数都会消失。我们可以让某人(或某物)阅读我们的内容, 但是所有有助于我们理解重点, 段落和一般内容结构的微小视觉提示都将丢失。

想要概念证明吗?转到你正在使用的网站, 然后点击cmd + aorCtrl + A复制"所有内容", 然后将文本粘贴到你喜欢的文本编辑器中。欢迎来到没有语义的世界。

幸运的是, 网络所描绘的意义远不止于此。本文将向你展示为什么Web上的语义很重要, HTML内置了哪些语义元素以及如何在应用程序中使用它们来改善可访问性, 可用性, SEO和利润。

语义甚至意味着什么?

就言语而言, "语义学"是一个棘手的问题。它是复数形式, 但单数形式, 意思是"单词的含义"。在网络上, 语义通常是指HTML元素提供的内在含义。

在以语义方式构建的网页上, 这些HTML元素用于将其内容放入某种结构中。一些内容应占据中心位置, 而其他内容本质上则更重要。应强调某些内容, 而其他内容应以引号表示。 HTML提供了用于所有这些类型内容的工具, 并且还有更多。

为什么你应该关心

以这种方式组织的内容(我们称其为"语义正确"的方式)对于所有感兴趣的人都更易于使用和处理。这带来了一些巨大的优势:

改善可访问性

通过使用正确的语义标记来组织内容, 可以使所有用户更容易使用它。屏幕阅读器将能够以最有效的方式呈现内容, 并使用户可以比没有语义标记的用户更快地浏览你的网站。

可发现性(SEO)增加

搜索引擎搜寻器使用语义标记可以更轻松地正确索引内容。通过使用正确的标签, 你将为基础的排序算法提供有价值的提示, 这些算法决定了内容的查找难度。而且, 由于语义标记更适合可访问性, 因此你的收视率也会有所提高! 💪

更容易解析

屏幕阅读器和搜寻器可能不是对你的内容感兴趣的两个唯一程序。有价格整合者, 阅读列表应用, 共享功能以及可能使用一千多种内容的方式, 并且尽可能简化该过程只会吸引你的读者。

我们为制作了一个自定义演示.
不完全是。点击这里查看.

如何正确使用语义1

你的代码更容易阅读

阅读全部源代码<div />s不是很好的经验。对我们来说幸运的是, HTML不仅仅是通用的<div />和<span />标签!你可以将导航特定的内容放在<nav />, 你的主要内容部分位于<main />标签, 突然之间你的代码就更容易扫描了。这可能不会增加最终用户的价值, 但是一个快乐的开发人员是一个有生产力的人, 对吗?

HTML必须提供什么?

正如我提到的, HTML不仅限于<div />和<span />。实际上, 有超过100种不同的元素!你可以在MDN参考, 但可以将它们大致分为三类-内容部分, 内容语义和功能元素。

内容部分

网页通常包含几部分内容-页眉, 页脚, 主要内容区域等。 HTML提供了一些元素, 可让你表示页面的这些不同"地标"。

你应该记住的一些是:

  • <main />包装页面的实际内容或应用程序的主要功能。简而言之, 这是你的网站, 没有页眉, 页脚和侧边栏
  • <header />应该包装页面或应用程序的主标题, 也应包装其他任何内容组的"标题"。它可能包含博客文章的标题和内容类别, 或者你应用的徽标和主导航
  • <section />是通用内容容器, 应包装你网站或应用程序的一部分。这些元素通常也具有标题。一条好的经验法则是, 在逻辑上应在你网站的轮廓中显示一个部分
  • <article />几乎类似于<section />。主要区别在于你应该使用<article />围绕内容的标签, 这些标签可以在其他上下文中单独重用, 并且不主要内容。例如, 博客文章摘要, 评论甚至是完整的小部件
  • <aside />可以以两种不同的方式使用。如果你在<article />标签, 可以理解为包含与该文章密切相关的内容, 例如词汇表或说明框。如果在文章之外使用, 则可以用于包装半相关内容, 例如侧边栏或相关链接列表
  • <页脚/>通常用于提供文章或网站本身的版权或作者信息
  •  <nav />包裹页面的主要导航部分。你的主要网站导航, 分页和下一篇文章/上一篇文章功能都应该包装在<nav />

通过记住这七个要素以及何时使用它们, 可以为你的网站提供很多结构。你可以在以下内容中了解有关结构化内容的更多信息本文如果你有兴趣。

内容语义

还有另一组HTML标签, 可让你构建网站的实际内容, 我称之为"内容语义"。这组元素使你可以向内容本身添加语义, 从而可以区分常规文本中的引号和图像标题。

其中有很多, 如果你完全使用过HTML, 则你可能对其中的大多数都很熟悉。这里有一些你可能没有用过的东西, 但是很高兴知道!

  • <blockquote />包装扩展引号, 并允许你引用这些引号的来源。如果来源是网址, 则可以使用引用属性, 否则, 你可以使用<cite />标签以提供来源
  • <图/>应该包装你的图像, 插图和图形(即图表, 代码段)。通过提供<figcaption />另外, 你可以添加与图形在语义上相关的标题
  • <dl />代表"定义列表", 非常适合需要显示键值关系的情况。产品元数据和词汇表就是很好的例子

最重要的是包装了一个内容块。你可以(而且应该!)更加细化, 并且为每个这些块提供进一步的语义含义。

  • <时间/>包装特定的时间段或时间。你可以使用约会时间属性, 它接受更详细的时间戳
  • <em />创造重点, 当你使用屏幕阅读器或语音助手来解析文本时, 该功能非常有用。如果需要, 你甚至可以嵌套它们以提供更高级别的强调
  • <small />包装你的"法律文字"和版权声明
  • <abbr />用于解释你使用的缩写。奇怪的是缩写标签本身是"缩写"的缩写, 但让我们保留它。你可以使用来解释缩写标题属性

确实还有更多值得关注的东西。你可以找到完整列表这里.

总结

语义网不仅仅是一个流行词。通过使用

适当的HTML标签, 你可以向屏幕阅读器, 搜索搜寻器以及所有用户提供结构性提示。

如果你不记得何时使用它, 请查询几次。的MDN文档令人难以置信, 本文概述了你最常使用的功能。尝试看看不使用<div />or<span />在这个新的目标网页中, 你将放在一起!

我希望本文能激发你在文档结构中添加一些含义, 并让你深入了解这种称为HTML的奇妙语言。

日志火箭:全面了解你的网络应用

LogRocket仪表板免费试用横幅

日志火箭是一个前端应用程序监视解决方案, 可让你重播问题, 就好像问题发生在你自己的浏览器中一样。 notlogy无需猜测错误发生的原因, 也不要求用户提供屏幕截图和日志转储, 而是让你重播会话以快速了解出了什么问题。无论框架如何, 它都能与任何应用完美配合, 并具有用于记录来自Redux, Vuex和@ ngrx / store的其他上下文的插件。

除了记录Redux动作和状态外, notlogy还会记录控制台日志, JavaScript错误, 堆栈跟踪, 带有标题+正文, 浏览器元数据和自定义日志的网络请求/响应。它还使用DOM来记录页面上的HTML和CSS, 甚至可以为最复杂的单页面应用程序重新创建像素完美的视频。

免费试用

.

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: