Html5语义化

• HTML与CSS区别

  类型	做用	关注
  HTML	结构层	网页结构
  CSS	表示层	网页样式

因此使用html标签时，更应该关注的是标签的语义。样式则由CSS负责。

• 类比WORD文档

• 第一个标题是经过WORD文档中预设的标题样式实现的

  

• 第二个标题是经过修改字体样式实现的

  

  二者都能实现一样的样式效果，那么咱们为何要使用标题样式呢？ 由于预设的标题样式赋予的标题意义是经过字体样式修改方式没有的。 那标题意义的字体到底有什么做用呢？

  

  当我写好一篇文章想要经过写好的标题设置目录时，这时的标题必定要设置成WORD文档预设的标题。由于只有是真正意义上的标题才能设置成目录，而不是那些长得像标题的‘标题’。

  

  这就好像在网页的搜索引擎中，用heading的H1~H6设置的标题才能让它知道这是一个标题，从而获取网页主要内容。

• 什么是语义化?

就是用最恰当的标签来展现内容。验证语义化的方法就是去掉css样式，而后看看页面是否还有良好的可读性。相信你们在刚开始学作网页的时候都是使用大量的div和span。可是其实除了div不少更加合适的标签应该被咱们在网页中运用到。

• 语义化分类

• 结构语义化，可以让用户很好的阅读，即便没有css样式，也能呈现清晰的结构

  标签	内容
  <header>	页眉标签。能够有多个，不只仅是一个页面的头部，也能够是某个部分的头部。
  <nav>	导航标签。
  <main>	每一个页面只能使用一次，并且不能被其余标签包围
  <article>	文章标签 能够是一篇文章，一则用户提交的评论，一个交互式的小部件或小工具或其余独立的内容项，例如新闻内容，电影评论，案例研究，产品描述等等。
  <section>	独立内容区域。尽管定义为一个“通用”的区块，但不能与div混淆。语义上来讲，section标记的是页面中的特定的区域，而div则不传达任何语义。若是是出于样式的缘由要对内容添加一个容器，建议用div
  <aside>	附注栏标签。重要引述，侧栏，指向相关文章的一组连接（新闻网站）广告 相关产品列表
  <footer>	页脚标签。 相关文档的连接版权信息做者

• 标题语义化

1. h1~h6标题

   

   咱们关注的不该该是标题的样式，更重要的应该的标题的语义。

由于经过css样式进行渲染也能够实现一个看起来像标题的样式。可是对于浏览器来讲并不知道它是一个标题，只是一个被渲染过的文本。这就比如WORD文档中只有使用预设的标题才能设置目录同样，经过修改字体字号粗体样式修改的样式并不能转换成目录。

h1~h6重要性逐渐递减，在网页中h1的重要性仅次于<title></title>标题。从SEO角度考虑，搜索引擎在检索网页，首先要看的是<title>标题，经过标题来判断网页的主要内容。其次看的是<h1></h1>标题。被赋予的h1标题具备很高的权重。

• 图片语义化

<figure>
   <img src="/01.JPG" alt="xxx" title="xxx"/>
   <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>
复制代码

• 1.alt:用来替换图像，描述图片。

  • 为看不到文档图像的浏览者提供文字说明。好比盲人阅读器就是根据语义来渲染图片，让阅读器读给他们听，告诉他们这是什么图片。或者图片加载失败时也是显示alt属性内容。
  • 在语音输入的场景下，念出alt的内容，就会自动聚焦到那些图片。
  • 在搜索引擎中，根据alt理解图片信息
  • 移动设备中，好比数据漫游时，图片会被关闭，这时alt属性解释图片的意思。

• 2.title:对图片的说明以及额外的补充（区别于alt）。ie中鼠标通过图片时出现文字提示。

• 3.figcaption：图注文字

  

• 表单语义化

<fieldset>//包裹，给表单分组
            <legend>//说明表单用途
                表单组标题
            </legend>
                <label for="name">名字</label>//让说明文本和input标签关联起来
                <input type="text" name="">
        </fieldset>
    </form>
复制代码

效果图：

• 表格语义化

<table>
    <caption>表格标题</caption>
    <!--表头-->
    <thead>
    <tr>
        <th>表头单元格1</th>
        <th>表头单元格2</th>
    </tr>
    </thead>
    <!--表身-->
    <tbody>
    <tr>
        <td>标准单元格1</td>
        <td>标准单元格2</td>
    </tr>
    <tr>
        <td>标准单元格1</td>
        <td>标准单元格2</td>
    </tr>
    </tbody>
    <!--表脚-->
    <tfoot>
    <tr>
        <td>标准单元格1</td>
        <td>标准单元格2</td>
    </tr>
    </tfoot>
</table>
复制代码

标题用caption，表头用thread，主体用tbody，尾部用tfoot。表头通常与通常单元格分开，表头用th,单元格用td。虽然加上表头主体尾部的效果与没加是同样的，可是代码更具备逻辑性，结构更加清晰。html语义结构特别重要，尤为是在搜索引擎中。

• 总结：语义化优势

• 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
• 有利于SEO，搜索引擎根据标签来肯定上下文和各个关键字的权重。
• 方便其余设备解析，如盲人阅读器根据语义渲染网页
• 有利于开发和维护，语义化更具可读性，代码更好维护。