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.
Par défaut, sont de type block (liste non exhaustive):
<html>, <body>,<header>, <nav>, <aside>, <section>, <article>, <footer>, <blockquote>, <adress>
<p>, <div>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <li>,<hr>, <div>, <dd>, <dl>, <dt>
<pre>, <form>, <fieldset>, <table>
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>
Par défaut, sont de type inline (liste non exhaustive):
<a>, <img>, <strong>, <i> <small> <cite>, <em> <mark> <b>
<span> <label> <input>
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>
Par défaut, sont de type inline-block (liste non exhaustive):
<select> <textarea>, <input> etc.
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>
Par défaut, sont de type list-item (liste non exhaustive):
<li>
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.
Par défaut, sont de type list-item (liste non exhaustive):
<datalist>
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
En règle générale:
- une balise bloc peut contenir des balises inline et d'autres blocs
- une balise inline ne peut contenir que des balises inline
- les balises peuvent s'imbriquer mais ne peuvent pas se chevaucher
- respecter la hiérarchie des balises (leur présence n'est pas obligatoire)
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