Syntaxe HTML, URLs

Ouverture et fermeture

Deux syntaxes possibles pour ouvrir et fermer une balise :

  • Ouverture : <balise>
  • Fermeture : </balise>

Ou bien les deux à la fois :

  • Ouvrefermeture : <balise/>

Attributs

Les attributs sont des informations supplémentaires sur une balise. Ils sont écrits dans la balise d'ouverture, après le nom de la balise. Ils sont généralement sous la forme nom_attribut="valeur" ou juste nom_attribut si la seule présence de l'attribut est suffisante pour indiquer son sens.

Example

<a href="http://example.com">Un lien</a>
<img src="./monimage.png" alt="Un pingouin" />
<article id="article-1">...</article>
<span class="nompropre">STALLMAN</span>

URL

Décomposition d'une URL

Une URL (Uniform Resource Locator) est une adresse qui permet de localiser une ressource sur le Web. Elle est composée de plusieurs parties :

  • le protocole (http, https, ftp, file, etc.)
  • le nom de domaine (exemple.com) avec éventuellement un sous-domaine (www)
  • le chemin d'accès à la ressource (/site/pages/)"
  • le nom de la ressource (index.html, image.png, etc.)
  • les paramètres de la requête (optionnels) ?param1=valeur1&param2=valeur2
  • le fragment (optionnel) #fragment (navigation dans la page)

Example

http://www.site.com:8080/path/to/file.html?param1=valeur1&param2=valeur2#fragment
  • protocole : http
  • nom de domaine : site.com
  • sous-domaine : www
  • port : 8080
  • chemin d'accès : /path/to/file.html
  • nom de la ressource : index.html
  • paramètres de la requête : param1 (valeur1), param2 (valeur2)
  • fragment : fragment

URLs relatives et absolues

Dans une page située à l'URL https://exemple.com/site/index.html, on peut utiliser les types d'URL suivants :

  • URLs complètes (vers le même site ou vers un autre site)
    • https://exemple.com/site/page.html
    • https://exemple.com/images/pingouin.png
    • https://wikipedia.org
  • URLs absolues (même protocole, domaine et sous-domaine que la page) :
    • /chemin/vers/page.html
    • /images/pingouin.png
  • URLs relatives :
    • ./page.html ou page.html
    • ../images/pingouin.png

Balises

Les balises apportent une signification sémantique au document. Le HTML5 a supprimé une grande partie des balises qui n'avaient pas de signification sémantique, la présentation étant déléguée au CSS.

  • article, detail, figure, section, nav, menu, summary, aside... : organisation
  • h1, h2, h3, h4, h5, h6, p : niveaux de titre, paragraphe
  • ul, ol, li, dl, dt, dd : listes
  • a, img, audio, video : hyperliens, medias
  • table, thead, tbody, tfoot, tr, th, td : tableaux
  • form, input, select, button : formulaires
  • code, cite, q, del, kbd : types de contenu
  • b, i, em, strong, col : présentation
  • span, div : fourre-tout

Liste rapide des balises HTML5 :

Antisèche courte

Ressources

  • MDN : Mozilla Developer Network, site de référence
  • CanIUse : compatibilité des navigateurs
  • Antisèche courte : image résumée des balises HTML5
  • Antisèche longue : document PDF très complet sur toutes les balises HTML5
  • HTML5 : spécification HTML5 et plus précisément la partie Éléments

Programme

  • SNT : thème Internet
  • NSI 1ère : Modalités de l'interaction entre l'homme et la machine / évènements