HTML atomique

Bonjour,
J'ai crée cette page pour les objectifs suivants :

Avoir une vue d'ensemble des éléments HTML pour les débutants
Enseigner pédagogiquement ce qu'est le HTML complètement épuré
Pourquoi pas aider les débutants en HTML à enseigner la différence entre le code et la vue
Vous pouvez également tester vos styles
Faire CTRL + U pour voir le code source de la page

NOTE : la balise "z" n'existe pas.

Libre de droit pour utilisation personnelle ou commerciale avec modifications si nécessaires,
avec ou sans obligation de me citer (même si ce serait plus sympa de me citer).
La seule chose que je refuse est que vous utilisiez cette page en prétendant que c'est vous qui l'avez faite.
Emmanuel Orchanian https://www.emmanuelorchanian.fr

Testeur de styles

Collez les adresses URL de vos liens de style dans les champs ci-dessous.

J'en ai mis trois à disposition au cas où vous voudriez en mettre plusieurs. ATTENTION ! Il faut dans ce cas là mettre dans l'ordre du haut vers le bas (comme dans la plupart des codes, les instructions du dessous écrasent celles de dessus)

ligne horizontale (ci-dessus)

Titre de niveau 1

Titre de niveau 2

Titre de niveau 3

Titre de niveau 4

Titre de niveau 5

Titre de niveau 6 = MAX

