[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/fr/docs/Learn_web_development/Core/Structuring_content [Back]  [Original]

Structurer le contenu avec HTML - Apprendre | MDN

Cette page a t traduite partir de l'anglais par la communaut. Vous pouvez contribuer en rejoignant la communaut francophone sur MDN Web Docs.

View in English Always switch to English

Structurer le contenu avec HTML

HTML est la technologie qui dfinit le contenu et la structure de n'importe quel site Web. Bien rdig, il doit aussi dfinir la smantique (le sens) du contenu de manire lisible par une machine, ce qui est essentiel pour l'accessibilit, le rfrencement et l'exploitation des fonctionnalits intgres fournies par les navigateurs afin que le contenu fonctionne de faon optimale. Ce module couvre les bases du langage, avant d'aborder des domaines cls tels que la structure du document, les liens, les listes, les images, les formulaires, et plus encore.

Dans cet article

Prrequis

Avant de commencer ce module, vous n'avez pas besoin de connaissances pralables en HTML, mais vous devez au moins tre familierre avec l'utilisation d'un ordinateur et la navigation passive sur le Web (c'estdire simplement le consulter et consommer du contenu). Vous devez disposer d'un environnement de travail de base (comme expliqu dans Installer les logiciels de base), et comprendre comment crer et grer des fichiers (comme expliqu dans Grer les fichiers). Les deux font partie de notre module pour dbutantes Commencer avec le Web.

Note : Si vous travaillez sur un ordinateur, une tablette ou un autre appareil o vous ne pouvez pas crer de fichiers, vous pouvez essayer d'excuter le code dans un diteur en ligne tel que CodePen (angl.) ou JSFiddle (angl.).

Tutoriels et dfis

Syntaxe de base du HTML

Couvre les notions fondamentales de HTML pour bien commencer nous dfinissons les lments, les attributs et d'autres termes importants, et expliquons comment ils s'intgrent dans le langage. Nous montrons aussi comment une page HTML typique est structure et comment un lment HTML est construit, et expliquons d'autres caractristiques de base importantes du langage. En chemin, nous manipulons un peu de HTML pour susciter votre intrt !

Qu'y atil dans l'entte ? Mtadonnes d'une page Web

L'en-tte d'un document HTML est la partie qui n'est pas affiche dans le navigateur lorsque la page est charge. Elle contient des mtadonnes telles que l'lment <title> de la page, des liens vers le CSS (si vous souhaitez mettre en forme votre contenu HTML avec du CSS), des liens vers des favicons personnaliss et des mtadonnes (des informations sur le HTML, par exemple l'auteurice et des motscls importants dcrivant le document).

Titres et paragraphes

L'une des principales fonctions du HTML est d'organiser le texte afin qu'un navigateur puisse afficher un document HTML comme son auteurice l'entend. Cet article explique comment le HTML peut fournir une structure de page fondamentale en dfinissant des titres et des paragraphes.

Emphase et importance

L'article prcdent expliquait pourquoi la smantique est importante en HTML et se concentre sur les titres et les paragraphes. Cet article poursuit le thme de la smantique en prsentant des lments HTML qui appliquent de l'emphase et de l'importance au texte (quivalents l'italique et au gras dans le texte imprim).

Listes

Les listes sont partout de votre liste de courses l'ensemble d'instructions que vous suivez inconsciemment pour vous rendre quelque part, en passant par les tapes de ces tutoriels ! Il n'est donc pas surprenant que le HTML propose un ensemble d'lments permettant de dfinir diffrents types de listes. Sur le Web, il existe trois types de listes : non ordonne, ordonne et description. Cette leon montre comment utiliser ces diffrents types.

Fonctions avances du texte

De nombreux autres lments HTML servent dfinir la smantique du texte, que nous n'avons pas abords dans l'article Emphase et importance. Les lments dcrits dans cet article sont moins connus mais utiles connatre (ce n'est pas une liste exhaustive). Vous y apprenez baliser des citations, du code informatique et d'autres textes apparents, les indices et exposants, les informations de contact, et plus encore.

Baliser une lettre Dfi

Nous apprenons tous crire une lettre tt ou tard ; c'est aussi un exemple utile pour tester vos comptences en mise en forme du texte. Dans ce dfi, vous avez une lettre baliser pour tester vos comptences en mise en forme de texte HTML, ainsi que les hyperliens et l'utilisation correcte de l'lment HTML <head>.

Structurer des documents

En plus de dfinir les parties individuelles de votre page (comme  un paragraphe  ou  une image ), le HTML comporte galement un certain nombre d'lments de niveau bloc utiliss pour dfinir des zones de votre site Web (comme  l'en-tte ,  le menu de navigation ,  la colonne principale de contenu ). Cet article explique comment planifier une structure de site basique, et crire le HTML qui reprsente cette structure.

Crer des liens

Les liens (galement appels hyperliens) sont vraiment importants ils sont ce qui fait du Web une toile. Cet article prsente la syntaxe ncessaire pour crer un lien et aborde les bonnes pratiques en matire de liens.

