这样去写你的 HTML 让你的编码更好的适配性

例如那些必须读屏手机软件的客户。做为1个前端开发,大家又如何会忍心呢。以前就1直想写这样的1篇文章内容,共享1下怎样去造就1个可浏览性更好的网页页面。今日的方案里有1条把 HTML Tag 和 WCAG规范融合起来。我强烈推荐你这样去写你的 HTML,让一些人的日常生活能够更非常容易。

今日想共享的是怎样去应用大家的 HTML Tag, 把 WCAG 的规范和词义网的总体目标开展编码上的反映:

1. 文本文档申明:<!Doctype>

实际上这跟 WCAG 压根上连不上甚么立即关联,但以便1个适配性更好,非常是向后适配的网页页面,我强烈推荐你这样写:

<!Doctype html>

2. 连接:<a>

互联网技术的联基本上能够说是用 <a> 来完成的,做为1个网页页面最多见的标识。大家应当怎样对待呢?

  1. 为重要连接加上 accesskey
  2. 除非万不可已,不必去掉 focus 时虚线框
<a href="" title="" accesskey="M" rel="" hidefocus>Link</a>

3. 缩写: <abbr>

针对用 HTML Tag 的正确应用,也是是非非常关键的,这有益于读屏手机软件应用者针对网页页面构造的了解。非常是在 H1,H2,H3 等这些标识的应用,乱用十分非常容易导致构造难以相信。自然,应用1般的标识,再运用 CSS 来使视觉效果上产生比照这也是平常人能辨识的。但读屏手机软件客户呢。自然,这里只是顺便提到必须留意网页页面标识的应用方式,而 abbr 最关键的应当是应当加上1个 title 特性对缩写开展叙述。例如:

<abbr title="Web Developer" >WD</abbr>

4. 大段引入: <blockquote>,1般引入: <cite>

 有大段引入的情况下,应用 <blockquote>,而行内引入则应用 <cite>,让你的构造更为易读:

<blockquote>
    以前就1直想写这样的1篇文章内容,共享1下怎样去造就1个可浏览性更好的网页页面。今日的方案里有1条把 HTML Tag 和 WCAG规范融合起来。我强烈推荐你这样去写你的 HTML,让一些人的日常生活能够更非常容易。
</blockquote>
<p>某A给我印象最刻骨铭心的1句话是,<cite>“做前端开发要有爱。不必动没动就有朩有地对各种各样人应用怒吼体”</cite>。</p>

5. 删掉:<del>

在纸上写物品不可以像在测算机上写物品1样,能够用撤消键能够按,但当大家要想强调一些物品是被删掉的如何办?那便是应用 <del> 标识了。例如这样:

<del>HTML上表明强调时,请应用 &lt;b&gt; 标识</del>
HTML上表明强调时,请应用 &lt;strong&gt; 标识

实际效果是这样的:

HTML上表明强调时,请应用 <b> 标识
HTML上表明强调时,请应用 <strong> 标识

6. 界定目录:<dl>

上年带着新人做付款宝前端开发blog的情况下,她们给我印象最刻骨铭心的是很喜爱用 <dl>。那时候在想,这些同学挺非常好的,对词义化的了解还非常好。大家還是较为少用到界定目录的。而是应用1般的 <ul> <ol> 这两个。<dl> 也是应当慎用的,最好是只应用在一些有“界定”实际意义的条目,如 w3school 的这个事例,对咖啡和牛奶的界定:

<dl>
  <dt>Coffee</dt>
    <dd>- black hot drink</dd>
  <dt>Milk</dt>
    <dd>- white cold drink</dd>
</dl>

7. 无序/井然有序目录 <ul>/<ol>

目录,这个针对每一个前端开发来讲,都熟习但是了。由于构造能够十分灵便地开展运用,在导航栏、目录、Tab 等,都常常要要用到。这个就不必多说了。但有1点還是必须搞清楚的,不必坚信甚么 <ul>/<ol> 是 <table> 的取代品。在大家常见的 HTML Tags 中,每一个标识都有自身的功效,谁都并不是谁的取代品。

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

8. 报表: <table>

假如是1个报表,那就,就不必用段落来取代,更不必用目录。除非万不可已,而且她们是能够变换的。此外,报表中也有1些必须留意的点:

  • 给 <table> 加上 summary 特性,一些报表十分大,其实不必须去读详细个
  • 加上 <tbody>,假如我没记错,假如没加上的话,访问器会全自动为你加上
  • 必要时应用 <col> <colgroup> 来操纵表明的栏
<table summary="sofish's blog status">
    <thead>
        <tr>
            <th>DATE</th>
            <th>IP</th>
            <th>PV</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2011.3.11</td>
            <td>3000</td>
            <td>8000</td>
        </tr>
    </tbody>
</table>

9. 文件格式化片断 <code>/<pre>

<code> 是指 computer code text, 而 <pre> 是指 preformatted text。<pre> 的范畴更广,而且是块状元素,将会被应用来文件格式化各种各样文字,非常是编码。应用沒有必须非常留意的,关键是词义上的正确应用,例如不必用 <pre> 来替代1般的 <p>。

<code>text-align:center</code>
<pre>
{ ( 1 * 102 ) + ( 9 * 101 ) + ( 3 * 100 ) }
</pre>

10. 换行: <br>

