User Tools

Site Tools


frontend:html

HTML

logo

Site référence

Présentation

Le HyperText Markup Language, généralement abrégé HTML ou dans sa dernière version HTML5, est le langage de balisage conçu pour représenter les pages web. C'est un langage permettant d'écrire de l'hypertexte, d'où son nom. HTML permet également de structurer sémantiquement et logiquement et de mettre en forme le contenu des pages, d'inclure des ressources multimédias dont des images, des formulaires de saisie et des programmes informatiques. Il permet de créer des documents interopérables avec des équipements très variés de manière conforme aux exigences de l'accessibilité du web. Il est souvent utilisé conjointement avec le langage de programmation JavaScript et des feuilles de style en cascade (CSS). HTML est inspiré du Standard Generalized Markup Language (SGML). Il s'agit d'un format ouvert.

Balises

Balises de premier niveau

Les balises de premier niveau sont les principales balises qui structurent une page HTML. Elles sont indispensables pour réaliser le « code minimal » d'une page web.

Balise Description
<html> Balise principale
<head> En-tête de la page
<body> Corps de la page

Code minimal d'une page HTML :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Titre</title>
    </head>
 
    <body>
 
    </body>
</html>

Balises d'en-tête

Ces balises sont toutes situées dans l'en-tête de la page web, c'est-à-dire entre<head>et</head>:

Balise Description
<link /> Liaison avec une feuille de style
<meta /> Métadonnées de la page web (charset, mots-clés, etc.)
<script> Code JavaScript
<style> Code CSS
<title> Titre de la page

Balises de structuration du texte

Balise Description
<abbr> Abréviation
<blockquote> Citation (longue)
<cite> Citation du titre d'une œuvre ou d'un évènement
<q> Citation (courte)
<sup> Exposant
<sub> Indice
<strong> Mise en valeur forte
<em> Mise en valeur normale
<mark> Mise en valeur visuelle
<h1> Titre de niveau 1
<h2> Titre de niveau 2
<h3> Titre de niveau 3
<h4> Titre de niveau 4
<h5> Titre de niveau 5
<h6> Titre de niveau 6
<img /> Image
<figure> Figure (image, code, etc.)
<figcaption> Description de la figure
<audio> Son
<video> Vidéo
<source> Format source pour les balises<audio>et<video>
<a> Lien hypertexte
<br /> Retour à la ligne
<p> Paragraphe
<hr /> Ligne de séparation horizontale
<address> Adresse de contact
<del> Texte supprimé
<ins> Texte inséré
<dfn> Définition
<kbd> Saisie clavier
<pre> Affichage formaté (pour les codes sources)
<progress> Barre de progression
<time> Date ou heure

Balises de listes

Cette section énumère toutes les balises HTML permettant de créer des listes (listes à puces, listes numérotées, listes de définitions…)

Balise Description
<ul> Liste à puces, non numérotée
<ol> Liste numérotée
<li> Élément de la liste à puces
<dl> Liste de définitions
<dt> Terme à définir
<dd> Définition du terme

Balises de tableau

Balise Description
<table> Tableau
<caption> Titre du tableau
<tr> Ligne de tableau
<th> Cellule d'en-tête
<td> Cellule
<thead> Section de l'en-tête du tableau
<tbody> Section du corps du tableau
<tfoot> Section du pied du tableau

Balises de formulaire

Balise Description
<form> Formulaire
<fieldset> Groupe de champs
<legend> Titre d'un groupe de champs
<label> Libellé d'un champ
<input /> Champ de formulaire (texte, mot de passe, case à cocher, bouton, etc.)
<textarea> Zone de saisie multiligne
<select> Liste déroulante
<option> Élément d'une liste déroulante
<optgroup> Groupe d'éléments d'une liste déroulante

Balises sectionnantes

Ces balises permettent de construire le squelette de notre site web.

Balise Description
<header> En-tête
<nav> Liens principaux de navigation
<footer> Pied de page
<section> Section de page
<article> Article (contenu autonome)
<aside> Informations complémentaires

Balises génériques

Les balises génériques sont des balises qui n'ont pas de sens sémantique.

Parfois, on a besoin d'utiliser des balises génériques (aussi appelées balises universelles) car aucune des autres balises ne convient. On utilise le plus souvent des balises génériques pour construire son design.

Il y a deux balises génériques : l'une est inline, l'autre est block.

Balise Description
<span> Balise générique de type inline
<div> Balise générique de type block

Ces balises ont un intérêt uniquement si vous leur associez un attributclass, id ou style:

class : indique le nom de la classe CSS à utiliser.
id : donne un nom à la balise. Ce nom doit être unique sur toute la page car il permet d'identifier la balise. Vous pouvez vous servir de l'ID pour de nombreuses choses, par exemple pour créer un lien vers une ancre, pour un style CSS de type ID, pour des manipulations en JavaScript, etc.
style : cet attribut vous permet d'indiquer directement le code CSS à appliquer. Vous n'êtes donc pas obligés d'avoir une feuille de style à part, vous pouvez mettre directement les attributs CSS. Notez qu'il est préférable de ne pas utiliser cet attribut et de passer à la place par une feuille de style externe, car cela rend votre site plus facile à mettre à jour par la suite.

Ces trois attributs ne sont pas réservés aux balises génériques : vous pouvez aussi les utiliser sans aucun problème dans la plupart des autres balises.

Chemin de fichier

