Sym - 一个用 Java 实现的现代化社区平台 • 源码 • 注册

Pipe - 小而美的开源博客平台 • 体验 • 皮肤 Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载  Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

简单描述 HTML5 语义元素中 `<header>`、`<article>`、`<section>`、`<footer>` 的正确用法

2018-12-17

回答

<header>:可在段落(<body><section> 等)中使用,用来介绍或导航该段落的相关内容。如:标题、作者姓名、发布日期和时间、目录和其他导航信息。

<article>:是一个独立的元素。能够在逻辑上独立于页面的其他内容而存在,单独创建时可保证内容的完整性。如:博客中完整的文章或新闻中的报道。

<section>:是一个较为灵活的容器,可用于存放拥有一个主题的内容。如:一个专题组或文档大纲。

<footer>:一般出现在段落的末尾,用于存放有关这个段落的附加信息。如:作者姓名、版权信息和此段落中典型示例的相关链接。

加分回答

非语义元素有 <div><span>,其他语义元素还有以下等:

语义元素 标签
<aside> 定义页面内容以外的内容
<details> 定义用户能够查看或隐藏的额外细节
<figcaption> 定义 <figure> 元素的标题
<figure> 规定自包含内容,比如图示、图表、照片、代码清单等
<main> 规定文档的主内容
<mark> 定义重要的或强调的文本
<nav> 定义导航链接
<summary> 定义 <details> 元素的可见标题
<time> 定义日期 / 时间
<table> 定义表格
<form> 定义表单
<img> 定义图片

返回总目录

每天 30 秒


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

10 评论
Tanken • 2018-12-20
回复 删除

V 姐,我想问一下另一个 “header” 标题的用法,我发现网站标题是 h1,文章标题是h2,那么文章内容的最高级标题应该是h1还是h3

Vanessa • 2018-12-20
回复 删除

根据用户的输入进行展现,然后文章内容放入 article 标签中。

88250 • 2018-12-20
回复 删除

我一般用 <h2>

Tanken • 2018-12-20
回复 删除

我看你的文章内容标题的最高级别一般都是 h3,比如本文的 回答加分回答返回总目录 都是 h3

Tanken • 2018-12-20
回复 删除

其实问这个问题的目的就是想确定一下,文章内容标题跟文章本身标题的层级关系对 SEO 或者其他地方有没有影响,内容标题需不需要比文章标题的级别低,如果没有影响的话当然就看个人习惯了

Vanessa • 2018-12-20
回复 删除

我这个只有一个层级,层级多的话有时候会用 h2,一般很少用 h1

Tanken • 2018-12-20
回复 删除

哦哦,好的,了解

88250 • 2018-12-20
回复 删除

对 SEO 可能有一定影响,我也不确定,SEO 是门玄学。可以肯定的是,h1 对渲染效果不好,为了读者考虑应该慎用。

Tanken • 2018-12-20
回复 删除

哈哈哈,玄学厉害了。那我以后文章内容里面不用 h1

wizardforcel • 2018-12-20
回复 删除

正文里面最讨厌放<h1>,标题无所谓。