Cliquez pour télécharger une liste de codes HTML imprimable.
Les personnes qui apprennent les bases de la conception Web peuvent souhaiter conserver une liste de codes HTML à portée de main pour référence et comprendre ce que les balises sont conçues pour accomplir. Connaître leur objectif vous aidera à créer une structure conviviale pour le référencement de votre site.
Table des matières
Codes HTML utilisés dans la conception Web
Lorsque vous apprenez à concevoir une page Web, c’est plus simple si vous comprenez le HTML de base, même si vous utilisez un éditeur ou un constructeur de site Web. Connaître les bases vous aidera à comprendre comment la page est lue par les navigateurs.
Si vous avez besoin d’aide pour télécharger la liste imprimable, consultez ces conseils utiles.
Toutes les pages Web ont ce code de base:
: Cette balise a été simplifiée en HTML5 depuis que les multiples déclarations ont été éliminées – ne laissant qu’une seule: html. En HTML 4.01, les déclarations incluent: strict, transitionnel, frameset et les déclarations XHTML 1.0 de strict, transitionnel, frameset et XHTML 1.1.
: Commence votre document
: Contient des informations sur la page telles que les balises META et le titre; ceci n’est pas rendu dans le navigateur Web
: Le titre de votre page – visible dans l’onglet du navigateur
: Se ferme marque
: Se ferme marque
: Il s’agit de la zone de contenu de votre page Web – où vous allez inclure du texte, des images, des graphiques, etc.
Tout ce qui se trouve à l’intérieur de la balise
est visible dans le navigateur. À la fin de votre page HTML, vous devez fermer les balises ouvertes en utilisant:
pour fermer le étiquette et
pour fermer le marque.
Liste des balises introduites dans HTML5
La plupart des balises introduites dans HTML5 sont conçues pour traiter du contenu qui n’était pas répandu lors de la création de HTML 4.01. Ces nouvelles balises traitent du contenu comme les médias ou les balises sont un meilleur moyen de définir la structure de la page. Voici les balises introduites dans HTML5.
Définit le type de document – html est le seul type en HTML5
Définit un article
Définit une barre latérale – ou à côté – d’un article
Désigne les fichiers audio
Isole une partie du texte qui pourrait être formatée dans une direction différente de celle du texte en dehors.
C’est le conteneur qui contient tout langage de script utilisé pour dessiner des graphiques à la volée
Définit un bouton de commande sur lequel les utilisateurs peuvent cliquer – dans un formulaire
Utilisé dans un formulaire. Il désigne une liste d’options prédéfinies pour l’entrée
Définit les informations supplémentaires qu’un utilisateur peut afficher ou masquer
Définit une boîte de dialogue ou une fenêtre.
Ceci est un conteneur pour une application externe (non HTML) – comme une vidéo
La légende du contenu
Spécifie un contenu autonome comme une image
Définit la partie d’en-tête du document ou une section à l’intérieur du document
Utilisé pour définir un champ de générateur de paires de clés dans les formulaires
Définit le texte mis en surbrillance ou marqué
Définit une mesure scalaire dans une plage connue (une jauge) – par exemple 2 sur 10
Liens de navigation
Spécifie la sortie du calcul
Représente la progression d’une tâche
Définit les éléments à afficher dans les navigateurs qui ne prennent pas en charge les annotations ruby
Définit une explication / prononciation des caractères (pour la typographie est-asiatique)
Définit une annotation ruby (pour la typographie est-asiatique)
Définit une section spécifique à l’intérieur d’un document
Définit plusieurs ressources multimédias pour les éléments multimédias tels que
Définit un en-tête visible pour un élément
Date et heure
Définit les pistes de texte pour les éléments multimédias tels que
Un film ou une vidéo
Définit un saut de ligne possible
Liste des balises HTML 4.01 non prises en charge dans HTML5
Une poignée de balises ont été supprimées dans HTML5 en raison de leur manque d’utilisation – ou parce qu’elles étaient utilisées d’une manière autre que leur utilisation prévue.
Définit un acronyme
Désigne la couleur, la taille et la police par défaut du texte du document
Agrandit le texte
Centre du texte
Liste des répertoires
Utilisé pour définir la couleur, la taille et la police dans un document
Définit un cadre à l’intérieur d’un jeu de cadres
Spécifie un ensemble de cadres
Définit un contenu alternatif pour les utilisateurs qui ne prennent pas en charge les cadres
Texte barré
Télétype du texte
Liste des codes HTML compatibles en HTML 4.01 et HTML5
Voici une liste de balises HTML 4.01 qui font également partie de la norme HTML5:
Définit un commentaire
Hyperlien
Abréviation
Définit les informations d’adresse du propriétaire du document
Définit une applet intégrée
Définit une zone à l’intérieur d’une image-map
URL / cible de base pour toutes les URL relatives d’un document
Remplace la direction actuelle du texte
Section citée d’une autre source
Définit le corps du document
Saut de ligne
Définit un bouton cliquable
Définit la légende d’un tableau
Titre d’une œuvre
Codage informatique
Colonnes dans un tableau
Groupe d’une ou plusieurs colonnes dans un tableau
Description de la définition
Texte supprimé du document
Terme de définition
Liste de définitions
Section dans un document
Terme de définition
Emphase
Incorporer un élément
Regroupe les éléments associés dans un formulaire
Formulaire
ancre
Titre 1; utilisez 2, 3, 4, etc. pour différentes tailles
Règle horizontale
Italiques
Image
Liste ordonnée
Liste non ordonnée
Élément de liste
Texte défilant
Utilisé pour spécifier la description de la page, les mots clés, l’auteur et d’autres informations pertinentes sur la page
Paragraphe
Réduit le texte
Tableau
Extraits utiles
L’une des balises HTML les plus couramment utilisées est probablement
. La plupart des tableaux utilisent trois balises principales: une pour le conteneur, une pour les informations à l’intérieur de la table et une pour désigner une ligne à l’intérieur de la table.
Tableau HTML
Pour créer un tableau avec deux lignes et deux colonnes, vous utilisez les trois balises. Bien que vous puissiez styliser depuis l’intérieur de la balise, par exemple,
, la méthode préférée est de contrôler l’apparence avec CSS.
Ceci est la première case de la ligne 1
Ceci est la deuxième case de la ligne 1
tr>
Ceci est la première case de la ligne 2
Ceci est la deuxième case de la ligne 2
tr> table>
La même table avec une colonne d’en-tête qui s’étend sur les deux colonnes ressemblerait à ceci.
Cette ligne s’étend sur les deux lignes en dessous.
Le
– en-tête du tableau – met en gras et centre le texte.
Ceci est la première case de la ligne 1
Ceci est la deuxième case de la ligne 1
tr>
Ceci est la première case de la ligne 2
Ceci est la deuxième case de la ligne 2
tr>
Liste de choses à faire
En tirant parti du stockage local, la dernière version de Google Chrome et d’autres navigateurs, vous permet de créer une liste qui peut être modifiée à partir du navigateur de l’utilisateur. Pour le configurer, vous devez associer l’attribut contenteditable avec la liste.
Ma liste modifiable
Aller à l’épicerie
Déposer les documents au bureau
Terminer les courses
Lorsque les utilisateurs accèdent au codage ci-dessus à partir de nouveaux navigateurs (et non d’Internet Explorer), ils peuvent éditer et changer la liste à leur guise.
Comment le CSS interagit avec le HTML
Le HTML est un langage de balisage et son rôle est de structurer la page. Étant donné que le langage de balisage est lu de haut en bas par le navigateur, les informations les plus importantes doivent être en haut de la page – et être enveloppées dans la balise appropriée. Le titre du haut doit toujours être une balise – généralement un
, les paragraphes vont à l’intérieur
, etc. de cette façon, le navigateur (et les moteurs de recherche) peuvent valider la hiérarchie d’importance pour le texte de la page.
Étant donné que HTML ne doit être utilisé que pour la structure d’un document, CSS est utilisé pour la conception et l’aspect. Bien que certaines balises HTML puissent avoir un style minimal sans CSS, la meilleure pratique consiste à contrôler la conception de votre site avec CSS. CSS fonctionne en créant des noms pour les différents types de contenu sur votre page. Lorsque le navigateur lit un «nom» CSS – il applique le style – associé à ce nom – au contenu.
Vous ne vous souvenez pas de toutes les balises?
La bonne chose est que vous n’en avez pas besoin – vous pouvez utiliser une liste de références comme celle-ci pour vérifier à quoi sert une balise – ou utiliser un éditeur HTML avec une référence intégrée comme HTML-Kit. Ce qui est plus important que de mémoriser toutes les balises, c’est de concevoir des pages en pensant aux navigateurs actuels et futurs. En faisant cela, lorsque les utilisateurs rattraperont et installeront le navigateur le plus récent, les nouvelles balises seront déjà en place – et fonctionneront comme prévu.
Lisez plus d’astuces sur le design web ici, et n’oubliez pas de partager l’article sur Facebook !