Les balises en ligne (on line)
Online Tag : Ce sont des balises qui encadrent du texte afin de lui attribuer un sens particulier et ou un aspect typique| a | abbr |
|
b | bdo |
|
|
| br | button | cite | code | dfn | em | |
| i | img | input | kbd | label | map | |
| object | output | q | samp | script | select | |
| small | span | strong | sub | sup | textarea | |
| time | b | tt | u | var | wbr |
Balises utilisées dans les paragraphes
Pour en indiquer le sens et en modifier l'aspect
couples de balises faussement identiques :
- Emphasized text : em
La différence entre emphasized et italic est de nature sémantique ; c'est à dire que l'emphase est clairement exprimée lorsque l'on utilise <em> plutôt que <i> ; les analyseurs de sites que sont les moteurs de recherche peuvent donc faire la nuance entre un terme important du site et un mot en latin (ou dans n'impporte quelle langue étrangère) que l'on doit mettre en italique !
Italic text : i tag ; -
Strong text : strong tag
Strong apporte l'idée que le mot est important ; bold n'indique qu'une mise en forme que l'on peut d'ailleurs obtenir en CSS avec l'expression : font-weight: bold;
vs bold text : b tag
modification d'aspect
-
cliquer ici : elu par cette crapule ; la balise
bdo ;
la balise bdo signale l'orientation de lecture, elle est obligatoirement pourvue de l'attribut dir qui peu prendre soit la valeur ltr (sens normal) soit la valeur rtl : verlant.
- Underline text : u
Ce texte est souligné dans certaines parties avec la balise u
-
la balise mark permet de
surligner un texte ; en CSS, background-color est à
yellow par défaut ;
La propriété CSS background permet de changer la couleur du surlignage en orange par exemple.
-
La balise del permet de rayer du
texte ;
cela permet de montrer le texte de la
vrresssionversion précédent unegrosrequsioncorrection, ... -
La balise small permet d'obtenir
un texte de petite taille ;
Vous connaissez l'expression : "small is beautifull" ;
Balises sémantiques plus rares (moins usitées)
Un grand nombre de balises sont très peu utilisées et c'est un tort ; elles permettent de préciser le rôle du texte qui est encadré par ces balises.
Quelques exemples :
-
la balise abbr ;
abbr signifie abbreviation, cette balise doit remplacer la balise
acronymqui est obsolète ; elle sert à préciser à l'aide de l'attribut title à partir de quel(s) mot(s) l'abréviation ou l'acronyme est (sont) construits ; exemple <abbr title="HyperText Markedup Langage">HTML</abbr> -
la balise cite ;
permet de baliser une citation ; on peut lui associer en CSS les pseudo-classes ::before et ::after pour lui ajouter systématiquement des guillemets
-
la balise précisant une définition dfn
elle permet aux moteur de recherche de recenser les définitions d'une expression ou d'un terme et de l'afficher dans les résultats de la requète : definition: une expression ou un terme
Balises spécifiques au thème de l'informatique
-
La balise code permet de signaler un
code dans n'importe quel langage informatique ; exemple :
<!-- ceci est un commentaire en HTML -->
-
La balise samp permet de proposer un
échantillon (sample) de code dans n'importe quel langage
; exemple :
<!-- ceci est un échantillon de commentaire en HTML
-->
-
La balise kbd
kbd (keyboard) permet
de signaler une touche ou combinaison de touches du clavier ;
par exemple Ctrl+C permet de copier ;
-
La balise Variable permet
d'indiquer une variable, le style reste à préciser en css ...
Les balises de blocs (block)
Un bloc est une groupe d'instructions et il est traité comme un tout ;
la balise qui définit le début et la fin du bloc est appelée le container ou parent des
éléments du bloc appelés enfants (child).
Les blocs utilisés pour partitionner la page web : mise en page
(layout)
voir layout
les blocs de partition globale avec un sens affirmé
- la balise article
la balise article
permet de préciser que son contenu est une
production d'information
telle que celle d'un article de blog, ou une nouvelle, c'est
donc un bloc qui contient une information développée et pas
résumée. Ce n'est pas un sommaire, ni un menu, ni un élément
stable du site ; l'article peut être remplacé par un autre ou
s'ajouter à d'autres, coomme dans un journal ...
- la balise aside
en construction
- la balise footer
en construction
- la balise header
en construction
- la balise main
en construction
- la balise nav
en construction
- la balise section
en construction
les sous blocs : importance moindre
<!-- ceci est un commentaire en HTML -->
<!-- ceci est un échantillon de commentaire en HTML -->
kbd (keyboard) permet de signaler une touche ou combinaison de touches du clavier ; par exemple Ctrl+C permet de copier ;
Certains blocs ne structurent pas la totalité de la page et peuvent donc être considérés comme des sous parties ou sous-blocs eux même inclus dans des blocs majeurs tels que header ou nav par exemple.
-
la balise address
The address tag defines the contact information for the author/owner of a document or an article.
If the address element is inside the body element, it represents contact information for the document.
If the address element is inside an article element, it represents contact information for that article.
The text in the address element usually renders in italic. Most browsers will add a line break before and after the address element.
Source de cette citation : w3school -> address tag- la balise div
La balise div pour division, sert à tout et trop souvent n'importe quoi !
Elle permet de délimiter un bloc de n'importe quoi, et c'est la classe associée qui précise le sens (sémantique) et le style de ce que l'on y met. Ne pas en abuser et privilégier les balises sémantiques telles que nav au lieu de créer une classe "nav-bar" ou "menu" dans un div.- la balise form
en constructionles balises liées aux listes : ul, ol, li, dl, dt, dd
Les listes sont non ordonnées, avec puces (ul) ou non (dl), ou bien ordonnées (ol). Chaque élément de liste peut contenir tout et n'importe quoi, attention à respecter une certaine cohérence (pas de listes de listes de listes de photos).
les listes non ordonnées
Les listes non ordonnées sont utilisées lorsqu'il n'y a pas d'ordre chronologique (donc pas pour des
procéduresou desrecettes).Avec puces : ul
-
la balise en construction
en construction
-
la balise en construction
en construction
Sans puces : dl
exemple tiré de w3school :
- Coffee
- Black hot drink
- Milk
- White cold drink
-
la balise dl
dl = liste de description sans puces ni numérotation
-
la balise dt
dt sert à donner un terme (à définir avec un dd).
-
la balise dd
dt sert à donner une description ou définition d'un terme donné par dt.
les listes ordonnées : ol avec un bloc de li
-
la balise en construction
en construction
-
la balise en construction
en construction
Les blocs liés aux tableaux :
- la balise fieldset
- la balise caption
Mini tableau - la balise table
- la balise tbody
- la balise td
C'est la balise qui défini une cellule de données (d as data ou case banale du tableau
N.B. : sur une ligne (row) encadrée par tr, toutes les balises de cellules doivent être identiques (soit que des td soit que des th) ;
- la balise th
C'est la balise qui défini une cellule de titre (h as head ou case de titre du tableau
N.B. : sur une ligne (row) encadrée par tr, toutes les balises de cellules doivent être identiques (soit que des td soit que des th) ;
- la balise tr
C'est la balise qui défini une ligne (r as row
N.B. : sur une ligne (row) encadrée par tr, toutes les balises de cellules doivent être identiques (soit que des td soit que des th) ;
- la balise thead
- la balise tfoot
Les blocs de titres et légendes
-
Les balises hn avec n valant de
1 à 6 ;
h1Plan caché/h1 h2sous titre de niveau 1 /h2 h2sous titre de niveau 1 /h2 h3sous titre de niveau 2 /h3
- la balise blockquote
- la balise figcaption
- la balise figure
- la balise en construction
Ici c'est le résumé de ...
Un mini exposé sur ...
bla bla bla
All content and graphics on this web site are the property of the company RodezData.
- la balise div