HTML5 - 标题，标头，品牌，滑块

时间：2011-02-27 18:38:09

标签： html html5

我正在努力收紧我正在建设的网站上的HTML5。导航和徽标需要位于顶部栏中，我包括滑块，引号和一些按钮。我不确定标头是否应该包含引号或按钮。

如果没有，我真的需要一个标头和品牌部分吗？从语义上讲，包含两者都是有道理的。

我有很多div - 如果用section替换它们？

Xmedia Masthead 

<header>

    <section id="masthead">
        <div id="branding" role="banner">
            <div class="topbar">
                <h1 id="site-title"><a href="#"><img src="images/logo.jpg" width="180" height="65" alt="Xmedia"></a></h1>
                <h2 id="site-description">Enterprise Solutions</h2>
                <nav role="navigation">
                    <div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
                    <ul id="dropmenu" class="menu">
                        <li></li>
                        <li></li>
                    </ul>
                </nav><!-- nav -->
            </div><!-- topbar -->
            <div id="slider">
                <div class="slide1"></div>
                <div class="slide2"></div>
                <div class="slide3"></div>
            </div><!-- slider -->
        </div><!-- #branding -->
    </section><!-- #masthead -->

    <div class="home_header">
        <h3>&quot;Network Solutions for Small Business. Shared or Dedicated Hosting, 100% Up-Time and Unparalleled Support Providing the Reliability that you Expect.&quot;</h3>
    </div><!--home header-->

    <div class="home_header_right">
        <a href="#"><img src="" alt="image" width="154" height="50" /></a>
        <a href="#"><img src="" alt="image" width="154" height="50"  /></a>
    </div>

</header><!-- Header -->

2 个答案:

答案 0 :(得分：8)

基础：

应使用Section标记来划分文本或散文的不同部分的内容，而不是用于划分页面的不同部分。

因此，如果你有带标题的文本部分，那么部分标签将包装这些。

如果您使用div进行布局，那么它们不需要新的语义标记，用于样式目的的标准div标记很好，但是如果您包含与文本/标题相关的文本/标题页面将在此处使用section标记。

对您的代码的评论：

您也没有在语义上使用header元素，标题元素应该用于概述信息的标题，而不是您认为header的页面部分，您可以使用div。

章节和标题：

例如，您可以将其设为标题：

<div class="home_header">
        <h3>&quot;Network Solutions for Small Business. Shared or Dedicated Hosting, 100% Up-Time and Unparalleled Support Providing the Reliability that you Expect.&quot;</h3>
    </div><!--home header-->

对此：

    <header class="home_header">
        <h3>&quot;Network Solutions for Small Business. Shared or Dedicated Hosting, 100% Up-Time and Unparalleled Support Providing the Reliability that you Expect.&quot;</h3>
    </header><!--home header-->

但是使用它概述整个品牌部分是错误的，它应该只使用包装div。

  

<header>为我们提供了一些很好的语义值，以便描述某个部分的头部。

Hgroup和标题：

至于此：

<h1 id="site-title"><a href="#"><img src="images/logo.jpg" width="180" height="65" alt="Xmedia"></a></h1>
<h2 id="site-description">Enterprise Solutions</h2>

您应该使用header和hgroup元素在语义上显示此信息：

<header>
<hgroup>    
<h1 id="site-title"><a href="#"><img src="images/logo.jpg" width="180" height="65" alt="Xmedia"></a></h1>
<h2 id="site-description">Enterprise Solutions</h2>
</hgroup>
</header>

向上舍入：

最后的代码应如下所示：

<div id="top-wrap">

<div id="masthead">
    <div id="branding" role="banner">
        <div class="topbar">
            <header>
                <hgroup>    
                    <h1 id="site-title"><a href="#"><img src="images/logo.jpg" width="180" height="65" alt="Xmedia"></h1>
                    <h2 id="site-description">Enterprise Solutions</h2>
                </hgroup>
            </header>
            <nav role="navigation">
                <div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
                <ul id="dropmenu" class="menu">
                    <li></li>
                    <li></li>
                </ul>
            </nav><!-- nav -->
        </div><!-- topbar -->
        <div id="slider">
            <div class="slide1"></div>
            <div class="slide2"></div>
            <div class="slide3"></div>
        </div><!-- slider -->
    </div><!-- #branding -->
</div><!-- #masthead -->

<header class="home_header">
    <h3>&quot;Network Solutions for Small Business. Shared or Dedicated Hosting, 100% Up-Time and Unparalleled Support Providing the Reliability that you Expect.&quot;</h3>
</header><!--home header-->

