[xhtml]
[La base du HTML]
les balises
HTML repose sur l'utilisation de balises et d'éléments.
Ne pas confondre éléments et balises
La confusion est fréquente entre les termes « balise » et « élément ».
« balise »
Les balises, délimitées par des chevrons ouvrant et fermant < et >, qualifient des portions de texte. Sauf exception, elles fonctionnent par paires, et à chaque balise ouvrante correspond sa balise fermante, débutant par les caractères </. Ces paires délimitent la portion de texte à laquelle elles s'appliquent. Parfois, une balise est refermée immédiatement. Une telle « balise vide » ne délimite alors qu'un point, et non une zone du document.
« élément »
Un élément est l'ensemble composé d'une balise ouvrante, d'un contenu (du texte et/ ou d'autres balises), et de la balise fermante correspondante. Voici un exemple faisant intervenir la balise <strong>, qui permet de renforcer une partie de texte :
II ne faut <strong>jamais</strong> oublier de fermer les balises!
l'élément
<strong>jamais</strong>
le contenu d'élément
« jamais »
la balise ouvrante
<strong>
la balise fermante correspondante
</strong>
Le contenu « jamais », délimité par le couple de balises <strong> et </strong>, sera mis en gras rapport au reste du texte
II ne faut jamais oublier de fermer les balises!
HTML propose toute une panoplie de balises pour structurer un document : paragraphes, titres, blocs, listes, tableaux, citations, etc.
Dans la version stricte et moderne du langage, le nom des balises s'écrit tout en minuscules.
Les attributs
Les balises acceptent parfois des caractéristiques supplémentaires permettant de les distinguer ou de les personnaliser. Ces options s'inscrivent dans leur nom et sont appelées « attributs » (ou « propriétés »).
Leur valeur est toujours entourée d'apostrophes simples (') ou doubles (")
<hl id="monTitre">Bienvenue chez moi</hl>
Ce code introduit un titre de premier niveau (h1) avec 'une propriété id de valeur monTitre. La valeur de cet attribut, identifiant la balise, doit être unique dans le document .
Les attributs sont indispensables pour distinguer les éléments entre eux et pouvoir créer la mise en page du document à l'aide des feuilles de styles CSS.
Les éléments peuvent être imbriqués, en respectant la hiérarchie, et en évitant de faire se chevaucher des balises ouvrantes et fermantes qui ne se correspondent pas
<hl id="monTitre">Bienvenue<strong> chez Toto </strong> et moi</hl>
Bienvenue chez Toto et moi
tous les documents web sont structurés sous forme de balises à plusieurs niveaux d'imbrication. Cette structure constitue une arborescence globale qui débute par la première balise, racine du document : <html>.
Les éléments en ligne, Les éléments de type bloc
La structure des éléments
La bonne compréhension de la structure des éléments est indispensable. Elle aura de nombreuses applications.
Les éléments HTML ont chacun une structure particulière. Il en existe deux familles :
les éléments de type bloc et les éléments au fil du texte, dits en ligne (ou inline). Ce type dictera tous leurs comportements : positionnement, affichage, etc.
La distinction fondamentale est assez claire.
Les blocs distinguent des parties entières comme des titres, des paragraphes, des listes, des citations, etc.
Les éléments en ligne sont prévus pour enrichir localement des portions de texte (lien hypertexte emphase, renforcement, etc.).
Il en découle des spécificités d'affichage
Ces deux familles de balises diffèrent par les contenus qu'elles acceptent, en dehors du texte à proprement parler :
Un élément bloc peut contenir un (ou plusieurs) éléments bloc et/ou en ligne, à l'exception des éléments de paragraphe <p> et des titres <hl>, <h2>..., limités aux contenus en ligne.
Un élément en ligne ne peut renfermer que d'autres éléments en ligne. Il existe aussi deux sortes d'éléments en ligne : « remplacés » et « non remplacés ».
Seuls les éléments remplacés acceptent des attributs de dimensions (height, width). Il s'agit des éléments <img>, <input>, <textarea>, <select> et <object>.
Les autres n'ont pas de dimension à proprement parler, et n'occupent que la place nécessaire à leur contenu. C'est le cas des éléments <strong>, <em>, <a>, etc.
Une mise en page se fera donc préférentiellement à l'aide de balises de type bloc. La plus indiquée pour cet usage est <div> (« division ») : c'est une balise générique servant de conteneur neutre.
Les éléments en ligne
Le contenu des éléments en ligne est affiché au fil du texte. Par exemple : des portions de phrases mises en exergue dans un paragraphe, des liens hypertexte, etc.
On les appelle encore « éléments internes » car ils visent à donner du sens à des portions du document tout en restant au fil du texte, c'est-à-dire sans créer de nouveaux blocs.
C'est par exemple le cas des éléments de renforcement (représentés en gras par les navigateurs graphiques), et d'emphase (italique).
Ces éléments, conçus pour demeurer au sein du texte afin de l'enrichir et de lui apporter du sens, ne sont pas vraiment prévus pour un positionnement précis dans le document (même si cela est possible).
À l'exception des éléments remplacés, déjà mentionnés, leurs dimensions seront déterminées par leur contexte.
Par défaut, et contrairement aux éléments de type bloc, les éléments en ligne ont des marges internes et externes d'épaisseur nulle, donc inexistantes.
Les éléments de type bloc
II s'agit de ceux dont le rendu visuel forme un bloc.
C'est par exemple le cas des paragraphes.
Cette structure leur permet de prévoir des dimensions (hauteur, largeur, profondeur), de contenir d'autres éléments dimensionnés, et de posséder des marges internes (paddi ng). Leur propriété la plus importante est la possibilité de les placer (ou positionner) en les sortant du flux du document, contribuant ainsi à sa mise en page.
Ces caractéristiques leur sont pour la plupart réservées. Ainsi, une balise en ligne comme <em> ne pourra posséder de dimensions propres, celles-ci dépendant du contenu (texte ou image) de son élément.
Il est facile de passer d'une structure bloc à une structure en ligne (et inversement) grâce à la propriété CSS display.
Marges par défaut
À l'exception de la balise neutre <div>, tous les éléments de type bloc possèdent par défaut des marges internes (padding) et externes (margin) non nulles.
les différents navigateurs leur donnent des valeurs différentes. C'est pourquoi il faut parfois les annuler ou les expliciter pour éviter de grosses différences de rendu visuel.
