Les balises

---

                                 Balises de base 

---

Il y a des balises auto-fermantes comme img

Différence class et id :

• class ( peut etre appelé sur plusieurs élement ) l'intéret d'une classe c'est qu'elle est réutilisable

• id (sur un seul élement , unique sur une page) : plutot JS / erreur de débutant : trop id

• ni 2 id ni 2 class a l'intérieur d'une meme balise

• div : peut appartenir a plusieurs

• doctype

• html est le parent du title

• body

• h1 (h2 (sous titre),h3 (sous titre des sous-titres..) trés important pour le référencement , hierarchie des articles, 1 seul par page. Mettre le mot le plus important dans le h1.

• head

• title

• Référencement : h1 , title, img, liens absolus.

• row :

• main : mieux pour le réferecement , la section est dans le main, pas la navbar, pas les élements qui se repetent : les contenus uniques par pages

• footer

mdnmozillla W3C school

• div :

• Nom attribué

• différence class / id :

• refacto ?

• balise : chaque élément est à l’intérieur de balises

• span ne va pas a la ligne (ne se voit pas , tag un mot)

• p va à la ligne

• les liens : très important pour le référencement , ils doivent avoir un titre et attribut href

href indique la référence , title fait un popup (ne pas oublier de le mettre) , il est impossible qu'un navigateur n'affiche pas un lien , que les images

• a # , faire des encres avec les balises a. : http://41mag.fr/liste-des-balises-html5/balise-a-html5-lien

• Une encre : tres important

• img elle est auto-fermante, elle a une seule balise, il y a pas de contenu autre que l'image a y mettre. la taille dans l'html pour les balises img a mettre dans le html pour le référencement.

• buttons

• les listes html : ul , li

---

                                                    HTML 5 

---

• Lien absolu : avec le https, interne

• Lien relatif : va chercher une source externe

• section il peut y en avoir plusieurs

• header différent de head , apporte des infos sur l'élement pas sur le style

• le zoning : du plus large au plus petit

• aside : barre de navigation sur le coté

Balise HTML HTML (HyperText Markup Language) est un langage descriptif utilisé pour structurer le contenu d'une page (ses textes, ses images, ses liens, etc.).

Un document HTML est un fichier texte qui contient des balises (ou tag en anglais). Ces balises doivent être utilisées d'une certaine façon pour décrire correctement la structure du document. Les balises indiquent au navigateur comment afficher le document, certaines balises permettent d'intégrer différents médias comme des images, des vidéos ou des musiques parmi le texte de la page.

Le navigateur n'affiche pas les balises telles quelles. Lorsqu'un utilisateur visite une page web, son navigateur analyse (ou parse en anglais) le document et l'interprète afin d'afficher la page web correctement. Par exemple, si le document contient une balise , le navigateur chargera l'image associée et affichera l'image à la place de la balise HTML. La syntaxe des balises Section

Les balises HTML respectent une syntaxe simple et stricte :

Un chevron ouvrant (<)
Le nom de la balise
Des attributs (optionnels). Un espace, suivi du nom de l'attribut, d'un signe égal (=) et d'une valeur entre doubles quotes ("").
Un chevron fermant (>)

Voici quelques exemples :

<article>
<meta charset="utf-8">
<img src="monImage.png" alt="">

Les éléments HTML Section

Généralement, les balises fonctionnent par paires. La première balise est la balise ouvrante et la seconde est la balise fermante. Une balise fermante doit avoir le même nom que la balise ouvrante correspondante. De plus, une balise fermante doit contenir une barre oblique entre le chevron initial et le nom de la balise. Ainsi, si

est une balise ouvrante,

sera la balise fermante correspondante.

Un élément HTML se compose d'une balise ouvrante, d'un contenu textuel et d'une balise fermante :

The basic syntax of HTML tags

La rigidité des conventions pour la fermeture des balises est utile afin de pouvoir imbriquer différents éléments les uns dans les autres :

Voici le début du paragraphe ici un texte important au sein du paragraphe et là, la fin du paragraphe.

Bonne pratique : Si vous omettez les balises fermantes, le navigateur aura les coudées franches pour déterminer comment clôturer un élément. Ces règles sont bien définies mais souvent contre-intuitives (donc difficiles à deviner). Afin de vous épargner des pertes de temps à venir, préférez fermer les éléments. Les balises HTML Section

HTML contient environ 140 balises qui fournissent au navigateur des indications sur le sens d'un élément, son interprétation ou son affichage. Entre autres choses, les balises permettent de fournir des méta-données pour le document HTML, de mettre en avant certaines phrases, d'ajouter des fichiers multimédias ou de gérer des formulaires en ligne.

Voici quelques-unes des balises les plus fréquemment utilisées :

,

,

,

,

,

Ces balises permetttent de définir des titres de différents niveaux : h1 pour les grands titres et h6 pour les titres des sections très spécifiques.

La balise utilisée pour créer des paragraphes. Ces paragraphes sont généralement (automatiquement) séparés par des sauts de ligne. Cette balise est utilisée afin de créer des liens vers des ressources externes : une autre page web, un e-mail, une image, une autre section du document, etc. Les balises contiennent le texte qui sera utilisé pour le lien, l'attribut href de cet élément est utilisé pour définir l'URL cible : du texte qui sera lu par l'utilisateur. Cette balise permet d'intégrer une image dans un document HTML. Voici un exemple d'utilisation :

et Ces balises n'ont pas de signification particulière, elles permettent simplement de séparer des sections d'un document. La plupart du temps, ces balises sont utilisées pour la mise en forme et le script (dont nous discuterons plus tard).

,
et
1. Ces balises sont utilisées pour créer des listes.
   permet de définir une liste non-ordonnée et
   de définir une liste ordonnée. Pour chacune de ces listes, ce sera la balise
   1. qui permettra de définir un élément de la liste. Voici un exemple avec
      :
      • Café
      • Thé
      • Lait

      N'hésitez pas à expérimenter avec ces balises. Dans les articles suivants, nous verrons comment intégrer des fichiers multimédias, des formulaires, des tableaux, etc. Dans tous les cas, vous pouvez faire vos propres tests avec n'importe quelle balise HTML. Assurez-vous de bien choisir la bonne balise pour ce que vous souhaitez faire : la sémantique des éléments HTML est très importante, notamment pour les moteurs de recherches qui analysent et classent votre site. Pédagogie active Section

      Cet article ne contient pas encore de matériau interactif. N'hésitez pas à contribuer. Aller plus loin Section

      Pour l'instant, nous avons vu quelques règles simples concernant les éléments et les balises HTML. Mais c'est bien connu, chaque règle a ses exceptions. Les balises « auto-fermantes » (ou balises vides) Section

      Nous avons vu précédemment qu'un élément HTML était composé de texte entre deux balises. Cependant, certaines balises ne contiennent pas de texte. L'exemple le plus simple est . Le navigateur remplace la balise avec l'image indiquée, ignorant le texte de l'élément. Pour cette raison, n'a pas de balise fermante.

      Here some text before an image element Here some text after an image element

      Note : Attention à ne pas mélanger les éléments et les balises. Parfois, une balise seule permet de définir un élément mais la plupart du temps, les balises fonctionnent par paires. Les éléments spéciaux Section

      En HTML, il existe deux éléments spéciaux qui n'ont pas de balise. Ces éléments sont essentiels pour tout document HTML. Le doctype

      Le doctype (pour « type de document ») est une déclaration formelle, placée au tout début d'un document HTML. Elle indique que le document est écrit avec du HTML standard. Le doctype se présente de cette façon :

      Si vous ne commencez pas votre document par , les navigateurs afficheront votre document en mode quirks. Le mode quirks est le mode utilisé par le navigateur pour afficher les documents anciens ou malformés, écrits dans les années 1990 lorsque HTML était peu (voire pas du tout) standardisé et que chaque navigateur gérait HTML à sa façon. Les commentaires

      Les commentaires sont des éléments très particuliers. Ce sont des notes que vous pouvez utiliser pour annoter votre code HTML . Le navigateur n'affichera pas ces commentaires dans la page web (cependant, le code source peut être lu par n'importe qui et les commentaires seront donc publics comme le reste de la page).

      En HTML, les commentaires sont écrits avec du texte contenu entre

      Ce texte s'affichera dans le navigateur.

      Structure d'un document HTML Section

      La structure de base d'un document HTML est définie avec un ensemble de balises spéciales. Les éléments définis dans ces balises ne doivent pas apparaître plus d'une fois dans le document (excepté pour l'élément <title> ). Le navigateur gèrera les cas où ces éléments ne sont pas fournis (ce qui n'est pas conseillé).

      Cet élément définit la racine du document. Chaque document HTML ne contient qu'une racine. Tous les autres éléments doivent être placés dans cet élément. Cet élément définit la tête du document. Le navigateur n'affichera pas cet élément qui ne contient que des méta-données, dont le titre et des informations descriptives. Les navigateurs pourront utiliser ces méta-données pour améliorer l'ergonomie de la page (nous le verrons par la suite). Cet élément définit le corps du document. Il n'y a qu'un seul élément body dans un document HTML et celui-ci est toujours placé après la tête. L'utilisateur verra tout ce qui est placé dans cet élément. <title> Cet élément définit le titre d'un document. Le titre est le seul élément HTML obligatoire et il est placé dans la tête. En effet, le titre est une des méta-données utilisée par le navigateur (il est utilisé pour le titre de la fenêtre, le titre de l'onglet et aussi dans les résultats d'un moteur de recherche).

      Formel ou valide ?

      Voici le document HTML formel le plus simple qu'on puisse écrire :

      <title>Un document HTML formel</title>

      Si on retire les différentes balises optionnelles, on obtient alors le document HTML valide le plus simple qui puisse être écrit :

      <title>Et voilà un tout petit document HTML</title>

      Bonne pratique : Nous vous recommandons d'utiliser la structure formelle. Si vous ne séparez pas clairement le contenu de

      du contenu de , il sera plus facile de commettre des erreurs qui entraîneront un comportement étrange du navigateur. Les éléments qui se chevauchent Section

      Pour finir notre aperçu sur les éléments HTML, précisons que les éléments peuvent être imbriqués mais ne peuvent pas se chevaucher.

      Comment faire se chevaucher des éléments ? Voici un exemple :

      le début de mon paragraphe du texte important

      un deuxième paragraphe et l'élément strong a été bouclé juste avant

      Dans l'exemple ci-dessus, l'élément strong chevauche ceux des paragraphes. Ceci est une erreur (qui n'est pas autorisée par HTML). Il faut plutôt écrire :

      mon paragraphe commence ici du texte important

      un deuxième paragraphe dont le début était important aussi

      Dans des cas simples comme celui-ci, le navigateur pourra deviner ce qui était voulu mais généralement de telles erreurs pourront avoir des répercussions importantes (par exemple avec CSS ou JavaScript que nous verrons bientôt). Par exemple, si nous avions utilisé une balise

      à la place des balises

      et :

      le début de mon paragraphe

      du texte important

      un deuxième paragraphe

      la fin du paragraphe

      Comment savoir si les éléments se chevauchent ou non ? C'est impossible car il n'y a plus de chevauchement mais une imbrication d'éléments div ! Attention donc si vous souhaitez maîtriser le comportement de vos futurs documents HTML. Vérifier le code HTML Section

      Une bonne pratique consiste à valider son code pour s'assurer qu'il est correct. Le meilleur outil pour cela est le validateur HTML du W3C. C'est un outil en ligne qui analyse votre document HTML et vous indique si celui-ci respecte les spécifications HTML. Si le document est invalide, le validateur fournira des indications quant aux erreurs qu'il a trouvées.

      Note : Étant donné la méthode utilisée par le validateur, il est préférable de se concentrer sur la première erreur relevée dans l'analyse. En effet, une seule erreur peut en déclencher d'autres en cascades. Si le résultat de l'analyse comporte une myriade d'erreurs, commencez par résoudre la première, cela permettra éventuellement de résoudre des erreurs suivantes. Prochaines étapes Section

      Grâce aux notions abordées dans cet article, vous devriez être en mesure d'écrire votre premier document HTML complet et d'obtenir une première version d'un site web fonctionnel.

      Pour que cette page soit (plus) belle, vous pouvez lire l'article sur les propriétés CSS et comment les utiliser.
      Pour savoir comment publier votre page web, vous pouvez lire comment transférer ses fichiers vers un serveur web.