Paragraphe

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quia voluptatum dicta voluptas provident odit fugit alias autem, vel, omnis praesentium iste corporis ab quidem quae odio sequi doloribus rem maxime ipsa? Praesentium minima similique provident, nesciunt fuga laudantium officia eaque temporibus voluptate illum, magnam quos velit non, nemo perspiciatis mollitia. Minima, quod sunt, accusantium dolores dolore itaque tenetur vero eveniet, illum voluptates libero officiis quisquam maxime repellat hic cumque alias, nostrum maiores nihil? Fuga enim, maxime quisquam ipsam, asperiores neque quae. Quod atque tempore nemo minima provident excepturi, commodi eius accusamus deserunt hic esse voluptatibus beatae libero, est ipsa.
permet d'aller à la ligne et saut de ligne que s'il y en a besoin (essayer de rétrécir l'écran) voiciUneTrèsLonguePhraseDeTelleSorteQueICIOnVoudraiRetournerÀLaLigneSiOnRétrécitLÉcran.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi suscipit similique nam repellat debitis dolores, voluptatem accusamus ad saepe error aliquam id placeat dolore maiores, autem, fuga numquam minima temporibus.

⚓⚓⚓⚓TEST ANCRE, si vous avez cliqué sur l'ancre, cette ligne doit être en haut de votre écran 😀 ⚓⚓⚓⚓

L'écriture en italique
L'écriture en gras
L'écriture en souligné
L'écriture en ~~barré~~
L'écriture en surligné
L'écriture en ^exposant Par exemple 1^er régiment
L'écriture en _indice Par exemple molécule d'eau = H₂O
L'écriture en petits caractères (juridiction)
L'écriture en haute importance
L'écriture en mise en emphase

Lien Lien hypertexte
Lien Lien interne vers ancre
Lien TARGET_BLANK Lien qui s'ouvre dans un autre onglet

~~cet élément a été supprimé~~
cet élément a été inséré
Essayez de SURVOLER l'abréviation suivante : W3C Note la balise acronym est obsolète, à remplacer par abbr
fragment de code machine
x pour une variable mathématique ou informatique

sortie d'ordinateur sortie d'ordinateur (avec la classe danger) sortie d'ordinateur (avec la classe warning) sortie d'ordinateur (avec la classe success) sortie d'ordinateur (avec la classe info) pour une sortie de la part de votre site (en JavaScript par exemple)
Touche clavier CTRL + R

✔🚀🌊🚜🦋 Note : Si vous êtes sous Windows, appuyez sur Windows + ; (point-virgule) pour faire emoticones.

Texte préformaté

            |  L          TE
            |    A       A
            |      C    V
            |       R A
            |       DOU
            |       LOU
            |      REUSE
            |      QUE TU
            |      PORTES
            |    ET QUI T'
            |    ORNE O CI
            |     VILISÉ
            |    OTE-  TU VEUX
            |     LA    BIEN
            |    SI      RESPI
            |            RER       - Apollinaire

Longue citation.
La Terre est bleue comme une orange.
Paul Eluard

Voici une petiteQ citation en incise.

Pour les blocs d'adresse
26500 BOURG-LÈS-VALENCE (France)
jim@rock.com pour les liens qui ouvrent l'application des mails
(+33) 06 02 19 88 94 pour les liens qui ouvrent l'application des téléphones

élément toujours visible CLIQUER ICI

Présente une boîte fermée permettant de révéler/cacher un contenu.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum dolore laboriosam, soluta voluptatum ullam porro recusandae! Nesciunt delectus, incidunt dolor nemo itaque, alias eum cumque recusandae ab, facere exercitationem accusantium!

CLIQUER ICI

Présente une boîte déjà ouverte grâce à l'attribut openpermettant de révéler le contenu d'un résumé ou d'une légende.

conteneur neutre de type "block"

conteneur neutre de type "inline"

équivalent d'une div. Sémantiquement une entête.

équivalent d'une div. Sémantiquement le contenu principal de la page. Il ne foit y en avoir qu'un seul.

équivalent d'une div. Sémantiquement une section.

pour les articles (de blog par exemple...)

Liste non-ordonnée

Élément de liste sans ordre
Élément de liste sans ordre
Élément de liste sans ordre

Liste ordonnée

Élément de liste ordonnée
Élément de liste ordonnée
Élément de liste ordonnée

Liste ordonnée

On peut changer
le style des puces
En utilisant du CSS
qui cible le parent d'une liste

Liste ordonnée

=I puces en chiffres romains (obsolète)
préferer CSS
list-style-type

Liste ordonnée

=40 puces commençant selon un certain nombre (obsolète)
préferer CSS
lien pour la source

Pour les éléments de navigation Nouvelle balise, alias de ul, pour les menus, listes de liens

Menu lien 1

Menu lien 2

Menu lien 3

Liste de définitions

Terme : Platane: Les platanes sont de grands arbres, pouvant atteindre de 25 à 55 m de haut, dont les caractéristiques générales diffèrent peu d'une espèce à l'autre. Ils ont une durée de vie assez longue (plusieurs centaines d'années, voire dix siècles et plus).
Saule pleureur: Le saule pleureur (Salix babylonica) est une espèce d'arbre de la famille des Salicaceae. Son port retombant est caractéristique et en fait une espèce très appréciée comme arbre d'ornement notamment au bord des pièces d'eau.
Bouleaux: Les bouleaux font partie de la famille des bétulacées et du genre Betula. La plupart des espèces sont des arbres ; quelques-unes, comme Betula nana, sont des chaméphytes. Les bouleaux poussent en général sur les terres pauvres et souvent siliceuses, jusqu'à 2 000 m d'altitude, ainsi que dans les régions arctiques.

(pour un mot qui est en train d'être défini)

Les platanes sont de grands arbres, pouvant atteindre de 25 à 55 m de haut, dont les caractéristiques générales diffèrent peu d'une espèce à l'autre. Ils ont une durée de vie assez longue (plusieurs centaines d'années, voire dix siècles et plus).

Images

Légende

Tableaux

Titre du tableau
Entête de tableau	Entête de tableau	Entête de tableau
Donnée tabulée 1	Donnée tabulée 2	Donnée tabulée 3
Donnée tabulée 4	Donnée tabulée 5	Donnée tabulée 6

Table avec thead, tbody et tfoot
Entête de tableau	Entête de tableau	Entête de tableau
Donnée tabulée 1	Donnée tabulée 2	Donnée tabulée 3
Donnée tabulée 4	Donnée tabulée 5	Donnée tabulée 6
Donnée tabulée 7	Donnée tabulée 8	Donnée tabulée 9
total 1	total 2	total 3

Formulaires

pour les étiquettes de formulaire

(texte sur une seule ligne)

pour une liste d'autocomplétion dans un input type texte.

Entrée de texte sur plusieurs lignes.

Regroupement d'entrées de formulaire

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dolor quam praesentium quo, unde quasi alias saepe incidunt explicabo mollitia aspernatur expedita suscipit iste, recusandae velit sint autem laborum dicta.

SELECT

1 CHECKED 2 Radio 3

1 CHECKED 2 Checkbox 3

70%

mesure basse
mesure moyenne
mesure haute
mesure optimale

NOTE : à partir d'ici, ce sont des balises obsolètes à éviter d'utiliser pour l'accessibilité des mal-voyants.

(obsolète) Ce texte va défiler de bas en haut Ce texte va défiler de bas en haut et alterner Ce texte va rebondir
(imbriquation de deux marquee)

fait clignoter un texte, obsolète et à éviter pour l'accessibilité des malvoyants.

ANCRE VIDE # retour en haut de page

Emmanuel Orchanian www.emmanuelorchanian.fr