Comment utiliser les balises sémantiques pour la programmation HTML5 et CSS3 - mannequins

Lorsque les développeurs Web ont commencé à utiliser des techniques de mise en page flottantes, ils créaient presque toujours des div appelés nav, header et footer. Les développeurs de HTML5 ont décidé de créer de nouveaux éléments avec ces noms. Jetez un oeil au code suivant pour voir les balises sémantiques en action.

en-tête sémantique {border-bottom: 5px double black;} nav {float: left; largeur: 20%; clair: gauche; min-hauteur: 400px; border-right: 1px noir uni;} section {float: left; largeur: 75%; padding-left: 1em;} article {float: à gauche; largeur: 75%; padding-left: 1em;} pied de page {clear: both; border-top: 5px double noir; text-align: center;}

Ceci est mon en-tête







Navigation

lien a
lien b
lien c
lien d
lien e


Section 1
Section body …

Section 2
Section corps …

Article
Corps de l'article …

Pied de page
Andy Harris 

andy @ aharrisbooks. net

Comme vous pouvez le voir, il y a un certain nombre de nouvelles balises de balisage sémantique en HTML5:

• en-tête: Ce n'est pas la même chose que les balises h1-h6. Il dénote un morceau de la page qui contiendra un en-tête pour la page. Souvent, l'en-tête remplira la largeur de la page et aura une sorte d'image de bannière. Il contient fréquemment du contenu h1.

• nav: Cette balise indique une sorte de section de navigation. Il n'a pas de style particulier, mais il est fréquemment utilisé comme menu horizontal ou vertical pour la navigation sur le site.

• section: Une section est utilisée pour spécifier une partie générique de la page. Vous pouvez avoir plusieurs sections sur la même page.

• article: Un article est comme une section, mais il est destiné à être utilisé avec des ressources externes. De nombreuses pages sont construites automatiquement par logiciel, et lorsque ces pages intègrent du contenu provenant d'autres sources, il est prévu d'utiliser la balise d'article pour intégrer ce contenu.

• pied de page: Un pied de page est destiné à afficher le contenu d'une page au bas d'une page. Généralement, un pied de page couvre le bas d'une page, bien que ce ne soit pas le comportement par défaut.

Notez qu'aucun de ces éléments n'a de format spécifique. C'est à vous de fournir le formatage à travers le code CSS. Chacun des éléments peut être formaté directement en tant qu'élément HTML (parce que c'est ce que c'est). Tous les navigateurs de la dernière version prennent en charge les balises de balises sémantiques, mais si vous souhaitez prendre en charge les anciens navigateurs (en particulier IE avant la version 8), vous devrez toujours utiliser des divs.