Différences

Ci-dessous, les différences entre deux révisions de la page.

--- web:html:text-structure [2023/03/18 20:30] – [Sauts de ligne forcés] jcheron
+++ web:html:text-structure [2024/09/05 07:27] (Version actuelle) – [Imbication de listes] jcheron
@@ Ligne 1: / Ligne 1: @@
-====== HTML - structuration de texte ======
+====== Structuration de texte ======
 ===== Niveaux de titre =====
@@ Ligne 54: / Ligne 54: @@
 Elle ne doit pas être utilisée pour modifier la présentation du texte, mais sa structure.
 ===== Mise en avant =====
+==== Emphase ====
+Pour mettre l'accent sur une partie du texte, utiliser la balise **em** :
+<sxh html;gutter:false>
+<p>Scaleway est un hébergeur web aux <em>pratiques douteuses</em>.</p>
+</sxh>
+==== Accentuation ====
+Pour insister sur une partie du texte, utiliser la balise **strong** :
+<sxh html;gutter:false>
+<p>Il est important de lire les <strong>conditions générales de vente</strong>.</p>
+</sxh>
+<WRAP info round>
+La présentation des parties mises en avant avec **em** et **strong** pourra ensuite être adaptée avec la feuille de style associée.\\
+Eviter l'usage des anciennes balises **b**, **i**, **u** permettant de mettre respectivement en gras, italique, souligné.
+</WRAP>
 ===== Listes =====
@@ Ligne 90: / Ligne 107: @@
 <html></div></td></tr></table></html>
-==== Imbication de listes ====
+==== Imbrication de listes ====
 <html>
@@ Ligne 115: / Ligne 132: @@
 ==== div et span ====
+Ce sont 2 balises non sémantiques sans vocation particulière autre que celle de cibler des parties de documents, de façon à leur appliquer un style et une mise en forme.
+  * La balise **div** est de type block et permet de créer une zone regroupant d'autres éléments (paragraphes, autres div...).
+  * La balise **span** est inline et permet de cibler une zone particulière de texte.
+<sxh html;gutter:false>
+<div>
+    <p>Ah ouais, la blague de développeur elle est… spéciale !</p>
+    <p>C’est l’histoire d’un administrateur qui configure ses variables d’environnement, et là……… <span>PATH le chemin !</span></p>
+    <p>Un développeur comme les autres… <span>Mais sûrement un dev J2E</span> !</p>
+</div>
+</sxh>
+Pour aller plus loin : [[web:html:semantic|]]