Charte typo – ceci est un titre – Centre de mise en valeur des Opérations Dignité

Le menu sommaire automatique (ici à droite) fait automatiquement un lien sur tous les titres ayant un <h3>

Voici ci-après quelques exemples d’enrichissement typographiques en HTML.

Paragraphes

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.

Ici, retour à la ligne (avec br).

Second paragraphe. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper.

Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue.

Troisième paragraphe, précédé d’une ligne horizontale de séparation. Praesent egestas leo in pede. Praesent blandit odio eu enim.

Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae ;

Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.

Titre de niveau h2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed bibendum lorem leo. Integer tempus turpis sed risus molestie vulputate. Fusce elementum mattis orci, id pretium massa porttitor id.

 Titre de niveau h3

Vivamus non orci quis tellus fermentum congue ut eu purus. Praesent et eleifend tellus. Quisque vitae sapien at massa mollis interdum vel id justo. Nulla fermentum diam eget ipsum tristique vestibulum auctor tellus consectetur. Proin laoreet eros ut erat luctus faucibus.

Titre de niveau h4

Morbi a est sem, eu vestibulum est. Integer gravida bibendum ante, quis euismod odio faucibus vel. Donec aliquam blandit est vitae fringilla. Quisque arcu tortor, mattis nec bibendum nec, sagittis eget justo.

Titre de niveau h5

Vivamus tincidunt dapibus sapien, sed molestie est volutpat tempus. Integer posuere consequat sollicitudin. Aenean sit amet sapien ligula, in pulvinar orci. Duis lacus justo, rutrum nec blandit sollicitudin, vulputate vitae nulla.

Titre de niveau h6

Nulla facilisi. Donec vitae dui sed lectus venenatis dignissim. Quisque ut ultricies eros. Integer tempus sapien id odio scelerisque vulputate. Etiam pellentesque, ipsum at luctus laoreet, orci eros aliquet velit, vitae porttitor elit purus et arcu. Suspendisse potenti. Nunc hendrerit quam id eros commodo vel adipiscing ligula pellentesque. Praesent ipsum lorem, rutrum feugiat iaculis at, dapibus vel sapien. Sed eget velit purus, sit amet elementum risus. Aliquam porttitor tortor eu felis laoreet rutrum. Etiam tristique leo at nisl adipiscing varius. Nullam varius metus nec lacus eleifend sit amet semper enim aliquet. Integer quis massa eget neque imperdiet porttitor vitae rhoncus elit. Etiam pharetra lacus ut lacus pretium at tincidunt diam convallis.

Hyperliens

Exemple de lien interne

Exemple de liens externes : concept virtuel

Exemple de lien externe avec hreflang

Exemple de adresse@courriel.fr

Exemple de #ancre

Listes

Exemple de liste non ordonnée (avec ul) :

• Élément de liste non numérotée
• Élément de liste non numérotée
• Élément de liste non numérotée
  • Plantes
    • Ficus
    • Olivier
  • Animaux de compagnie
    • Chat
    • Chien

Et une liste numérotée (avec ol) :

1. Voici ma main : elle a cinq doigts. En voici deux, en voici trois. Le premier, ce gros bonhomme, C’est le pouce qu’il se nomme.
2. L’index qui montre le chemin, Est le second doigt de la main.
3. Entre l’index et l’annulaire, Le majeur paraît un grand frère.
4. L’annulaire porte l’anneau, Avec sa bague, il fait le beau.
5. Le tout petit auriculaire Marche à côté de l’annulaire.

Regardez mes doigts travailler. Chacun fait son petit métier.

N’oublions pas les listes de définition (avec dl, dd et dt) :

Le kiwi

C’est un fruit mais aussi un petit animal

Le litchi

Un excellent fruit exotique

Voici un tableau :

Citations

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ceci est une citation au fil du texte (avec q).

Ceci est une citation ordinaire (avec blockquote). Cras eleifend tristique quam. Fusce gravida lectus vel enim convallis tempor.

Second paragraphe. Maecenas laoreet interdum elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus tristique wisi ut lacus.

 Code

< ?php
  // ceci est du langage php
  echo "bonjour" ;
 ?>

Voici un raccourci-clavier (avec <kbd>), un extait de script (avec <samp>) et une variable (avec <var>).

Enrichissements typographiques HTML

em : exemple de em

strong : exemple de strong

del : exemple del

ins : exemple de ins

abbr : exemple de abbr

acronym : exemple de acronym

cite : exemple de cite

dfn : exemple de dfn

sup : ^{exemple de sup}

sub : _{exemple de sub}

code : exemple de code

kbd : exemple de kbd

samp : exemple de samp

var : exemple de var

bdo en ltr : exemple de bdo

bdo en rtl : exemple de bdo

 À éviter

Ces balises ne doivent plus être utilisées car elles sont dépréciées en XHTML 1.0 Strict :

basefont :exemple de basefont

font : exemple de font

u : exemple de u

s : exemple de s

strike : exemple de strike

Celles-ci sont déconseillées en XHTML :

i : exemple de i

b : exemple de b

big : exemple de big

small : exemple de small

tt : exemple de tt.