Bon balisage pour le site Web HTML5?

Je développe mon nouveau site web en HTML5/CSS3. Lors de la conversion de mes fichiers PSD en HTML5/CSS3, je me demande quel est le bon balisage pour un site Web HTML5. Ci-dessous est un simple fil de fer de mon site Web, comme vous pouvez le voir, je veux que le site fasse sa pleine largeur, au moins dans les différents domaines.Bon balisage pour le site Web HTML5?

C'est la mise en page:

Comme vous pouvez le voir ici, je veux avoir une autre section sur ma page d'accueil pour l'information.

As you can see here, I want to have some different section on my homepage for the information

Et je suis venu avec ce balisage:

Parce que quand je copie toute la liste ne sont plus visibles, j'ai le contenu , du texte et des images dans ce code omis . Lorsqu'une image ou un texte serait confronté avec un commentaire ci-dessous.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8" /> 
<title></title> 

<!-- Meta Tags --> 

<!-- Stylesheets --> 
<link href="css/style.css" rel="stylesheet"> 
<link href="css/960.css" rel="stylesheet"> 

<!-- Icons --> 
<link rel="apple-touch-icon" href="images/apple-touch-icon.png"> 
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-retina.png"> 

<!--[if lt IE 9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 

</head> 

<body> 

<!-- Start container website --> 
<header id="header"> 
    <div class="container_12"> 
      <div class="grid_12"> 

<!-- // Here will be position the logo with a link \\ --> 

       <nav id="primary-navwrapper"> 
       <!-- // Here will be an unordered list with menu items \\ --> 

      </nav> 

     </div><!-- End .grid_12 --> 

    <div class="clear"></div><!-- End .clear --> 
    </div><!-- End .container_12 --> 
</header><!-- End header --> 

<section id="hero"> 
    <div class="sliderbox"> 

     <!-- // An list of image for a slider \\ --> 

    </div><!-- End .sliderbox --> 

</section><!-- End section#hero --> 

<section id="introduce"> 
    <article class="container_12"> 

      <!-- // 3 colomn with a h-tag and some text inside a paragraph \\ --> 

      <!-- // 3 colomn with a h-tag and some text inside a paragraph \\ --> 

      <!-- // 3 colomn with a h-tag and some text inside a paragraph \\ --> 


    </article><!-- End article.container_12 --> 


    <article class="container_12"> 
     <div class="grid_12"> 

      <!-- // A image tag \\ --> 

     </div><!-- End .grid_12 --> 

    </article><!-- End article.container_12 --> 

</section><!-- End section#introduce --> 

<hr class="dark-grey"> <!-- Divider for the section --> 

<section id="work" class="alt"> 
    <article class="container_12"> 

      <!-- // a h-tag and some text inside a paragraph + 3 column portfolio items \\ --> 

    </article><!-- End article.container_12 --> 

</section><!-- End section#work.alt --> 

<hr> <!-- Divider for the section --> 

<section id="blog" class="even"> 
    <article class="container_12"> 
     <aside class="grid_4"> 

      <!-- Sidebar with some text --> 

     </aside><!-- End aside.grid_4 --> 

     <ul class="recentbox"> 

      <!-- List of 2 latest blog items --> 

     </ul><!-- End ul.recentbox --> 

    </article><!-- End article.container_12 --> 

    <article class="container_12"> 
     <div class="grid_12"> 

      <!-- Contact banner --> 

     </div><!-- End .grid_12 --> 
    </article><!-- End article.container_12 --> 

</section><!-- End section#blog.even --> 

<footer id="footer"> 

    <!-- Footer markup here --> 

</footer><!-- End footer --> 


</body> 
</html>

Quelques informations supplémentaires. Comme vous pouvez le voir, je commence par la <header> - tag pour l'en-tête, après que je mis certaines régions avec le <section> - tag à l'intérieur que je l'<article> - tag avec un class de <article class="container_12"> pouvoir d'utiliser la grille 960. a l'intérieur qui <article> - tag Je vais composer un texte, une image, etc.

Bon à savoir est que je baliser l'article dans certaines sections utilisent souvent, je le fais parce que plusieurs articles dans un section spécifique à distinguer. Avec Articles ont un lien avec l'autre, mais sont différents dans un article à poster. J'adore entendre vos opinions concernant mon balisage jusqu'à présent et comment vous vous attaqueriez.

Merci.

Source

2013-02-14 Caspert

Eh bien, vous aidez les robots d'exploration Google le plus possible si Google devait être aidé du tout: D Vos conventions de tag vous semblent bien, mais vous en faites trop à mon avis pour vous aider à structurer votre contenu. Mais Google crawler est heureux je suppose que – kidwon

Je pense que vous ne devriez pas utiliser ** section ** en dehors de ** article ** tag. La section est une partie de l'article. Comme vous l'avez fait, il n'a pas la bonne sémantique. Voir: https://dev.w3.org/html5/spec-author-view/the-section-element.html#the-section-element – Wojtek1150

Votre marquage est totalement acceptable. Je suggérerais peut-être ne pas aller si lourd avec les étiquettes d'identification, mais au lieu d'aller pour une approche plus OO à venir de votre CSS. Pour plus d'informations, rendez-vous ici: http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/

Sinon, votre majoration est correcte.

Source

2013-02-14 14:57:18 cliffbarnes

Merci beaucoup. Oke sympa. Je regarde aussi votre documentation et c'est un excellent article. Je vais le lire et l'utiliser dans mon propre code de balisage. Une question, quand dois-je utiliser la balise '

'. Je pense que pour les articles de texte qui sont très longs, je pense ... – Caspert

Oui, je c ur point. Je suppose que vous pouvez utiliser la balise

Bon balisage pour le site Web HTML5?

Répondre

Questions connexes