Informatique


Le display et 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.


Le display des balises

le display d'une balise représente le comportement de la balise dans le navigateur, toutes les balises ont un display par défaut, celui-ci peut être modifié au sein d'une feuille de styles.
Selon le display une balise aurra accès ou non à certaines options de mise en page.

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

Du point de vue HTML les balises ont toutes par défaut un rendu particulier à l'affichage.
Nous avons déjà vu des balises block et inline.

Du point de vue CSS, la commande display permet de modifier le rendu d'une balise, toutes les balises peuvent donc accéder à n'importe quel rendu.

Dans l'inspecteur d'élément la consultation de l'onglet Element (ou Computed) permet de voir le display (le rendu) de l'élément survolé.
Démo
<body>
<p>L'amour est une rose, <strong>chaque pétale une illusion</strong>, 
chaque épine une réalité (C.Baudelaire).</p>
</body>

Au survol de la balise p, onglet Computed

Au survol de la balise strong, onglet Computed


Les balises de type display:block

Ces balises:

  • provoquent un retour à la ligne
  • s'empilent les unes sur les autres comme des boîtes
  • occupent toute la largeur de leur conteneur (de la balise qui la (les) contient)
  • peuvent être positionnées sur la page avec position
  • 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(250,0,0,1);}
.p3	{
width:300px;
height:100px;
background:rgba(0,0,200,1);
color:white;
}
</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 display:inline

Ces balises:

  • ne provoquent pas de retour à la ligne
  • se placent côte à côte
  • occupent la largeur de leur contenu
  • ne peuvent pas être positionnées sur la page
  • peuvent utiliser la propriété margin, uniquement les marges gauches et droites
  • 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 display: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 display: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 display:flex et display:grid

Voilà deux display très importants qui nous permettront de faciliter le RWD.


Les balises de type display:none

display:none permet de ne pas afficher la balise, display:none est très souvent utilisé avec JS pour masquer/afficher des éléments dans la page.


Règles générales d'utilisation

Le SEO (Search Engine Optimization), l'accessibilité et la lisibilité de votre code sont très importants pour le référencement d'un site web.
Utiliser les balises HTML
Le "bon" fichier || Le "mauvais" fichier



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 <main>

<main>
 <section>
  <article>
   <div>
    <p> 
     ...textes, images, tableaux, formulaires et balises inline...
    </p>
   </div>
  </article>
 </section>
 <section>
  <article>
   <div>
    <p> 
     ...textes, images, tableaux, formulaires et balises inline...
    </p>
   </div>
  </article>
 </section>
// etc...
</main>

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 inline.

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.


Quiz

L'utilisation des balises 1