Site - Blog de code CSS - HTML
Balise CSS :
http://css.mammouthland.net/balises-html.php
Sommaire |
Balises les plus courantes |
HTML ou XHTML ? - Les Types de Documents (DocType) |
Lectures complémentaires |
Balises les plus courantes |
Document |
<html></html> : |
document HTML |
<body></body> : |
corps du document |
Titres |
<h1></h1> : |
titre 1er niveau |
<h2></h2> : |
titre 2ème niveau |
<h3></h3> : |
titre 3ème niveau (... et ainsi de suite jusqu'à 6) |
Éléments de texte |
<p></p> : |
paragraphe |
<ul></ul> : |
liste à puce |
<ol></ol> : |
liste numérotée |
<li></li> : |
élement d'une liste |
<a href=""></a> : |
lien hypertexte |
<blockquote></blockquote> : |
bloc de citation |
<strong></strong> : |
met en gras |
<em></em> : |
met en exergue |
<sup></sup> : |
met en Xexposant |
<sub></sub> : |
met en Xindice |
Tableau |
<table></table> : |
tableau |
<tr></tr> : |
ligne du tableau |
<th></th> : |
cellule de légende de ligne ou de colonne |
<td></td> : |
cellule du tableau (colonne) |
Structure et habillage |
<div></div> : |
définition de blocs, regroupement d'élements de type block |
<span></span> : |
habillage d'éléments de manière inline |
Quelques nouveautés HTML5 |
<header></header> : |
en-tête |
<section></section> : |
section (dingue non ?) |
<article></article> : |
sous-section pour un article (de blog par exemple) |
<nav></nav> : |
bloc de navigation |
<aside></aside> : |
encart |
<figure></figure> : |
images et/ou vidéos |
<footer></footer> : |
pied-de-page |
Attention avant de vous lancer tout de go dans le HTML5 ! Quelques précautions sont à prendre, notamment vis-à-vis des versions d'Internet Explorer antérieures à 9. Je vous recommande la lecture de cette excellente introduction au HTML5. |
Haut |
HTML ou XHTML ? - Les Types de Documents (DocType) |
Pour ceux qui se poseraient la question, la réponse est : c'est comme vous voulez... La seule chose sûre, c'est qu'il faut impérativement mettre un doctype (voir plus bas) sous peine de graves déconvenues. |
Coder en HTML ou en XHTML revient au même, tant que vous n'exploitez pas de XML. |
Mais si vous choisissez le XHTML, il vous faudra être plus attentif aux détails pour avoir un code valide : |
Toutes les balises doivent être fermées. Les non-fermantes devront donc comporter un slash avant la fermeture de la balise (exemple : <br />) |
Toutes les balises doivent être écrites en minuscules |
Tous les attributs doivent être entre guillemets |
Les balises doivent être correctement imbriquées (ceci est valable dans tous les cas de toute façon). |
Par exemple : |
<p><img src="image.png" alt="" /></p> |
<p><strong>Balises imbriquées</strong></p> |
D'autre part il ne faut pas utiliser de balises ou d'attributs obsolètes ou dépréciés. C'est dans votre intérêt, car ces éléments sont appelées à ne plus être interprétées par les navigateurs. |
D'une façon générale, ils sont dépréciés car ils sont remplaçables par des équivalents CSS. |
Quelques balises et attributs dépréciés à ne pas utiliser |
<center></center> (pour centrer) |
<font></font> (pour les polices de caractères) |
<strike></strike> (pour barrer du texte) |
<s></s> (pour souligner du texte) |
<applet></applet> (pour les applets java) |
align |
bgcolor |
noshade |
text |
vlink |
Doctype à déclarer en début de document html |
(X)HTML 5 |
Même si le HTML 5 n'est pas implémenté par les navigateurs anciens, et même si vous n'utilisez pas les éléments HTML propres à HTML 5 vous pouvez mettre ce doctype : |
<!DOCTYPE html> |
Sinon, vous pouvez utiliser ceux qui suivent, mais il faut vraiment aimer se faire du mal... |
HTML 4.01 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
"http://www.w3.org/TR/html4/strict.dtd"> |
XHTML 1.0 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
Haut |
Lectures complémentaires (et indispensables) |
Le Doctype qu'il vous faut (pompage.net) |
Servir du XHTML 1.0 (W3C) |
Index des éléments HTML |
Index des attributs |
HTML5 |
Nouveautés HTML5 (Alsacreations) |
A découvrir aussi
Retour aux articles de la catégorie M - Graphologie Informatique -
⨯
Inscrivez-vous au blog
Soyez prévenu par email des prochaines mises à jour
Rejoignez les 18 autres membres