2010-05-26 3 views
3

Je suis un peu confus sur la façon dont les nouvelles étiquettes devraient aller.Quelle est la meilleure mise en page par défaut/démarrage sémantique pour html5?

Est-ce exact:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title></title> 
</head> 

<body> 

    <section> 
     <header> 
      <nav></nav> 
     </header> 
     <section> 

     </section> 
     <footer> 

     </footer> 
    <section> 

</body> 
</html> 

Ou si l'une des sections est un <article>? Quelle devrait être la mise en page de départ?

+0

Le DOCTYPE HTML5 est "" avec un html minuscule.Et vous pouvez remplacer la méta Content-Type par si vous le souhaitez, ce qui fait exactement la même chose (même dans les anciens navigateurs.) –

Répondre

7

Vous ne devriez pas avoir une mise en page « démarrage » pour quoi que ce soit à l'intérieur <body>.

les <article> et <section> balises ne sont pas ma Remplissez le formulaire, doit remplir, ils sont là pour séparer les blocs de balisage de haut niveau de façon appropriée pour l'algorithme de mise en évidence, si et quand vous avez besoin de le faire. Si vous n'avez qu'un seul article sur votre page, ce qui sera un cas courant, il n'y a aucun avantage à envelopper le tout dans un <article>.

Actuellement, les éléments <section> dans votre exemple ne font rien. Jusqu'à ce que vous en ayez besoin, laissez-les.

(Et sans doute les laisser de toute façon jusqu'à ce que le support du navigateur est meilleur.Pour IE, vous aurez besoin d'utiliser le HTML Shiv pour obtenir tout cela pour fonctionner, et il y a encore des problèmes avec lui. Pour la petite quantité de bénéfice pratique qu'il apporte, changez le HTML dans le doctype en minuscule pour qu'il corresponde à l'élément racine réel.)

1

Ce que vous incluez dépend du contenu dont vous disposez. Bien sûr, vous n'aurez pas toujours besoin de toutes les balises de bloc sémantiques. Personnellement, je reste avec mes éléments <div> jusqu'à ce que je réécris mon site web.

2

à mon humble avis, je pense que vous devez séparer le nav de l'en-tête, comme vous ne pouvez pas toujours supposer la barre de navigation se trouve sur votre tête (si votre barre de navigation se trouve sur le côté?)

autre que Je pense que c'est un bon squelette pour une mise en page. (sauf si vous créez un site de news ou de blog, je ne pense pas que vous devriez inclure la balise dans votre mise en page de base

1

Jetez un coup d'œil à Dive into HTML 5, qui a quelques exemples: Voici un et un HTML5-ified version du même contenu.

Il y a aussi a chapter sur les nouvelles balises sémantiques.

0

Ou jetez un coup d'œil à mon .

1

C'est ce que je commence habituellement avec:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <link href="/css/screen.css" rel="stylesheet" /> 
    </head> 
    <body> 

    </body> 
</html> 

J'utilise le doctype HTML5 et charset plus courte pour la simplicité, et laisser le corps vide que je ne peux pas travailler sur un projet HTML5 « complet ». Autrement dit, le projet pourrait m'obliger à éviter d'utiliser de nouveaux éléments de section HTML5, mais cela faciliterait la transition à une date ultérieure et me permettrait d'utiliser quelques petits avantages de HTML5 (par exemple, type de ma feuille de style link).

Si vous êtes encore intrigués par les éléments de sectionnement, voici quelques articles sur section et article.

+0

Le problème avec ceci est qu'une balise body vide n'est pas HTML valide. Il pourrait être préférable de commencer avec cela dans le corps:

Rubrique

paragraphe

+0

si dans le corps que vous aviez, je me demande si cela compte comme « balise body vide » <- - contenu ici!> – iamnotsam

Questions connexes