I. Structuration du code1. Code minimalQu'est-ce que le doctype ?C'est une information que l'on place en premier, et qui va indiquer au navigateur des information relatives à la version de code utilisé (nous sommes actuellement à la version 5). Concrètement, cela permet de savoir ce qui est autorisé en terme de langage et la validité des balises utilisées.
Il existe pour les sites une certification de validité. Selon le doctype un site va être valide ou pas en mesure du respect de ces règles.
Pour un exemple concret, selon le doctype utilisé, créer un lien qui s'ouvre dans une autre fenêtre va être considéré comme acceptable (transitionnal) ou une faute (strict).
De même, des balises vont être reconnues ou pas. Les balises présentées dans ce tutoriel sont liées au langage HTML5, donc le doctype que je vous indique est celui qui lui est spécifique.
Dans le cadre d'un codage en HTML5, nous utiliserons par exemple celui-ci:
- Code:
-
<!DOCTYPE html>
Sachez donc qu'il existe un DOCTYPE pour chaque langage!
Je parlais donc de code minimal, le voici:
- Code:
-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Titre de la page</title>
</head>
<body>
...
</body>
</html>
~ Petite explication:< html >...
< /html >: on indique que la page va être codée en HTML, rien de bien sorcier! On n'oublie donc pas de refermer la balise à la toute fin du codage.
< head >...
< /head >: il s'agit là d'une partie que l'on ne verra pas sur la page internet. On y retrouve des informations concernant le codage, le titre de la page, la page CSS associée, mais aussi l'icône que l'on trouve parfois à gauche de l'URL dans le navigateur, etc...
La balise
meta (meta données) sert à transmettre des informations sur la page, qui ne seront pas affichées. Celle-ci sert à indiquer le type d'encodage de la page, c'est la seule balise meta indispensable.
< title>...< /title>: donne le titre de votre page!
Enfin, il y a la balise
< body>, laquelle va contenir toutes les informations qui vont s'afficher sur votre page internet. C'est la partie qui sera la plus développée!
~ D'autres exemples de balises d'en-tête: - Code:
-
<link rel="stylesheet" href="..." />
Cette balise sert à lier une page de
CSS à la page HTML. Elle est très importante, puisque c'est grâce à la page CSS que votre page internet prendra forme et donnera envie aux navigateurs de passer du temps sur votre site: elle est donc indispensable!
- Code:
-
<link rel="icon" type="image/png" href="... .png" />
<link rel="shortcut icon" type="image/x-icon" href="... .ico" />
La balise ci-dessus sert à insérer ce que l'on appelle une
favicon, la petite image à côté de l'URL.
A la place des trois petits points après
"href", on indique le nom du document ou de l'image entre guillemets. On place généralement deux lignes de code: la première avec une image de type .ico et la seconde, de type .png au cas où la première aurait du mal à s'afficher.
2. Balises sectionnantesLes balises
sectionnantes sont très utiles pour structurer son texte à l'intérieur du body: cela permet de donner un véritable squelette au corps de la page!
- Code:
-
<header>
Pour l'en-tête de la page.
- Code:
-
<footer>
Pour le pied de page.
- Code:
-
<nav>
Pour faire un menu par exemple, et y indiquer les principaux liens de navigation.
- Code:
-
<section>
C'est une balise qui sert à regrouper du contenu qui a la même thématique
- Code:
-
<aside>
On utilise cette balise pour mettre en ligne du contenu supplémentaire en relation avec le thème de la section (par exemple), on les retrouve en général sur le côté (d'où le nom!)
- Code:
-
<article>
Enfin, cette balise représente une partie autonome de la page, le vif du sujet en quelque sorte!
Comme ça fait un peu beaucoup, voici un schéma qui regroupe tout cela!
![[Fiche] Les principales balises du HTML 695719page](https://2img.net/r/hpimg11/pics/695719page.jpg)
Il existe aussi des balises génériques, des balises qui n'ont pas de sens réel.
- Code:
-
Il s'agit des balises <span> et <div>
La première est utilisée pour les
éléments linéaires, et la seconde pour des éléments de type
bloc.
Ces balises sont surtout utiles pour le design de la page, elles servent à donner un nom à certains éléments que l'on souhaite personnaliser. Pour cela, on leur donne un attribut:
L'attribut
id="..." sert à donner un nom unique sur toute la page à la balise.
L'attribut
class="..." sert à donner un nom que l'on pourra reprendre plusieurs fois.
Ces balises servent donc aussi à structurer votre code, vous pouvez les utiliser dans n'importe quelle partie: footer, header, article, aside, etc... Ces balises sont, en fait, comme des sortes de boîtes dans lesquelles on range nos éléments. Sur le modèle des matriochka, les balises span et div sont les plus petites poupées.
Accueil Le site Chaine You Tube 
Sujet: [Fiche] Les principales balises du HTML 
![[Fiche] Les principales balises du HTML Sans_t10](https://i.servimg.com/u/f82/16/79/91/22/sans_t10.jpg)
![[Fiche] Les principales balises du HTML 775401](/users/1311/26/46/14/smiles/775401.gif)
!
