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

Question

我正在努力收紧我正在建设的网站上的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 -->

Answer 1

基本:

该Section标签应该用来划分不同的内容部分文字或散文的,不是用来划分页面的不同部分.

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

如果您使用divs进行布局,那么它们不需要新的语义标记,用于样式目的的标准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因为等等等等等等等等)".希望这可以帮助!

参考文献:

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

Answer 2

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

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

您的元素的选择应更上的特定内容是否由于定型/脚本目的(基于包裹<div>)或语义/专题分离目的(<section>,<article>,<nav>和其他新的HTML5 切片内容元素).在许多情况下,分段内容元素(大多数<section>)将替换现在经常使用的<div>具有非常小的语义含义.如果包含的部分是相关的(并且理想地伴随着标题,但不一定是),<section>则可以使用元素代替章节,也可以用作页面布局分隔元素.

<header>对于包含徽标,搜索栏,导航和滑块的页眉,如果您认为它们传达了重要的介绍性信息,则可以使用该元素.虽然有一个重要的规则:( <header>同样适用于<footer>)不能包含<header>或<footer>作为后代,但仍然可以包含<section>s,<nav>s <h1>-<h6>等.适当的用途<header>是当为一个部分说明更多的介绍和导航"标题"信息时(例如,文章标题的作者姓名和发布日期).然而,当存在仅仅是<h1>紧接着<p>,没有必要用于封装独立<h1>于<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规范中的各种示例也没有严格遵循描述类似文档示例的一条规则 - 实际上,它为作者提供了很多自由.在选择适当的元素时,一种好的思考方式是考虑文档的最终标题/部分结构以及文档根据例如屏幕阅读器的请求提供相关内容的能力.

编辑:我删除了<hgroup>元素,因为它创造了更多的弊大于利(阅读那里的评论 - 这是最有根据和最有说服力的 - 或查看有关问题的摘要<hgroup>),并可能最终从规范中删除.

有关更多信息,我发现了一篇关于html5结构和标题的精彩文章,我认为这些文章非常准确地记录了规范的含义(另请参阅本博客上的其他相关文章).无论如何,对于最新和最好的理解内容我建议阅读W3C规范的这一部分和下面的特定元素规范的例子.