HTML5 - header, masthead, branding, slider_问答_开发者

I am trying to tighten up the HTML5 on a website I am building. The nav and logo need to be in the top bar, and I am including a slider, quotes and some buttons. I am not sure开发者_开发技巧 if the masthead really should include the quote or the buttons.

If not, would I really need a masthead and branding section? It seems to make sense semantically to include both.

I have quite a few divs - should these be replaced with section?

HTML5 - header, masthead, branding, slider

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

Basics:

The Section tag should be used to divide up content of different sections of text or prose, not used to divide up different sections of the page.

Thus, If you have sections of text with headings then the section tags would wrap these.

If you are using the divs for layout then they don't need the new semantic tags, the standard div tag for styling purposes is fine, however if you are containing text/headings that have relevance to the page a section tag would be used here.

Comments on your code:

You are also not using the header element semantically, the header element should be used to outline headers on information, not sections of the page that you regard as the header for this you can just use a div.

Sections and headers:

You could for example make this into a header:

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

To this:

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

But using it to outline the entire branding section is wrong, it should just use a wrapper div.

<header> give us some great added semantic value in order to describe the head of a section.

Hgroup and headers:

As for this:

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

You should use the header and hgroup elements to display this information semantically:

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

To round up:

Your code at the end should look like this:

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

Just because the new tags are there doesn't mean you have to fit every one of them into your code (It is hard not to do this or think "shouldn't this be a section because blah blah blah" I was the same). Hope this helps!

References:

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

I would like to remedy some of Myles's assumptions which appears incorrect to me.

At first, there is no general rule how a webpage content should be structured. New HTML5 semantic elements just give an author a tool to mark up the parts the author consider related, (un)important, descriptive, carrying some specific meaning and so forth.

Your choice of elements should be based more on whether a specific content is wrapped because of styling/scripting purposes (<div>) or semantic/thematic separation purposes (<section>, <article>, <nav> and other new HTML5 sectioning content elements). In many cases sectioning content elements (mostly <section>) will replace now frequently used <div> which has a very little semantic meaning. <section> element can be used in place of chapters, but also as a page layout separation element if the parts wrapped in are related together (and ideally accompanied with an heading, but not necessarily).

<header> element can be used, what's more, is recommended for page headers containing logos, search bar, navigation and maybe sliders if you think they convey an important introductory information. Though there is one important rule: <header> (the same applies to <footer>) can't contain <header> or <footer> as descendants, but still can contain <section>s, <nav>s, <h1>-<h6> etc. An appropriate use of <header> is when more introductory and navigational "header" information is stated for a section (e.g. author name and post date in the case of header of an article). However, when there is just <h1> immediately followed by <p>, there is no need for encapsulating the standalone <h1> in <header> ("The header element represents a group of introductory or navigational aids"), but it can contribute a bit to readability and unity of the code.

Here is my draft for HTML5 structure of your website. Consider it rather as an inspiration - an author should know best how to assign meaning and structure to his document.

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

If you think about it, even various examples in W3C specification don't strictly stick with one rule for describing similar document examples - in fact, it gives a lot of freedom to the author. A good way of thinking when choosing appropriate elements is to consider the resultant heading/section structure of the document and the ability of the document to serve the relevant content upon a request of e.g. screen readers.

EDIT: I have removed the <hgroup> element as it creates more harm than good (read the comments there – this one is the most substantiated and convincing to me – or check out this summary of problems regarding <hgroup>) and is likely to be finally dropped from the specification.

For more information, I have found a great article about html5 structure and about headings that I think have caught the meaning of the specification quite accurately (also take a look at other related articles on this blog). Anyway, for up-to-date and the best understanding of sectioning the content I recommend to read through this part of W3C specification and examples below specification of particular elements.