aide Liste des balises HTML5

**Indiablex** · September 21, 2014

Bonjour !

Souvent, on code un site, et on se dit "mince, elle fait quoi dejà cette balise ? " ou "c'est quelle balise pour faire telle chose ?".

C'est pour cela que je vous propose un petit récapitulatif des balises utilisées en HTML5 ainsi que de leurs fontions.

Un exemple concret est présent quand on clique sur les balises.

( liste trouvée sur http://41mag.fr/liste-des-balises-html5)

<!– … –>

Définit un commentaire

<!DOCTYPE>

Définit le type du document

<a>

Définit un lien

<abbr>

Définit une abréviation

<address>

Définit une adresse

<area>

Définit une zone à l’intérieur d’une image

<article>

Définit un article

<aside>

Définit une partie latérale au contenu

<audio>

Définit un fichier audio

<b>

Texte en gras

<base>

Définit une URL de base pour tous les liens de la page

<bdo>

Définit la direction du texte

<blockquote>

Définit une longue citation

<body>

Définit le corps de la page

<br>

Saut de ligne

<button>

Définit un bouton cliquable

<canvas>

Définit un graphique

<caption>

Légende du tableau

<cite>

Définit une citation

<code>

Mise en forme d’un texte en code informatique

<col>

Définit une colonne d’un tableau

<colgroup>

Définit un groupe de colonne pour un tableau

<command>

Définit un bouton de commande

<datalist

Définit une liste d’options

<dd>

Définition d’un terme

<del>

Définit un texte supprimé

<details>

Définit les détails d’un élément

<dfn>

Définition

<div>

Définit un calque ou une section

<dl>

Liste de définition

<dt>

Définition d’un terme

<em>

Mise en exergue d’un texte – italique

<embed>

Définit un contenu extérieur (audio, vidéo …)

<fieldset>

Regroupe plusieurs éléments d’un formulaire

<figcaption>

Légende d’un groupe d’élément multimédia

<figure>

Définit un groupe d’élément multimédia

<footer>

Définit le bas d’un section ou d’une page

<form>

Définit un formulaire

<h1> to <h6>

Définit un titre par degré importance de 1 à 6

<head>

Définit l’en-tête d’un document

<header>

Définit le haut d’une section ou d’une page

<hgroup>

Regroupe les informations du haut d’une page ou section

<hr>

Barre horizontale

<html>

Définit un document html

<i>

Texte en italique

<iframe>

Introduit un page html dans une frame

<img>

Définit une image

<input>

Définit un champ

<ins>

Définit un texte insérer

<keygen>

Générateur de clé pour un formulaire

<kbd>

Raccourcis ou touche du clavier

<label>

Légende d’un groupe d’élément de formulaire

<legend>

Titre d’un groupe d’élément d’un formulaire

<li>

Élément d’une liste

<link>

Définit les relations entre les documents

<map>

Définit une carte

<mark>

Mise en valeur d’un mot ou d’un texte – Texte marqué

<math>

Définit une formule mathématique

<menu>

Définit un menu en liste

<meta>

Définit des informations relatives au document

<meter>

Définit une unité de mesure

<nav>

Définit un groupe de liens de navigation

<noscript>

Définit une alternative au script non supporté

<object>

Définit un objet du contenu extérieur multimédia

<ol>

Définit une liste ordonné

<optgroup>

Regroupe d’une liste d »option dans un formulaire

<option>

Option d’une liste dans un formulaire

<output>

Définit un type de sortie

<p>

Définit un paragraphe

<param>

Définit les paramètres d’un objet

<pre>

Texte pré-formaté

<progress>

Définit une progression

<q>

Définit une courte citation

<rp>

Annotation ruby si le script n’est pas supporté

<rt>

Annotation ruby d’explication

<ruby>

Définit une annotation en ruby

<samp>

Définit un échantillon de code

<script>

Définit un script

<section>

Définit une section

<select>

Définit une liste sélectionnable

<small>

Minimise l’importance d’un texte

<source>

Définit la source d’un contenu multimédia

<span>

Définit une section de type inline

<strong>

Mise en exergue d’un texte – Texte en Gras

<style>

Définit un style CSS

<sub>

Mise en indice d’un texte

<summary>

Définit l’en-tête des détails d’un document ou section

<sup>

Mise en exposant d’un texte

<svg>

Définit une image vectorielle

<table>

Définit un tableau

<tbody>

Définit le corps d’un tableau

<td>

Définit une cellule d’un tableau

<textarea>

Définit une zone de texte

<tfoot>

Définit le bas d’un tableau

<th>

Définit une cellule d’en-tête d’un tableau

<thead>

Définit le haut d’un tableau

<time>

Définit une unité de temps

<title>

Définit le titre d’un document

<tr>

Définit une ligne de tableau

<track>

Définit une unité de temps pour les éléments <audio> et <video>.

<ul>

Définit une liste non-ordonné

<var>

Définit une variable

<video>

Définit une vidéo

<wbr>

Définit un possible retour à la ligne

**Anaeria** · September 21, 2014

C'est bien peut être pratique.

Mais pour moi il manque des infos essentielles pour pouvoir coder : les attributs possibles avec leurs paramétrage et l'implémentation des balises (auto-fermantes ou non).

**Azad** · September 22, 2014

Bon tutoriel, mais il faudrait mettre un peu plus de description et de mise en forme, mais merci quand même !

Bon boulot, +1 rep.

**mars073** · September 22, 2014

un site que je conseil aussi: http://www.w3schools.com/tags/ il référence toutes les balises, leurs attributs et donne des exemples (avec des interactions possible) et même moi qui suis une quiche en anglais je comprends xD

mais merci du partage quand même

PretreElfe · October 23, 2014

La mise en forme est a revoir,

je me rappel au temps que j'étais débutant dans le codage je trouvais ça super utile ... Maintenant je comprends que ça ne m'a jamais servit à rien.

Pour ceux souhaitant commencer à s'aventurer dans le codage voir cette liste ne vous aidera PAS, regarder les codes sources, pratiquez, regardez des codes sources [boucle infinie] c'est la clés de la réussite.

A la limite allez voir des tutoriels sur internet mais pour le html : Aucune utilité il y a pas besoin de tutoriel pour coder le html

Modifié October 24, 2014 par PretreElfe

**Azad** · October 23, 2014

Je suis d'accord pour le fait que certaines balises ne sont pas utiles, néanmoins pour ce qui est des tutoriels là mon avis diverge : ils sont vitaux pour apprendre.
On peut apprendre sur le tas en décortiquant certaines page web, mais c'est extrêmement compliqué de comprendre tout les méandres des différents langages de programmation même dans un cas comme l'HTML.

Qu'entends-tu par la "La mise en forme est en revoir" ? A revoir, non ?

PretreElfe · October 24, 2014

Qu'entends-tu par la "La mise en forme est en revoir" ? A revoir, non ?

Faute de frappe

Personnellement pour le HTML et CSS les tutoriels ont été complétement inutile et n'ont fait que freiner mon apprentissage, selon moi le meilleur moyen est de pratiquer et de regarder des exemples. (Bon après il faut faire différence entre : Tutoriel et apprentissage !

Quand je dis tutoriel c'est par exemple les tutoriels sur siteduzero sur le html que je trouve inutile MAIS je trouve utile de savoir les balises (car sinon comment savoir ce que c'est ?) )

