包含标题的主（html标签）

Question

我很困惑。我读到了关于 main 的不同意见。第一个表示 main（因为它是主要部分）可以包含页眉和页脚作为直接子项。

<main>
    <header></header>
    <section>for the content</section> 
</main>

其他人说 main 不能包含标题作为直接子项，而是使用文章或部分作为父项。所以结果是：

<main>
    <article>
        <header></header>
        <section>for the content</section>
    </article>
</main>

目前我有这个布局，但我很困惑是否有必要添加一篇文章或一个部分来包装标题和内容：

Answer 1

两种变体均可。做你更喜欢的事情，我喜欢第一个变体。

我不确定你的作品的格式。如果是理论使用：MDN Library

如果实用，请确保它有效且可读。

不要像您对标签那样担心。每个标签通常毫无价值，只有浏览器才描述标签。如果您愿意 - 您甚至可以创建自己的标签。

例如：

<style>
  main-header{display: block;}
  heading-large{display:inline; font: 700 1.5em system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; color: #111; margin: 0; padding: 0;}
</style>

<main-header>

  <heading-large>
    It is working
  </heading-large>

</main-header>

但是你需要用CSS来描述它，并且在经历过程中你会需要解决更多的问题，但它们对于非公司项目来说是痛苦的。

main-header{display: block;}
heading-large{display:inline; font: 700 1.5em system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; color: #111; margin: 0; padding: 0;}

<main-header>

  <heading-large>
    It is working
  </heading-large>

</main-header>

Answer 2

好吧，经过更多研究，使用带有 header 的 main 作为直接子项似乎是可以的。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main

如果我理解这一点， main 可以是任何流内容的父级。 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#flow_content

Answer 3

根据这些文档，

<main>

可以包含 self

<header>

，就像

<article>

一样。但是

<header>

的

<main>

应该与页面

<header>

的

<body>

分开/独立：

当上下文是
```
<header>
```
元素时，
```
<body>
```
元素定义横幅地标。当 HTML 标头元素是
```
<article>
```
、
```
<aside>
```
、<main>
、
```
<nav>
```
或
```
<section>
```
元素的后代时，不会将其视为横幅地标。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header#accessibility_concerns
当页面的主要内容（即不包括页脚、页眉、导航块和侧边栏）都是一个独立的组合时，该内容可以用一篇文章来标记，但在这种情况下在技术上是多余的（因为不言而喻，该页面是一个单一的组合，因为它是一个单一的文档）。

附注对您所写内容的唯一评论是“主要部分（因为它是主要部分）”。

<main>

元素不是像

<article>

或

<section>

那样的分段元素。

<main>

HTML 元素代表文档的主要内容。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main

包含标题的主（html标签）

问题描述投票：0回答：3

3个回答

最新问题

包含标题的主（html标签）

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3