Tutoriel HTML5 et CSS


➡︎ Les éléments sémantiques

L'élément < header > :

No title

Nous avons remarqué ces derniers temps que les professionnels du Web sont de plus en plus intéressés par le HTML5. Plusieurs d’entre eux ont d’ailleurs commencé à l’utiliser.

Selon la spécification HTML5, l’élément header représente : "Un groupe d’aide de navigation ou d’introduction. Un élément header contient de façon générale les headings (les éléments h1 à h6 ou l’élément hgroup). Il peut aussi contenir d’autres éléments, comme une table des matières, un formulaire de recherche, ou des logos.

→ À quel endroit doit-on utiliser la balise < header > ?

L’endroit le plus évident est au début d’une page. Nous pouvons commencer par y inclure le titre le plus important sur votre page.

picture element header

La balise header nous donne la possibilité de structurer nos documents avec une meilleure sémantique pour les en-têtes de sections ou de pages.

NOTA BENE : Il est important de noter que vous pouvez avoir plus d’une balise header par page. Vous pouvez utiliser une balise header par section de le page.


➡︎ Les éléments sémantiques

L'élément < nav > :

notitle

L'élément HTML < nav > représente une section d'une page ayant des liens vers d'autres pages ou des fragments de cette page. Autrement dit, c'est une section destinée à la navigation dans un document (avec des menus, des tables des matières, des index, etc.).

photo element nav

Un seul document HTML peut contenir plusieurs tags < nav >, l’autre peut contenir un groupe de liens pour naviguer sur le site, un autre pour naviguer dans la page Web actuelle. Notez que tous les liens du document HTML ne peuvent pas être placés dans l'élément < nav >, ils ne peuvent inclure que de gros blocs de navigation. N'incluez pas < nav > dans le tag < footer >.


NOTA BENE : Cela va permettre d’indiquer aux navigateurs et moteurs de recherche que notre élément ul (utilisé pour créer un menu) n’est pas qu’une liste mais bien un menu de navigation.


➡︎ Propriétés CSS

La propriété CSS : float

no title

La propriété CSS float permet de sortir un élément du flux normal de la page et de le faire “flotter” contre un bord de son élément parent conteneur ou contre un autre élément flottant.
Une utilisation bien connue de la propriété float est de s’en servir pour faire flotter une image à droite ou à gauche d’un texte et ainsi l’entourer avec du texte.
La propriété float est donc une autre propriété qui va impacter la disposition dans la page et qu’il convient de manier avec précaution pour ne pas obtenir de comportement indésirable. Le but de cette nouvelle leçon est d’apprendre à la manipuler.

picture propriete float

En effet, les éléments de type block suivants un élément flottant vont également se placer sur la même ligne que l’élément flottant mais continuer à prendre tout l’espace disponible dans la ligne.
La partie des éléments block chevauchant un flottant va être cachée derrière le flottant.
On va cependant également tout à fait pouvoir faire flotter un élément block même si généralement nous utiliserons plutôt un display : inline-block pour placer deux éléments de type block côte-à-côte.
Notez que si vous voulez faire flotter un élément block sans contenu, alors il faudra lui donner une largeur et une hauteur explicites avec les propriétés width et height car dans le cas contraire les valeurs calculées seront égales à 0.