✨ HTML Atomique

Bonjour, Cette page vous permet d'avoir une vue d'ensemble des éléments HTML.

Il peut vous servir à tester un style CSS sans prétention à enseigner les balises HTML.
Et pourquoi pas aider un débutant dans le HTML à faire la différence entre le code et la vue.
Par contre attention, le code source même de cette page n'est pas exemplaire pour un débutant.

Bonne lecture 🙂
Emmanuel Orchanian www.emmanuelorchanian.fr


~~~~ HR ligne horizontale

~~~~ <!-- COMMENTAIRE HTML -->

~~~~ 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 = MAX

~~~~ P 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.
~~~~ BR permet d'aller à la ligne et ~~~~ WBR saut de ligne que s'il y en a besoin (essayer de rétrécir l'écran) voiciUneTrèsLonguePhraseDeTelleSorteQueICIOnVoudraiRetournerÀLaLigneSiOnRétrécitLÉcran.

--test ancre--

L'écriture en ~~~~ I italique
L'écriture en ~~~~ B gras
L'écriture en ~~~~ U souligné
L'écriture en ~~~~ STRIKE barré
L'écriture en ~~~~ MARK surligné
L'écriture en ~~~~ SUP exposant Par exemple 1er régiment
L'écriture en ~~~~ SUB indice Par exemple molécule d'eau = H2O
L'écriture en ~~~~ SMALL petits caractères (juridiction)
L'écriture en ~~~~ STRONG haute importance
L'écriture en ~~~~ EM mise en emphase

Lien ~~~~ A Lien hypertexte
Lien #ID Lien interne vers ancre
Lien TARGET_BLANK Lien qui s'ouvre dans un autre onglet




~~~~ DEL cet élément a été supprimé
~~~~ INS cet élément a été inséré
~~~~ ABBR W3C Note la balise acronym est obsolète, à remplacer par abbr
~~~~ CODE fragment de code machine
~~~~ VAR pour une variable mathématique ou informatique
~~~~ SAMP pour une sortie "traditionelle" d'ordinateur en monospace
~~~~ OUTPUT pour une sortie de la part de votre site (en JavaScript par exemple)
~~~~ KBD + CTRL + R

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

 ~~~~ PRE
        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
    

~~~~ BLOCKQUOTE La Terre est bleue comme une orange.

Voici une petiteQ citation en incise.


~~~~ ADDRESS 26500 BOURG-LÈS-VALENCE (France)
~~~~ MAILTO jim@rock.com
~~~~ TEL (311) 555-2368

~~~~ SUMMARY ***CLIQUER ICI*** *******************************
*******************************
*******************************
***~~~~ DETAILS présente une boîte permettant de révéler le contenu d'un résumé ou d'une légende.***
*******************************
*******************************
*******************************


~~~~ DIV conteneur neutre de type "block"
~~~~ SPAN conteneur neutre de type "inline"

~~~~ HEADER équivalent d'une div. Sémantiquement une entête.
~~~~ MAIN équivalent d'une div. Sémantiquement un corps.
~~~~ SECTION équivalent d'une div. Sémantiquement une section.
~~~~ ARTICLE

  1. ~~~~ OL LI Élément de liste ordonnée
  2. OL LI Élément de liste ordonnée
  3. OL LI Élément de liste ordonnée
  1. On peut changer
  2. le style des puces
  3. En utilisant du CSS
  4. qui cible le parent d'une liste
  1. ~~~~ TYPE=I (obsolète)
  2. préferer CSS
  3. list-style-type
  1. ~~~~ start=40 (obsolète)
  2. préferer CSS
  3. lien

~~~~ DL Liste de définitions
~~~~ DT Terme 1 Platane
~~~~ DD Description 1 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).
Terme 2 Saule pleureur
DD Description 2 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.
Terme 3 Bouleaux
DD Description 3 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.

Les ~~~~ DFN 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).




ALT Chien noir

ALT Chien noir 2
FIGCAPTION : Un chien noir


~~~~ AUDIO



~~~~ VIDEO

~~~~ IFRAME


~~~~ CAPTION Titre du tableau
~~~~ TR TH Entête de tableau Entête de tableau Entête de tableau
~~~~ TR TD 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
~~~~ THEAD Entête de tableau Entête de tableau Entête de tableau
~~~~ TBODY 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
~~~~ TFOOT total 1 total 2 total 3

Formulaires

~~~~ FORM


~~~~ INPUT [type="text"]

~~~~ INPUT [type="email"]

~~~~ INPUT [type="password"]

~~~~ INPUT [type="number"]

~~~~ INPUT [type="date"]

~~~~ INPUT [type="time"]

~~~~ INPUT [type="range"]

~~~~ INPUT [type="color"]

~~~~ INPUT [type="file"]

~~~~ INPUT [type="submit"]

~~~~ INPUT [type="image"]

~~~~ OUTPUT

~~~~ DATALIST Commencer à écrire ici



~~~~ LEGEND ~~~~ FIELDSET


SELECT







70%






~~~~ DIALOG OPEN Boîte de dialogue






~~~~ MARQUEE (obsolète) Ce texte va défiler de bas en haut Ce texte va rebondir

BLINK (obsolète et à éviter)


ANCRE VIDE # retour en haut de page

Emmanuel Orchanian www.emmanuelorchanian.fr