2018-12-17 回答 :可在段落(、 等)中使用,用来介绍或导航该段落的相关内容。如:标题、作者姓名、发布日期和时间、目录和其他导航信息。 :是一个独立的元素。能够在逻辑上独立于页面的其他内容而存在,单独创建时可保证内容的完整性。如:博客中完整的文章或新闻中的报道。 :是一个较为灵活的容器,可用于存放拥有一个主题 ..

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

本贴最后更新于 247 天前,其中的信息可能已经事过景迁

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 秒

  • 30Seconds

    精选的常见前端问题集,帮助您踏踏实实走好每一步。

    英文原文请看 30-seconds

    250 引用 • 268 回帖 • 1 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    84 引用 • 263 回帖 • 229 关注
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    219 引用 • 1183 回帖 • 361 关注
10 回帖   
请输入回帖内容...
  • iTanken  

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

    2 回复
  • Vanessa        

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

    1 回复
  • 88250      

    我一般用 <h2>

    1 回复
  • iTanken        

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

    1 回复
  • iTanken        

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

    1 回复
  • Vanessa        

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

    1 回复
  • iTanken        

    哦哦,好的,了解

  • 88250      

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

    1 回复
  • iTanken        

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

    1 回复
  • wizardforcel        

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

请输入回帖内容 ...