{"id":267,"date":"2026-01-06T20:18:58","date_gmt":"2026-01-06T19:18:58","guid":{"rendered":"https:\/\/lmspro.fr\/structure-html-les-balises-essentielles-pour-vos-pages-web\/"},"modified":"2026-01-23T14:16:10","modified_gmt":"2026-01-23T13:16:10","slug":"structure-html-les-balises-essentielles-pour-vos-pages-web","status":"publish","type":"post","link":"https:\/\/lmspro.fr\/en\/structure-html-les-balises-essentielles-pour-vos-pages-web\/","title":{"rendered":"HTML Structure: Essential Tags for Your Web Pages"},"content":{"rendered":"

HTML Structure: Essential Tags for Your Web Pages<\/h2>\n
D\u00c3\u00a9couvrez l’anatomie d’un document HTML, les balises structurantes et les bonnes pratiques pour cr\u00c3\u00a9er des pages web s\u00c3\u00a9mantiques et accessibles.<\/p>\n
\n
Level :<\/strong> D\u00c3\u00a9butant<\/p>\n
Dur\u00c3\u00a9e :<\/strong> 35 minutes<\/p>\n
Target audience:<\/strong> D\u00c3\u00a9veloppeurs d\u00c3\u00a9butants, Futurs int\u00c3\u00a9grateurs web<\/p>\n<\/div>\n
Objectifs p\u00c3\u00a9dagogiques<\/h2>\n
\n
Comprendre la structure d’un document HTML<\/li>\n
Ma\u00c3\u00aetriser les balises de base et leur r\u00c3\u00b4le<\/li>\n
Appliquer une structure s\u00c3\u00a9mantique<\/li>\n
Valider la conformit\u00c3\u00a9 du code<\/li>\n<\/ul>\n
\n

Objectifs p\u00c3\u00a9dagogiques<\/h2>\n
\n
Comprendre la structure d’un document HTML<\/li>\n
Ma\u00c3\u00aetriser les balises de base et leur r\u00c3\u00b4le<\/li>\n
Appliquer une structure s\u00c3\u00a9mantique<\/li>\n
Valider la conformit\u00c3\u00a9 du code<\/li>\n<\/ul>\n
\n

Titres (h1 \u00c3\u00a0 h6)<\/h4>\n
`<h1>Titre Principal (un seul par page)<\/h1> \n<h2>Titre de Section<\/h2> \n<h3>Sous-section<\/h3> \n<h4>Titre de niveau 4<\/h4> \n<h5>Titre de niveau 5<\/h5> \n<h6>Titre de niveau 6<\/h6><\/code><\/pre>\n`

Liste ordonn\u00c3\u00a9e (ol)<\/h4>\n
`<ol> \n <li>\u00c3\u2030tape 1<\/li> \n <li>\u00c3\u2030tape 2<\/li> \n <li>\u00c3\u2030tape 3<\/li> \n<\/ol><\/p>\n`
` \n<ol start=\"5\" reversed> \n <li>Compte \u00c3\u00a0 rebours...<\/li> \n<\/ol><\/code><\/pre>\n`

`Listes imbriqu\u00c3\u00a9es<\/h4>\n \n <li>Frontend \n \n <li>HTML<\/li> \n <li>CSS<\/li> \n <li>JavaScript<\/li> \n <\/ul> \n <\/li> \n <li>Backend \n \n <li>PHP<\/li> \n <li>Python<\/li> \n <\/ul> \n <\/li> \n<\/ul><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n`

Balise image<\/h4>\n
`<img \n src=\"images\/photo.jpg\" \n alt=\"Description de l'image\" \n width=\"800\" \n height=\"600\" \n><\/code><\/pre>\n`

Images responsives<\/h4>\n
`<img \n src=\"photo-800.jpg\" \n srcset=\"photo-400.jpg 400w, \n photo-800.jpg 800w, \n photo-1200.jpg 1200w\" \n sizes=\"(max-width: 600px) 400px, \n (max-width: 900px) 800px, \n 1200px\" \n alt=\"Photo responsive\" \n><\/code><\/pre>\n`

Structure minimale<\/h4>\n<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Titre de la Page<\/title>\n<\/head>\n<body>\n \n<\/body>\n<\/html><\/code><\/pre>\n

Titres (h1 \u00c3\u00a0 h6)<\/h4>\n<h1>Titre Principal (un seul par page)<\/h1>\n<h2>Titre de Section<\/h2>\n<h3>Sous-section<\/h3>\n<h4>Titre de niveau 4<\/h4>\n<h5>Titre de niveau 5<\/h5>\n<h6>Titre de niveau 6<\/h6><\/code><\/pre>\n

Liste ordonn\u00c3\u00a9e (ol)<\/h4>\n<ol>\n <li>\u00c3\u2030tape 1<\/li>\n <li>\u00c3\u2030tape 2<\/li>\n <li>\u00c3\u2030tape 3<\/li>\n<\/ol><\/p>\n\n<ol start=\"5\" reversed>\n <li>Compte \u00c3\u00a0 rebours...<\/li>\n<\/ol><\/code><\/pre>\n

Listes imbriqu\u00c3\u00a9es<\/h4>\n\n <li>Frontend\n \n <li>HTML<\/li>\n <li>CSS<\/li>\n <li>JavaScript<\/li>\n <\/ul>\n <\/li>\n <li>Backend\n \n <li>PHP<\/li>\n <li>Python<\/li>\n <\/ul>\n <\/li>\n<\/ul><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n

Balise image<\/h4>\n<img\n src=\"images\/photo.jpg\"\n alt=\"Description de l'image\"\n width=\"800\"\n height=\"600\"\n><\/code><\/pre>\n

Images responsives<\/h4>\n<img\n src=\"photo-800.jpg\"\n srcset=\"photo-400.jpg 400w,\n photo-800.jpg 800w,\n photo-1200.jpg 1200w\"\n sizes=\"(max-width: 600px) 400px,\n (max-width: 900px) 800px,\n 1200px\"\n alt=\"Photo responsive\"\n><\/code><\/pre>\n

Titres (h1 \u00c3\u00a0 h6)<\/h4>\n
`<h1>Titre Principal (un seul par page)<\/h1> \n<h2>Titre de Section<\/h2> \n<h3>Sous-section<\/h3> \n<h4>Titre de niveau 4<\/h4> \n<h5>Titre de niveau 5<\/h5> \n<h6>Titre de niveau 6<\/h6><\/code><\/pre>\n`

Liste ordonn\u00c3\u00a9e (ol)<\/h4>\n
`<ol> \n <li>\u00c3\u2030tape 1<\/li> \n <li>\u00c3\u2030tape 2<\/li> \n <li>\u00c3\u2030tape 3<\/li> \n<\/ol><\/p>\n`
` \n<ol start=\"5\" reversed> \n <li>Compte \u00c3\u00a0 rebours...<\/li> \n<\/ol><\/code><\/pre>\n`

`Listes imbriqu\u00c3\u00a9es<\/h4>\n \n <li>Frontend \n \n <li>HTML<\/li> \n <li>CSS<\/li> \n <li>JavaScript<\/li> \n <\/ul> \n <\/li> \n <li>Backend \n \n <li>PHP<\/li> \n <li>Python<\/li> \n <\/ul> \n <\/li> \n<\/ul><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n`

Balise image<\/h4>\n
`<img \n src=\"images\/photo.jpg\" \n alt=\"Description de l'image\" \n width=\"800\" \n height=\"600\" \n><\/code><\/pre>\n`

Images responsives<\/h4>\n
`<img \n src=\"photo-800.jpg\" \n srcset=\"photo-400.jpg 400w, \n photo-800.jpg 800w, \n photo-1200.jpg 1200w\" \n sizes=\"(max-width: 600px) 400px, \n (max-width: 900px) 800px, \n 1200px\" \n alt=\"Photo responsive\" \n><\/code><\/pre>\n`