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

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

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

如果没有，我真的需要一个标头和品牌部分吗？从语义上讲，包括两者似乎都有意义。

我有很多div - 应该用section替换掉吗？

<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 -->
html html5
2个回答
8
投票

基本：

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

因此，如果您有带标题的文本部分，则部分标记将包装这些。

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

对您的代码的评论：

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

Sections and headers:

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

<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 and headers:

至于这个：

<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，因为等等等等等等）我是一样的” 。希望这可以帮助！

参考文献：

8
投票

我想补救一些Myles的假设，这些假设对我来说似乎不对。

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

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

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

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

<hgroup>

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

编辑：我已经删除了more harm than good元素，因为它创建this one（阅读那里的评论 - summary of problems regarding <hgroup>是最有根据和说服我 - 或检查这个great article about html5 structure），很可能最终从规范中删除。

有关更多信息，我发现about headings和this part of W3C specification我认为已经非常准确地捕捉到了规范的含义（另请参阅本博客上的其他相关文章）。无论如何，为了更新和最好地理解分段内容，我建议通过qazxswpoi阅读以及下面特定元素规范的示例。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.