Qu’est-ce que le HTML ?

Le HTML, ou HyperText Markup Language, est le langage de balisage standard pour les documents conçus pour être affichés dans un navigateur web. Il peut être assisté par des technologies telles que Cascading Style Sheets (CSS) et des scripts de langage comme JavaScript.

Structure d'une page HTML

				
					<!DOCTYPE html>
<html>
<head>
    <title>Page de Démonstration HTML</title>
</head>
<body>
    <h1>Bienvenue dans le monde du HTML!</h1>
    <p>Ceci est un paragraphe d'introduction au HTML.</p>
</body>
</html>
				
			

Les bases du HTML

La structure de base d’un document HTML comprend <html>, <head>, et <body>. Le <head> contient des métadonnées et le <body> contient le contenu de la page.

				
					<!DOCTYPE html>
<html>
<head>
    <title>Titre de votre site</title>
</head>
<body>
    <h1>Votre contenu principal ici</h1>
</body>
</html>
				
			

Travailler avec les textes

Pour le texte, HTML offre diverses balises pour le paragraphe, le gras, l’italique, etc.

				
					<p>Ceci est un paragraphe standard.</p>
<p><strong>Texte en gras</strong> et <em>texte en italique</em>.</p>

				
			

Utilisation des images

Intégrer des images est réalisé via la balise <img>, spécifiant le chemin avec src et une description avec alt.

				
					<img decoding="async" src="chemin/vers/image.jpg" alt="Description de l'image">


				
			

Création de liens

Les liens sont créés avec <a>, permettant de naviguer vers d’autres pages ou sites.

				
					<a href="https://www.exemple.com" target="_blank" rel="noopener">Visitez notre site</a>


				
			

Les listes en HTML

Les listes permettent d’organiser l’information en listes ordonnées ou non ordonnées.

				
					<ul>
    <li>Liste non ordonnée</li>
    <li>Autre élément</li>
</ul>
<ol>
    <li>Premier élément d'une liste ordonnée</li>
    <li>Deuxième élément</li>
</ol>


				
			

Tables en HTML

Les tables organisent les données en lignes et colonnes.

				
					<table>
    <tr>
        <th>En-tête 1</th>
        <th>En-tête 2</th>
    </tr>
    <tr>
        <td>Donnée 1</td>
        <td>Donnée 2</td>
    </tr>
</table>
				
			

Formulaires en HTML

Les formulaires collectent des données utilisateur. Ils peuvent inclure des champs de texte, des boutons, etc.

				
					<form action="/soumission-formulaire" method="post">
    <label for="nom">Nom:</label>
    <input type="text" id="nom" name="nom">
    <input type="submit" value="Soumettre">
</form>

				
			

Intégration de multimédia

Pour intégrer des vidéos ou de l’audio, HTML5 offre les balises <video> et <audio>.

				
					<video src="chemin/vers/video.mp4" controls>Vidéo non prise en charge</video>
<audio src="chemin/vers/audio.mp3" controls>Audio non pris en charge</audio>

				
			

Les cadres (Frames) et sections

Utiliser les iframes pour intégrer du contenu externe et les sections pour structurer sémantiquement le contenu.

				
					<iframe src="https://www.exemple.com" width="600" height="400"></iframe>

<section>
    <h2><span class="ez-toc-section" id="Titre_de_Section"></span>Titre de Section<span class="ez-toc-section-end"></span></h2>
    <p>Contenu de la section.</p>
</section>
				
			

HTML5 et ses nouveautés

HTML5 a introduit de nouvelles balises sémantiques pour une meilleure structuration du contenu.

				
					<article>
    <h2><span class="ez-toc-section" id="Article_Principal"></span>Article Principal<span class="ez-toc-section-end"></span></h2>
    <p>Contenu de l'article.</p>
</article>
<aside>
    <h2><span class="ez-toc-section" id="Informations_Complementaires"></span>Informations Complémentaires<span class="ez-toc-section-end"></span></h2>
    <p>Détails supplémentaires ici.</p>
</aside>

				
			

Accessibilité et HTML

L’accessibilité est cruciale pour rendre le contenu web utilisable par tous.

				
					<a href="https://www.exemple.com" aria-label="Visitez notre site web" target="_blank" rel="noopener">Plus d'infos</a>

				
			

Optimisation SEO avec HTML

Les balises meta et d’autres éléments HTML peuvent être optimisés pour le SEO.

				
					<head>
    <meta name="description" content="Description de votre site ici">
    <title>Titre de votre Page pour SEO</title>
</head>

				
			

Les formulaires avancés

HTML5 a enrichi les formulaires avec de nouveaux types d’entrée et attributs pour la validation.

				
					<input type="email" name="email" placeholder="Entrez votre email" required>

				
			

Le HTML est un langage fondamental pour le développement web, permettant de créer des structures de page flexibles et accessibles. Son évolution continue avec HTML5 enrichit le web de fonctionnalités interactives et sémantiques, facilitant la création de sites web plus riches et plus accessibles.