web标签语义化的理解_web语义化是什么意思

时间: 2018-03-07阅读: 1122标签: 标签

web语义化是什么?

Web语义化,使用语义恰当的标签,可以让页面具有良好的结构,页面元素具有良好的含义,从而让人和机器都能快速理解。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息,从而可以读懂网页的内容,然后将收集汇总的信息进行分析,结果为人类所用;另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器(如果访客有视障)能够读懂内容。


为什么要语义化?

  • 有利于 seo

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

人可以通过视觉的划分判断内容的语义,而搜索引擎只能通过爬取网页标签等代码来判断内容的语义。得到搜索引擎的有效爬取,是提高网站流量的有效方法之一。要使页面尽可能地对搜索引擎友好,所以就要尽可能地使标签和内容语义化。

  • 在页面去掉或样式丢失的时候,能让页面呈现清晰的结构。html的一些标签,例如h1(粗体),strong(加粗),em(斜体),通过一些默认的样式,可以使页面即使在缺失css样式修饰时也能呈现清晰的结构。

  • 屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页。

  • 团队开发中,良好的语义化标签,可以减少很多差异化,减少成员间沟通成本,方便开发和后期维护,利于实现模块化开发。


web语义化的分类

web语义化应该是样式与结构分离的结果,重构中的语义化包含html标签语义化和css命名语义化,HTTP的语义化是针对HTTP协议来说。


html标签语义化

html为网页文档内容提供上下文结构和含义。对于html体系而言,Web语义化是指使用语义恰当的标签,使页面有良好的结构,让页面元素有含义,便于被浏览器、搜索引擎解析。通常我们所说的html应该是完全脱离表现信息的,其中的标签应该都是语义化地定义了文档的结构。

例如:
为了seo,我们会选择h1标签来突出标题,用strong标签来突出关键字,这其实就是语义化的体现。seo的原理其实是分析源码来体现或猜测网站要表达的内容。比如我们想表达某篇文章的标题, 我们或许会这样写:

<div class=”title”>文章的标题</div>

但是为了更好的讨好搜索引擎我们最好写成如下形式:

<h1>文章的标题</h1>

一些常用的标签元素有:

  • 本身无实在意义,组合其他html元素,常用于页面布局:div

  • 设置文本,填充段落:h1~h6, p, span, strong, em...

  • 表现列表:ul, li, ol, dl, dt, dd

  • 表单相关:form,input,select,button

  • 表格相关:table,thead,tbody,tfoot,th,tr,td

  • 用于图像显示:img, canvas

  • 打开链接,发送邮件,段落跳转:a

此外,meta Description/meta keywords等针对搜索引擎和更新频度的描述和关键词的meta标签也会用来实现网页的seo
【详细可以参考:w3schools.com:https://www.w3schools.com/tag... 】

html 规范其实一直在往语义化的方向上努力,许多元素、属性在设计的时候,就已经考虑了如何让各种用户代理甚至网络爬虫更好地理解 html 文档。html5 更是在之前规范的基础上,将所有表现层的语义描述都进行了修改或者删除,增加了不少可以表达更丰富语义的元素,也出现很多可以提到div元素的更具象的标签。

一个经典的页面结构如图:

  1. header区:

包含p h1~h6 hgroup等可以表示标题和副标题。例如:

<header>
  <hgroup>
    <h1>标题</h1>
    <h2>副标题</h2>
  </hgroup>
  <p> 文本或者图片</p>
</header>

2.Navigation区

nav标签专门为页面导航功能定义一块区域

<nav>
  <ul>
    <li><a href="#">主页</a></li>
    <li><a href="#">关于我们</a></li>

  </ul>
</nav>

3.Article 和 Section 区

Article包含页面的实际内容,包含 Web 内容的相关的组件区。

<article>
    <section>
      Content
    </section>
    <section>
      Content
    </section>
</article>
<section>
  <article>
      Content
  </article>
  <article>
      Content
  </article>
</section>

4.figure标记

包含图像、图表和照片。figure标记可以包含figcaption,figcaption表示图像对应的描述文字,与图片产生对应关系。

<figure>
  <img src="/figure.jpg" width="304" height="228" alt="Picture">
  <figcaption>Caption for the figure</figcaption>
</figure>

5.媒体元素

audio/video/source/embed

6.aside

包含一些补充性内容,可以被移除而不会影响文章或文章所在的区段或页面所传达的信息。

<aside>
  <h4>Disney in France</h4>
  <p>Besides Euro Disney, there is a Disneyland in California.</p>
</aside>

7.footer等

