HTML 可读性 (高可读性的HTML)


HTML可读性

编写高可读性的HTML. 为用户提供导航和与您的网站互动的好方法. 使您的HTML代码尽可能保持语义 , 以便访问者和屏幕阅读器易于理解代码.


HTML语义化

语义HTML意味着尽可能正确地使用正确的HTML元素. 语义元素是具有意义的元素;如果需要按钮, 请使用<button>元素(而不是<div> ).

语义

<button>点击这里</button>

非语义

<div>点击这里</div>

语义HTML为屏幕阅读器提供了上下文, 可以大声读取网页的内容.

记住按钮示例:

  • 默认情况下, 按钮具有更合适的样式
  • 屏幕阅读器将其识别为按钮
  • 可聚焦
  • 点击

对于依赖键盘导航的人来说, 也可以使用按钮;它可以用鼠标和键点击, 也可以在它们之间进行选项卡(使用键盘上的Tab键).

非语义元素的示例: <div><span> - 对其内容一无所知.

语义元素的示例: <form> , <table><article> - 清楚地定义其内容.


标题很重要

标题使用<h1>-<h6>标记定义:

实例

<h1>1号标题</h1>
<h2>2号标题</h2>
<h3>3号标题</h3>
<h4>4号标题</h4>
<h5>5号标题</h5>
<h6>6号标题</h6>
运行 »

搜索引擎使用标题来索引网页的结构和内容.

用户按标题浏览页面. 使用标题来显示文档结构和不同部分之间的关系非常重要.

<h1>标题应该用于主标题, 然后是<h2>标题, 然后是不太重要的<h3> , 依此类推.

注意:仅将HTML标题用于标题. .



替代文字

alt属性为图像提供替代文本, 如果用户由于某种原因无法查看它(由于连接速度慢, src属性中的错误, 或者用户使用屏幕阅读器).

alt属性的值应该描述图像:

实例

<img src="img_chania.jpg" alt="干尼亚的花朵">
运行 »

如果浏览器找不到图像, 它将显示alt属性的值:

实例

<img src="wrongname.gif" alt="干尼亚的花朵">
运行 »

声明语言

声明一种语言对于屏幕阅读器和搜索引擎很重要, 并使用lang属性声明. 使用以下内容显示英文网页:

<!DOCTYPE html>
<html lang="en">
<body>

...

</body>
</html>

使用清晰语言

使用易于理解的清晰语言, 并尽量避免屏幕阅读器无法清楚读取的字符. 例如:

  • 保持句子尽可能短.
  • 避免破折号. 写1到3而不是写1-3
  • 避免使用缩写.
  • 避免使用俚语

写好链接

链接应该通过点击该链接清楚地解释读者将获得哪些信息.

好的和坏的链接的例子:


链接标题

title属性指定有关元素的额外信息. 当鼠标在元素上移动时, 信息通常显示为工具提示文本.

实例

<a href="https://www.uihtml.com/" title="跳转到UIHTML官网">HTML5 教程</a>
运行 »