Test sous WordPress d’un article avec balise en HTML5

html5 + css3 + WordPress

Comment Gérer vous présente des balises HTML5 et formaté en CSS3.

Ces balises HTML et le rendu formaté en CSS sont utilisés sur le site Internet Comment Gérer.
Toutes les balises HTML5 ne sont pas représentées ici. Seules les plus couramment utilisées et en particulier sur ce site sont indiquées ici.
Comment Gérer est propulsé par WordPress. Le thème est développé par Présent Infini.

Notes : Les balises spécifiques HTML5 comme nav, article, section, aside, footer… ne sont pas représentées ici.
Pour les balises couramment utilisées en HTML, le code utilisé ci-dessous est affiché en fond grisé avec numérotation des lignes en bleu sur la colonne gauche de ce même fond avec la mention code.
Le rendu suit systématiquement ce code.
Cette présentation dépend uniquement de la feuille de style CSS3 liée à ce site. Le code CSS3 n’est pas affiché clairement dans cet article. Seule la présentation finale vous donne une idée par rapport au site Comment Gérer.
Cette page test est un exemple utile comme aide-mémoire et permet également de vérifier le rendu final des différentes balises en Responsive Web Design sur Comment Gérer.


Titres

<h1>Titre niveau un</h1>
<h2>Titre niveau deux</h2>
<h3>Titre niveau trois</h3>
<h4>Titre niveau quatre</h4>
<h5>Titre niveau cinq</h5>
<h6>Titre niveau six</h6>

Titre niveau un

Titre niveau deux

Titre niveau trois

Titre niveau quatre

Titre niveau cinq
Titre niveau six

HTML Tags

Note : Comme la langue officielle du langage informatique est l’anglais, les noms des balises (les tags) sont en anglais. En survolant avec la souris les titres en anglais, la définition en français apparaît.

publicités

Quelques exemples de balises HTML :


Address Tag

<address>
1 Infinite Loop
Cupertino, CA 95014
United States
</address>
1 Infinite Loop
Cupertino, CA 95014
United States

Note : La balise title="" donne un titre à votre lien. Lorsque vous survolez le lien avec la souris, le titre apparaît. Egalement, le lien change de couleur. Ceci est réglé avec la feuille de style CSS.
Lorsque je fais un lien vers un site extérieur, j’ajoute systématiquement et arbitrairement la balise target="_blank". Lorsque l’on clique sur le lien, celui-ci s’ouvre dans un nouvel onglet du navigateur.

Un exemple avec un <a title="WordPress" href="http://wordpress.com" target="_blank">lien</a>.

Un exemple avec un lien.


Abbreviation Tag

Note : Une abréviation est la réduction d’un mot par retranchement de lettres. Le mot est raccourci en enlevant des lettres.
Un acronyme est un sigle que l’on n’épelle pas mais que l’on prononce par un mot.
La balise <abbr> (abréviation) est supportée en HTML 5 mais la balise <acronym> n’est plus supportée en HTML5.
Par conséquent, que vous utilisez une abréviation ou un acronyme, vous utilisez la même balise en HTML5.
En survolant l’abréviation, un point d’interrogation apparaît ainsi que le nom entier grâce à la balise title=""

L'abréviation de <abbr title="HyperText Markup Language">HTLM</abbr> est "HyperText Markup Language".

L’abréviation de HTML est “HyperText Markup Language”.


Small Tag

Note : La balise <small></small> est supporté en HTML5 mais le tag <big></big> n’est plus supporté en HTML5.

Un test avec le tag <small>small</small>, tout simplement.

Un test avec le tag small, tout simplement.


Cite Tag

"Code is poetry." - <cite>Automattic</cite>

“Code is poetry.” – Automattic


Code Tag

Vous avez déjà dû remarqué dans cet article que j'utilise la balise <code>code</code> pour afficher ce type de tag.

Vous avez déjà dû remarqué dans cet article que j’utilise la balise code pour afficher ce type de tag.


Delete Tag

Note : Le tag <del></del> est supporté en HTML5 mais le tag <strike></strike> n’est plus supporté en HTML5.

Cette balise permet de <del>rayer</del> barrer une partie du texte.

Cette balise permet de rayer barrer une partie du texte.


