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

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

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

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 379 回帖 • 2 关注
  • HTML

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

    93 引用 • 288 回帖 • 74 关注
  • 面试

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

    274 引用 • 1355 回帖 • 188 关注

赞助商 我要投放

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • 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>,标题无所谓。

请输入回帖内容 ...