Structurer une page de contenu Dfi

Structurer une page de contenu prte tre mise en page avec du CSS est une comptence essentielle matriser ; dans ce dfi, vous tes teste sur votre capacit imaginer l'apparence finale d'une page et choisir des smantiques structurelles appropries pour construire une mise en page.

Images HTML

Au dbut, le Web n'tait que du texte, et c'tait assez ennuyeux. Heureusement, il n'a pas fallu longtemps avant d'ajouter la possibilit d'intgrer des images (et d'autres types de contenu plus intressants) dans les pages Web. Dans cet article, nous voyons comment utiliser en profondeur l'lment HTML <img>, y compris les bases, l'annoter avec des lgendes l'aide de <figure> et dtailler son lien avec les images de fond de CSS.

Vido et audio HTML

Maintenant que nous sommes l'aise avec l'ajout de simples images une page Web, l'tape suivante consiste ajouter des lecteurs vido et audio vos documents HTML ! Dans cet article, nous voyons comment faire cela avec les lments HTML <video> et <audio> ; nous terminons en examinant comment ajouter des sous-titres/lgendes vos vidos.

Page de prsentation Bestioles rampantes Dfi

Dans ce dfi, nous testons vos connaissances sur certaines des techniques abordes dans les dernires leons, en vous demandant d'ajouter des images et des vidos une page de prsentation consacre aux insectes et autres petites bestioles.

Bases des tableaux HTML

Cet article vous initie aux tableaux HTML, couvrant les notions de base telles que les lignes, les cellules, les en-ttes, la faon de faire dborder des cellules sur plusieurs colonnes et lignes, et comment regrouper toutes les cellules d'une colonne pour des besoins de mise en forme.

Accessibilit des tableaux HTML

Dans cet article, nous examinons d'autres fonctionnalits d'accessibilit des tableaux HTML, comme les lgendes/rsums, le groupement des lignes en sections d'en-tte, de corps et de pied de tableau, et le primtre des colonnes et des lignes.

Structurer un tableau de donnes sur les plantes Dfi

Dans ce dfi, nous vous fournissons des donnes sur les plantes de notre systme solaire. Votre tche est de les structurer dans un tableau HTML accessible.

Formulaires et boutons en HTML

Les formulaires et les boutons HTML sont des outils puissants pour interagir avec les utilisateurices le plus souvent, ils servent collecter des donnes auprs des utilisateurices ou leur permettre de contrler une interface utilisateur. Dans cet article, nous prsentons une introduction aux bases des formulaires et des boutons.

Dboguer le HTML

crire du HTML, c'est bien, mais que faire si quelque chose tourne mal et que vous ne parvenez pas localiser l'erreur dans le code ? Cet article prsente des outils qui peuvent vous aider trouver et corriger les erreurs en HTML.

Tester vos comptences

Vous pouvez trouver des articles  Tester vos comptences  placs entre les articles de tutoriel pour vrifier que vous avez retenu les informations les plus importantes avant de passer la suite. Si vous souhaitez explorer tous ces articles ensemble, vous pouvez les trouver lists Tester vos comptences : HTML.

Consulter des tutoriels supplmentaires

Ces tutoriels ne font pas partie du parcours d'apprentissage, mais ils sont nanmoins intressants vous pouvez les considrer comme des objectifs d'approfondissement tudier en option une fois que vous avez termin les principaux articles du module principal.

Inclure des graphiques vectoriels en HTML

Les graphiques vectoriels sont trs utiles dans de nombreuses circonstances ils ont de petites tailles de fichier et sont hautement volutifs, ils ne se pixelisent donc pas lorsqu'on effectue un zoom ou qu'on les agrandit beaucoup. Dans cet article, nous vous montrons comment en inclure un dans votre page Web.

D'object iframe technologies gnrales d'intgration

Les dveloppeureuses pensent souvent intgrer des mdias tels que des images, des vidos et de l'audio dans des pages Web. Dans cet article, nous faisons un pas de ct en examinant certains lments qui permettent d'intgrer une grande varit de types de contenu dans vos pages Web : les lments HTML <iframe>, <embed> et <object>. Les <iframe> servent intgrer d'autres pages Web, et les deux autres permettent d'intgrer des ressources externes telles que des fichiers PDF.

Voir aussi

Apprendre HTML et CSS (angl.), Scrimba Partenaire d'apprentissage MDN

Scrimba's (angl.) Apprendre HTML et CSS vous enseigne le HTML et le CSS en construisant et en dployant cinq projets, avec des leons interactives et des dfis anims par des formateurs expriments.

Apprendre HTML (angl.), Codecademy

Une autre ressource utile pour apprendre les bases du HTML.

Les bases du HTML smantique (angl.), Scrimba Partenaire d'apprentissage MDN

Cette leon interactive fournit une description utile du HTML, en insistant sur l'importance de l'aspect smantique.


Web Proxy Viewer  |  New URL  |  Original Page