Article - Les balises sémantiques du HTML5
Section 1 - Balise header
Mon travail sur la balise header
header est une introduction à la navigation.
1 - J'ai mis un wrapper qui fait l'enveloppe générale de toute la page dans le body.
Je n'ai pas à me préoccuper du body puisque je travaille que dans le wrapper.
Il a une dimension de 960px. j'ai placé les règles pour bien suivre.
Les marges droite et gauche sont auto pour centrer le wrapper ( la page) sur l'écran.
2 - Le header, m'a posé des problèmes. je pense qu'il est plus simple de faire un bandeau dans Psp ou Photoshop....
C'est la taille de l'image sigle qui m'a guidée .Je lui ai donnée un id = logo Je lui ai mis un arrière-plan, puis une hauteur, il doit s'afficher en block( dans ma feuille de style reset liée à la page), il flotte à gauche et il a un petit padding de10 pour le décoller du bord gauche. Comme mon image a 80px de haut, il faut 100px de haut pour le header .
Je voulais mettre un titre pour mon header en texte qui ferait le titre de mon site.J'ai essayé beaucoup de choses pour finir le plus simplement possible une balise h1.J'ai suivi les conseils de DW en mettant un margin top à 0, et j'ai mis un padding-top de 20px pour le centrer par rapport au sigle.
Si vous faites ce travail, placer les styles, un par un, en actualisant à chaque fois pour voir l'effet.Regardez le code, ne le copiez pas, servez-vous des outils de DW pour faire le style ..Vous allez apprendre beaucoup ainsi.La petite vitesse de maintenant, fera les bolides de demain.
Règles pour la balise header.
Il peut y avoir plusieurs header dans un document mais pas de header dans un autre header.
Une balise sémantique header peut contenir des p, hgroup, h, liste, a, img, nav .La liste n'est pas limitative.
header contient généralement une< hgroup> contenant plusieurs niveaux de h ou plusieurs balises h de même niveau ou une seule balise h.sans hgroup comme on veut.
hgroup sert donc à présenter le plan du contenu du document ou de la section qui va suivre.
hgroup n'est pas obligatoire.Je ne l'ai pas utilisée.
Section 2 - Balise nav
Mon travail sur la balise nav
Dans cette page j'ai mis la balise nav dans la balise header.Elle peut être mise ailleurs dans la page. Elle est souvent mise après header.
Elle ne doit contenir que des liens internes au site.
Je lui est mis le style display: block et ses margin et padding à 0
dans ma feuille de style remise à zero que j'ai lié à cette page.
J'ai mis un menu fait avec des listes de liens internes.
Section 3 - Balise article
Dans cette page la balise article contient toutes les 5 balises< section>. Mon <article> est consacré aux balises sémantiques du HTML5.Je l'ai utilisé à la façon de Dreamweaver dans l'exemple mis à disposition dans CS6.
Un article est une composition autonome dans un document.
La balise article peut être imbriquée. Les <articles> intérieures sont liées à l'article extérieure commes des commentaires dans un article de blog,
Dans mon sujet ( article unique) j'ai fait plusieurs balises <section>
Section 4 - Balise section
J'avoue avoir des difficultés pour déterminer une section ou un article
Alsacréations dit que "L'élément <section> permet de définir les grandes sections d'un document comme par exemple les chapitres, les en-tête et pied-de-page, ou toute autre section dans un document. Il peut être combiné avec les éléments h1, h2, h3, h4, h5, et h6 pour une meilleure définition de la structure du document.Chaque balise décrite dans cette page forme une section avec un titre <h2>
Une section peut comporter une <header> et une <footer>. Je n'ai pas fait cela ! J'ai réservé header et footer à mon article.
Section 5 - Balise aside
La balise aside contiendra des éléments complémentaires au contenu principal, elle pourra contenir des liens externes. Aside devrait contenir des informations qui ne sont pas absolument nécessaire pour la compréhension du document
La balise aside peut être mise dans un article . Le contenu de aside devrait être relié à l'article.... ce que je n'ai pas exactement fait !ou dans le document html
En dehors de la balise article, le contenu de aside est relié au site dans son ensemble(liste de liens préférés, navigation additionnelle et même de la publicité si elle est en relation avec la page !!! ( nous voilà agent publicitaire maintenant !