Insert Tag

Cette balise désigne <ins>que j'ai inséré</ins> du texte.

Cette balise désigne que j’ai inséré du texte.


Mark Tag

Note : Pour le moment, j’ai choisi de garder la même mise en forme pour le tag <ins></ins> et le tag <mark></mark> sur Comment Gérer.

Avec cette balise, je peux marquer un mot ou une partie d'un texte en le <mark>surlignant</mark>.

Avec cette balise, je peux marquer un mot ou une partie d’un texte en le surlignant.


Emphasize Tag

Cette balise souligne que je mets <em>ce texte en italique</em>.

Cette balise souligne que je mets ce texte en italique.


Preformatted Tag

Note : On passe directement au rendu. Cette partie grisée est entourée de la balise <pre></pre> pour styliser des blocs de code.

.post-title {
	margin: 0 0 5px;
	font-weight: bold;
	font-size: 38px;
	line-height: 1.2;
}

Note : La même balise avec en plus une personnalisation en CSS3 pour afficher un compteur de ligne. J’utilise également la balise <span></span> pour chaque ligne. Une explication de la méthode utilisée viendra (peut-être) dans un prochain article.

.post-title {
	margin: 0 0 5px;
	font-weight: bold;
	font-size: 38px;
	line-height: 1.2;
}

Quote Tag

<q>Think Different</q> - Campagne publicitaire Apple (1984).

Think Different – Campagne publicitaire Apple (1984).


Strong Tag

Note : La balise <b> ressemble d’une certaine manière à la balise <strong>. Notez que selon la spécification HTML5, la balise <b> devrait être utilisée qu’en dernier recours, lorsqu’aucune autre balise n’est plus appropriée.

Cette balise montre du <strong>texte en gras</strong>.

Cette balise montre du texte en gras.


Subscript Tag

Montrons notre connaissance en science avec H<sub>2</sub>O qui pousse le "2" vers le bas.

Montrons notre connaissance en science avec H2O qui pousse le “2” vers le bas.


Superscript Tag

Une autre formule connue : E = MC<sup>2</sup> qui pousse le "2" vers le haut.

Une autre formule connue : E = MC2 qui pousse le “2” vers le haut.


Variable Tag

Cela vous permet de désigner les <var>variables</var>.

Cela vous permet de désigner les variables.


Blockquotes

Une seule ligne blockquote :

<blockquote>Que le code soit avec toi.</blockquote>

Note : La balise <p></p> a été ajoutée automatiquement par WordPress. Pour le moment, je n’en sais pas plus pour quelle raison. Alors, je vous montre comment est mon code ici :

<blockquote>
 <p>Que le code soit avec toi.</p>
</blockquote>

Que le code soit avec toi.

Plusieurs lignes blockquote avec la référence de la citation (la balise <p></p> a été également ajoutée automatiquement par WordPress) :

<blockquote>
 <p>Il faut savoir découvrir ce que l’on aime et qui l’on aime.</p>
 <p>Le travail occupe une grande partie de l’existence, et la seule manière d’être pleinement satisfait est d’apprécier ce que l’on fait. Sinon, continuez à chercher. Ne baissez pas les bras.</p>
 <p>C’est comme en amour, vous saurez quand vous aurez trouvé. Et toute relation réussie s’améliore avec le temps.</p>
 <p>Alors, continuez à chercher jusqu’à ce que vous trouviez.</p>
 <p><cite>Steve Jobs - Discours de remise des diplômes de l'Université de Standford (2005)</cite></p>
</blockquote>

Il faut savoir découvrir ce que l’on aime et qui l’on aime.

Le travail occupe une grande partie de l’existence, et la seule manière d’être pleinement satisfait est d’apprécier ce que l’on fait. Sinon, continuez à chercher. Ne baissez pas les bras.

C’est comme en amour, vous saurez quand vous aurez trouvé. Et toute relation réussie s’améliore avec le temps.

Alors, continuez à chercher jusqu’à ce que vous trouviez.

Steve Jobs – Discours de remise des diplômes de l’Université de Standford (2005)


Tables

Note : L’explication des balises utilisées ici nécessite un article à part entière ainsi qu’une explication pour la mise en forme en CSS. Cela viendra ultérieurement. En attendant, cela vous donne un exemple.