Un chemin de fichier est soit de absolu ou relatif, il décrit l'emplacement dans le site web d'un fichier :

  • Page web
  • Image, vidéo ou audio
  • Feuille de style
  • Javascript

Il est préférable d'utiliser les chemins de fichiers relatifs pour qu'ils fonctionnent en local ainsi que sur des domaines publics

Absolu

Le chemin absolu désigne l'URL complète d'un fichier :

<img src="https://www.serialif.com/images/serialif.png">

Relatif

Le chemin relatif désigne le fichier par rapport au fichier actuel, on peut alors utiliser plusieurs syntaxes :

// Le fichier 'serialif.png' est à la racine du site web :
<img src="/serialif.png">
// Le fichier 'serialif.png' est dans le répertoire 'images' à la racine du site web :
<img src="/images/serialif.png">
// Le fichier 'serialif.png' est dans le même répertoire de la page actuelle :
<img src="serialif.png">
// Le fichier 'serialif.png' est dans le répertoire 'images' du répertoire de la page actuelle :
<img src="serialif.png">
// Le fichier 'serialif.png' est dans le répertoire au dessus du répertoire de la page actuelle :
<img src="../serialif.png">
// Le fichier 'serialif.png' est dans le répertoire 'images' dans le répertoire au dessus du répertoire de la page actuelle :
<img src="../images/serialif.png">

target="_blank"

L'utilisation de target=“_blank” dans les balises <a>, pour l'ouverture d'un lien dans une nouvelle fenêtre ou un nouvel onglet, pose plusieurs problèmes dans ces domaines :

  • Technique
  • Performance
  • Ethique
  • Sécurité
  • Respect de la vie privée

Il semble donc judicieux de n'utiliser cet argument que dans quelques cas particuliers, par exempe quand l'utilisateur a lancé media ou qu'il travaille sur quelque chose qui pourrait être perdu sur une page.
Article sur CSS-Tricks : When to use target=”_blank”

Problèmes technique

Ce n'est pas en accord avec l'évolution XHTML qui veut séparer le contenu du contenant, son utilisation ne sera pas dans les standards de validité W3C.

Problèmes de performances

Lorsque qu'on ouvre une nouvelle fenêtre ou un nouvel onglet depuis une page existante, les 2 fenêtres se retrouvent à partager le même processus système. L'utilisation commune de ce processus peut donc conduire à des interférences entre les 2, des traitements intensifs sur une fenêtre inactive pouvant impacter la fluidité de la page utilisée par l'utilisateur.
Article sur le blog Dareboot Sécurité et performance de vos liens target=_blank avec rel=noopener

Problèmes Ethique

L'utilisateur doit pouvoir garder son libre arbitre pour pouvoir choisir où s'ouvre un lien.

Problèmes de sécurité et de vie privée

Les informations que peut transporter un lien peuvent avoir des effets indésirables sur la sécurité et sur la vie privée d'un utilisateur.
Article sur MDN : Referer header: privacy and security concerns

De plus, il y a un problème de sécutité important qui doit être pris en compte, car cela permet à la page web ouverte de déclencher un changement de page dans la fenêtre d'origine. Il existe des solutions pour combler cette faille : rel=“noreferrer” et rel=“noopener”, utilisation d'un script JS.
Voir l'article de Better Web : rel=noopener ? N'ouvrez pas la fenêtre !

Markdown

logo Markdown

Présentation

Markdown est un langage de balisage léger créé en 2004 par John Gruber avec l'aide d'Aaron Swartz. Son but est d'offrir une syntaxe facile à lire et à écrire. Un document balisé par Markdown peut être lu en l'état sans donner l'impression d'avoir été balisé ou formaté par des instructions particulières.

Un document balisé par Markdown peut être converti en HTML, en PDF ou en d'autres formats. Bien que la syntaxe Markdown ait été influencée par plusieurs filtres de conversion de texte existants vers HTML — dont Setext, atx, Textile, reStructuredText, Grutatext et EtText —, la source d'inspiration principale est le format du courrier électronique en mode texte.

Le Markdown se rapproche du langage utilisé dans DokuWiki (ou l'inverse).

Syntaxe

Voir la syntaxe sur github

Syntaxe de base

Ce sont les éléments décrits dans le document de conception original de John Gruber. Toutes les applications Markdown prennent en charge ces éléments.

Element Markdown Syntax
Heading # H1 ## H2 ### H3
Bold **bold text**
Italic *italicized text*
Blockquote > blockquote
Ordered List 1. First item 2. Second item 3. Third item
Unordered List - First item - Second item - Third item
Code `code`
Horizontal Rule---
Link [title](https://www.example.com)
Image ![alt text](image.jpg)

Syntaxe étendue

Ces éléments étendent la syntaxe de base en ajoutant des fonctionnalités supplémentaires. Toutes les applications Markdown ne prennent pas en charge ces éléments.

Element Markdown Syntax
Table | Syntax | Description | | ----------- | ----------- | | Header | Title | | Paragraph | Text |
Fenced Code Block``` {   "firstName": "John",   "lastName": "Smith",   "age": 25 } ```
Here's a sentence with a footnote. [^1] [^1]: This is the footnote.
Heading ID ### My Great Heading {#custom-id}
Definition List term : definition
Strikethrough ~~The world is flat.~~
Task List - [x] Write the press release - [ ] Update the website - [ ] Contact the media
frontend/html.txt · Last modified: 2020/09/19 01:40 (external edit)