<div class="home_header_right">
    <a href="#"><img src="" alt="image" width="154" height="50" /></a>
    <a href="#"><img src="" alt="image" width="154" height="50"  /></a>
</div>

仅仅因为新标签并不意味着你必须将它们中的每一个都放入你的代码中（很难不这样做或者认为“这不应该是section因为blah blah等等“我是一样的”。希望这有帮助！

<强>参考文献：

答案 1 :(得分：8)

我想补救一些Myles的假设，这些假设对我来说是不正确的。

首先，没有一般规则如何构建网页内容。新的HTML5语义元素只是为作者提供了一个工具，用于标记作者认为相关的部分，（非）重要，描述性，带有某些特定含义等等。

您选择的元素应更多地基于是否因为样式/脚本目的（<div>）或语义/主题分离目的（<section>，<article>而包装特定内容， <nav>和其他新的HTML5 sectioning content 元素。在许多情况下，分割内容元素（主要是<section>）将替换现在常用的<div>，它具有非常小的语义含义。 <section>元素可用于代替章节，但也可用作页面布局分隔元素，如果包含的部分相互关联（理想情况下附带标题，但不一定）。

可以使用

<header>元素，如果您认为它们传达了重要的介绍性信息，那么建议用于包含徽标，搜索栏，导航和滑块的页眉。虽然有一条重要规则：<header>（同样适用于<footer>）不能包含<header>或<footer>作为后代，但仍可包含<section> s，<nav> s，<h1>-<h6>等<header>的适当用法是在为一个部分说明更多介绍性和导航性“标题”信息时（例如作者姓名和案例中的发布日期）文章的标题）。但是，如果只有<h1>后紧跟<p>，则无需在<h1>（“The header element represents a group of introductory or navigational aids”）中封装独立<header>，但它可以为代码的可读性和统一性做出贡献。

以下是我的网站HTML5结构草稿。将其视为灵感 - 作者应该最好地了解如何为其文档分配意义和结构。

<body>

<header>
    <div id="masthead"><!-- // this wrapper <div> is needless -->
        <div id="branding" role="banner">
            <div id="topbar" role="banner">
                <h1 id="site-title"><a href="#"><img src="images/logo.jpg" width="180" height="65" alt="Xmedia"></a></h1>
                <p id="site-description">Enterprise Solutions</p>
                <nav role="navigation">
                    <div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
                    <ul id="dropmenu" class="menu">
                        <li></li>
                        <li></li>
                    </ul>
                </nav>
            </div><!-- #topbar -->
            <section id="slider">
                <div class="slide1"></div>
                <div class="slide2"></div>
                <div class="slide3"></div>
            </section><!-- #slider -->
        </div><!-- #branding -->
    </div><!-- #masthead -->
    <!-- // ⇩ The following part ⇩ still introduces the page (actually the whole brand) and includes some important quick links, I would leave that in <header> -->
    <section id="home_header"><!-- // in some cases, <aside> could be used instead, but here this section conveys one of the main messages of the page – a description of the brand -->
        <blockquote>
             Network Solutions for Small Business. Shared or Dedicated Hosting, 100% Up-Time and Unparalleled Support Providing the Reliability that you Expect.
        </blockquote>
        <footer>
            <p class="signature">-John Selena CEO xMedia</p>
        </footer>
    </section><!-- #home header -->
    <section id="home_header_right"><!-- // could be <aside> too, but I guess the links are not expendable and form a part of the major navigation-->
        <nav role="navigation">
            <a href="#"><img src="" alt="image" width="154" height="50" /></a>
            <a href="#"><img src="" alt="image" width="154" height="50"  /></a>
        <nav>
    </section><!-- #home_header_right -->
    <!-- // ⇧ ------------------ ⇧ -->
</header>

<section id="main">
    ...
</section><!-- #main -->

<footer>
    ...
</footer>

</body>

如果您考虑一下，即使W3C规范中的各种示例也没有严格遵循描述类似文档示例的一条规则 - 事实上，它为作者提供了很多自由。在选择适当的元素时，一种好的思考方式是考虑文档的最终标题/部分结构以及文档根据例如请求提供相关内容的能力。屏幕阅读器。

编辑：我在创建more harm than good时删除了<hgroup>元素（在那里阅读评论 - this one是最有根据的，并且对我有说服力 - 或者查看这个summary of problems regarding <hgroup>），最终可能会从规范中删除。

有关详细信息，我发现great article about html5 structure和about headings我认为已经非常准确地了解了规范的含义（另请参阅此博客上的其他相关文章） 。无论如何，为了及时更新和最好地理解我建议阅读的内容，我建议阅读this part of W3C specification以及下面特定元素规范的示例。

相关问题
最新问题