<table>
 <thead>
  <tr>
   <th>Employés</th>
   <th>Salaires</th>
   <th></th>
  </tr>
 </thead>
 <tbody>
  <tr class="odd">
   <td><a href="http://example.com/">Steve</a></td>
   <td>1 €</td>
   <td>Parce que c'était le salaire de Steve Job.</td>
  </tr>
  <tr class="even">
   <td><a href="http://example.com">Tom</a></td>
   <td>100K €</td>
   <td>Pour tous les blogs qu'il fait.</td>
  </tr>
  <tr class="odd">
   <td><a href="http://example.com/">Jane</a></td>
   <td>100M €</td>
   <td>Une image vaut mille mots alors, Tom x 1 000.</td>
  </tr>
  <tr class="even">
   <td><a href="http://example.com/">John</a></td>
   <td>100B €</td>
   <td>Ca suffit là, non ?...</td>
  </tr>
 </tbody>
</table>
Employés Salaires
Steve 1 € Parce que c’était le salaire de Steve Job.
Tom 100K € Pour tous les blogs qu’il fait.
Jane 100M € Une image vaut mille mots alors, Tom x 1 000.
John 100B € Ca suffit là, non ?…

Definition Lists

Note : L’explication des balises utilisées ici nécessite un article à part entière ainsi qu’une explication pour la mise en forme en CSS. Cela viendra ultérieurement. En attendant, cela vous donne un exemple.

<dl>
 <dt>Titre de la liste de définition</dt>
  <dd>Description de la liste de définition.</dd>
 <dt>Un autre titre</dt>
  <dd>Une autre description.</dd>
 <dt>Encore un titre</dt>
  <dd>Et là encore une description liée à ce titre de cette liste de définition.</dd>
 <dt>Un dernier titre pour la forme</dt>
  <dd>Ca suffit également comme description même si vous n'avez pas tout compris (tout comme moi).</dd>
</dl>
Titre de la liste de définition
Description de la liste de définition.
Un autre titre
Une autre description.
Encore un titre
Et là encore une description liée à ce titre de cette liste de définition.
Un dernier titre pour la forme
Ca suffit également comme description même si vous n’avez pas tout compris (tout comme moi).

Unordered List (Nested)

<ul>
 <li>Elément de liste A
  <ul>
   <li>Elément de liste un
    <ul>
     <li>Elément de liste 1</li>
     <li>Elément de liste 2</li>
     <li>Elément de liste 3</li>
     <li>Elément de liste 4</li>
    </ul>
   </li>
   <li>Elément de liste deux</li>
   <li>Elément de liste trois</li>
   <li>Elément de liste quatre</li>
  </ul>
 </li>
 <li>Elément de liste B</li>
 <li>Elément de liste C</li>
 <li>Elément de liste D</li>
</ul>
  • Elément de liste A
    • Elément de liste un
      • Elément de liste 1
      • Elément de liste 2
      • Elément de liste 3
      • Elément de liste 4
    • Elément de liste deux
    • Elément de liste trois
    • Elément de liste quatre
  • Elément de liste B
  • Elément de liste C
  • Elément de liste D

Ordered List (Nested)

<ol>
 <li>Elément de liste un
  <ol>
   <li>Elément de liste un
    <ol>
     <li>Elément de liste un</li>
     <li>Elément de liste deux</li>
     <li>Elément de liste trois</li>
     <li>Elément de liste quatre</li>
    </ol>
   </li>
   <li>Elément de liste deux</li>
   <li>Elément de liste trois</li>
   <li>Elément de liste quatre</li>
  </ol>
 </li>
 <li>Elément de liste deux</li>
 <li>Elément de liste trois</li>
 <li>Elément de liste quatre</li>
</ol>
  1. Elément de liste un
    1. Elément de liste un
      1. Elément de liste un
      2. Elément de liste deux
      3. Elément de liste trois
      4. Elément de liste quatre
    2. Elément de liste deux
    3. Elément de liste trois
    4. Elément de liste quatre
  2. Elément de liste deux
  3. Elément de liste trois
  4. Elément de liste quatre

Source : Inspiré grandement de WP Test


Partager cette page Comment Gérer :