Cheatsheet : HTML
HTML : l'essentiel pour votre apprentissage dans une cheatsheet signée laConsole.
8 chapitres
Paire VS Orpheline
copié !
<!-- Balise paire -->
<p></p>
<!-- Balise orpheline -->
<br>
Ajout de / possible à la fin d’une balise orpheline
Squelette HTML
copié !
Balises essentielles à toute page web.
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Titre</title>
<meta name="description" content="Blablaba...">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body></body>
</html>
Commentaire
copié !
<!-- Je suis un commentaire -->
Lier du CSS
copié !
<link href="path/to/app.css" rel="stylesheet">
Lier du JS
copié !
<script src="path/to/app.js"></script>
Titres
copié !
<h1>Titre 1</h1>
<h2>Titre 2</h2>
<h3>Titre 3</h3>
<h4>Titre 4</h4>
<h5>Titre 5</h5>
<h6>Titre 6</h6>
h1 plus important que h6 (SEO)
Paragraphe
copié !
<p>Je suis un paragraphe</p>
Lien
copié !
Des liens hypertexte pour naviguer de page en page.
<a href="...">Texte du lien</a>
target="_blank": ouverture dans un nouvel onglethref="#about": scroll vers l’élément portant l’idabouthref="mailto:...: email via la messagerie par défaut de l’utilisateurhref="tel:...: appel téléphonique au numéro précisé (idéal sur mobile)- Attribut
download: téléchargement d’un fichier (précisé viahref)
Image
copié !
<img src="path/to/dev-night.png" alt="Développeur qui code la nuit">
Vidéo
copié !
<video controls>
<source src="movies/movie1.mp4" type="video/mp4">
<source src="movies/movie1.webm" type="video/webm">
Element video non pris en charge par le navigateur.
</video>
Audio
copié !
<audio controls>
<source src="sounds/birds.mp3" type="audio/mp3">
Element audio non pris en charge par le navigateur.
</audio>
Canvas
copié !
Zone de dessin dans laquelle on peut réaliser des graphiques.
<canvas>
Element canvas non pris en charge par le navigateur.
</canvas>
Usage de JavaScript requis
Liste
copié !
<!-- Liste non-ordonnée -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<!-- Liste ordonnée -->
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
<!-- Liste de définition -->
<dl>
<dt>Mot à définir</dt>
<dd>Définition</dd>
</dl>
Tableau
copié !
<table>
<caption>Légende du tableau</caption>
<thead>
<tr>
<th>Couleur</th>
<th>Hexadécimal</th>
</tr>
</thead>
<tbody>
<!-- Ligne 1 -->
<tr>
<td>Rouge</td>
<td>#FF0000</td>
</tr>
<tr></tr> <!-- Ligne 2 -->
<tr></tr> <!-- Ligne 3 -->
</tbody>
<tfoot>
<tr>
<th>Couleur</th>
<th>Hexadécimal</th>
</tr>
</tfoot>
</table>
Iframe
copié !
<iframe src="https://meteofrance.com/widget/prevision/330630" title="Prévisions météo à Bordeaux (33)"></iframe>
- Usage des
iframegourmand en ressource - CSP : permet de limiter l’intégration d’une page
Form
copié !
<form action="register.php" method="POST">
<!-- Champs du formulaire -->
</form>
action et method : utiles si traitement du formulaire (en PHP par exemple)
Label
copié !
Etiquette pour les champs de formulaire.
<label for="email">Adresse mail</label>
for doit être égal à id du champ lié
Input
copié !
Un champ de saisie modulaire.
<label for="pseudo">Pseudo</label>
<input type="text" id="pseudo" name="pseudo" maxlength="20" required>
<input type="submit" value="Envoyer">
<input type="radio" id="front" name="type" value="front">
<label for="front">Dev Front</label>
<input type="radio" id="back" name="type" value="back">
<label for="back">Dev Back</label>
<input type="radio" id="full-stack" name="type" value="full-stack">
<label for="full-stack">Dev Fullstack</label>
<input type="checkbox" id="html" name="languages[]" value="html">
<label for="html">HTML</label>
<input type="checkbox" id="css" name="languages[]" value="css">
<label for="css">CSS</label>
<input type="checkbox" id="js" name="languages[]" value="js">
<label for="js">JS</label>
<input type="checkbox" id="php" name="languages[]" value="php">
<label for="php">PHP</label>
- Types fréquents :
text,email,password,radio,checkbox,submit - Type
submit: soumission d’un formulaire - Sélecteur à choix unique (
radio) - Sélecteur à choix multiples (
checkbox)
Select
copié !
Liste déroulante.
<label for="class">Classe</label>
<select id="class" name="class" required>
<option value="" disabled selected>Sélectionner une classe</option>
<optgroup label="Magique">
<option value="wizard">Mage</option>
<option value="heal">Soigneur</option>
</optgroup>
<optgroup label="Physique">
<option value="warrior">Guerrier</option>
<option value="archer">Archer</option>
</optgroup>
</select>
Textarea
copié !
Champ textuel long.
<label for="bio">Biographie</label>
<textarea id="bio" name="bio" rows="5" placeholder="Parlez nous de vous !"></textarea>
Div
copié !
Balise générique de type block.
<div class="container"></div>
- Prend 100% de l’élément parent
- Rôle structurel
Span
copié !
Balise générique de type inline.
<p>Lorem ipsum dolor sit amet. <span class="hashtag">dev</span></p>
- Prend juste l’espace nécessaire
- Sous-division de texte
Structuration
copié !
Ces balises jouent le rôle de conteneurs sémantiques.
<header>En-tête d'élément</header>
<footer>Pied d'élément</footer>
<main>Contenu principal</main>
<nav>Ensemble de liens</nav>
<section>Contenu thématique</section>
<article>Contenu autonome</article>
<aside>Contenu complémentaire / connexe</aside>
Confèrent une sémantique que div n’a pas
Mise en valeur
copié !
<em>Mise en valeur</em>
<strong>Mise en valeur forte</strong>
Utile pour SEO et accessibilité
Séparateur
copié !
<!-- Saut de ligne -->
<br>
<!-- Ligne de séparation horizontale -->
<hr>
Class
copié !
Appartenance d’un élément HTML à une famille.
<button class="btn btn-dark">Bouton sombre</button>
<button class="btn btn-light">Bouton clair</button>
- Classes réutilisables / cumulables
- Utile pour
JavaScriptetCSS
Id
copié !
Identification d’un élément HTML.
<button id="add-to-cart">Ajouter au panier</button>
- Un identifiant doit être unique
- Utile pour
JavaScriptetCSS - Aussi utilisés pour les “ancres nommées”