Scribd
Importer
2 vues5 pages

Code HTML Expliqué

Le document présente une structure HTML de base avec des explications sur chaque élément, y compris les balises sémantiques et leur utilisation. Il décrit les sections principales comme <header>, <main>, et <footer>, ainsi que les bonnes pratiques pour la rédaction de code HTML. Des suggestions pour étendre la structure avec des formulaires, tableaux et éléments multimédias sont également fournies.

Transféré par

adidomahugnonamour
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd
2 vues5 pages

Code HTML Expliqué

Le document présente une structure HTML de base avec des explications sur chaque élément, y compris les balises sémantiques et leur utilisation. Il décrit les sections principales comme <header>, <main>, et <footer>, ainsi que les bonnes pratiques pour la rédaction de code HTML. Des suggestions pour étendre la structure avec des formulaires, tableaux et éléments multimédias sont également fournies.

Transféré par

adidomahugnonamour
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd

Voici un exemple de structure HTML de base avec des explications détaillées :

<!DOCTYPE html>

<html lang="fr">

<head>

<!-- En-tête du document - informations non visibles -->

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Mon Premier Site</title>

</head>

<body>

<!-- Corps du document - contenu visible -->

<header>

<h1>Titre Principal</h1>

<nav>

<ul>

<li><a href="#accueil">Accueil</a></li>

<li><a href="#services">Services</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</nav>

</header>

<main>
<section id="accueil">

<h2>Section Accueil</h2>

<p>Bienvenue sur notre site web.</p>

</section>

<section id="services">

<h2>Nos Services</h2>

<article>

<h3>Service 1</h3>

<p>Description du service 1.</p>

</article>

<article>

<h3>Service 2</h3>

<p>Description du service 2.</p>

</article>

</section>

</main>

<footer id="contact">

<p>© 2026 Mon Entreprise</p>

<address>contact@[Link]</address>

</footer>

</body>

</html>
Explications :

<!DOCTYPE html> : Déclaration du type de document (HTML5).

<html> : Racine du document, avec attribut lang pour la langue.

<head> : Contient les métadonnées :

meta charset : encodage des caractères (UTF-8 pour Unicode)

meta viewport : adaptation aux appareils mobiles

title : titre de l'onglet du navigateur

<body> : Contenu visible de la page, structuré en :

<header> : En-tête de page (logo, navigation)

<nav> : Menu de navigation principal

<main> : Contenu principal

<section> : Section thématique (peut avoir un id pour ancrage)

<article> : Contenu autonome (ex: article de blog)


<footer> : Pied de page (informations de contact, copyright)

Balises sémantiques (HTML5) :

<header> , <footer> : Plus clairs que des <div>

<section> vs <article> : Une section est générique, un article est autonome

Hiérarchie des titres :

<h1> (titre principal, unique par page)

<h2> à <h6> (sous-titres hiérarchisés)

Bonnes pratiques :

Toujours fermer les balises

Utiliser l'indentation pour la lisibilité

Privilégier les balises sémantiques

Séparer structure (HTML), présentation (CSS) et comportement (JavaScript)


Vous pouvez étendre cette structure avec des formulaires ( <form> ), tableaux ( <table> ), ou éléments
multimédias ( <img> , <video> ).

Vous aimerez peut-être aussi