Web语义化就是html告诉我们也告诉机器这一块是什么内容，例如：“这行是一个标题，这几行组成一个段落，这是一个列表，那是一个链接。”
 
Web语义化有三个阶段：

1、h1~h6、thead、ul、ol等HTML标签。这些标签用于在Web页面中组织对应的内容，如网页标题、表头、无序、有序列表，以达到更方便的协作及传播互联网内容。搜索引擎很好的利用了这些语义化标签抓取内容。

2、随着Web的发展，起初定义的HTML语义化标签，不足以实现对Web页面各个部分的功能或位置描述，比如我们用div来表示页面章节。所以Web前端人员利用HTML标签的id和class属性，进一步对HTML标签进行描述，如对页脚HTML标签添加如id="footer"或者class="footer"的属性（值）。

3、W3C组织意识到了之前HTML版本的不足，推出的HTML5进一步推进了Web语义化发展，采用了诸如footer、section等语义化标签，弥补了采用id="footer"或者class="footer"形式的不足，以更好的推动Web的发展。

HTML5新增语义化标签例举：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>h5新增的web语义化标签</title>

 </head>

 <body>

     <header>

         这是头部

     </header>

     <nav>

         这是导航

     </nav>

     <article>

         这是正文

         <section>

             这是正文的段落1

         </section>

         <section>

             这是正文的段落2

         </section>

     </article>

     <aside>

         这是侧栏

         <address>

             这是地址

         </address>

     </aside>

     <footer>

         这是页脚

     </footer>

 </body>

 </html>

web语义化与h5新增标签的更多相关文章

  1. 快速理解web语义化

    什么是Web语义化 Web语义化是指使用恰当语义的html标签.class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容.语义化的web页面一方面可以让机器在更少的人类干预 ...

  2. 【HTML】web语义化

    一.解决的问题 & 评价标准 web语义化能解决如下问题: 1. 页面样式丢失 2. 有颜色或其他障碍的访客也能读懂页面 3. 移动设备访问页面 4. 程序(如爬虫)理解页面(换句话说SEO优 ...

  3. web语义化之SEO和ARIA

    在快速理解web语义化的时候,只知道web语义化有利于SEO和便于屏幕阅读器阅读,但并不知道它是如何有利于SEO和便于阅读器阅读的,带着这个疑问,进行了一番探索总结. SEO 什么是SEO? SEO( ...

  4. web语义化理解

    含义: Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解. 为什么要web语义化?如今互联网都到了web2.0的时代了,HTML语言在不断的进化并发 ...

  5. 浅谈web语义化

    在前端的编程道路上,是否听过html的结构语义化? 是否觉得自己前端嘛,只要做出炫酷的效果,编写出牛逼的JavaScript代码就ok啦.div+css所向无敌,干嘛要用其他标签呢. 是啊,正如上面所 ...

  6. Web语义化

    在昨天和做SEO的同学聊了一会儿,当然我没有学会搜索引擎优化的技巧和知识,但在此之前一直对HTML5中header.footer.sidebar.article等标签嗤之以鼻,觉得这个和div没有什么 ...

  7. 前端基础：web语义化

    web语义化 一.什么是web语义化? web语义化包含两方面,一是html标签语义化,简单来说就是要用合适的标签来表述适当的内容,标题用<h1>~~<h6>标签,段落用< ...

  8. AmazonOrder xml web语义化

    XML Processing Modules — Python 3.7.1 documentation https://docs.python.org/3.7/library/xml.html#xml ...

  9. web语义化，从松散到实战

    GitHub:http://liu12fei08fei.github.io/html/4semantic.html web语义化,从松散到实战 在这篇文章之前,我放弃了很多次,写关于语义化方面的文章: ...

随机推荐

  1. block的语法

    主要内容: 1. 开始使用block(Getting Started with Blocks) 2. block概念综述(Conceptual Overview) 3. 声明和创建block(Decl ...

  2. PAT (Basic Level) Practise：1038. 统计同成绩学生

    [题目链接] 本题要求读入N名学生的成绩,将获得某一给定分数的学生人数输出. 输入格式: 输入在第1行给出不超过105的正整数N,即学生总人数.随后1行给出N名学生的百分制整数成绩,中间以空格分隔.最 ...

  3. python thread 多线程

    thread 模块在python3中改为_thread,网上的各种帖子都说不建议新手使用thread,好吃不好吃总得尝尝看. import _thread def print_num(): for i ...

  4. HDU-2222 Keywords Search（AC自动机--模板题）

    题目大意:统计一共出现了多少次模板串. 题目分析:AC自动机的模板题.不过这题有坑,相同的模板串不能只算一次. 代码如下: # include<iostream> # include< ...

  5. [dijkstra+heap优化] 模板

    var n,m,s,i,j,x,y,z,l,tot :longint; pre,last,other,len :..] of longint; heap,d,pl :Array[..] of long ...

  6. poj3592 强连通+记忆化搜索

    题意:有一片 n*m 的矿地,每一格有矿.或这传送门.或者挡路岩石.除了岩石不能走以外,其他的格子都能够向右或向下走,走到一个非岩石的格子.对于每一个矿点,经过它就能得到它的所有矿石,而对于每一个传送 ...

  7. linux服务之tuned

    RHEL/CentOS 在 6.3 版本以后引入了一套新的系统调优工具 tuned/tuned-adm,其中 tuned 是服务端程序,用来监控和收集系统各个组件的数据,并依据数据提供的信息动态调整系 ...

  8. Vs程序自动获取windows7/vista系统管理员权限

    1.在工程中加入MANIFEST资源(C#) 打开VS2005.VS2008.VS2010工程,查看在Properties下是否有app.manifest这个文件:如没有,按如下方式创建:鼠标右击工程 ...

  9. 保持const和non-const函数代码的一致

    在用C++进行面向对象编程的时候,有时需要在一个类里包含两个代码相似的函数,而它们之间的唯一区别是,一个为const类型,一个是non-const类型. 此时如果将相同的代码写在两个函数中,则严重违反 ...

  10. 2013年第四届蓝桥杯C/C++程序设计本科B组决赛

    1.猜灯谜(枚举) 2.连续奇数和(等差数列) 3.空白格式化(去除空格) 4.高僧斗法(阶梯nim) 5.格子刷油漆(dp) 6.农场阳光 1.猜灯谜 A 村的元宵节灯会上有一迷题:请猜谜 * 请猜 ...