HTML5 - 页眉、 header 、品牌、 slider

Question

我正在尝试在我正在构建的网站上收紧 HTML5。导航和 Logo 需要在顶部栏中，我包括一个 slider 、引号和一些按钮。我不确定 header 是否真的应该包含引述或按钮。

如果不是，我真的需要 header 和品牌部分吗？将两者都包含在语义上似乎是有意义的。

我有很多 div - 是否应该将它们替换为部分？

<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 -->

Answer 1

基础知识:

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

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

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

对您的代码的评论:

您也没有使用 header从语义上讲，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> give us some great added semantic value in order to describe the head of a section.

Hgroup 和 header :

至于这个:

<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 因为等等等等”我也是)。希望这对您有所帮助!

引用资料:

• http://html5doctor.com/the-header-element/
• http://www.quackit.com/html_5/tags/html_section_tag.cfm