Informatique


L'utilisation des balises

Aller à

Le doctype

Le doctype (pour « type de document ») indique que le document est écrit avec du HTML standardisé. Si vous ne commencez pas votre document par <!doctype html>, les navigateurs afficheront votre document en mode quirks. Le mode quirks est le mode utilisé par le navigateur pour afficher les documents anciens ou mal conçus, écrits dans les années 1990 lorsque HTML était peu (voire pas du tout) standardisé et que chaque navigateur gérait HTML à sa façon, pour des raisons essentiellement commerciales.


Les balises vues côté HTML et vues côté CSS

Faisons bien la différence entre le squelette du document codé en HTML et l'habillage du document codé en CSS.

Du point de vue HTML les balises peuvent être de type block, inline, inline-block, table, table-row, etc. et rien ne peut modifier ce comportement.
Si on se place côté CSS, la commande display permet de modifier le rendu d'une balise du point de vue comportement à l'affichage en autorisant d'accéder ou non à certaines propriétés.
Selon le browser l'affichage ou le comportement d'une balise peut changer! Raison pour laquelle on utilise une feuille de style CSS pour corriger ces désagréments.

Les balises de type block

Ces balises:

  • provoquent un retour à la ligne
  • s'empilent les unes sur les autres comme des boîtes
  • peuvent être positionnées sur la page avec position
  • occupent toute la largeur de leur conteneur (de la balise qui la (les) contient)
  • peuvent être dimensionnées avec width, height, min-width, min-height,etc.
  • ont un sens sémantique (sauf <div>)

Démo
	<style>
		.p1	{background:rgba(0,200,0,1);}
		.p2	{background:rgba(200,0,0,1);}
		.p3	{
			width:300px;
			height:100px;
			background:rgba(0,0,200,1);
			}
	</style>
	</head>
	<body>
		<p class="p1">Les 3 blocs sont l'un en dessous de l'autre...</p>
		<p class="p2">Ils occupent toute la largeur de l'écran car
		le conteneur est la balise <body>.</p>
		<p class="p3">Sauf si on applique width et height...</p>
		
	</body>
L'espace entre les blocs correspond à une marge (margin) placée par défaut autour des blocs, cet espace peut varier avec le navigateur.

Les balises de type inline

Ces balises:

  • ne provoquent pas de retour à la ligne
  • se placent côte à côte
  • ne peuvent pas être positionnées sur la page
  • peuvent utiliser la propriété margin, uniquement les marges gauches et droites
  • ne peuvent pas utiliser la propriété padding
  • occupent la largeur de leur contenu
  • ne peuvent pas être dimensionnées avec width, height, min-width, min-height,etc.
  • ont un sens sémantique (sauf <span> et <b>)

Démo
	<style>
		.rouge	{color:rgba(200,0,0,1);}
		.vert	{background:rgba(0,200,0,1);}
		.deco	{margin:30px;}
	</style>
	</head>
	<body>
		<strong class="rouge">Un exemple </strong>
		<em class="vert deco">vaut mieux</em>
		<span class="rouge"> qu'on long blabla...</span>
		<em class="vert"> n'est-il pas ?</em>
	</body>
La balise de type inline-block

Cette balise a un rendu inline mais peut être dimensionnée avec width, height, min-width, min-height,etc.

Démo
	<style>
		.it1	{
			height:50px;
			width:200px;
		}
		.it2	{
			height:30px;
			width:150px;
		}
		.envFormu	{width:250px;}
	</style>
	</head>
	<body>
	<form action="#.php" method="post">
		Nom: <input class="it1" type="text"></input>
		Mot de passe:<input class="it2" type="password"></input>
		<input type="submit" class="envFormu" value="Envoyer"></input>
	</form>
	</body>
Les balises de type list-item

Les éléments de type list-item ont un rendu de type "block" mais peuvent bénéficier des propriétés CSS liées aux puces (list-style, list-style-type, list-style-image, list-style-position , ...).
Ces balises:

  • se placent toujours l'un en dessous de l'autre par défaut (comme un retour chariot)
  • occupent automatiquement, par défaut, toute la largeur disponible dans leur parent
  • peuvent être dimensionnés à l'aide des propriétés telles que width, height, min-width, min-height,...
  • peuvent bénéficier des propriétés CSS liées aux puces (list-style, list-style-type, list-style-image, list-style-position, …)

Démo
	<style>
		.maliste	{
			list-style-type:upper-roman;
		}
	</style>
	</head>
	<body>
	<ul class="maliste">
		<li>Pierre</li>
		<li>Paul</li>
		<li>Jacques</li>
	</ul>
	</body>
Les balises de type table, table-row,table-column, etc.

Ces balises ont un rendu de type "block" mais peuvent bénéficier des propriétés CSS liées aux tableaux.


La propriété display

Le rendu des balises peut être modifié avec la propriété display.

Lorsque la valeur est none la balise est sortie du flux, comme si elle n'existait pas.

Les valeurs possibles pour display sont très nombreuses: inline, inline-block, block, flex, etc. (La liste complète)

Démo
<style>
strong {
		display:block;
		background:yellow;
		width:15%;
	}
</style>
</head>
<body>
	L'amour est une rose, <strong>chaque pétale une illusion</strong>, chaque épine une réalité (C.Baudelaire).
</body>

Règles générales d'utilisation

Voici comment hiérarchiser les balises

Dans la partie <header>

	<header>
	 <hgroup>
	 <h1>textes, images, balises inline... </h1>
	   <h2>textes, images, balises inline... </h2>
		 etc...
	 </hgroup>
	</header>
	
On peut placer des <p> et des <div> dans un <header> mais cela se fait rarement.
Dans la partie <nav>

	<nav>
	 <a> les adresses... </a>
	</nav>
		
On peut utiliser une liste <ul> pour encadrer la barre des menus si on a besoin de balises pour la mise en page!
Dans la partie <section>

	<section>
	 <article>
	  <div>
	   <p> 
	     ...textes, images, tableaux, formulaires et balises inline...
	   </p>
	  </div>
	 </article>
	</section>
		
On peut placer des titres (<h>) dans toutes les balises block, jamais dans des inline.
Dans la partie <footer>

	
	<footer> balises inline et textes...<footer>
		
On peut bien sûr utiliser les balises block dans un <footer> mais cela se fait rarement.

Concernant les balises block (PM)

BODY, ne peut pas être parent direct de caractères ou d'éléments de type En-ligne

H1, H2,... H6, ne peut être parent que d'éléments inline

OL et UL, ne peut contenir directement que des éléments de liste LI

P, ne peut être parent que d'éléments en-ligne

TABLE, peut être parent direct des balises suivantes : TR, CAPTION, THEAD, TFOOT, TBODY, COL, COLGROUP

FIELDSET, doit contenir en premier l'élément LEGEND

FORM, ne peut être parent direct que d'éléments blocs. Ne peut pas contenir d'autres éléments FORM


Concernant les balises inline (PM)

A, ne peut pas contenir d'autres éléments A

IMG, ne peut pas contenir d'éléments.

INPUT, ne peut pas contenir d'éléments.

LABEL, ne peut pas contenir d'autres éléments LABEL.