总之,HTML语义化是反对大篇幅使用无语义化的div+span+class,而鼓励使用HTML定义好的语义化标签。当然,如果需要兼容低版本的IE浏览器,比如说IE8以及以下,那就需要选择合适的兼容性的标签了。

css命名语义化

css语义就是class和ID命名的语义。class属性作为HTML与css衔接的纽带,其本意是用来描述元素内容的。指用易于理解的名称对html标签附加的class或id命名。如果说HTML语义化标签是给机器看的,那么css命名的语义化就是给人看的。良好的css命名方式减少沟通调试成本,易于理解。
css命名首先要满足W3C的命名规范和团队的命名规范。其次是高效和可重用性。
就好像.main/.sidebar会比.left_content/.right_content的class命名灵活性更好。

<!-- 以表现为中心 -->
<div class="lr margin10">
    <span>nickName:seg</span>
<div>

<!-- 以信息为中心 -->
<p class="user-info">
    <em>nickName:seg</em>
<p>


Http+URL语义化

url语义化,可以使得搜索引擎或者爬虫更好地理解当前url所在目录所需要表达的内容;而对于用户来说,通过url也可以判断上一级目录或者下一级目录想要表示的内容,可以提高用户体验。
例如我司的搜索品类的url:

https://mall.midea.com/index.php/category?id=10049&addr_code=440000,440100,440103
https://mall.midea.com/category?id=10049&addr_code=440000,440100,440103

这两个url指向的是同一个资源,但是显然第二个url对于用户和搜索引擎更加友好。
url语义化可以从以下标准来衡量:

  1. url简化,规范化。例如:url里的参数两个单词的连接用下划线_。

  2. 结构化,语义化。比如:category "品类"

  3. 采用技术无关的url:比如第一个链接中的index.php这种就不应该出现在用户侧的url里。

参考文档:
About HTML semantics and front-end architecture
HTML Element Reference
HTML语义化
IBM developerWorks®
url重构
search-engine-optimization-starter-guide-zh-cn
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/475

a标签中防止跳转的href=javascript:;、void(0);等都是什么意思

a标签的 href 属性用于指定超链接目标的 URL,href 属性的值可以是任何有效文档的相对或绝对 URL(路径),包括片段标识符和 JavaScript 代码段。javascript: 是表示在触发默认动作时,执行一段JavaScript代码,而 javascript:; 表示什么都不执行

HTML5的<progress>标签怎么用?

<progress> 标签表示任务的进度(进程),例:可定义完成多少工作,还有多少工作可以下载等等。该标签可与JavaScript结合使用,来显示任务的进度,创建动态的进度条。注释:<progress> 标签不适合用来表示度量衡(例如,磁盘空间使用情况或查询结果)。

什么是网页标签?

网页标签即HTML标签是网页浏览器识别符,是浏览器程序默认系统默认许可标签。HTML标签是HTML语言中最基本的单位,HTML标签是HTML(标准通用标记语言下的一个应用)最重要的组成部分。

HTML基础知识(块级标签,行内标签,行内块标签)

块级元素:独占一行,对宽高的属性值生效;如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽;行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高!

Html头部meta标签

meta元素有4个属性:name、http-equiv、content、charset.meta标签通过name属性来表述页面文档的元信息,通过http-equiv属性设置http请求指令,通过charset设置页面的字符编码

HTML a标签打开新标签页避免出现安全漏洞,请使用“noopener”

这里我们有一个指向恶意网站的 href 属性,并以 _blank 属性为 target,使其在新标签页中打开。该流程看起来如此简单明了,用户在这里可能面临的安全风险是什么?

head里两个重要标签base和meta

<base>我们并不常用的一个标签,但是一旦用得不当会带来灾难性的影响。meta标签日常开发中我们用得更多的是meta标签,分为3类:具有charset属性的meta 、带有http-equiv 属性的 meta

XPath当匹配标签判断text()判断内容失败的问题及解决

在爬取网站的时候我使用XPath去抓取网页上的内容,XPath表达式来精准获取需要的标签内容。当我对如下一段html代码编写XPath表达式抓取的时候出现了问题,代码如下。片名两个字中间有七个空格,我想要获取<dd></dd>中的内容。

在html中创建自定义标签

Web Components 标准非常重要的一个特性是,它使开发者能够将HTML页面的功能封装为 custom elements(自定义标签),本篇介绍使用 CustomElementRegistry 来管理我们的自定义标签

如何将 JavaScript 代码添加到网页中,以及 <script> 标签的属性

本教程的这一部分内容是关于 JavaScript 语言本身的。但是,我们需要一个工作环境来运行我们的脚本,由于本教程是在线的,所以浏览器是一个不错的选择。我们会尽可能少地使用浏览器特定的命令(比如 alert)

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广