Personnellement pour apprendre je m'amuser à faire des inspecter éléments et modifier à mon goût une page pour ensuite reprendre le code et le refaire sur sublime text 2 (ou pour la plupart d'entre-vous : notepad +)

Je ne dis pas que les tutoriels sont inutile juste que tout le monde ne peut pas comprendre avec des tutoriels (pour ma part) donc je propose une autre solution d'apprentissage qui est assez régulière et beaucoup plus sympathique que de lire des textes et des textes pour en arriver à un résultat qui pour la plupart du temps nous déplaira et dans un futur proche nous devrons relire d'autres tutoriels pour mieux comprendre.

**Azad** · October 24, 2014

Chacun a sa manière d'apprentissage, néanmoins certains préfèrent comprendre le fonctionnement du langage par la théorie et en faisant des petits bouts de codes par petits bouts de code tout au long du tutoriel plutôt que d'apprendre en copiant des pages en déduisant leur utilité.

Il n'y a pas de vérité générale sur l'apprentissage, simplement la majorité a besoin d'explications plus fournies que de déduction, en aucun cas ce sujet n'a pas pour vocation d'apprendre à tout le monde : il sert juste d'annuaire pour les balises présentent dans l'HTML5.

**Eloha** · December 29, 2014

C'est assez récent je crois mais elles sont très utiles, ce sont ces deux balises :

background-clip
mask-image

Elles permettent d'ajouter une certaine texture, ou même une image de fond au texte. Pour réaliser cette effet par exemple :

Et ça s'en créer l'image d'abord sur Photoshop.

Un tutoriel par ici peu vous aider : http://www.webdesignerdepot.com/2014/12/3-tricks-for-adding-texture-to-your-text-with-css-and-svg/

Modifié December 29, 2014 par Eloha

Pirkoa · December 31, 2014

Il est vrai qu'un listing des nouveautés apportées par HTML5 ainsi que la compatibilité de ces dernières avec les différents navigateurs aurait été mieux, mais merci a toi !

**Azad** · December 31, 2014

Tout à fait.

HTML5 apporte un lot considérable de nouveautés, ça serait sympa d'en parler.

Connexion

aide Liste des balises HTML5

Recommended Posts

Indiablex

Anaeria

Azad

mars073

PretreElfe

Azad

PretreElfe

Azad

Eloha

Pirkoa

Azad

Veuillez vous connecter pour commenter

Melinyel

Activité