HTML5-标题、标题、品牌、滑块_Html

HTML5-标题、标题、品牌、滑块

html

HTML5-标题、标题、品牌、滑块,html,Html,我正在努力在我正在建设的网站上加强HTML5。导航和标志需要在顶部栏，我包括一个滑块，引号和一些按钮。我不确定报头是否真的应该包括报价或按钮如果不是，我真的需要一个报头和品牌部分吗？从语义上来说，将两者都包括进来似乎是有道理的我有相当多的div-应该用section替换它们吗 <header> <section id="masthead"> <div id="branding" role="banner">

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


企业解决方案




“面向小型企业的网络解决方案。共享或专用主机，100%的运行时间和无与伦比的支持，提供您期望的可靠性。”

Basics：

Section

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

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

如果您正在使用

div

s进行布局，则它们不需要新的语义标记，用于样式设置的标准div标记是可以的，但是如果您包含与页面相关的文本/标题，则此处将使用

部分

标记

对代码的评论：您也没有在语义上使用

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

您应该使用

标题

和

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>






“面向小型企业的网络解决方案。共享或专用主机，100%的运行时间和无与伦比的支持，提供您期望的可靠性。”

仅仅因为有了新的标签并不意味着你必须把每一个标签都放入你的代码中（很难不这样做，或者认为“这不应该是一个

部分吗

，因为废话废话废话”我是一样的）。希望这有帮助

参考文献：

我想纠正一些对我来说似乎不正确的假设

首先，没有一个关于网页内容应该如何构造的一般规则。新的HTML5语义元素只是给作者一个工具来标记作者认为相关的部分，（Un）重要的、描述性的、承载特定的含义等等。您对元素的选择应该更多地基于特定内容是出于样式/脚本目的（

）还是出于语义/主题分离目的（

，

元素）而被包装。在许多情况下，分段内容元素（主要是
）将取代现在常用的
，后者几乎没有语义意义
元素可以用来代替章节，但如果包装在一起的部分相互关联（理想情况下带有标题，但不一定），则也可以用作页面布局分隔元素
元素可以使用，此外，如果您认为包含徽标、搜索栏、导航以及可能的滑块的页面标题传达了重要的介绍性信息，则建议使用该元素。尽管有一条重要的规则：
（这同样适用于
）不能包含
或
作为后代，但仍然可以包含
s、
s、-
等。
的适当用法是在为一节声明更多介绍性和导航性的“标题”信息时（例如，文章标题中的作者姓名和发布日期）。但是，如果只有紧跟在之后的，则无需将独立的
封装在
（“”）中，但它可以提高代码的可读性和统一性

这是我的网站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规范中的各种例子也没有严格遵守一条规则来描述相似的文档实例——事实上，它给了作者很大的自由。在选择合适的元素时，一个好的思路是考虑文档的最终标题/截面结构和文档的能力。应屏幕阅读器等要求提供相关内容的文件
编辑：在创建元素时，我已将其删除（请阅读此处的注释–这是最重要的注释）
<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>

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