HTML5技术

web语义化,从松散到实战 - 怪诞咖啡

字号+ 作者:H5之家 来源:H5之家 2017-11-14 13:00 我要评论( )

GitHub: web语义化,从松散到实战 在这篇文章之前,我放弃了很多次,写关于语义化方面的文章;甚至在这篇文章之前我还删除了一篇已经总结好的关于语义方面的blog之所以放弃和删除是因为web语义实在是太广大,太不好掌握了,每当下笔的时候总有种无从下手的

GitHub:

web语义化,从松散到实战

在这篇文章之前,我放弃了很多次,写关于语义化方面的文章;甚至在这篇文章之前我还删除了一篇已经总结好的关于语义方面的blog之所以放弃和删除是因为web语义实在是太广大,太不好掌握了,每当下笔的时候总有种无从下手的感觉,觉得什么都重要,追求大而全,自己反而不知该如何总结是好只到我经历了多次的尝试和深入思考,总结出我真正想要的关于语义化方面的blog

我想要的语义化blog:

目录:

  • web语义化,从松散到实战
  • HTML5语义化兼容 
  • 语义化实战
  • 简化版语义结构图 
  • 最全面的语义结构理解图 
  • 关于站点的标题结构
  • 一个页面中可以有多个一级标题吗?这样做到底好不好? 
  • 什么是web语义化?

    其实简单说来就是让机器可以读懂内容。

    HTML在刚开始设计出来的时候就是带有一定的「语义」的,包括段落、表格、图片、标题等等,但这些更多地只是方便浏览器等UA对它们作合适的处理。但逐渐地,机器也要借助HTML提供的语义以及自然语言处理的手段来「读懂」它们从网上获取的HTML文档,但它们无法读懂例如「红色的文字」或者是深度嵌套的表格布局中内容的含义,因为太多已有的内容都是专门为了可视化的浏览器设计的。!

    语义(Semantic)的概念:“语义可以简单地看作是数据所对应的现实世界中的事物所代表的概念的含义,以及这些含义之间的关 系,是数据在某个领域上的解释和逻辑表示。”web语义化可以简单的理解为:用特定的语言来定义特定的事物。

    为什么要语义化?

    人可以通过视觉的划分判断内容的语义,搜索引擎看到的只是代码。搜索引擎只能通过标签来判断内容的语义。因为页面的很大一部分流量是来自搜索引擎的,要使页面尽可能地对搜索引擎友好,所以就要尽可能地使标签语义化。

    SEO也就是Search Engine Optimization,搜索引擎优化指通过站内优化比如网站结构调整、网站内容建设、网站代码优化等以及站外优化,比如网站站外推广、网站品牌建设等,使网站满足搜索引擎收录排名需求,在搜索引擎中提高关键词排名,从而吸引精准用户进入网站,获得免费流量,产生直接销售或品牌推广。

    重要的语义元素

    文档元数据:元数据(Metadata)含有页面的相关信息,包括样式、脚本及数据,能帮助一些软件 (如搜索引擎, 浏览器等等)更好地运用和渲染页面。对于样式和脚本的元数据,可以直接在网页里定义,也可以链接到包含相关信息的外部文件。

    内容分区(结构语义元素)

    内容分区元素允许你将文档内容从逻辑上进行组织划分。使用包括页眉(header)、页脚(footer)、导航(nav)和标题(h1~h6)等分区元素,来为页面内容创建明确的大纲,以便区分各个章节的内容。

    元素(HTML标签)

    描述

    <address>

    为页面主信息元素提供联系信息,即地址信息,这个地址信息适合主信息有关的;和主内容无关的地址信息使用 <p>

    <article>

    表示文档、页面、应用或网站中的独立结构,其意在成为可独立分配的或可复用的结构;独立模块用 <article> 进行包裹,而不是 <div>

    <aside>

    表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者嵌入内容。例如相关的广告、笔者的传记、web 应用程序、个人资料信息,或在博客上的相关链接

    <footer>

    表示最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息

    <h1–h6>

    标题元素拥有六个不同的级别,<h1> 是最高级的,而 <h6> 则是最低的级别;如果有一个普通的标题,它本身不包含任何特殊的内容,那使用带编号的标题元素(即<h1-h6>)就可以了,即 <h1>标题</h1>

    <hgroup>

    表示增强型的标题,如果标题除了主标题,还有一个副标题,那可以把这两个标题包装在一个<hgroup>元素中,里面只能包含标题元素(即<h1-h6>),不能有其它元素,即 <hgroup><h1>主标题</h1><h2>副标题</h2></hgroup>

    <header>

    表示增强型的标题,如果文章开头的内容很多---除了主标题之外,还有其他内容(如:内容摘要、发表日期、作者署名、图片或小标题链接等),那就应该把它们都放在一个 <header> 元素中,即 <header><h1>主标题</h1><p>作者:神奇的HTML</p></header> 或者 <header><hgroup><h1>主标题</h1><h2>副标题</h2></hgroup><p>作者:神奇的HTML</p></header>

    <nav>

    描绘一个含有多个超链接的区域,这个区域包含转到其他页面,或者页面内部其他部分的链接列表。<nav> 只用来将一些热门的链接放入导航栏;不热门的链接或不常用的链接应该放在 <footer> 中,一个网页可以有多个 <nav>

    <section>

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • 《移动Web前端高效开发实战》笔记4--打造单页应用SPA - 更爱Web-APP

      《移动Web前端高效开发实战》笔记4--打造单页应用SPA - 更爱Web-APP

      2017-10-12 09:00

    • 第9期Unity User Group Beijing图文报道:《Unity实战经验分享》 - 慕容小匹夫

      第9期Unity User Group Beijing图文报道:《Unity实战经验分享》 -

      2017-10-11 17:00

    • 《移动Web前端高效开发实战》笔记3--代码检查任务 - 更爱Web-APP

      《移动Web前端高效开发实战》笔记3--代码检查任务 - 更爱Web-APP

      2017-09-30 18:00

    • 《移动Web前端高效开发实战》笔记1——静态布局在移动端上的自适应 - 更爱Web-APP

      《移动Web前端高效开发实战》笔记1——静态布局在移动端上的自适应 -

      2017-09-30 11:00

    网友点评
    b