html语义化标签 例子,HTML5语义化

中添加文本来达到文本缩进的目的，这种做法即不符合语义化要求，同样也是非法的HTML实践。标签中只能有

标签。

~：该标签可以使文本字体变大，变粗，但如果文本并非是标题，应该使用CSS font-weight font-size；

总结：其实上面四个例子都是为了说明一点，用正确的标签做正确的事

语义化标签介绍

在HTML5出来之前，我们习惯于用div来表示页面的章节或者不同模块，但是div本身是没有语义的。但是现在，HTML5中加入了一些语义化标签，来更清晰的表达文档结构。

一个没有用div标签布局的页面

如上图，这个页面结构中摒弃了所有div元素，取而代之的是HTML5语义化标签(用哪些标签取决于你的设计目的)。

同样，W3C制定了这些语义化标签，不可能完全符合我们的设计目标。我们的目标是为了能够让开发者或是爬虫读懂各个模块的语义化内容，因此，div作为一个没有任何语义，仅仅是用来构建结构的元素，是最适合做容器的标签。

HTML5语义化标签：

定义文章的介绍信息：标题，logo，slogan；包裹目录部分，搜索框，一个nav或者任何相关的logo；

一个页面中的个数没有限制，可以为每个内容块添加一个header；

定义文章导航栏，链接等;

nav一般和ul、li配合做导航栏；

定义文章的主要内容

main标签在一份文档中是唯一的，其后代元素常常包括；

定义文档中可以脱离其他部分，一份独立的内容，通常带有标题，当article内嵌article时，里外层的内容应该是相关的，比如一篇微博和它的评论；

与article的差别在于，它是整体的一部分，或者是文章的一节，一般来说section也会带有标题；

侧边栏(与article并列存在)或者嵌入内容(在article内)，通常认为是独立拆分出来而不受整体影响的一部分，作为主要内容的附属信息，如索引，词条列表，或者页面及站点的附属信息，如广告，作者资料介绍等；

页脚，通常包含作者、版权信息或者相关链接等；

极易混淆的语义化标签

下面这两组元素，虽然样式上极其相似，但是其在语义上各有侧重，弄明白他们的区别，可以帮你摸清HTML5语义化的思路...

表示一段普通文本中，因为某种原因和正常文本不同，例如专业术语、外语短语或排版用的文字，其通常表现为斜体，他的出现不会改变语义；

根据W3C对i标签的定义：

Terms in languages different from the main text should be annotated with [lang] attributes in the XML namespace).

一段文本中如果有插入语言不同的专业术语，需要在标签中加上属性作为注解，例子如下：