html网络结构设计,html5网站设计结构布局常用标签

在设计HTML5网站过程中,对网站结构标签的规范化是非常重要的事,规范的标签能够让搜索引擎以及工程师更加迅速理解当前网页的布局和重心。那么HTML5网站设计常用的标签有哪些呢?

常用HTML5结构组合举例:

header

nav

section

article

figure

figcaption

aside

footer

一般首页结构,如下图所示:

4660226ec4c0d093f9b5082e491e87d5.png

其中和最为相似,而且和div标签貌似也有很大相似之处。

但看似相似,并不是真的相似,这些标签是为了布局而生的,自然有它们更精确的语义定位,或者说他们更将强调Html的语义。

DIV

这个标签一直是我们见得最多、用得最多的标签。

它本身无任何语义,用作布局以及样式化标签。

Section

与div相似,但它有更进一步的语义。

section用作一段有专题性的内容,一般在它里面会带有标题。 section典型的应用场景应该是文章的章节、标签对话框中的标签页、或者论文中有编号的部分。

Article

article是一个特殊的section标签,它比section具有更明确的语义, 它代表一个独立的、完整的相关内容块。

div、section、article,语义是从无到有,逐渐增强的。

div无任何语义,仅仅用作样式化或者脚本化的标签,对于一段主题性的内容,则就适用section,而假如这段内容可以脱离上下文,作为完整的独立存在的一段内容,则就适用 article。

原则上来说,能使用article的时候,也是可以使用section的,但是实际上,假如使用article更合适,那么就不要使用section。

转载请注明:木子网络 » http://www.muziwl.com

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值
>