没有主< header>的HTML 5页面? [英] HTML 5 Page without main <header>?

查看:122
本文介绍了没有主< header>的HTML 5页面?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

难道没有< header>



我有这个基本结构,但是我考虑在主体开始和内容之间包装一个标题,因为标题还附加了这个漂亮的shema.org标记。好主意?



仅仅是因为有时标题不在那里,但是navbars实际上包含品牌名称,并且是它们的标题。



如果我这样做,应该如何标记< header> 现在是什么?标题内的部分不正确?只是一个正常的< div> 我猜。

 < body> ; 

< div class =nav1>< h1>品牌名称< / h1>< nav> ...< / nav>< / div>

< header>< h1>品牌名称< / h1>< p>标语< / p>< / header> <! - 有时候不存在 - >

< div class =nav2>< h1>品牌名称< / h1>< nav> ...< / nav>< / div>

< div>内容...

 < body> 
< header itemtype =http://schema.org/WPHeader...>
< div class =nav1>< h1> brandname< / h1>< nav> ...< / nav>< / div>

< div>< h1>品牌名称< / h1>< p>标语< / p>< / div> <! - 有时候不存在 - >

< div class =nav2>< h1> brandname< / h1>< nav> ...< / nav>< / div>
< / header>
< div>内容...

多个标头无效或?我正在用这种方式将< header> 没有任何CSS样式用于语义标记。我可以想到这样做的样式障碍,所以没有100%满意。



或者这是有效的。

 <身体GT; 

< header class =nav1>< h1>品牌名称< / h1>< nav> ...< / nav>< / header>

< header>< h1>品牌名称< / h1>< p>标语< / p>< / header> <! - 有时候不存在 - >

< header class =nav2>< h1>品牌名称< / h1>< nav> ...< / nav>< / header>

< div>内容...

//刚阅读<一个href =https://stackoverflow.com/questions/4837269/html5-using-header-or-footer-tag-twice> html5:使用页眉或页脚标签两次?这看起来像我坚持第二种解决方案,因为我不太喜欢没有标题的想法



不要害怕回答;)

解决方案

决定每个切分根元素(例如, body )和每个切分内容元素(例如 article )如果它包含适用于标题的内容。规格定义它是介绍性内容,并给出以下示例:


  • 介绍性或导航性帮助

  • 标题( h1 - h6 元素)(不需要)
  • 内容,搜索表单或任何相关徽标



如果有此类内容,请使用标题元素。如果该分区根目录/内容元素中的内容分散,请使用多个标题元素。



请记住总是适用于最接近的祖先切片内容或切片根元素:

 <身体GT; 
< header> <! - 此标题适用于整个页面 - > < /报头>

< article>
< header> <! - 此标题用于整个文章元素 - > < /报头>

< div>
< header> <! - 此标题也适用于整个文章元素(不仅适用于div元素!) - >< / header>
< / div>

< section>
< header> <! - 此标题仅用于本文的部分元素 - > < /报头>
< / section>

< / article>

< figure>
< header> <! - 此标题仅用于图元素 - > < /报头>
< / figure>

< strong>
< header> <! - 但是这个标题也适用于整个页面(而不是仅适用于强元素!) - > < /报头>
< / strong>

< / body>


Is it bad to nave no <header>?

I have this basic structure but I am thinking about wrapping a header arround everything between the body start and the content because the header has also this nice shema.org markup attached. Good Idea?

Just because sometimes the header is not there but the navbars actually contain the brandname and are sort of headers themseves.

if I do this how should I markup whats the <header> right now? A section inside a header is not valid right? Just a normal <div> I guess.

<body>

<div class="nav1"><h1>brandname</h1><nav>...</nav></div>

<header><h1>brandname</h1><p>slogan</p></header> <!-- sometimes this is not there -->

<div class="nav2"><h1>brandname</h1><nav>...</nav></div>

<div>content ...

To this

<body>
<header itemtype="http://schema.org/WPHeader" ...>
<div class="nav1"><h1>brandname</h1><nav>...</nav></div>

<div><h1>brandname</h1><p>slogan</p></div> <!-- sometimes this is not there -->

<div class="nav2"><h1>brandname</h1><nav>...</nav></div>
</header>
<div>content ...

Multiple headers not valid either or? I am thinking of it this way as using the <header> without any CSS styles just for semantic markup. I could think of styling barriers created with this so not 100% satisfied with this.

Or is this valid.

<body>

<header class="nav1"><h1>brandname</h1><nav>...</nav></header>

<header><h1>brandname</h1><p>slogan</p></header> <!-- sometimes this is not there -->

<header class="nav2"><h1>brandname</h1><nav>...</nav></header>

<div>content ...

// just read html5: using header or footer tag twice? this and looks like I stick with the 2nd solution since I not really like the idea of having no header at all

Dont be afraid to answer ;)

解决方案

Decide for every sectioning root element (e.g., body) and every sectioning content element (e.g., article) if it contains content which is appropriate for header. The spec defines that it’s for "introductory content", and gives the following examples:

  • introductory or navigational aids
  • heading (an h1h6 element) (not required)
  • table of contents, a search form, or any relevant logos

If there is such content, use a header element. If the content in that sectioning root/content element is scattered, use several header elements.

Keep in mind that the header always applies for "its nearest ancestor sectioning content or sectioning root element":

<body>
  <header> <!-- this header is for the whole page --> </header>

  <article>
    <header> <!-- this header is for the whole article element --> </header>

    <div>
      <header> <!-- this header is also for the whole article element (and not only for the div element!) --></header>
    </div>

    <section>
      <header> <!-- this header is for this article’s section element only --> </header>
    </section>

  </article>

  <figure>
    <header> <!-- this header is for the figure element only --> </header>
  </figure>

  <strong>
    <header> <!-- but this header is also for the whole page (and not for the strong element only!) --> </header>
  </strong>

</body>

这篇关于没有主&lt; header&gt;的HTML 5页面?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