Découvez les bases de HTML et XHTML dans ce tutoriel.
A noter : Tous les élements qui doivent apparaître sur vos pages HTML sont insérés entre la <body> et </body>
<!-- Un commentaire en HTML-->
Les commentaires vous servent de repére dans votre code et n'apparaissent pas dans le contenu de vos pages
Exemple
<abbr title="Abréviation de je ne sais quoi" lang="fr">Abréviation</abbr>La balise address sera utilisée pour afficher une adresse email. Vous pouvez remarquer qu'un retour à la ligne sera généré par cette balise.
Exemple
<address>LC FORMATEUR<br>
54, rue Ernest Macarez<br>
59300 Valenciennes</address>
| Balise | HTML 4 | XHTML | HTML5 |
| b | Valide | Non valide | Valide |
| strong | Valide | Valide | Valide |
Exemple
<strong> Texte en gras avec strong </strong><b> Texte en gras </b>La balise blocquote est adaptée à des citations longues.
Exemple
Principium autem unde latius se funditabat, emersit ex negotio tali. Chilo ex vicario et coniux eius Maxima nomine, questi apud Olybrium ea tempestate urbi praefectum, vitamque suam venenis petitam adseverantes inpetrarunt ut hi, quos suspectati sunt, ilico rapti conpingerentur in vincula, organarius Sericus et Asbolius palaestrita et aruspex Campensis.
<blockquote>Principium autem unde latius se funditabat, emersit ex negotio tali. Chilo ex vicario et coniux eius Maxima nomine, questi apud Olybrium ea tempestate urbi praefectum, vitamque suam venenis petitam adseverantes inpetrarunt ut hi, quos suspectati sunt, ilico rapti conpingerentur in vincula, organarius Sericus et Asbolius palaestrita et aruspex Campensis.</blockqute>Exemple en HTML
Texte<br>
Suite du texte Exemple en XHTML
Texte<br />
Suite du texte Cette balise est utilisée pour des citations courtes ou des références
Exemple
<cite>Ce qui détruit l'homme ce n'est pas de savoir, mais savoir et ne rien faire !</cite>Cette balise est utilisée pour afficher du code source dans votre page, c'est ce que j'utilise pour vous afficher à chaque fois le code !
Dans l'exemple ci dessous, j'affiche une boucle for que vous pourrez retrouver sur mes tutoriels dédiés à PHP.
Exemple
<?php
for($d=1;$d<6;$d++){// Initialise la variable, condition de continuité, expression
echo $d ."<br>";
}
?>del sert à marquer des modifications sur une page. Cette balise indique une suppression de texte qu'elle affiche sous forme d'un texte barré.
Exemple
Dernière Mise à jour : <del>2015-06-20</del> 2015-06-21Les balises ne font rien en elle même !
Elle nous seront trés utile avec le CSS, donc je reviendrai dessus lorsque nous aborderons la partie CSS.
Exemple
<div class="alert alert-success">Balise div utilisant les classes alert et alert-success du célébre Framework Bootstrap</div>La balise dl contient tous les éléments de la liste de définition.
Le mot que l'on veut définir est précédé de <dt>.
La définition du mot à définir est précédé de <dd>.
Exemple
<dl>
<dt>Mot à définir</dt>
<dd>Définition du mot</dd>
<dt>Mot à définir</dt>
<dd>Définition du mot</dd>
</dl> Exemple
<h1>Balise d'entete h1</h1><h2>Balise d'entete h2</h2><h3>Balise d'entete h3</h3><h4>Balise d'entete h4</h4><h5>Balise d'entete h5</h5><h6>Balise d'entete h6</h6>Exemple en HTML
<hr>Exemple en XHTML
<hr />Exemple
<em> Texte en italique </em><i> Texte en italique </i>Exemple
Dernière Mise à jour : <del>2015-06-20</del> <ins>2015-06-21</ins>Exemple
Actualiser mon navigateur : <kbd>F12</kbd>Exemple
Voici un paragraphe en XHTML certes qui ne contient pas beaucoup de contenu, certes, mais mieux que rien !
<p>Voici un paragraphe en XHTML certes qui ne contient pas beaucoup de contenu, mais mieux que rien !</p>Il est important de noter que ces attributs sont devenus obsolétes en HTML5.
Vous pouvez toujours les utiliser avec HTML 4 et XHTML.
Exemple
Texte aligné à gauche dans un bloc de paragraphe
<p>Texte aligné à gauche par défaut </p>Texte aligné à droite dans un bloc de paragraphe
<p align="right">Texte aligné à droite </p>Texte au centre dans un bloc de paragraphe
<p align="center">Texte au centre</p>Principium autem unde latius se funditabat, emersit ex negotio tali. Chilo ex vicario et coniux eius Maxima nomine, questi apud Olybrium ea tempestate urbi praefectum, vitamque suam venenis petitam adseverantes inpetrarunt ut hi, quos suspectati sunt, ilico rapti conpingerentur in vincula, organarius Sericus et Asbolius palaestrita et aruspex Campensis.Erat autem diritatis eius hoc quoque indicium nec obscurum nec latens, quod ludicris cruentis delectabatur et in circo sex vel septem aliquotiens vetitis certaminibus pugilum vicissim se concidentium perfusorumque sanguine specie ut lucratus ingentia laetabatur.
Nous aurions pu utiliser ces attibuts sur d'autres balises HTML comme :
h1,h2,h3,h4,h5,h6
<h1 align="center">Entête au centre</h1>
<div>
<div align="center">Texte au centre dans une balise div</div>
La balise pre par défaut affiche une police de caractère de type Courier avec une taille fixe.
Exemple
Texte préformaté
<pre>Texte préformaté</pre>Exemple de liste non ordonnée avec ul li
<ul>
<li>HTML / XHTML</li>
<li>CSS</li>
<li>PHP</li>
<li>Javascript</li>
</ul>
Exemple de liste non ordonnée avec ol li
<ol>
<li>HTML / XHTML</li>
<li>CSS</li>
<li>PHP</li>
<li>Javascript</li>
</ol>