La méthode HTML5 pour définir les titres, citations, les listes, les paragraphes

Voici plusieurs solutions pour définir la structure de vos pages HTML5.

Définissez les titres, des citations, des lites à puces, des paragraphes…

Tout est dans le cours vidéos ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

La méthode HTML5 pour définir les titres, citations, les listes, les paragraphes

Bonjour à tous et bienvenu sur Développement Facile.

Dans ce nouveau cours, toujours consacré à HTML 5, vous allez apprendre à structurer donc la structure d’une page HTML 5.

Les titres

C’est très important d’organiser et de structurer votre code source correctement ça va vous permettre de vous y retrouvez quand vous reviendrez sur le code plus tard, rajouter des nouveaux éléments dans votre page web. Apprenez à structurer correctement votre document, autant pour le référencement c’est très utile, les moteurs de recherche comme Google, Yahoo, Bing, en tiennent compte. Il faut savoir que HTML 5 propose 6 tailles de caractère pour les titres que vous pouvez utiliser automatiquement, il suffit d’utiliser la balise H suivi du numéro du type un, c’est le plus grand et jusqu’à six, plus petit, donc H1 grand titres, sous-titres, sous sous-titres, petit petit titre, à H6 titres de niveau 6.
Je vais vous montrer un exemple rapide de code source qui utilise les 6 niveaux de titres, comme ça quand vous recopierez ce code source dans votre document HTML 5, vous verrez les différentes tailles de textes en fonction, que ce soit une balise H1 pour un grand titre, ou une balise H6 pour un petit titre, les titres très important, pour les moteurs de recherches comme ça ils peuvent repérer directement le contenu important dans votre page HTML.

Les paragraphes

Vous avez également les paragraphes, donc pour définir des paragraphes de texte comme dans les livres que vous lisez il y a des paragraphes, donc un contenu de texte, il est plus facilement lisible, digest pour l’internaute, pour votre visiteur, lorsqu’il est divisé en plusieurs paragraphes. La balise paragraphe c’est p, donc utilisez p pour définir des paragraphes, je vous ai mis un exemple de code source avec le premier paragraphe, avec beaucoup de texte de Lauren Nilsson, bla-bla-bla, premier paragraphe on définit un deuxième paragraphe donc il y aura bloc de texte, un deuxième bloc de texte donc avec un saut de ligne pour définir les deux paragraphes différents. Très important d’utiliser des paragraphes pour une meilleure lisibilité de votre contenu HTML pour vos internautes.

Les citations

Vous pouvez également définir des blocs de citations tout simplement en utilisant la balise blocquote, donc ça va vous permettre de mettre des citations pour citer vos internautes par exemple, quand ils vous laisse des témoignages, quand ils vous disent qu’ils ont apprécié votre site Internet, vous pouvez utiliser la balise blockquote pour mettre un slogan aussi, et donc ça va créer un bloc de citation, très important cette balise HTML 5, elle est souvent utilisée dans les bloc WordPress pour les citations, pensez à l’utiliser, et en combinant la balise blockquote avec du CSS, vous allez pouvoir mettre non seulement le titre, le texte en valeur grâce à la balise HTML, mais avec le CSS le mettre en couleur, le mettre avec une taille différente, en italique etc.

Les séparateurs horizontaux

Vous pouvez également rajouter des séparateurs horizontaux pour différencier des pages, différencier des contenus dans votre page, donc utilisez la balise hr pour créer un séparateur horizontal, vous avez comme d’habitude un exemple de code source qui s’affiche sur votre écran, Développement Facile, hop, séparateur horizontal, créez des applications performantes dans un deuxième paragraphe.

Les listes numérotées

Vous pouvez créer des listes numérotées, donc vous le verrez très souvent, vous allez vous aussi les utiliser très souvent les listes numérotées 1, 2, 3… 12 etc. donc vous allez, pour définir une liste, utilisez la balise ol et pour mettre des éléments dans cette liste vous utilisez la balise li et automatiquement ça va numéroter votre liste.
Donc un exemple, les langages Web on ouvre notre balise ol pour créer une liste, on met ActionScript, JavaScript, HTML 5, et chaque ligne entre une balise li donc ça va créer un nouvel élément dans notre liste numérotée, pensez à fermer votre liste avec la balise ol juste à la fin, et voilà vous avez créé votre première liste numérotée. Vous avez les listes classiques avec des puces, des cercles, grâce au CSS vous pouvez choisir, soit un cercle, soit c’est un carré, soit c’est un losange, soit c’est une image, je vous ferrais un cours spécifique sur la personnalisation des listes avec CSS 3, bien évidemment.
En tout cas là, vous pouvez déjà définir une liste avec la balise ul, c’est une liste classique ul, et comme la liste numérotée, vous rajoutez des balises li pour vos éléments, ul il suffit de changer, regardez le code source, les langages Web ol, pour une liste numérotée, des langages web ul, pour une liste classique avec des puces, vous voyez c’est vraiment très simple d’utiliser le HTML 5.

Les listes imbriquées

Vous pouvez créer des listes imbriquées, quand vous ouvrez une liste avec la balise ul, vous mettez des éléments, vous pouvez très bien ouvrir une deuxième liste avec la balise ol, mettre des éléments et pensez toujours à fermer vos listes ul, ol. Je vous ai mis un exemple de code source, les langages Web avec les titres, le liste des langages, on ouvre la balise ol, on met li pour un élément dans la liste, li pour un deuxième élément dans la liste et là on ouvre une balise ul, donc on ouvre une deuxième liste et on rajoute des éléments li ActionScript, JavaScript, HTML 5, on ferme la deuxième liste ul, on ferme l’élément li, parce que ça c’est un élément de la liste des langages, on ferme cet élément et on ferme la liste principale. Donc là suffit d’être très rigoureux, vous ouvrez une balise, vous rajoutez des éléments, vous ouvrez une deuxième liste, vous rajoutez des éléments, vous fermez la deuxième liste, vous fermez les éléments et vous fermez la liste principale. Suffit d’être rigoureux tout simplement.

Votre plan d’actions !

Vous retrouverez bien évidemment, un exemple de code source directement sous ce cours vidéo, je vous encourage à utiliser le contenu de ce cours pour créer vos documents HTML, si vous avez des questions posez-les directement sous ce cours vidéo. Je vous dis à très bientôt sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Téléchargez le code source HTML5

Retrouvez un exemple de code source HTML5 avec des titres, citations, paragraphes et listes.

Comment organisez-vous votre code HTML5 ?

Partagez vos solutions, dans les commentaires, pour que votre code HTML5 reste lisible et facilement évolutif dans le temps.