{"id":1458,"date":"2026-02-16T21:51:11","date_gmt":"2026-02-16T21:51:11","guid":{"rendered":"https:\/\/mytribu.fr\/cmopc\/?p=1458"},"modified":"2026-02-16T21:51:11","modified_gmt":"2026-02-16T21:51:11","slug":"html-5","status":"publish","type":"post","link":"http:\/\/mytribu.fr\/cmopc\/html-5\/","title":{"rendered":"html 5"},"content":{"rendered":"\n<!doctype html>\n<html lang=\"fr\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Le DOCTYPE en HTML5<\/title>\n<\/head>\n\n<body>\n\n<h1>Le DOCTYPE en HTML5<\/h1>\n\n<p>\nLa premi\u00e8re ligne d\u2019un document HTML est le <strong>DOCTYPE<\/strong>.\nIl indique au navigateur <strong>quel type de document<\/strong> il doit interpr\u00e9ter.\n<\/p>\n\n<pre><code>&lt;!doctype html&gt;<\/code><\/pre>\n\n<hr>\n\n<h2>\u00c0 quoi sert le DOCTYPE ?<\/h2>\n\n<ul>\n  <li>Il informe le navigateur que la page utilise <strong>HTML5<\/strong><\/li>\n  <li>Il active le <strong>mode standard<\/strong> du navigateur<\/li>\n  <li>Il \u00e9vite des erreurs d\u2019affichage<\/li>\n<\/ul>\n\n<hr>\n\n<h2>Pourquoi est-il indispensable ?<\/h2>\n\n<p>\nSans DOCTYPE, le navigateur peut interpr\u00e9ter la page avec de mauvaises r\u00e8gles,\nnotamment pour l\u2019encodage des caract\u00e8res.\n<\/p>\n\n<hr>\n\n<h2>Exemple d\u2019affichage <strong>sans DOCTYPE<\/strong><\/h2>\n\n<pre><code>&lt;html&gt;\n&lt;head&gt;\n  &lt;title&gt;Page sans DOCTYPE&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;p&gt;Les accents sont mal affich\u00e9s : \u00e9 \u00e0 \u00e8 \u00e7 \u00f9 \u00f4 \u00ee&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n<p><strong>Affichage possible :<\/strong><\/p>\n\n<pre>\nLes accents sont mal affich\u00c3\u00a9s : \u00c3\u00a9 \u00c3  \u00c3\u00a8 \u00c3\u00a7 \u00c3\u00b9 \u00c3\u00b4 \u00c3\u00ae\n<\/pre>\n\n<hr>\n\n<h2>Exemple correct avec DOCTYPE et encodage<\/h2>\n\n<pre><code>&lt;!doctype html&gt;\n&lt;html lang=\"fr\"&gt;\n&lt;head&gt;\n  &lt;meta charset=\"utf-8\"&gt;\n  &lt;title&gt;Page HTML5 correcte&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;p&gt;Les accents sont correctement affich\u00e9s : \u00e9 \u00e0 \u00e8 \u00e7 \u00f9 \u00f4 \u00ee&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n<hr>\n\n<h2>Formats d\u2019images accept\u00e9s en HTML<\/h2>\n\n<p>\nLe HTML permet d\u2019afficher des images gr\u00e2ce \u00e0 la balise <code>&lt;img&gt;<\/code>.\n<\/p>\n\n<h3>Formats couramment utilis\u00e9s<\/h3>\n<ul>\n  <li><strong>JPEG (.jpg \/ .jpeg)<\/strong> : photographies<\/li>\n  <li><strong>PNG (.png)<\/strong> : images avec transparence<\/li>\n  <li><strong>GIF (.gif)<\/strong> : animations simples<\/li>\n  <li><strong>SVG (.svg)<\/strong> : images vectorielles<\/li>\n  <li><strong>WebP (.webp)<\/strong> : format moderne et l\u00e9ger<\/li>\n<\/ul>\n\n<h3>Formats \u00e0 \u00e9viter<\/h3>\n<ul>\n  <li>BMP (.bmp)<\/li>\n  <li>TIFF (.tiff)<\/li>\n  <li>HEIC \/ HEIF<\/li>\n<\/ul>\n\n<h3>Insertion d\u2019une image<\/h3>\n\n<pre><code>&lt;img src=\"image.jpg\" alt=\"Description de l\u2019image\"&gt;<\/code><\/pre>\n\n<p>\n<strong>RGAA \u2013 Accessibilit\u00e9 :<\/strong><br>\nL\u2019attribut <code>alt<\/code> est <strong>obligatoire<\/strong> selon le RGAA\n(R\u00e9f\u00e9rentiel G\u00e9n\u00e9ral d\u2019Am\u00e9lioration de l\u2019Accessibilit\u00e9).\nIl fournit une alternative textuelle aux utilisateurs de lecteurs d\u2019\u00e9cran\net permet la compr\u00e9hension du contenu lorsque l\u2019image ne s\u2019affiche pas.\n<\/p>\n\n<p>\nUne image purement d\u00e9corative doit utiliser un attribut <code>alt=\"\"<\/code>.\n<\/p>\n\n<hr>\n\n<h2>\u00c0 retenir<\/h2>\n\n<ul>\n  <li>Le DOCTYPE active le mode HTML5<\/li>\n  <li>L\u2019encodage <code>UTF-8<\/code> est indispensable<\/li>\n  <li>Les images doivent utiliser des formats web adapt\u00e9s<\/li>\n  <li>L\u2019attribut <code>alt<\/code> est obligatoire (RGAA)<\/li>\n  <li>La balise <code>&lt;img&gt;<\/code> ne fonctionne pas par paire<\/li>\n<\/ul>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Le DOCTYPE en HTML5 Le DOCTYPE en HTML5 La premi\u00e8re ligne d\u2019un document HTML est le DOCTYPE. Il indique au<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1458","post","type-post","status-publish","format-standard","hentry","category-non-classe","comments-off"],"_links":{"self":[{"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/posts\/1458","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/comments?post=1458"}],"version-history":[{"count":1,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/posts\/1458\/revisions"}],"predecessor-version":[{"id":1459,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/posts\/1458\/revisions\/1459"}],"wp:attachment":[{"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/media?parent=1458"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/categories?post=1458"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/tags?post=1458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}