HTML5 - d'en-tête de, tête de mât, l'image de marque, curseur

Je suis en train de serrer l'HTML5 sur un site, je suis en bâtiment. La valeur liquidative et le logo ont besoin d'être dans la barre du haut, et je suis y compris un curseur, de devis et de certains boutons. Je ne suis pas sûr si la tête de mât devrait vraiment inclure la citation ou les boutons.

Si non, aurais-je vraiment besoin d'une tête de mât et l'image de marque de la section? Il semble de bon sens sémantiquement à inclure à la fois.

J'ai assez peu de divs - ci devraient être remplacés par l'article?

HTML5 - d'en-tête de, tête de mât, l'image de marque, curseur

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

OriginalL'auteur GregB | 2011-02-27

  1. 8

    De base:

    La Section balise ne doit pas être utilisée pour diviser le contenu des différents sections de texte ou de la prose, pas utilisée pour diviser les différentes sections de la page.

    Donc, Si vous avez des sections de texte avec des titres alors la section des étiquettes envelopper ces.

    Si vous utilisez le divs pour la mise en page alors qu'ils n'ont pas besoin des nouvelles balises sémantiques, le standard de la balise div pour le style de fins est bien, mais si vous êtes contenant du texte/titres qui ont une pertinence pour la page un section balise serait utilisé ici.

    Commentaires sur ton code:

    Vous n'êtes pas à l'aide de la header élément sémantiquement, l'élément d'en-tête devrait être utilisé pour définir les en-têtes de l'information, pas de sections de la page que vous considérez comme le header pour cela, vous pouvez simplement utiliser un div.

    Sections et les en-têtes:

    Par exemple, vous pouvez faire cela dans un en-tête:

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

    Mais de l'utiliser pour décrire l'ensemble de l'image de marque de l'article est faux, il faut juste utiliser un wrapper div.

    <header> nous donner un peu de grand ajout de valeur sémantique afin de décrire la tête d'une section.

    Hgroup et les en-têtes:

    Que pour cela:

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

    Vous devez utiliser le header et hgroup les éléments à afficher cette information sémantiquement:

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

    À la ronde:

    Votre code à la fin devrait ressembler à ceci:

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

    Tout simplement parce que les nouvelles balises sont là ne signifie pas que vous avez à s'adapter à chaque un d'entre eux dans votre code (Il est difficile de ne pas le faire ou de penser "ne devrait-ce pas être un section parce que bla bla bla" j'ai été le même). Espérons que cette aide!

    Références:

    OriginalL'auteur Myles Gray

  2. 8

    Je voudrais remédier à certaines de Myles'hypothèses qui semble incorrecte pour moi.

    Au premier abord, il n'y a pas de règle générale sur la manière d'une page de contenu doit être structuré. De nouveaux éléments sémantiques HTML5 juste donner un auteur à un outil pour marquer les pièces de l'auteur considère liée, (de l'onu)important, descriptif, porteurs d'un sens spécifique et ainsi de suite.

    Votre choix des éléments devraient être davantage basée sur la présence d'un contenu spécifique est enveloppé en raison de style et de script (<div>) ou sémantique ou thématique de la séparation (<section>, <article>, <nav> et d'autres nouvelles HTML5 le sectionnement de contenu éléments). Dans de nombreux cas, le sectionnement des éléments de contenu (surtout <section>) remplacera désormais fréquemment utilisés <div> qui a très peu de sens sémantique. <section> élément peut être utilisé à la place de chapitres, mais aussi comme une mise en page de séparation de l'élément si les pièces enveloppé dans sont liées ensemble (et, idéalement accompagné d'un titre, mais pas nécessairement).

    <header> élément peut être utilisé, ce qui est plus, est recommandé pour en-têtes de page contenant des logos, barre de recherche, de navigation et peut-être curseurs si vous pensez qu'ils véhiculent une introduction très importante d'informations. Si il y a une règle importante: <header> (la même chose s'applique à <footer>) ne peuvent pas contenir d' <header> ou <footer> les descendants, mais peuvent encore contenir des <section>s, <nav>s, <h1>-<h6> etc. Une utilisation appropriée de <header> est quand plus d'introduction et de navigation "en-tête" est indiquée par un point (par exemple le nom de l'auteur et la date posté dans le cas de l'en-tête d'un article). Cependant, quand il y a juste <h1> immédiatement suivie par <p>, il n'est pas nécessaire pour l'encapsulation de l'autonome <h1> dans <header> ("L'élément d'en-tête représente groupe de l'introduction ou d'aides à la navigation"), mais elle peut contribuer un peu à la lisibilité et à l'unité de code.

    Voici mon projet pour HTML5 structure de votre site web. Considérons plutôt comme une source d'inspiration - un auteur devrait savoir mieux comment attribuer une signification et la structure de son 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>

    Si vous pensez à ce sujet, même plusieurs exemples dans la spécification du W3C ne sont pas strictement avec une seule règle pour décrire un document similaire exemples - en fait, il donne beaucoup de liberté à l'auteur. Une bonne façon de penser au moment de choisir les éléments appropriés est de considérer que la résultante de la rubrique/section de la structure du document et la capacité de ce document pour servir du contenu pertinent sur demande, par exemple, de lecteurs d'écran.

    EDIT:, j'ai enlevé la <hgroup> élément, tel qu'il crée plus de mal que de bien (lire les commentaires là – cette une est la plus motivée et convaincante pour moi – ou consultez ce résumé des problèmes concernant <hgroup>) et est susceptible d'être finalement abandonné à partir de la spécification.

    Pour plus d'informations, j'ai trouvé un excellent article sur la structure html5 et sur les titres que je pense avoir attrapé le sens du cahier des charges assez précis (jetez aussi un oeil à d'autres liées à des articles sur ce blog). De toute façon, pour la mise à jour et la meilleure compréhension de sectionner le contenu que je vous recommande de lire à travers cette partie de la spécification du W3C et les exemples ci-dessous spécification des éléments particuliers.

    C'est une très bonne réponse. Il m'a beaucoup aidé.
    Première fois que j'ai vu slides section

    OriginalL'auteur Adam