如何处理HTML5中的标题 [英] How to handle headers in HTML5

问题描述

我需要将旧杂志的网站迁移到HTML5，并且我有一些语义问题。我已经创建了以下大纲来说明主要布局。 这里有一个小提琴。

 < div id =wrapper> 
< header> 
 
< / header> 
< nav> 
 
< / nav> 
< main> 
< p>< i>名称杂志< i>，1985,4，p。 12-14< / p为H. 
<文章> 
< header> 
< h1>标题< / h1> 
< p>副标题< / p> 
< / header> 
< figure> 
< img ...> 
< figcaption> 
标题。 
< / figcaption> 
< / figure> 
< p>文章第一段文字。< / p> 
< / article> 
< / main> 
< / div> 
  

在杂志文章的上面应该总是有一个描述，包括杂志的名称，年份，页面，就像我在文章元素之前的段落元素中那样。

第一个问题是：我应该把它放在文章标题中吗？如果是这样，将主要标签内的文章元素包裹起来会被认为是多余的？是否有一个语义上合适的标签来指定这种信息，这不是真的是文章的一部分，而是与它密切相关的？在原始杂志（和在html4网站上）属于一篇文章的图像有时与文章标题放在同一层，像这样（

 < main> =下一个小提琴 
< p>< i> Magazine< / i> ;, 1985,4，p。 12-14< / p为H. 
<文章> 
< figure> 
< img ...> 
< figcaption> 
标题。 
< / figcaption> 
< / figure> 
< header> 
< h1>标题< / h1> 
< p>副标题< / p> 
< / header> 
< p> ...< / p> 
< / article> 
< / main> 
  

在文章元素的顶部没有标题是否有意义？比在这种情况下将数字放在标题内更有意义？

这可以用CSS来修复（尽管我想保留图形元素上的浮点数），但偶尔我会发现一个变量满标题上方的宽度图像：小提琴3号这里如果可以争辩说，图像说明整篇文章，也许它可能是标题的一部分，就像今天大多数网页主标题的一部分一样。但在其他情况下，似乎我必须将属于该文章的内容粘贴到标题顶部。另一方面，既然它是一个语义元素，它应该清楚它是一个头，无论如何，即使它位于底部。

你会如何解决这些问题？

解决方案

我应该把它放在文章标题中吗？

是的。这是关于文章的元数据，而不是关于文档的内容，所以它应该是内部的文章。并且 header 是适当的元素（ footer 也可能是合适的，因为它们的差异没有严格定义;然而，我会在你的情况下使用 header ）。

如果是这样的话，那么
$ b

。 ，将文章元素包裹在主标签内会被认为是多余的？

没有指定 main ，消费者只能猜测（但肯定不知道）哪个被认为是页面的主要内容。那么，如果文章是 body 的唯一部分内容元素，情况就非常明显了（还有什么可以主要内容是？），但是，总会有消费者特别期待 main 以及 main 角色当使用 main 元素时隐式添加）。

标签来指定这种信息，这不是真正的文章的一部分，但与它密切相关？

如果它是元数据/关于这篇文章的内容（即，不是该部分的主要内容）， header 和 footer 是合适的。

如果内容与有关这篇文章，切片小节nt元素抛开 可能适用（it 取决于这种关系，如果它应该用作 article 的子项，它代表该文章或作为代表文档的 body 的子代）。

在文章元素的顶部是否有顶部标题？

是的。一个头不一定要在最上面，一个页脚不一定要在最下面。您甚至可以使用多个标头 / footer 元素。

I need to migrate a website for an old magazine to HTML5 and I have some semantic problems. I have created the following outline to illustrate the main layout. There's a fiddle here.

<div id="wrapper">
    <header>

    </header>
    <nav>

    </nav>
    <main>
        <p><i>Name of Magazine</i>, 1985, 4, p. 12-14</p>
        <article>
            <header>            
                <h1>Heading</h1>
                <p>Subheading</p>
            </header>
            <figure>
                <img ...>
                <figcaption>
                    Caption.
                </figcaption>
            </figure>
            <p>First paragraph of article text.</p>
        </article>
    </main>
</div>

Above the magazine article there should always be a description including the name of the magazine, year, issue, pages, like I have in the paragraph element before the article element.

The first questions would be: Should I put that inside the article header instead? If so, would it be considered redundant to wrap the article element inside main tags? And is there a semantically suitable tag to specify this kind of info that is not really a part of the article but something intimately related to it?

In the original magazine (and on the html4 website) an image belonging to an article is sometimes placed on the same level as the article headings, like this (see fiddle here):

<main>
    <p><i>Magazine</i>, 1985, 4, p. 12-14</p>
    <article>
        <figure>
            <img ...>
            <figcaption>
                Caption.
            </figcaption>
        </figure>
        <header>            
            <h1>Heading</h1>
            <p>Subheading</p>
        </header>
        <p>...</p>
    </article>
</main>

Does it make sense not to have the header at the top inside the article element? More sense than to put the figure inside the header in this case?

That may be possible to fix with CSS instead (although I'd like to keep the floats on the figure elements), but occasionally I even find a variant with a full-width image above the heading: Fiddle No. 3 here If it could be argued that the image illustrates the whole article, maybe it could be part of the header in the same way that a logo is part of the main header of most web pages today? But in other cases, it seems like I have to stick stuff that belongs to the article on top of the header. On the other hand, since it's a semantic element it should be clear that it's a header anyway, even if it's positioned at the bottom.

How would you solve these things?

解决方案

Should I put that inside the article header instead?

Yes. This is metadata about the article, not about the document, so it should be inside of article. And header is the appropriate element for this (footer might also be appropriate, as their differences aren’t strictly defined; however, I’d go with header in your case).

If so, would it be considered redundant to wrap the article element inside main tags?

No. Without specifying main, consumers could only guess (but wouldn’t know for sure) which is considered to be the main content of the page. Well, if the article is the only sectioning content element of body, the situation is pretty clear (what else could the main content be?), however, there might always be consumers that especially look for main, as well as the main role (which gets implicitly added when using the main element).

And is there a semantically suitable tag to specify this kind of info that is not really a part of the article but something intimately related to it?

If it’s metadata/content about this article (i.e., not the "main" content of that section), header and footer are appropriate.
If it’s content related to this article, the sectioning content element aside could be appropriate (it depends on the kind of relation if it should be used as child of article, which represents the article, or as child of body, which represents the document).

Does it make sense not to have the header at the top inside the article element?

Yes. A header doesn’t have to be at the top and a footer doesn’t have to be at the bottom. You can even have several header/footer elements for the same section.

这篇关于如何处理HTML5中的标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！