www.eclairement.com > Technicité

HTML, organiser le contenu de votre page : notions de base

jeudi 4 septembre 2008, par Claire Mélanie, Lucien

Organisation générale de la page - Placement du texte.

Pour plus d’informations sur les notions de body (corps de document) et balise : voir notre article sur la structure générale d’une page HTML

Nous allons voir quelques notions de base avant d’aborder la présentation des balises de structuration du corps de document HTML

Balises block et inline

Chaque balise est par défaut dit de bloc (block) ou en-ligne (inline).

- Les balises de bloc par défaut ont pour conséquence de faire aller à la ligne automatiquement. On empile les blocs les un en dessous des autres.

<div>première balise bloc</div>
<div>seconde balise bloc</div>

Résultat :

première balise bloc
seconde balise bloc

- Les balises en-ligne par défaut prennent en charge des contenus qui se placeront l’un à coté de l’autre

<span>première balise en ligne</span> <span>seconde balise en ligne</span>

Résultat :

première balise en ligne seconde balise en ligne

La balise <img /> qui permet de placer une image est par défaut en-ligne.

- Connaître les balises qui sont par défaut bloc ou en-ligne est donc important pour bien placer son contenu.

Par exemple, le code qu’il faudra écrire pour placer deux images, sans maîtriser le CSS, sera la conséquence, de son caractère en ligne. Par défaut, deux balises <img /> à la suite feront s’afficher deux images sur la même ligne.

Il faudra donc employer d’autres ressources pour les faire s’afficher l’une en dessous de l’autre (par exemple d’autres balises HTML, ce que nous verrons dans un autre article sur les balises de hiérarchisation).

Affichage par défaut, apport du CSS

- Chaque navigateur interprète à sa manière les balises si leurs attributs ne sont pas définis. Les navigateurs ont chacun un réglage par défaut qui fait par exemple que pour une balise <h1></h1> l’affichage sera plus ou moins grand, que les marges d’un paragraphe seront plus ou moins larges , etc.

- Nous verrons alors par la suite comment définir le style de ces balises (correspondant à une partie de leur attribut) en utilisant plus particulièrement les feuilles de style (CSS). En effet, cette différence d’affichage peut s’avérer fort ennuyeuse quand vous avez prévu un rendu bien spécifique et que par défaut ce rendu n’est pas respecté selon les navigateurs.

Articles relatifs :

- Les codes couleurs HTML

- HTML, la mise en forme du texte

- Faire défiler un texte en HTML

- Optimiser son contenu pour le référencement


© Tous les textes et documents disponibles sur ce site, sont, sauf mention contraire, protégés par une licence Creative Common (diffusion et reproduction libres avec l'obligation de citer l'auteur original et l'interdiction de toute modification et de toute utilisation commerciale sans autorisation préalable).