HTML5标签(语义化)

HTML语义化是什么?

HTML语义化是指根据内容的结构化,选择合适的标签。举个例子:之前所有的都用div, span等标签实现页面结构,而这些标签都没有实际的意义,

而新的HTML5标签<header> <footer> <nav> <section> <article> <aside> 等这些标签的出现与使用,让人一目了然的知道页面结构是什么样的,哪些内容是主题部分,这就是HTML语义化的好处。

语义化的好处:

1. 有利于SEO,有利于爬虫抓取有效的信息(爬虫是依赖于标签来确定上下文各个关键词的权重,爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.)

2. 在没有css或者css缺失的情况下,也能呈现较好的内容结构和代码结构

3.屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页.(例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音.)

4. 方便各种不同设备的解析

5. 有利于团队代码的开发与维护

HTML5标签:

header通常是放于页面头部,相关的还有<hgroup>

1<header> 2 <hgroup> 3 <h1>网站标题</h1> 4 <h2>网站副标题</h2> 5 </hgroup> 6</header>

footer通常位于页面底部,放版权信息和相关链接等

1<footer> 2 CopyRight@ 3</footer>

nav主要是页面导航区

1<nav> 2 <ul> 3 <li>HTML 5</li> 4 <li>CSS3</li> 5 <li>JavaScript</li> 6 </ul> 7</nav>

aside用于主题article的附属信息

1<article> 2 <p>内容</p> 3 <aside> 4 <h1>侧栏标题</h1> 5 <p>侧边栏内容</p> 6 </aside> 7</article>

其他的一些标签:

section表示节,段,部分,i表示斜体,em标签表示强调,显示为斜体,b标签表示的文本风格不同于正常的文本,没有表达任何特殊的重要性和相关性,strong标签表示加粗强调重要性

点赞
收藏

评论区

加载中...

相关推荐

MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1

文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s

Oracle 分组与拼接字符串同时使用

SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(

vue+element 表格formatter数据格式化并且插入html标签

前言   vue中element框架,其中表格组件,我既要行内数据格式化,又要插入html标签一贯思维,二者不可兼得也一、element表格数据格式化  !(https://oscimg.oschina.net/oscnet/3c43a1cb3cbdeb5b5ad58acb45a42612b00.p

手把手教你使用CanvasAPI打造一款拼图游戏

一、canvas简介1.canvas是HTML5提供的一种新标签,双标签;2.HTML5 canvas标签元素用于图形的绘制,通过脚本(通常是JavaScript)来完成;3.canvas标签只是图形容器,必须使用脚本来绘制图形;Canvas是一个矩形区域的画布,可以用JavaScript在上面绘画;二、案例目标我们今天的目标是使用HTML5

SEO和标签的语义化

做网站,我们都是需要考虑到标签语义化来提高SEO搜索排名的,那么我们就先来了解一下:w3c标准:html结构css样式js行为遵循的原则:先确定语义的HTML,再选合适的CSS。语义是否良好:当我们去掉CSS之后,网页结构依然组织有序,并且有良好的可读性。作用:语义化的网页的好处,最主要的就是对搜索引擎友好,有了

什么是HTML语义化?

原文链接:什么是语义化?简单了来说就是,当网页去掉CSS样式时,页面能呈现出来清晰的结构。语义化的核心作用:提升代码可读性,便于团队开发和维护。以下是语义化的HTML标签结构(部分语义化标签):假设我要编写一个这样的布局不使用语义化是这样的使用语义化是这样

HTML5标签(语义化) - HelloWorld