在当代网页页面中,应用 <br> 的状况是是非非常少的。网页页面中的留白,1般全是应用 CSS 的 padding 和 margin 来完成。这样更精确,并用更非常容易操纵。如今强烈推荐的用法是,应用到1般的段落 <p> 中做简易的换行,而并不是用来操纵网页页面留白。

<p>我是1个段落。<br />
诗歌都会用换行的。
</p>

11. 切分线: <hr>

<hr> 具备十分好的词义功效。但他的视觉效果实际效果很难操纵。以前就写过这样的文章内容有关<hr />在各访问器中的难题。1般也都非常少用。假如专业为读屏手机软件应用者出示独立网页页面的话,也许 <hr> 会大有效处。

<h3>题目1</h3>
<p>Lorem Ipsum is ...</p>
<hr />
<h3>题目2</h3>
<p>This is the entry of... </p>

12. 无词义标识:<div>/<span>

实际上 <div>/<span> 这两个标识是有词义的,全是 defines a section in a document。是的,和 HTML5 中的 <section> 实际上是1样的。只是,由于检索模块的的缘故,检索模块觉得它们是无词义标识,因而她们变成 “无词义” 标识。强烈推荐用法是尽可能应用别的来作为网页页面架构的器皿,例如合理布局、加上附加的视觉效果实际效果,而并不是段落等的取代品。

<div id="container">
    <div id="content">
    </div>
    <div id="sidebar">
        <ul>
            <li><span>God</span>, oh my zsh</span></li>
        </ul>
    </div>
</div>

13. 段落/题目: <p>,<h1>/<h2>/<h3>…

这几个标识基本上能够说是1个网页页面标识级别构造中最关键的标识。大家能够用1本书的构造来讲明这几个标识,而大家搭建1个网页页面的情况下,也应当有这样的1种观念在脑中:

  • 书的名字:H1
  • 书的每一个章节题目: H2
  • 章节内的文章内容题目: H3
  • 章节的段落: P
  • 副标题/副题目: H4/H5/H6

是的,自然也有引入 <blockquoute>,技术性类书中出示的编码 <pre class="code">,1些必须留意点的目录 <ul>,1些便捷较为的报表 <table> 等。

<h1>LOGO</h1>
<h2>Title</h2>
<div class="entry">
    <h3>Summary:</h3>
    <p>lorem ipsum is ...<em>emphasize</em></p>
</div>

14. 强调: <em>/<strong>

<em> emphasize 的缩写。而 <strong> 是 strong emphasize。将会许多刚新手入门前端开发的同学会对 <em>、<strong>、<cite> 、<i>、<b> 这几个标识的应用拿捏禁止。<i> 和 <b> 基础上是被废置的,非常于如今的 <em> 和 <strong>,1般状况下她们针对內容关键性的排列是这样的:strong > em ≈ cite。 

<strong>留意:</strong>别应用老掉牙的标识,例如<cite>FONT、CENTER</cite>等,非常是 <em>FONT</em>。

15. 表单项: <input>/<textarea>/<select>

表单项是 HTML 中相对性较为繁杂的标识,必须留意的点也较为多:

  1. 必须给每一个表单项加上 <label> 对其开展叙述,当不可以应用 label 时,为表单项加上 title 特性
  2. 当表单项是必填项的情况下,应用 “*“ 标记来标识
  3. Flash 建立表单项1般是不容易转化成 <label> 的,请勾上 auto label 那个选项
<form method="post" action="http://sofish.de">
    <fieldset><legend>My Form</legend>
      <label for="firstname">* First name:</label> <input type="text" id="firstname" />
      <label for="speech">Say something:</label>
      <textarea id="speech" />
      </textare>
      <input type="submit" value="submit" title="submit button" />
    </fieldset>
</form>

16. 照片: <img>

针对照片,视障看不见。出示 alt 来表明取代文字。告知她们这是1张甚么样的图。

<img src="http://sofish.de/favicon.ico" alt="幸福快乐个人收藏夹的 favicon" />

17. 架构: <iframe>

尽可能防止 <iframe>架构的应用,但当你必须应用的情况下,最好是出示1个 title 特性对其开展叙述。

<iframe src="http://sofish.de" title="幸福快乐个人收藏夹" /></iframe>

18. 流新闻媒体:<video>/<audio>/<object>/<embed>

新闻媒体也是较为繁杂的文件格式,解决起来较为不便。一般大家能够这样做:

  • 为视听新闻媒体出示相应的文字,包含相应的情景,例如演讲中的欢呼等有益有阅读文章者认知如今气氛的,都应当反映在演讲文字中。别的的依此类推。
  • 假如像交响乐这类不可以出示实际叙述的,能够开展简易的表明
  • 假如文字较长,不可以在当今网页页面展现,能够在新闻媒体后出示1个连接到相应取代文字的连接
  • 假如新闻媒体中有将会会引发癫痫发病的,应做相应的表明
<audio src="mozart.mp4">莫扎特39号交响曲</audio>

19. 网页页面题目:<title>

网页页面中1定要包括题目,而且每一个标识应当具备辨识性。例如付款宝中是这样反映的:

<title>联络我 -- 幸福快乐个人收藏夹</title>

20. 总结

好吧。就先写到这里了。WCAG 其实不只是这些简易的 HTML Tags 的用法,词义化的网页页面也并不是1两篇文章内容可以写完的。渐渐地来吧。从最多见的做起,培养好的习惯性。返回文章内容前面的那句话,难道说你忍心把网页页面写得这么难用吗?