Html5语义化

彦颀欠
496 阅读5分钟

  • 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，搜索引擎根据标签来确定上下文和各个关键字的权重。
  • 方便其他设备解析，如盲人阅读器根据语义渲染网页
  • 有利于开发和维护，语义化更具可读性，代码更好维护。
avatar
文章
阅读
粉丝