HTML5之语义化标签

时间 2019-12-13

标签 html5 html 语义标签栏目 HTML5 繁體版

原文原文链接

在HTML5以前采用HTML+CSS文档结构写法：css

ID选择器说明 id选择器——用于标识页面上特定元素(好比站点导航、页眉、页脚)并且必须惟一; 也能够用来标识持久结构性元素（如主导航、内容区域）html

class选择器说明 class类选择器——能够应用于页面任意多个元素，很是适合标识内容类型或其余类似的条目。浏览器

代码：ide

<body>
    <div id="header">...</div>
    <div id="nav">...</div>
    <div class="artical">
        <div class="section"></div>
    </div>
    <div id="side-bar">...</div>
    <div id="footer">...</div>
</body>

HTML5出现，解决上述问题，专门添加页眉、页脚、导航、文章内容等跟结构相关的结构元素标签模块化

HTML5结构代码字体

<body>
  <header>...</header>
  <nav>...</nav>
  <article>
     <section>
       ...
    </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>

咱们将对HTML5解构代码的标签作详细解释：优化

< title>：简短、描述性、惟一（提高搜索引擎排名）。
搜索引擎会将title做为判断页面主要内容的指标，有效的title应该包含几个与页面内容密切相关的关键字，建议将title核心内容放在前60个字符中。
<hn>：h1~h6分级标题，用于建立页面信息的层级关系。
对于搜索引擎而言，若是标题与搜索词匹配，这些标题就会被赋予很高的权重，尤为是h1。
<header>：具备引用或导航做用的解构元素，一般包括网站标志、主导航、全站连接以及搜索框。也适合对页面内部一组介绍性或导航性内容进行标记。
<nav>：元素表明页面的导航连接区域。用于定义页面的主要导航部分。譬如：侧边栏上目录，面包屑导航，搜索样式，或者下一篇上一篇文章。用在整个页面主要导航部分上，不合适就不要用nav元素。
<article>：当前页面或文章的附属信息，能够包含于当前页面或主要内容相关的引用、侧边栏、广告、导航条。
article能够嵌套article，只要里面的article与外面的是部分与总体的关系。
<section>：具备类似主题的一组内容，好比网站的主页能够分红介绍、新闻条目、联系信息等条块。元素表明文档中的“节”或“段”，“段”能够是指一篇文章里按照主题的分段；“节”能够是指一个页面里的分组。
若是只是为了添加样式，请用div！
<aside>：指定附注栏，包括引述、侧栏、指向文章的一组连接、广告、友情连接、相关产品列表等。
<footer>：做为其上层父级内容区块或根区块的脚注。一般包含脚注信息，如做者、相关连接或版权。网站

HTML5语义化标签优势

去掉或样式丢失的时候能让页面呈现清晰的结构

并非样式文件丢失后页面的样式会一直保存，而是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，依旧能够清晰地呈现页面。搜索引擎

屏幕阅读器（若是访客有视障）会彻底根据你的标记来“读”你的网页。

例如,若是你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音spa

搜索引擎的爬虫依赖标签肯定上下文和权重问题。

搜索引擎优化的目的是为了帮助搜索引擎爬虫更好地了解网页的信息和将网页更好地归类。搜索引擎爬虫不比视觉阅读器强多少，它须要更多的指引去肯定一个网页的结构和主题。好的语义化的HTML可以体现页面的结构。好比

（1）页面的title；

（2）标题hn（搜索引擎会给标题中的文字以更高的权重。您的网页关键字优化应该至少一次出如今h1中，并且相关的关键字在其余标题（hx）中。包含关键字的标题有助于搜索引擎优化）；

（3） img标签的alt属性（用来描述图片信息，该文本应该和图片文本信息一致，不然会失去更多的引擎排名值）；

（4） table（表格，使用表标题th做为表格的表头，使用thead、tbody和tfood适当划分表格，为表格提供一个caption，说明是什么信息在表格中。Caption和th最好放置关键字）；

（5） strong em b i 起到物理强调和逻辑强调的做用，搜索引擎会给这四个标签更高的权重。可是过量使用会形成损失重点。

你的页面是否对爬虫容易理解很是重要，由于爬虫很大程度上会忽略用于表现的标记，而只注重语义标记。所以，若是页面文件的标题被标记，而不是关键字被标记，那么这个页面在搜索结果的位置可能会比较靠后。除了提高易用性外，语义标记有利于正确使用CSS和JavaScript，由于其自己提供了许多“钩钩”来应用页面的样式与行为。SEO主要仍是靠你网站的内容和外部连接的。
移动设备可以更完美的展示网页（对css支持较弱的设备）

语义化标签为移动设备提供了渲染页面所需的信息，设备能够以有意义的方式来渲染网页。好比对于标题文字，手机能够加粗显示，而Pad能够以较大字体显示。不管哪一种方式均可以突出标题的文本信息。

便于团队开发和维护

在团队中你们都遵循W3C标准，能够减小不少差别化的东西，方便开发和维护，提升开发效率，甚至实现模块化开发。