Accédez à nos cours concernant des domaines et thématiques différentes. Vous pouvez aussi contribuer en rédigeant des articles.
Consulter les coursParcourez notre annuaire d’écoles, instituts et universités du monde. Si votre école n’est pas listée, vous pouvez l’ajouter très facilement.
Consulter les écolesAccédez à notre messagerie instantanée pour échanger avec d’autres membres inscrits et aussi les invités. Aucune inscription n’est obligatoire.
Accéder au tchatOn peut classifier les balises selon plusieurs critères, leur physiologie (éléments vides et éléments non vides), contexte (éléments d'en-tête et éléments du corps), le degré d'exigence (balises obligatoires et balises facultatives), leur rôle (structuration, présentation), et enfin la façon d'apparaître dans le flux (en-ligne et bloc).
C'est la classification la plus importante et qui permet aux gens de bien comprendre le comportement des balises et leur rendu visuel par défaut dans la page. Ceci est aussi trop important dans certaines pratiques : par exemple l'imbrication de balises (on peut pas imbriquer un inline dans un bloc), le centrage des éléments (centrage horizontal, centrage vertical, centrage par marges négatives), connaître les propriétés de style applicables à une balise (par exemple les propriétés css width et height et les marges verticales c'est-à-dire margin-top et margin-bottom ne peuvent pas être appliquées à des balises de type en-ligne non remplacées) etc.
Ce sont des balises qui servent à structurer la page en plusieurs blocs, avec ces balises on pourra par exemple créer une page web constituée des blocs suivant : Un titre de niveau 1 suivi d'un titre de niveau 2 puis un texte ou une citation ou encore une liste ordonnée ou désordonnée.
Ces éléments de type bloc ont la particularité de créer un retour à la ligne avant et après et occupent par défaut la largeur la plus possible et par conséquent n'autorisent pas à ce qu'un autre bloc soit placé à côté d'eux, avez-vous jamais vu un tableau à droite d'un paragraphe, non à ce que je connais, sauf si vous utilisez la propriété "float (les flottants en CSS)" ou le positionnement avec les css (position : absolute ou fixed).
Les blocs occupent par défaut toute la largeur du bloc conteneur, même si leur contenu ne nécessite pas autant d'espace. Ceci peut être remarqué facilement avec les propriétés CSS border et background-color ou avec les événements JavaScript. Remarquez bien ce paragraphe même s'il contient peu de texte il épuise physiquement et graphiquement toute la largeur disponible :
La propriété border détermine la largeur occupée
La propriété background-color détermine la largeur occupée
Cliquez sur n'importe quel point du paragraphe (événement JavaScript)
Bien que le tableau fasse partie des blocs. Il ne suit ce même règlement que partiellement. Certes il occupe physiquement toute la largeur disponible puisqu'il n'accepte pas de partager l'emplacement qui lui a été dédié avec un autre élément. Mais graphiquement la partie réelle qu'il occupe correspond à son volume, ainsi les propriétés CSS border et background-color et les événements JavaScript ne vont concerner que la partie visible du tableau.
Remarquez le tableau suivant, la propriété CSS background-color permet de colorer uniquement le fond du tableau, en plus l'événement JavaScript "onclick" ne sera déclenché que si vous cliquez sur la partie visible du tableau :
| Bla Bla | Bla Bla |
Pour résumer, vous devez distinguer les blocks selon le critère "étendu géographique occupé" en deux catégories : la balise tableau et les balises : p, pre, blockquote, h1..h6, address, ul, ol, dl, div, form et fieldset.
Notez aussi que le centrage horizontal d'un tableau avec la propriété CSS margin peut se faire sans avoir à lui spécifier une largeur fixe, contrairement aux autres blocs. Cela constitue une autre caractéristique qui distingue les tableaux des autres éléments bloc.
Une balise "bloc" peut contenir soit un ou plusieurs autres "sous-bloc" soit une ou plusieurs balises "en-ligne" ou du texte simple. Exemples :
Notez bien que toutes les balises bloc font partie des éléments non vides, c'est-à-dire qu'elles sont dotées de deux repères un pour l'ouverture et l'autre pour la fermeture, car les éléments de type bloc sont destinés à englober d'autres éléments "bloc" ou "en-ligne".
Elles ne créent pas de retour chariot (retour à la ligne), et elles se situent à l'intérieur d'un bloc comme un paragraphe ou un tableau, par exemple la balise <strong> qui sert à mettre en exergue peut être insérée à l'intérieur d'une ligne d'un paragraphe sans provoquer un retour à la ligne. C'est le même cas pour la balise <img />, elle reste au même niveau que la ligne où elle est insérée, les balises de type en-ligne se subdivisent elles aussi en deux autres catégories :
Ce sont des balises qui permettent d'insérer un élément qui a des dimensions intrinsèques, c'est-à-dire qu'il possède par défaut une largeur (width) et une hauteur (height), ces éléments sont :
<img />, <textarea>, <select>, <input /> et <object>.
On les qualifie par le mot "remplacé", car par exemple lorsque la balise <img /> est insérée, cet élément sera remplacé par une image référencée par l'attribut "src". L'élément substitué (l'image physique) est censé apporter ses dimensions intrinsèques (qui lui sont propres). La même chose lorsque vous insérez une vidéo FLV ou un fichier flash SWF avec la balise <object>.
Ce sont des balises qui n'ont pas des dimensions intrinsèques, ils ont tendance à occuper le minimum de place, juste ce qui est nécessaire pour l'affichage de leur contenu (toujours du texte).
Toutes ces balises traitent toujours des données textuelles, et pour être utilisées à des fins d'enrichissements ou de sémantique. Par exemple introduire un retour à la ligne (<br />), mettre en exposant (<sup>), mettre en indice (<sub>), mettre en exergue (<strong> et <em>) etc.
Contrairement aux éléments en-ligne remplacés, les éléments incorporés non remplacés ne supportent pas les propriétés CSS width et height, ainsi que les propriétés CSS margin-top et margin-bottom (marges verticales).
Vous trouverez dans ce tableau quelques exemples de chaque type :
| Balises "bloc" | Balises "inline" |
| <p> et <pre> | <em> |
| <blockquote> | <strong> |
| <h1> . . . <h6> | <q> |
| <ul> | <sup> et <sub> |
| <ol> | <a> |
| <div> | <img /> |
| <table> | <input /> |
| <form> | <span> |
| <fieldset> | <br /> |
| <address> | <object> |
| <dl> | phrase elements |
Ce sont des balises qui commencent par le signe inférieur "<" suivi par le nom de la balise et un ou plusieurs attributs ainsi que leurs valeurs respectives, puis par une espace blanche (facultatif, mais recommandé), et enfin un slash "/" et le signe supérieur ">".
Le slash "/" permet de clôturer la balise en langage xhtml, mais si vous codez en html vous pouvez omettre cette barre oblique. Ce type de balises n'est pas fait pour encercler d'autres éléments (texte, autres balises etc.). Voici la syntaxe générale :
<nom-balise attributs-valeurs />
Ce sont des balises qui comportent deux repères : un pour l'ouverture, et l'autre pour la fermeture, ces balises ont la particularité d'encadrer d'autres éléments : balises (dans ce cas on parle d'imbrication de balises), ou du texte.
Les éléments non vides finissent par une balise de fermeture qui comprend un slash juste après le signe inférieur "<". Voici en gros la syntaxe : <nom-balise> éléments-enfants </nom-balise>.
En xhtml on doit toujours veiller à clôturer les balises (que ce soit pour les éléments vides ou non vides), mais en html c'est moins strict.
Ce sont des éléments que vous placez entre les deux balises <head></head>, ces éléments ne s'affichent pas par le navigateur, parmi ces éléments il y a :
Ce sont toutes les balises dont l'objectif est de créer des éléments affichables par le navigateur et imprimables par l'imprimante, ce sont les balises qui dominent dans une page web, car avant tout une page web est destinée à être lue par des internautes.
Elles sont contenues dans ce schéma minimal que doit avoir chaque page web :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title></title> </head> <body> </body> </html>
Comme vous pouvez le constater les balises obligatoires sont : <!DOCTYPE>, <html>, <head>, <title>, <body>.
Toutes les autres balises sont facultatives, celles du corps vous pouvez en insérer autant que vous voulez, celles de l'en-tête ça dépend, il y a certaines qui doivent être placées une seule fois (par exemple : <title>) et d'autres plusieurs fois (<meta>, <link>).
Ce sont des balises qui permettent de structurer votre document, d'ajouter du sens à son contenu et d'insérer des éléments, grâce à ce type de balises vous pouvez définir par exemple : un paragraphe, une liste, une citation, des en-têtes, des images, des tableaux, des formulaires etc.
La plupart de ces balises sont en cours d'abandon suite à l'avènement des CSS, dans un DTD strict vous n'avez pas le droit de vous en servir, car tout ce qui se rapporte au rendu visuel doit être confié aux CSS, et la seule raison d'être du XHTML c'est la structuration des pages web. Parmi ces balises de présentation on peut citer : <font> (formatage de texte), <strike> (texte barré), <u> (texte souligné) etc.
Ces balises ne donnent pas de sens et ne permettent pas d'insérer des éléments, par exemple la balise <font> ne signifie rien, et ne permet pas d'insérer un élément.
Voilà je me suis profondément épuisé 
Avant de finir ce chapitre, j'espère qu'il vous a apporté une valeur ajoutée. Bon, ne croyez pas que vous en avez échapé pour de bon. Au fil des chapitres, je vais pas cesser d'évoquer certaines notions retenues dans ce didacticiel 
surtout ce qui concerne la première classification : balises bloc et en-ligne. Alors vaut mieux bien capter les choses 
Lors du prochain chapitre, vous allez apprendre à insérer un texte pré-formaté avec la balise XHTML <pre> (preformatted text).