web标准与HTML语义化

说来惭愧，学习前端已经有了一段时间，但对最基本也是极其重要的一些网站设计的基础思想都不太清楚。最近写项目发现了很多自己的不足，特此写一些文章来记录自己最近看书了解的一些知识与感悟。

Web标准-结构、样式和行为的分离

  Web标准是由一系列的标准组合而成，其核心思想就是将网页的结构、样式和行为分离开来，它可以分为三大类：结构部分、样式部分和行为部分。结构部分主要包括XML标准、XHTML标准；样式标准主要是指CSS标准；行为标准主要包括DOM标准和ECMAScript标准。

  其中每个部分都有一些详细的应该遵守的标准。这里就不意义细说。

  Web标准是一套理论性的指导思想，它的最终目的是让代码更易于维护，在实现结构、样式和行为分离的基础上，还要做到：精简、重用、有序。精简可以使文件减小，有利于客户端快速下载；重用可以使代码更易于精简，同时有利于提升开发速度；有序可以让我们更清晰的组织代码，使代码易于维护，有了效应对变化。

HTML的语义化

1. 什么是HTML语义化

  HTML：超文本标记语言，负责网页的结构。什么是网页的结构呢？通俗的说，就是告诉你：“这是一个一级标题或二级标题”，“这是一个段落”，“这是头部”，“这是一个导航栏”，并不会告诉你：“这是红色的”，“这个有多么宽，多么高”。这就是简单的HTML语义化：表现网页的结构。语义化的HTML元素指的是那些使用最恰当的HTML进行标记的内容，在标记构成中并不关心内容显示。语义化的HTML是构建有效网站的基石。

2. 为什么要语义化

1. 通常语义化HTML会使代码变的更少，使页面加载更快。
2. 语义化HTML会使HTML结构变的清晰，有利于维护代码和添加样式。
3. 提升网页的可访问性和交互操作性（无障碍访问）

4. 提升搜索引擎优化(SEO)的效果

   1> 语义化的HTML元素标签通常带有一定样式，这些样式一定程度减少了我们的CSS工作量。虽然这并不是我们语义化HTML的目的。
   2> 用不同的标签表示不同种类的元素，可以使我们可以轻松统一特定元素的样式。如改变段落的文字大小，我们就可以直接通过更改p标签的样式来实现。
   3> 万维网的发明者曾经说过一句著名的话：“万维网的力量在于其普适性。让包括残障人士在内的所有人都可以访问万维网，是极为重要的一点。”HTML只是文本，不同用户获取的方式可能不同。例如，视力正常的人可以直接查看内容。而视力受损的人可能就需要屏幕阅读器。而屏幕阅读器有时会将周围HTML元素的类型读出来，让用户了解上下文；而且屏幕阅读器会重点识别标题，并朗读出来来让用户确定感兴趣内容。由此可见，对残障人士来说，好的语义产生多么大的影响。
   4> 搜索引擎优化（SEO）效果也会得到改善，也就是说网页在搜索引擎中的排名会靠前。例如搜索引擎爬虫会比较重视由h1-h6标记的标题。如果标题中内容与搜索内容相关度高对排名就会有良性影响。

如何确定你的标签是否语义化良好？

  判断网页标签语义化是否良好的一个简单方法是：去掉样式，看网页结构是否组织良好有序，是否仍然有好的可读性。语义良好的网页去掉样式后结构仍然是比较清晰的。尤其是在图片较少的网页中。

一些简单的语义化举例

标题和内容

完成如下效果：

方案一

<div class="main">
     <div class="h2">标签的语义<a href="#">更多</a></div>
     <div class="p">段落1内容<span class="strong">强调内容</span></div>
     <div class="p">段落2内容</div>
</div>

  上述代码添加CSS样式可以达到效果，但用的只是向div,span这样的无语义标签，我们从标签上看不出结构这样显然是不行的，我们需要用代码清晰表现出：“哪是标题”，“哪是内容”。我们改进一下。

方案二

<div class="main">
    <h2>标签的语义 <a href="#">更多</a></h2>
    <p>段落一的各种内容.....<strong>强调的内容</strong></p>
    <p>段落二的内容。。。段落二的内容。。。</p>
</div>

  方案二比方案一大有改进，从标签可以分清哪是标题哪是内容，也能看到哪被强调，但仔细看有a链接在h2标签中，虽然它们是在同一行，但a链接并不是属于标题！而且还是有无语义标签，所以我们在进行修改

方案三

<main>
    <header class="title">
        <h2>标签的语义化</h2>
        <a href="#">更多</a>
    </header>
    <article class="content">
        <p>段落一的各种内容.....<strong>强调的内容</strong></p>
        <p>段落二的内容。。。</p>
    </article>
</main>

  方案三又有一些进步，利用HTML5定义的新标签是语义化更加完美，写到这里基本上也就可以了，但其实我们还可以利用ARIA(无障碍网页倡议)更加使代码完美。更加具有可读性。

方案四

<main role="main">
    <header class="title"  role="heading">
        <h2>标签的语义化</h2>
        <a href="#">更多</a>
    </header>
    <article class="content" role="contentinfo">
        <p>段落一的各种内容.....<strong>强调的内容</strong></p>
        <p>段落二的内容。。。</p>
    </article>
</main>

  现在可以看到标签中多了一些role属性，那是ARIA中定义的地标角色定义它们可以使屏幕阅读器更好的工作。当然并不是使用div这些标签就是不重视语义化，有些时候因为样式的需求必须使用这些无语义标签，这时我们就应该大胆使用它们。但能少用尽量少用。

结语

  以上就是我对web标准与HTML语义化的一些理解。上面举的例子只是语义化的很小的一部分，自己也正在探索中。感谢各位阅读。如果有误敬请指正。