Le manuel HTML

Remarque: vous pouvez télécharger une version PDF / ePub / Mobi de ce livre afin de pouvoir le lire hors ligne.

introduction

Bienvenue! J'ai écrit ce livre pour vous aider à apprendre rapidement le HTML et à vous familiariser avec les sujets HTML avancés.

HTML, un raccourci pour Hyper Text Markup Language, est l'un des blocs de construction les plus fondamentaux du Web.

HTML est officiellement né en 1993 et ​​depuis lors, il a évolué vers son état actuel, passant de simples documents texte à des applications Web riches.

Ce manuel s'adresse à un vaste public.

Tout d'abord, le débutant. J'explique le HTML de zéro de manière succincte mais complète, vous pouvez donc utiliser ce livre pour apprendre le HTML à partir des bases.

Ensuite, le professionnel. Le HTML est souvent considéré comme une chose secondaire à apprendre. Cela pourrait être donné pour acquis.

Pourtant, beaucoup de choses sont obscures pour beaucoup de gens. Moi inclus. J'ai écrit ce manuel pour m'aider à comprendre le sujet, parce que lorsque j'ai besoin d'expliquer quelque chose, je ferais mieux de m'assurer que je connais d'abord la chose à fond.

Même si vous n'écrivez pas de code HTML dans votre travail quotidien, savoir comment fonctionne le HTML peut vous éviter des maux de tête lorsque vous avez besoin de le comprendre de temps en temps, par exemple lors de la modification d'une page Web.

Vous pouvez me joindre sur Twitter @flaviocopes.

Mon site Web est flaviocopes.com.

Index des livres

  • Préface
  • Bases du HTML
  • L'en-tête du document
  • Le corps du document
  • Balises qui interagissent avec le texte
  • Liens
  • Balises de conteneur et structure de page HTML
  • Formes
  • les tables
  • Balises multimédias: audio et vidéo
  • iframes
  • Images
  • Accessibilité

PRÉFACE

Le HTML est le fondement de la merveille appelée le Web.

Il y a un pouvoir incroyable sous cet ensemble de règles plutôt simple et limité, qui nous permet - développeurs, créateurs, concepteurs, écrivains et bricoleurs - de créer des documents, des applications et des expériences pour les gens du monde entier.

Mon premier livre HTML est sorti en 1997 et s'appelait "HTML Unleashed". Un gros, plein de pages, long tome.

Plus de 20 ans se sont écoulés et le HTML est toujours le fondement du Web, avec des changements minimes par rapport à l'époque.

Bien sûr, nous avons plus de balises sémantiques, le HTML de présentation n'est plus une chose, et CSS s'est occupé de la conception des choses.

Le succès de HTML repose sur une chose: la simplicité .

Il a résisté au détournement dans un dialecte XML via XHTML, quand les gens ont finalement réalisé que cette chose était beaucoup trop complexe.

Il l'a fait à cause d'une autre caractéristique qu'il nous offre: le pardon . Il y a quelques règles, d'accord, mais après avoir appris celles-ci, vous avez beaucoup de liberté.

Les navigateurs ont appris à être résilients et à toujours essayer de faire de leur mieux lors de l'analyse et de la présentation du HTML aux utilisateurs.

Et toute la plate-forme Web a bien fait une chose: elle n'a jamais rompu la rétrocompatibilité. Incroyablement, nous pouvons revenir aux documents HTML écrits en 1991, et ils ressemblent à peu près à ce qu'ils étaient à l'époque.

Nous savons même quelle était la première page Web. C'est ceci: //info.cern.ch/hypertext/WWW/TheProject.html

Et vous pouvez voir la source de la page, grâce à une autre grande fonctionnalité du Web et du HTML: nous pouvons inspecter le HTML de n'importe quelle page Web .

Ne prenez pas cela pour acquis. Je ne connais aucune autre plateforme qui nous donne cette capacité.

Les outils de développement exceptionnels intégrés à n'importe quel navigateur nous permettent d'inspecter et de nous inspirer du HTML écrit par n'importe qui dans le monde.

Si vous êtes novice en HTML, ce livre vise à vous aider à démarrer. Si vous êtes un développeur Web chevronné, ce livre améliorera vos connaissances.

J'ai tellement appris en l'écrivant, même si je travaille avec le Web depuis plus de 20 ans, et je suis sûr que vous trouverez quelque chose de nouveau aussi.

Ou vous réapprendrez quelque chose de vieux que vous avez oublié.

Dans tous les cas, le but du livre est de vous être utile, et j'espère qu'il réussira.

BASES HTML

HTML est une norme définie par le WHATWG , un acronyme pour Web Hypertext Application Technology Working Group, une organisation formée par des personnes travaillant sur le navigateur Web le plus populaire. Cela signifie qu'il est essentiellement contrôlé par Google, Mozilla, Apple et Microsoft.

Dans le passé, le W3C (World Wide Web Consortium) était l'organisation chargée de créer le standard HTML.

Le contrôle est passé de manière informelle du W3C à WHATWG lorsqu'il est devenu clair que la poussée du W3C vers XHTML n'était pas une bonne idée.

Si vous n'avez jamais entendu parler de XHTML, voici une petite histoire. Au début des années 2000, nous pensions tous que l'avenir du Web était XML (sérieusement). Le HTML est donc passé d'un langage de création basé sur SGML à un langage de balisage XML.

C'était un grand changement. Nous devions connaître et respecter plus de règles. Des règles plus strictes.

Finalement, les fournisseurs de navigateurs ont réalisé que ce n'était pas la bonne voie pour le Web, et ils ont repoussé, créant ce que l'on appelle maintenant HTML5.

Le W3C n'était pas vraiment d'accord pour abandonner le contrôle du HTML, et pendant des années, nous avons eu 2 normes concurrentes, chacune visant à être la norme officielle. Finalement, le 28 mai 2019, le W3C a rendu officiel le fait que la «vraie» version HTML était celle publiée par WHATWG.

J'ai mentionné HTML5. Laissez-moi vous expliquer cette petite histoire. Je sais, c'est un peu déroutant jusqu'à présent, comme pour beaucoup de choses dans la vie où de nombreux acteurs sont impliqués, mais c'est aussi fascinant.

Nous avons eu la version HTML 1 en 1993. Voici la RFC originale.

HTML 2 a suivi en 1995.

Nous avons obtenu HTML 3 en janvier 1997 et HTML 4 en décembre 1997.

Temps occupé!

Plus de 20 ans se sont écoulés, nous avions tout ce truc XHTML, et finalement nous sommes arrivés à ce "truc" HTML5, qui n'est plus vraiment du HTML .

HTML5 est un terme qui définit désormais tout un ensemble de technologies, qui comprend le HTML mais ajoute de nombreuses API et normes comme WebGL, SVG et plus encore.

La chose clé à comprendre ici est la suivante: il n'y a pas (plus) de version HTML maintenant. C'est un niveau de vie. Comme CSS, qui s'appelle "3", mais en réalité, c'est un tas de modules indépendants développés séparément. Comme JavaScript, où nous avons une nouvelle édition chaque année, mais de nos jours, la seule chose qui compte, c'est quelles fonctionnalités individuelles sont implémentées par le moteur.

Oui, nous l'appelons HTML5, mais HTML4 date de 1997. C'est long pour quoi que ce soit, et encore moins pour le Web.

C'est là que le standard "vit" maintenant: //html.spec.whatwg.org/multipage.

HTML est le langage de balisage que nous utilisons pour structurer le contenu que nous consommons sur le Web.

Le HTML est présenté au navigateur de différentes manières.

  • Il peut être généré par une application côté serveur qui le construit en fonction de la requête ou des données de session, par exemple une application Rails ou Laravel ou Django.
  • Il peut être généré par une application JavaScript côté client qui génère du HTML à la volée.
  • Dans le cas le plus simple, il peut être stocké dans un fichier et servi au navigateur par un serveur Web.

Plongeons dans ce dernier cas. Bien qu'en pratique, ce soit probablement le moyen le moins populaire de générer du HTML, il est toujours essentiel de connaître les blocs de construction de base.

Par convention, un fichier HTML est enregistré avec une extension .htmlou .htm.

Dans ce fichier, nous organisons le contenu à l'aide de balises .

Les balises enveloppent le contenu et chaque balise donne une signification particulière au texte qu'elle enveloppe.

Faisons quelques exemples.

Cet extrait de code HTML crée un paragraphe à l'aide de la pbalise:

A paragraph of text

Cet extrait de code HTML crée une liste d'éléments à l'aide de la ulbalise, qui signifie liste non ordonnée , et des libalises, qui signifient élément de liste :

  • First item
  • Second item
  • Third item

Lorsqu'une page HTML est diffusée par le navigateur, les balises sont interprétées et le navigateur rend les éléments selon les règles qui définissent leur apparence visuelle.

Certaines de ces règles sont intégrées, comme le rendu d'une liste ou la façon dont un lien est souligné en bleu.

Certaines autres règles sont définies par vous avec CSS.

Le HTML n'est pas de présentation. Il ne s'agit pas de l' apparence des choses . Au lieu de cela, il s'agit de ce que signifient les choses .

C'est au navigateur de déterminer à quoi ressemblent les choses, avec les directives définies par qui construit la page, avec le langage CSS.

Maintenant, ces deux exemples que j'ai faits sont des extraits de code HTML pris en dehors d'un contexte de page.

Structure de la page HTML

Faisons un exemple d'une page HTML appropriée.

Les choses commencent par la déclaration de type de document (alias doctype ), une façon de dire au navigateur qu'il s'agit d'une page HTML et quelle version de HTML nous utilisons.

Le HTML moderne utilise ce doctype:

Ensuite, nous avons l' htmlélément, qui a une balise d'ouverture et de fermeture:

  ...  

La plupart des balises sont livrées par paires avec une balise d'ouverture et une balise de fermeture. La balise de fermeture est écrite de la même manière que la balise d'ouverture, mais avec un /:

some content 

Il y a quelques balises à fermeture automatique, ce qui signifie qu'ils ne ont pas besoin d' une balise de fermeture séparée car ils ne contiennent rien en eux .

La htmlbalise de départ est utilisée au début du document, juste après la déclaration du type de document.

La htmlbalise de fin est la dernière chose présente dans un document HTML.

À l'intérieur de l' htmlélément, nous avons 2 éléments: headet body:

   ...   ...   

À l'intérieur, headnous aurons des balises essentielles à la création d'une page Web, comme le titre, les métadonnées et les CSS et JavaScript internes ou externes. Surtout des choses qui n'apparaissent pas directement sur la page, mais qui aident uniquement le navigateur (ou des robots comme le robot de recherche Google) à l'afficher correctement.

À l'intérieur, bodynous aurons le contenu de la page. Le truc visible .

Tags vs éléments

J'ai mentionné des balises et des éléments. Quelle est la différence?

Les éléments ont une balise de départ et une balise de fermeture. Dans cet exemple, nous utilisons les pbalises de début et de fin pour créer un pélément:

A paragraph of text

Ainsi, un élément constitue l'ensemble du package :

  • balise de départ
  • contenu textuel (et éventuellement d'autres éléments)
  • balise de fermeture

Si un élément n'a pas de balise de fermeture, il n'est écrit qu'avec la balise de départ et ne peut contenir aucun contenu textuel.

Cela dit, je pourrais utiliser la balise ou le terme d'élément dans le livre signifiant la même chose, sauf si je mentionne explicitement la balise de début ou de fin.

Les attributs

La balise de départ d'un élément peut avoir des extraits spéciaux d'informations que nous pouvons attacher, appelés attributs .

Les attributs ont la key="value"syntaxe:

A paragraph of text

Vous pouvez également utiliser des guillemets simples, mais l'utilisation de guillemets doubles en HTML est une bonne convention.

Nous pouvons en avoir plusieurs:

A paragraph of text

et certains attributs sont booléens, ce qui signifie que vous n'avez besoin que de la clé:

Les attributs classet idsont deux des attributs les plus courants que vous trouverez utilisés.

Ils ont une signification particulière et sont utiles à la fois en CSS et en JavaScript.

La différence entre les deux est que an idest unique dans le contexte d'une page Web; il ne peut pas être dupliqué.

Les classes, en revanche, peuvent apparaître plusieurs fois sur plusieurs éléments.

De plus, un idn'est qu'une valeur. classpeut contenir plusieurs valeurs, séparées par un espace:

A paragraph of text

Il est courant d'utiliser le tiret -pour séparer les mots d'une valeur de classe, mais ce n'est qu'une convention.

Ce ne sont que deux des attributs possibles que vous pouvez avoir. Certains attributs ne sont utilisés que pour une balise. Ils sont hautement spécialisés.

D'autres attributs peuvent être utilisés de manière plus générale. Vous venez de voir idet class, mais nous en avons d'autres aussi, comme ceux stylequi peuvent être utilisés pour insérer des règles CSS en ligne sur un élément.

Insensible à la casse

Le HTML est insensible à la casse. Les balises peuvent être écrites en majuscules ou en minuscules. Au début, les plafonds étaient la norme. Aujourd'hui, les minuscules sont la norme. C'est une convention.

Vous écrivez généralement comme ceci:

A paragraph of text

pas comme ça:

A paragraph of text

Espace blanc

Assez important. En HTML, même si vous ajoutez plusieurs espaces blancs dans une ligne, elle est réduite par le moteur CSS du navigateur.

Par exemple le rendu de ce paragraphe:

A paragraph of text

est le même que ceci:

A paragraph of text

et le même que celui-ci:

A paragraph of text

> En utilisant la propriété CSS d'espace blanc, vous pouvez modifier le comportement des choses. Vous pouvez trouver plus d'informations sur la façon dont CSS traite les espaces blancs dans la spécification CSS

Je préfère généralement

A paragraph of text

ou

A paragraph of text

Les balises imbriquées doivent être indentées avec 2 ou 4 caractères, selon votre préférence:

A paragraph of text

  • A list item

Remarque: cette fonctionnalité «L'espace blanc n'est pas pertinent» signifie que si vous souhaitez ajouter de l'espace supplémentaire, cela peut vous rendre assez fou. Je vous suggère d'utiliser CSS pour créer plus d'espace en cas de besoin.

Remarque: dans des cas particuliers, vous pouvez utiliser l' entité HTML (un acronyme qui signifie espace insécable ) - plus d'informations sur les entités HTML plus tard. Je pense que cela ne devrait pas être abusé. CSS est toujours préférable pour modifier la présentation visuelle.

LA TÊTE DU DOCUMENT

La headbalise contient des balises spéciales qui définissent les propriétés du document.

Il est toujours écrit avant la bodybalise, juste après la htmlbalise d' ouverture :

   ...  ...  

Nous n'utilisons jamais d'attributs sur cette balise. Et nous n'y écrivons pas de contenu.

C'est juste un conteneur pour d'autres balises. À l'intérieur, nous pouvons avoir une grande variété de balises, en fonction de ce que vous devez faire:

  • title
  • script
  • noscript
  • link
  • style
  • base
  • meta

Le titletag

La titlebalise détermine le titre de la page. Le titre est affiché dans le navigateur, et il est particulièrement important car c'est l'un des facteurs clés de l'optimisation des moteurs de recherche (SEO).

Le scripttag

Cette balise est utilisée pour ajouter du JavaScript dans la page.

Vous pouvez l'inclure en ligne, en utilisant une balise d'ouverture, le code JavaScript puis la balise de fermeture:

 ..some JS  

Ou vous pouvez charger un fichier JavaScript externe en utilisant l' srcattribut:

L' typeattribut par défaut est défini sur text/javascript, il est donc complètement facultatif.

Il y a quelque chose d'assez important à savoir sur cette balise.

Parfois, cette balise est utilisée en bas de page, juste avant la balise de fermeture . Pourquoi? Pour des raisons de performances.

Le chargement de scripts par défaut bloque le rendu de la page jusqu'à ce que le script soit analysé et chargé.

En le plaçant au bas de la page, le script est chargé et exécuté une fois que la page entière est déjà analysée et chargée, offrant une meilleure expérience à l'utilisateur plutôt que de la conserver dans la headbalise.

Mon opinion est que c'est maintenant une mauvaise pratique. Laissez scriptvivre dans le headtag.

En JavaScript moderne, nous avons une alternative plus performante que de garder le script au bas de la page - l' deferattribut. Voici un exemple qui charge un file.jsfichier, par rapport à l'URL actuelle:

C'est le scénario qui déclenche le chemin le plus rapide vers une page à chargement rapide et un JavaScript à chargement rapide.

Remarque: l' asyncattribut est similaire, mais à mon avis, une option pire que defer. Je décris pourquoi, plus en détail, à la page //flaviocopes.com/javascript-async-defer/

Le noscripttag

Cette balise est utilisée pour détecter lorsque les scripts sont désactivés dans le navigateur.

Remarque: les utilisateurs peuvent choisir de désactiver les scripts JavaScript dans les paramètres du navigateur. Ou le navigateur peut ne pas les prendre en charge par défaut.

Il est utilisé différemment selon qu'il est placé dans l'en-tête du document ou dans le corps du document.

Nous parlons maintenant de l'en-tête du document, alors introduisons d'abord cette utilisation.

Dans ce cas, la noscriptbalise ne peut contenir que d'autres balises:

  • link Mots clés
  • style Mots clés
  • meta Mots clés

pour modifier les ressources servies par la page, ou les metainformations, si les scripts sont désactivés.

Dans cet exemple, j'ai défini un élément avec la no-script-alertclasse à afficher si les scripts sont désactivés, comme c'était le cas display: nonepar défaut:

   ...   .no-script-alert { display: block; }   ...  ...  

Résolvons l'autre cas: s'il est placé dans le corps, il peut contenir du contenu, comme des paragraphes et d'autres balises, qui sont rendus dans l'interface utilisateur.

Le linktag

La linkbalise est utilisée pour définir les relations entre un document et d'autres ressources.

Il est principalement utilisé pour lier un fichier CSS externe à charger.

Cet élément n'a pas de balise de fermeture.

Usage:

   ...  ...  ...  

L' mediaattribut permet le chargement de différentes feuilles de style en fonction des capacités de l'appareil:

Nous pouvons également créer des liens vers des ressources autres que des feuilles de style.

Par exemple, nous pouvons associer un flux RSS en utilisant

Ou nous pouvons associer un favicon en utilisant:

Cette balise était également utilisée pour le contenu multi-page, pour indiquer la page précédente et suivante à l'aide de rel="prev"et rel="next". Surtout pour Google. À partir de 2019, Google a annoncé qu'il n'utilisait plus cette balise car il pouvait trouver la bonne structure de page sans elle.

Le styletag

Cette balise peut être utilisée pour ajouter des styles dans le document, plutôt que pour charger une feuille de style externe.

Usage:

 .some-css {}  

Comme pour la linkbalise, vous pouvez utiliser l' mediaattribut pour utiliser ce CSS uniquement sur le support spécifié:

 .some-css {}  

Le basetag

Cette balise est utilisée pour définir une URL de base pour toutes les URL relatives contenues dans la page.

   ...  ...  ...  

Le metatag

Les balises Meta effectuent une variété de tâches et elles sont très, très importantes.

Surtout pour le référencement.

meta les éléments n'ont que la balise de départ.

Le plus basique est la descriptionbalise meta:

Cela peut être utilisé par Google pour générer la description de la page dans ses pages de résultats, s'il trouve qu'elle décrit mieux la page que le contenu de la page (ne me demandez pas comment).

La charsetbalise meta est utilisée pour définir le codage des caractères de la page. utf-8dans la plupart des cas:

La robotsbalise meta indique aux robots des moteurs de recherche d'indexer ou non une page:

Ou s'ils doivent suivre des liens ou non:

Vous pouvez également définir nofollow sur des liens individuels. C'est ainsi que vous pouvez définir nofollowglobalement.

Vous pouvez les combiner:

Le comportement par défaut est index, follow.

Vous pouvez utiliser d' autres propriétés, y compris nosnippet, noarchive, noimageindexet plus encore.

Vous pouvez également simplement dire à Google au lieu de cibler tous les moteurs de recherche:

Et d'autres moteurs de recherche peuvent également avoir leur propre balise META.

En parlant de cela, nous pouvons dire à Google de désactiver certaines fonctionnalités. Cela empêche la fonctionnalité de traduction dans les résultats du moteur de recherche:

La viewportbalise meta est utilisée pour indiquer au navigateur de définir la largeur de page en fonction de la largeur de l'appareil.

En savoir plus sur cette balise.

Une autre balise meta plutôt populaire est http-equiv="refresh"celle. Cette ligne indique au navigateur d'attendre 3 secondes, puis de rediriger vers cette autre page:

L'utilisation de 0 au lieu de 3 redirigera dès que possible.

Ce n'est pas une référence complète; D'autres balises meta moins utilisées existent.

Après cette introduction de l'en-tête du document, nous pouvons commencer à plonger dans le corps du document.

LE CORPS DU DOCUMENT

Après la balise head de fermeture, nous ne pouvons avoir qu'une seule chose dans un document HTML: l' bodyélément.

   ...   ...   

Tout comme les balises headet html, nous ne pouvons avoir qu'une seule bodybalise sur une page.

À l'intérieur de la bodybalise, nous avons toutes les balises qui définissent le contenu de la page.

Techniquement, les balises de début et de fin sont facultatives. Mais je considère que c'est une bonne pratique de les ajouter. Juste pour plus de clarté.

Dans les chapitres suivants, nous définirons la variété de balises que vous pouvez utiliser dans le corps de la page.

Mais avant, nous devons introduire une différence entre les éléments de bloc et les éléments en ligne.

Éléments de bloc vs éléments en ligne

Les éléments visuels, ceux définis dans le corps de la page, peuvent être généralement classés en 2 catégories:

  • éléments de bloc ( p, div, à la tête des éléments, des listes et des éléments de liste, ...)
  • des éléments en ligne ( a, span, img, ...)

Quelle est la différence?

Les éléments de bloc, lorsqu'ils sont positionnés dans la page, ne permettent pas d'autres éléments à côté d'eux. Vers la gauche ou vers la droite.

Les éléments en ligne peuvent plutôt être placés à côté d'autres éléments en ligne.

La différence réside également dans les propriétés visuelles que nous pouvons modifier à l'aide de CSS. Nous pouvons modifier la largeur / hauteur, la marge, le remplissage et la bordure des éléments de bloc. Nous ne pouvons pas faire cela pour les éléments en ligne.

Notez qu'en utilisant CSS, nous pouvons changer la valeur par défaut pour chaque élément, en définissant une pbalise pour être en ligne, par exemple, ou a spanpour être un élément de bloc.

Une autre différence est que les éléments en ligne peuvent être contenus dans des éléments de bloc. L'inverse n'est pas vrai.

Certains éléments de bloc peuvent contenir d'autres éléments de bloc, mais cela dépend. La pbalise par exemple ne permet pas une telle option.

TAGS QUI INTERAGISSENT AVEC LE TEXTE

Le ptag

Cette balise définit un paragraphe de texte.

Some text

C'est un élément de bloc.

À l'intérieur, nous pouvons ajouter n'importe quel élément en ligne que nous aimons, comme spanou a.

Nous ne pouvons pas ajouter d'éléments de bloc.

Nous ne pouvons pas imbriquer un pélément dans un autre.

Par défaut, les navigateurs stylisent un paragraphe avec une marge en haut et en bas. 16pxdans Chrome, mais la valeur exacte peut varier d'un navigateur à l'autre.

Cela provoque l'espacement de deux paragraphes consécutifs, reproduisant ce que nous pensons d'un "paragraphe" dans le texte imprimé.

Le spantag

Il s'agit d'une balise en ligne qui peut être utilisée pour créer une section dans un paragraphe qui peut être ciblée à l'aide de CSS:

A part of the text and here another part

Le brtag

Cette balise représente un saut de ligne. C'est un élément en ligne et n'a pas besoin d'une balise de fermeture.

Nous l'utilisons pour créer une nouvelle ligne à l'intérieur d'une pbalise, sans créer de nouveau paragraphe.

Et par rapport à la création d'un nouveau paragraphe, cela n'ajoute pas d'espacement supplémentaire.

Some text

A new line

Les balises d'en-tête

HTML nous fournit 6 balises de titre. De plus important au moins important, nous avons h1, h2, h3, h4, h5, h6.

En règle générale, une page aura un h1élément, qui est le titre de la page. Ensuite, vous pourriez avoir un ou plusieurs h2éléments en fonction du contenu de la page.

Les titres, en particulier l'organisation des rubriques, sont également essentiels pour le référencement, et les moteurs de recherche les utilisent de différentes manières.

Le navigateur par défaut rendra la h1balise plus grande et réduira la taille des éléments à mesure que le nombre haugmente:

Tous les en-têtes sont des éléments de bloc. Ils ne peuvent pas contenir d'autres éléments, juste du texte.

Le strongtag

Cette balise est utilisée pour marquer le texte à l'intérieur comme fort . C'est assez important, ce n'est pas un indice visuel, mais un indice sémantique. Selon le support utilisé, son interprétation variera.

Les navigateurs par défaut mettent le texte de cette balise en gras .

Le emtag

Cette balise est utilisée pour marquer le texte à l'intérieur comme souligné . Comme avec strong, ce n'est pas un indice visuel mais un indice sémantique.

Les navigateurs par défaut mettent le texte en italique .

Citations

La blockquotebalise HTML est utile pour insérer des citations dans le texte.

Les navigateurs appliquent par défaut une marge à l' blockquoteélément. Chrome applique une marge gauche et droite de 40 pixels et une marge supérieure et inférieure de 10 pixels.

La qbalise HTML est utilisée pour les guillemets en ligne.

Ligne horizontale

Pas vraiment basé sur du texte, mais la hrbalise est souvent utilisée à l'intérieur d'une page. Cela signifie horizontal rule, et cela ajoute une ligne horizontale dans la page.

Utile pour séparer les sections de la page.

Blocs de code

La codebalise est particulièrement utile pour afficher le code, car les navigateurs lui attribuent une police à espacement fixe.

C'est généralement la seule chose que font les navigateurs. Voici le CSS appliqué par Chrome:

code { font-family: monospace; } 

Cette balise est généralement enveloppée dans une prebalise, car l' codeélément ignore les espaces et les sauts de ligne. Comme l' pétiquette.

Chrome donne prece style par défaut:

pre { display: block; font-family: monospace; white-space: pre; margin: 1em 0px; } 

ce qui empêche la réduction des espaces blancs et en fait un élément de bloc.

Listes

Nous avons 3 types de listes:

  • listes non ordonnées
  • listes ordonnées
  • listes de définitions

Les listes non ordonnées sont créées à l'aide de la ulbalise. Chaque élément de la liste est créé avec la libalise:

  • First
  • Second

Les listes ordonnées sont similaires, juste faites avec la olbalise:

  1. First
  2. Second

La différence entre les deux est que les listes ordonnées ont un numéro avant chaque élément:

Les listes de définitions sont un peu différentes. Vous avez un terme et sa définition:

Flavio
The name
Copes
The surname

Voici comment les navigateurs les rendent généralement:

Je dois dire que vous les voyez rarement dans la nature, bien sûr pas autant que ulet ol, mais parfois ils peuvent être utiles.

Autres balises de texte

Il existe un certain nombre de balises à des fins de présentation:

  • le marktag
  • le instag
  • le deltag
  • le suptag
  • le subtag
  • le smalltag
  • le itag
  • le btag

Voici un exemple de leur rendu visuel qui est appliqué par défaut par les navigateurs:

Vous pourriez vous demander, en quoi est-ce bdifférent de strong? Et en quoi iest-ce différent de em?

La différence réside dans la signification sémantique. Alors que bet isont un indice direct au navigateur pour rendre un morceau de texte en gras ou en italique, stronget emdonner au texte une signification particulière, et c'est au navigateur de donner le style. Ce qui est exactement le même que bet i, par défaut. Bien que vous puissiez changer cela en utilisant CSS.

Il existe un certain nombre d'autres balises moins utilisées liées au texte. Je viens de mentionner ceux que je vois le plus utilisés.

LIENS

Les liens sont définis à l'aide de la abalise. La destination du lien est définie via son hrefattribut.

Exemple:

click here 

Entre la balise de début et de fin, nous avons le texte du lien.

L'exemple ci-dessus est une URL absolue. Les liens fonctionnent également avec les URL relatives:

click here 

Dans ce cas, en cliquant sur le lien, l'utilisateur est déplacé vers l' /testURL sur l'origine actuelle.

Soyez prudent avec le /personnage. S'il est omis, au lieu de partir de l'origine, le navigateur ajoutera simplement la testchaîne à l'URL actuelle.

Exemple, je suis sur la page //flaviocopes.com/axios/et j'ai ces liens:

  • /test une fois cliqué m'amène à //flaviocopes.com/test
  • test une fois cliqué m'amène à //flaviocopes.com/axios/test

Les balises de lien peuvent inclure d'autres éléments, pas seulement du texte. Par exemple, des images:

ou tout autre élément, à l'exception des autres balises.

Si vous souhaitez ouvrir le lien dans un nouvel onglet, vous pouvez utiliser l' targetattribut:

open in new tab 

ÉTIQUETTES DE CONTENEUR ET STRUCTURE DE LA PAGE HTML

Balises de conteneur

HTML fournit un ensemble de balises conteneur. Ces balises peuvent contenir un ensemble non spécifié d'autres balises.

On a:

  • article
  • section
  • div

et il peut être déroutant de comprendre la différence entre eux.

Voyons quand utiliser chacun d'eux.

article

La balise article identifie un élément qui peut être indépendant des autres éléments d'une page.

Par exemple, une liste d'articles de blog sur la page d'accueil.

Ou une liste de liens.

A blog post

Read more

Another blog post

Read more

Nous ne sommes pas limités aux listes: un article peut être l'élément principal d'une page.

A blog post

Here is the content...

À l'intérieur d'une articlebalise, nous devrions avoir un titre ( h1- h6) et

section

Représente une section d'un document. Chaque section a une balise d'en-tête ( h1- h6), puis le corps de la section .

Exemple:

A section of the page

...

Il est utile de diviser un long article en différentes sections .

Ne doit pas être utilisé comme élément de conteneur générique. divest fait pour cela.

div

div est l'élément conteneur générique:

 ... 

Vous ajoutez souvent un attribut classou idà cet élément, pour lui permettre d'être stylé à l'aide de CSS.

Nous utilisons divdans n'importe quel endroit où nous avons besoin d'un conteneur mais les balises existantes ne sont pas adaptées.

Balises liées à la page

nav

Cette balise est utilisée pour créer le balisage qui définit la navigation de page. À cela, nous ajoutons généralement une liste ulou ol:

  1. Home
  2. Blog

aside

La asidebalise est utilisée pour ajouter un élément de contenu lié au contenu principal.

Une boîte où ajouter un devis, par exemple. Ou une barre latérale.

Exemple:

some text..

A quote..

other text...

L'utilisation asideest un signal que les choses qu'il contient ne font pas partie du flux régulier de la section dans laquelle il vit.

header

La headerbalise représente une partie de la page qui est l'introduction. Il peut par exemple contenir une ou plusieurs balises de titre ( h1- h6), le slogan de l'article, une image.

Article title

...

main

La mainbalise représente la partie principale d'une page:

 ....  

....

footer

La footerbalise permet de déterminer le pied de page d'un article, ou le pied de page de la page:

 ....  

Footer notes..

FORMES

Les formulaires sont la façon dont vous pouvez interagir avec une page, ou une application, construite avec les technologies Web.

Vous disposez d'un ensemble de contrôles, et lorsque vous soumettez le formulaire, soit avec un clic sur un bouton «Soumettre» ou par programme, le navigateur enverra les données au serveur.

Par défaut, cet envoi de données provoque le rechargement de la page après l'envoi des données, mais en utilisant JavaScript, vous pouvez modifier ce comportement (sans expliquer comment dans ce livre).

Un formulaire est créé à l'aide de la formbalise:

 ...  

Par défaut, les formulaires sont soumis à l'aide de la méthode HTTP GET. Ce qui a ses inconvénients, et vous souhaitez généralement utiliser POST.

Vous pouvez définir le formulaire pour utiliser POST lorsqu'il est soumis à l'aide de l' methodattribut:

 ...  

Le formulaire est soumis, soit en utilisant GET ou POST, à la même URL où il réside.

Donc, si le formulaire est dans la //flaviocopes.com/contactspage, le fait d'appuyer sur le bouton "soumettre" fera une demande à cette même URL.

Ce qui pourrait ne rien faire.

Vous avez besoin de quelque chose côté serveur pour gérer la demande, et généralement vous «écoutez» les événements de soumission de formulaire sur une URL dédiée.

Vous pouvez spécifier l'URL via le actionparamètre:

 ...  

Cela obligera le navigateur à soumettre les données du formulaire en utilisant POST à ​​l' /new-contactURL de la même origine.

Si l'origine (protocole + domaine + port) est //flaviocopes.com(le port 80 est la valeur par défaut), cela signifie que les données du formulaire seront envoyées //flaviocopes.com/new-contact.

J'ai parlé de données. Quelles données?

Les données sont fournies par les utilisateurs via l'ensemble des contrôles disponibles sur la plateforme Web:

  • zones de saisie (texte sur une seule ligne)
  • zones de texte (texte multiligne)
  • Sélectionnez les cases (choisissez une option dans un menu déroulant)
  • boutons radio (choisissez une option dans une liste toujours visible)
  • cases à cocher (choisissez zéro, une ou plusieurs options)
  • téléchargements de fichiers
  • et plus!

Présentons chacun d'eux dans la vue d'ensemble des champs de formulaire suivante.

Le inputtag

Le inputchamp est l'un des éléments de formulaire les plus utilisés. C'est aussi un élément très polyvalent, et il peut complètement changer de comportement en fonction de l' typeattribut.

Le comportement par défaut est d'être un contrôle d'entrée de texte sur une seule ligne:

Équivaut à utiliser:

Comme pour tous les autres champs qui suivent, vous devez donner un nom au champ afin que son contenu soit envoyé au serveur lorsque le formulaire est soumis:

L' placeholderattribut est utilisé pour afficher du texte, en gris clair, lorsque le champ est vide. Utile pour ajouter un indice à l'utilisateur pour savoir quoi taper:

Email

L'utilisation type="email"validera côté client (dans le navigateur) un e-mail pour l'exactitude (exactitude sémantique, ne pas s'assurer que l'adresse e-mail est existante) avant de le soumettre.

Mot de passe

Utiliser type="password"fera apparaître chaque clé saisie sous forme d'astérisque (*) ou de point, utile pour les champs qui hébergent un mot de passe.

Nombres

Vous pouvez faire en sorte qu'un élément d'entrée n'accepte que des nombres:

Vous pouvez spécifier une valeur minimale et maximale acceptée:

L' stepattribut aide à identifier les étapes entre différentes valeurs. Par exemple, cela accepte une valeur entre 10 et 50, par pas de 5:

Champ caché

Les champs peuvent être cachés à l'utilisateur. Ils seront toujours envoyés au serveur lors de la soumission du formulaire:

Ceci est couramment utilisé pour stocker des valeurs comme un jeton CSRF, utilisé pour la sécurité et l'identification des utilisateurs, ou même pour détecter les robots envoyant du spam, à l'aide de techniques spéciales.

Il peut également être simplement utilisé pour identifier un formulaire et son action.

Définition d'une valeur par défaut

Tous ces champs acceptent une valeur prédéfinie. Si l'utilisateur ne le modifie pas, ce sera la valeur envoyée au serveur:

Si vous définissez un espace réservé, cette valeur apparaîtra si l'utilisateur efface la valeur du champ de saisie:

Soumettre le formulaire

Le type="submit"champ est un bouton qui, une fois pressé par l'utilisateur, soumet le formulaire:

L' valueattribut définit le texte sur le bouton, qui, s'il manque, affiche le texte "Soumettre":

Validation du formulaire

Les navigateurs fournissent une fonctionnalité de validation côté client aux formulaires.

Vous pouvez définir les champs selon vos besoins, en vous assurant qu'ils sont remplis, et appliquer un format spécifique pour la saisie de chaque champ.

Voyons les deux options.

Définissez les champs comme requis

L' requiredattribut vous aide à valider. Si le champ n'est pas défini, la validation côté client échoue et le navigateur ne soumet pas le formulaire:

Appliquer un format spécifique

J'ai décrit le type="email"domaine ci-dessus. Il valide automatiquement l'adresse e-mail selon un format défini dans la spécification.

Sur le type="number"terrain, j'ai mentionné l' attribut minet maxaux valeurs limites entrées à un intervalle.

Vous pouvez faire plus.

Vous pouvez appliquer un format spécifique à n'importe quel champ.

L' patternattribut vous permet de définir une expression régulière pour valider la valeur.

Je recommande de lire mon guide des expressions régulières sur flaviocopes.com/javascript-regular-expressions/.

pattern = "//.*"

Autres domaines

Téléchargements de fichiers

Vous pouvez charger des fichiers depuis votre ordinateur local et les envoyer au serveur à l'aide d'un type="file"élément d'entrée:

Vous pouvez joindre plusieurs fichiers:

Vous pouvez spécifier un ou plusieurs types de fichiers autorisés à l'aide de l' acceptattribut. Cela accepte les images:

Vous pouvez utiliser un type MIME spécifique, comme application/jsonou définir une extension de fichier comme .pdf. Ou définissez plusieurs extensions de fichier, comme ceci:

Boutons

Les type="button"champs de saisie peuvent être utilisés pour ajouter des boutons supplémentaires au formulaire, qui ne sont pas des boutons d'envoi:

Ils sont utilisés pour faire quelque chose par programmation, en utilisant JavaScript.

Il y a un champ spécial rendu sous forme de bouton, dont l'action spéciale est d'effacer tout le formulaire et de ramener l'état des champs à l'état initial:

Boutons radio

Les boutons radio sont utilisés pour créer un ensemble de choix, dont l'un est enfoncé et tous les autres sont désactivés.

Le nom vient d'anciennes autoradios qui avaient ce genre d'interface.

Vous définissez un ensemble d' type="radio"entrées, toutes avec le même nameattribut et un valueattribut différent :

Une fois le formulaire soumis, la colorpropriété data aura une seule valeur.

Il y a toujours un élément vérifié. Le premier élément est celui coché par défaut.

Vous pouvez définir la valeur présélectionnée à l'aide de l' checkedattribut. Vous ne pouvez l'utiliser qu'une seule fois par groupe d'entrées radio.

Cases à cocher

Similaire aux boîtes radio, mais elles permettent de choisir plusieurs valeurs, voire aucune.

Vous définissez un ensemble d' type="checkbox"entrées, toutes avec le même nameattribut et un valueattribut différent :

Toutes ces cases à cocher seront décochées par défaut. Utilisez l' checkedattribut pour les activer lors du chargement de la page.

Étant donné que ce champ de saisie autorise plusieurs valeurs, lors de la soumission du formulaire, la ou les valeurs seront envoyées au serveur sous forme de tableau.

Date et l'heure

Nous avons quelques types d'entrée pour accepter les valeurs de date.

Le type="date"champ de saisie permet à l'utilisateur de saisir une date et affiche un sélecteur de date si nécessaire:

Le type="time"champ de saisie permet à l'utilisateur de saisir une heure et affiche un sélecteur de temps si nécessaire:

Le type="month"champ de saisie permet à l'utilisateur de saisir un mois et une année:

Le type="week"champ de saisie permet à l'utilisateur de saisir une semaine et une année:

Tous ces champs permettent de limiter la plage et le pas entre chaque valeur. Je recommande de vérifier MDN pour les petits détails sur leur utilisation.

Le type="datetime-local"champ vous permet de choisir une date et une heure.

Voici une page pour tous les tester: //codepen.io/flaviocopes/pen/ZdWQPm

Pipette à couleurs

Vous pouvez laisser les utilisateurs choisir une couleur à l'aide de l' type="color"élément:

Vous définissez une valeur par défaut à l'aide de l' valueattribut:

Le navigateur se chargera de montrer un sélecteur de couleur à l'utilisateur.

Gamme

Cet élément d'entrée montre un élément de curseur. Les gens peuvent l'utiliser pour passer d'une valeur de départ à une valeur de fin:

Vous pouvez fournir une étape facultative:

Téléphone

Le type="tel"champ de saisie permet de saisir un numéro de téléphone:

Le principal argument de vente pour utiliser telover textest sur mobile, où l'appareil peut choisir d'afficher un clavier numérique.

Spécifiez un patternattribut pour une validation supplémentaire:

URL

Le type="url"champ est utilisé pour saisir une URL.

Vous pouvez le valider à l'aide de l' patternattribut:

Le textareatag

L' textareaélément permet aux utilisateurs de saisir du texte sur plusieurs lignes. Par rapport à input, il nécessite une balise de fin:

Vous pouvez définir les dimensions en utilisant CSS, mais aussi en utilisant les attributs rowset cols:

Comme pour les autres balises de formulaire, l' nameattribut détermine le nom dans les données envoyées au serveur:

Le selecttag

Cette balise est utilisée pour créer un menu déroulant.

L'utilisateur peut choisir l'une des options disponibles.

Chaque option est créée à l'aide de la optionbalise. Vous ajoutez un nom à la sélection et une valeur à chaque option:

 Red Yellow  

Vous pouvez définir une option désactivée:

 Red Yellow  

Vous pouvez avoir une option vide:

 None Red Yellow  

Les options peuvent être regroupées à l'aide de la optgroupbalise. Chaque groupe d'options a un labelattribut:

  Red Yellow Blue   Green Pink   

LES TABLES

Dans les premiers jours de la création de tableaux Web, les tables étaient une partie très importante de la conception de la construction.

Plus tard, ils ont été remplacés par CSS et ses capacités de mise en page, et nous disposons aujourd'hui d'outils puissants comme CSS Flexbox et CSS Grid pour créer des mises en page. Les tableaux sont maintenant utilisés uniquement pour, devinez quoi, construire des tableaux!

Le tabletag

Vous définissez une table à l'aide de la tablebalise:

À l'intérieur du tableau, nous définirons les données. Nous raisonnons en termes de lignes, ce qui signifie que nous ajoutons des lignes dans un tableau (pas des colonnes). Nous définirons des colonnes à l'intérieur d'une ligne.

Lignes

Une ligne est ajoutée à l'aide de la trbalise, et c'est la seule chose que nous pouvons ajouter dans un tableélément:

Ceci est un tableau avec 3 lignes.

La première ligne peut prendre le rôle d'en-tête.

En-têtes de colonne

L'en-tête du tableau contient le nom d'une colonne, généralement en gras.

Pensez à un document Excel / Google Sheets. L'en- A-B-C-D...tête supérieur .

Nous définissons l'en-tête à l'aide de la thbalise:

Column 1Column 2Column 3

Le contenu de la table

Le contenu du tableau est défini à l'aide de tdbalises, à l'intérieur des autres tréléments:

Column 1Column 2Column 3
Row 1 Column 1Row 1 Column 2Row 1 Column 3
Row 2 Column 1Row 2 Column 2Row 2 Column 3

Voici comment les navigateurs le rendent, si vous n'ajoutez aucun style CSS:

Ajout de ce CSS:

th, td { padding: 10px; border: 1px solid #333; } 

fait que la table ressemble plus à une table appropriée:

Span colonnes et lignes

Une ligne peut décider de s'étendre sur 2 colonnes ou plus, en utilisant l' colspanattribut:

Column 1Column 2Column 3
Row 1 Columns 1-2Row 1 Column 3
Row 2 Columns 1-3

Ou il peut s'étendre sur 2 lignes ou plus, en utilisant l' rowspanattribut:

Column 1Column 2Column 3
Rows 1-2 Columns 1-2Row 1 Column 3
Row 2 Column 3

En-têtes de ligne

Avant d'expliquer comment vous pouvez avoir des en-têtes de colonne, en utilisant la thbalise à l'intérieur de la première trbalise du tableau.

Vous pouvez ajouter une thbalise comme premier élément à l'intérieur d'un trqui n'est pas le premier trdu tableau, pour avoir des en-têtes de ligne:

Column 2Column 3
Row 1Col 2Col 3
Row 2Col 2Col 3

Plus de balises pour organiser le tableau

Vous pouvez ajouter 3 balises supplémentaires dans un tableau, pour qu'il soit plus organisé.

C'est mieux lorsque vous utilisez de grandes tables. Et pour définir correctement un en-tête et un pied de page, aussi.

Ces balises sont

  • thead
  • tbody
  • tfoot

Ils enveloppent les trbalises pour définir clairement les différentes sections du tableau. Voici un exemple:

Column 2Column 3
Row 1Col 2Col 3
Row 2Col 2Col 3
Footer of Col 1Footer of Col 2

Légende du tableau

Une table doit avoir une captionbalise décrivant son contenu. Cette balise doit être placée immédiatement après la tablebalise d' ouverture :

 Dogs age 
DogAge
Roger7

TAGS MULTIMÉDIA: AUDIOETVIDEO

Dans cette section, je veux vous montrer les balises audioet video.

Le audiotag

Cette balise vous permet d'intégrer du contenu audio dans vos pages HTML.

Cet élément peut diffuser de l'audio, peut-être en utilisant un microphone via getUserMedia(), ou il peut lire une source audio que vous référencez à l'aide de l' srcattribut:

Par défaut, le navigateur n'affiche aucun contrôle pour cet élément. Ce qui signifie que l'audio ne sera lu que s'il est réglé sur la lecture automatique (plus à ce sujet plus tard) et que l'utilisateur ne peut pas voir comment l'arrêter, contrôler le volume ou se déplacer dans la piste.

Pour afficher les contrôles intégrés, vous pouvez ajouter l' controlsattribut:

Les contrôles peuvent avoir un habillage personnalisé.

Vous pouvez spécifier le type MIME du fichier audio à l'aide de l' typeattribut. S'il n'est pas défini, le navigateur essaiera de le déterminer automatiquement:

Un fichier audio par défaut n'est pas lu automatiquement. Ajoutez l' autoplayattribut pour lire l'audio automatiquement:

Remarque: les navigateurs mobiles n'autorisent pas la lecture automatique

L' loopattribut redémarre la lecture audio à 0:00 s'il est défini; sinon, s'il n'est pas présent, l'audio s'arrête à la fin du fichier:

Vous pouvez également lire un fichier audio mis en sourdine à l'aide de l' mutedattribut (pas vraiment sûr de l'utilité de cela):

En utilisant JavaScript, vous pouvez écouter divers événements se produisant sur un audioélément, dont les plus élémentaires sont:

  • play lorsque la lecture du fichier commence
  • pause lorsque la lecture audio a été interrompue
  • playing lorsque l'audio reprend après une pause
  • ended lorsque la fin du fichier audio a été atteinte

Le videotag

Cette balise vous permet d'intégrer du contenu vidéo dans vos pages HTML.

Cet élément peut diffuser de la vidéo, en utilisant une webcam via getUserMedia()ou WebRTC , ou il peut lire une source vidéo que vous référencez à l'aide de l' srcattribut:

Par défaut, le navigateur n'affiche aucun contrôle pour cet élément, juste la vidéo.

Ce qui signifie que la vidéo ne sera lue que si elle est définie sur la lecture automatique (plus à ce sujet plus tard) et que l'utilisateur ne peut pas voir comment l'arrêter, la mettre en pause, contrôler le volume ou passer à une position spécifique dans la vidéo.

Pour afficher les contrôles intégrés, vous pouvez ajouter l' controlsattribut:

Les contrôles peuvent avoir un habillage personnalisé.

Vous pouvez spécifier le type MIME du fichier vidéo à l'aide de l' typeattribut. S'il n'est pas défini, le navigateur essaiera de le déterminer automatiquement:

Un fichier vidéo par défaut n'est pas lu automatiquement. Ajoutez l' autoplayattribut pour lire la vidéo automatiquement:

Certains navigateurs nécessitent également l' mutedattribut pour la lecture automatique. La vidéo est lue automatiquement uniquement si elle est désactivée:

L' loopattribut redémarre la lecture de la vidéo à 0:00 s'il est défini; sinon, si elle n'est pas présente, la vidéo s'arrête à la fin du fichier:

Vous pouvez définir une image comme image d'affiche:

S'il n'est pas présent, le navigateur affichera la première image de la vidéo dès qu'elle sera disponible.

Vous pouvez définir les attributs widthet heightpour définir l'espace que prendra l'élément afin que le navigateur puisse en tenir compte et qu'il ne modifie pas la mise en page lorsqu'il est finalement chargé. Il prend une valeur numérique, exprimée en pixels.

En utilisant JavaScript, vous pouvez écouter divers événements se produisant sur un videoélément, dont les plus élémentaires sont:

  • play lorsque la lecture du fichier commence
  • pause quand la vidéo a été mise en pause
  • playing lorsque la vidéo reprend après une pause
  • ended lorsque la fin du fichier vidéo a été atteinte

IFRAMES

La iframebalise nous permet d'intégrer du contenu provenant d'autres origines (d'autres sites) dans notre page Web.

Techniquement, une iframe crée un nouveau contexte de navigation imbriqué. Cela signifie que tout ce qui se trouve dans l'iframe n'interfère pas avec la page parente, et vice versa. JavaScript et CSS ne «fuient» pas vers / depuis les iframes.

De nombreux sites utilisent des iframes pour effectuer diverses tâches. Vous connaissez peut-être Codepen, Glitch ou d'autres sites qui vous permettent de coder dans une partie de la page, et vous voyez le résultat dans une boîte. C'est une iframe.

Vous en créez un de cette façon:

Vous pouvez également charger une URL absolue:

Vous pouvez définir un ensemble de paramètres de largeur et de hauteur (ou les définir en utilisant CSS) sinon l'iframe utilisera les valeurs par défaut, une boîte de 300x150 pixels:

Srcdoc

L' srcdocattribut vous permet de spécifier du HTML en ligne à afficher. C'est une alternative à src, mais récente et non prise en charge dans Edge 18 et versions antérieures, et dans IE:

bac à sable

L' sandboxattribut nous permet de limiter les opérations autorisées dans les iframes.

Si nous l'omettons, tout est permis:

Si nous le définissons sur "", rien n'est autorisé:

Nous pouvons sélectionner ce qu'il faut autoriser en ajoutant des options dans l' sandboxattribut. Vous pouvez en autoriser plusieurs en ajoutant un espace entre les deux. Voici une liste incomplète des options que vous pouvez utiliser:

  • allow-forms: autoriser l'envoi de formulaires
  • allow-modalspermettre d'ouvrir les fenêtres modales, y compris l'appel alert()en JavaScript
  • allow-orientation-lock permet de verrouiller l'orientation de l'écran
  • allow-popupsautoriser les popups, l'utilisation window.open()et les target="_blank"liens
  • allow-same-origin traiter la ressource en cours de chargement comme la même origine
  • allow-scripts permet à l'iframe chargé d'exécuter des scripts (mais pas de créer des fenêtres contextuelles).
  • allow-top-navigation donne accès à l'iframe au contexte de navigation de niveau supérieur

Autoriser

Actuellement expérimental et uniquement pris en charge par les navigateurs basés sur Chromium, c'est l'avenir du partage de ressources entre la fenêtre parente et l'iframe.

Il est similaire à l' sandboxattribut, mais nous permet d'autoriser des fonctionnalités spécifiques, notamment:

  • accelerometer donne accès à l'interface de l'accéléromètre API Sensors
  • ambient-light-sensor donne accès à l'interface AmbientLightSensor de l'API Sensors
  • autoplay permet de lire automatiquement des fichiers vidéo et audio
  • camera permet d'accéder à la caméra depuis l'API getUserMedia
  • display-capture permet d'accéder au contenu de l'écran à l'aide de l'API getDisplayMedia
  • fullscreen permet d'accéder au mode plein écran
  • geolocation permet d'accéder à l'API de géolocalisation
  • gyroscope donne accès à l'interface du gyroscope de l'API Sensors
  • magnetometer donne accès à l'interface du magnétomètre API Sensors
  • microphone donne accès au microphone de l'appareil à l'aide de l'API getUserMedia
  • midi permet d'accéder à l'API Web MIDI
  • payment donne accès à l'API de demande de paiement
  • speaker permet d'accéder à la lecture audio via les haut-parleurs de l'appareil
  • usb donne accès à l'API WebUSB.
  • vibrate donne accès à l'API Vibration
  • vr donne accès à l'API WebVR

Référent

Lors du chargement d'une iframe, le navigateur lui envoie des informations importantes sur qui le charge dans l'en- Referertête (notez le single r, une faute de frappe avec laquelle nous devons vivre).

La faute d'orthographe du référent est née de la proposition originale de l'informaticien Phillip Hallam-Baker d'incorporer le champ dans la spécification HTTP. La faute d'orthographe a été gravée dans le marbre au moment de son incorporation dans le document de normes Request for Comments RFC 1945

L' referrerpolicyattribut nous permet de définir le référent à envoyer à l'iframe lors de son chargement. Le référent est un en-tête HTTP qui permet à la page de savoir qui le charge. Voici les valeurs autorisées:

  • no-referrer-when-downgrade c'est la valeur par défaut, et n'envoie pas le référent lorsque la page actuelle est chargée sur HTTPS et que l'iframe se charge sur le protocole HTTP
  • no-referrer n'envoie pas l'en-tête du référent
  • origin le référent est envoyé et ne contient que l'origine (port, protocole, domaine), pas l'origine + chemin qui est la valeur par défaut
  • origin-when-cross-originlors du chargement depuis la même origine (port, protocole, domaine) dans l'iframe, le référent est envoyé sous sa forme complète (origine + chemin). Sinon, seule l'origine est envoyée
  • same-origin le référent est envoyé uniquement lors du chargement depuis la même origine (port, protocole, domaine) dans l'iframe
  • strict-originenvoie l'origine comme référent si la page actuelle est chargée via HTTPS et si l'iframe se charge également sur le protocole HTTPS. N'envoie rien si l'iframe est chargé via HTTP
  • strict-origin-when-cross-originenvoie l'origine + chemin comme référent lorsque vous travaillez sur la même origine. Envoie l'origine comme référent si la page actuelle est chargée via HTTPS et si l'iframe se charge également sur le protocole HTTPS. N'envoie rien si l'iframe est chargé via HTTP
  • unsafe-url: envoie l'origine + chemin comme référent même lors du chargement des ressources depuis HTTP et la page actuelle est chargée via HTTPS

IMAGES

Les images peuvent être affichées à l'aide de la imgbalise.

Cette balise accepte un srcattribut, que nous utilisons pour définir la source de l'image:

Nous pouvons utiliser un large éventail d'images. Les plus courants sont PNG, JPEG, GIF, SVG et plus récemment WebP.

Le standard HTML exige qu'un altattribut soit présent, pour décrire l'image. Ceci est utilisé par les lecteurs d'écran et aussi par les robots des moteurs de recherche:

Vous pouvez définir les attributs widthet heightpour définir l'espace occupé par l'élément, afin que le navigateur puisse en tenir compte et qu'il ne modifie pas la mise en page lorsqu'il est complètement chargé. Il prend une valeur numérique, exprimée en pixels.

Le figuretag

La figurebalise est souvent utilisée avec la imgbalise.

figureest une balise sémantique souvent utilisée lorsque vous souhaitez afficher une image avec une légende. Vous l'utilisez comme ceci:

 A nice dog  

La figcaptionbalise enveloppe le texte de la légende.

Images réactives utilisant srcset

L' srcsetattribut vous permet de définir des images réactives que le navigateur peut utiliser en fonction de la densité de pixels ou de la largeur de la fenêtre, selon vos préférences. De cette façon, il ne peut télécharger que les ressources dont il a besoin pour rendre la page, sans télécharger une image plus grande si elle se trouve sur un appareil mobile, par exemple.

Voici un exemple, où nous donnons 4 images supplémentaires pour 4 tailles d'écran différentes:

Dans le, srcsetnous utilisons la wmesure pour indiquer la largeur de la fenêtre.

Puisque nous le faisons, nous devons également utiliser l' sizesattribut:

Dans cet exemple, la (max-width: 500px) 100vw, (max-width: 900px) 50vw, 800pxchaîne de l' sizesattribut décrit la taille de l'image par rapport à la fenêtre, avec plusieurs conditions séparées par un point-virgule.

La condition du support max-width: 500pxdéfinit la taille de l'image en corrélation avec la largeur de la fenêtre. En bref, si la taille de la fenêtre est <500px, il restitue l'image à 100% de la taille de la fenêtre.

Si la taille de la fenêtre est plus grande mais < 900px, elle rend l'image à 50% de la taille de la fenêtre.

Et même s'il est encore plus grand, il rend l'image à 800 pixels.

L' vwunité de mesure peut être nouvelle pour vous, et en bref, nous pouvons dire que 1 vwcorrespond à 1% de la largeur de la fenêtre, donc 100vw100% de la largeur de la fenêtre.

Un site Web utile pour générer srcsetdes images de plus en plus petites est //responsivebreakpoints.com/.

Le picturetag

HTML nous donne également la picturebalise, qui fait un travail très similaire à srcset, et les différences sont très subtiles.

Vous utilisez picturelorsque, au lieu de simplement servir une version plus petite d'un fichier, vous voulez complètement le changer. Ou servir un format d'image différent.

Le meilleur cas d'utilisation que j'ai trouvé est celui de la diffusion d'une image WebP, qui est un format encore peu pris en charge. Dans la picturebalise, vous spécifiez une liste d'images, et elles seront utilisées dans l'ordre, donc dans l'exemple suivant, les navigateurs prenant en charge WebP utiliseront la première image et se replieront sur JPG dans le cas contraire:

La sourcebalise définit un (ou plusieurs) formats pour les images. La imgbalise est la solution de secours au cas où le navigateur est très ancien et ne prend pas en charge la picturebalise.

Dans la sourcebalise à l'intérieur, picturevous pouvez ajouter un mediaattribut pour définir des requêtes multimédias.

L'exemple qui suit fonctionne comme l'exemple ci-dessus avec srcset:

Mais ce n'est pas son cas d'utilisation, car comme vous pouvez le voir, c'est beaucoup plus verbeux.

La picturebalise est récente mais est désormais prise en charge par tous les principaux navigateurs sauf Opera Mini et IE (toutes les versions).

ACCESSIBILITÉ

Il est important que nous concevions notre HTML avec l'accessibilité à l'esprit.

Avoir du HTML accessible signifie que les personnes handicapées peuvent utiliser le Web. Il y a des utilisateurs totalement aveugles ou malvoyants, des personnes ayant des problèmes d'audition et une multitude d'autres handicaps différents.

Malheureusement, ce sujet ne prend pas l'importance dont il a besoin et il ne semble pas aussi cool que d'autres.

Que faire si une personne ne peut pas voir votre page, mais souhaite tout de même consommer son contenu? Premièrement, comment font-ils cela? Ils ne peuvent pas utiliser la souris, ils utilisent quelque chose qui s'appelle un lecteur d'écran . Vous n'avez pas à imaginer cela. Vous pouvez en essayer un maintenant: Google fournit l'extension gratuite ChromeVox Chrome. L'accessibilité doit également veiller à permettre aux outils de sélectionner facilement des éléments ou de naviguer dans les pages.

Les pages Web et les applications Web ne sont pas toujours construites avec l'accessibilité comme l'un de leurs premiers objectifs, et peut-être que la version 1 n'est pas accessible, mais il est possible de rendre une page Web accessible après coup. Le plus tôt est le mieux, mais il n'est jamais trop tard.

C'est important et dans mon pays, les sites Web créés par le gouvernement ou d'autres organisations publiques doivent être accessibles.

Qu'est-ce que cela signifie pour rendre un HTML accessible? Permettez-moi d'illustrer les principales choses auxquelles vous devez penser.

Remarque: il y a plusieurs autres choses à prendre en compte, qui peuvent aller dans le sujet CSS, comme les couleurs, le contraste et les polices. Ou comment rendre les images SVG accessibles. Je n'en parle pas ici.

Utiliser du HTML sémantique

Le HTML sémantique est très important et c'est l'une des principales choses dont vous devez vous occuper. Permettez-moi d'illustrer quelques scénarios courants.

Il est important d'utiliser la structure correcte pour les balises de titre. Le plus important est h1, et vous utilisez des nombres plus élevés pour les moins importants, mais tous les en-têtes de même niveau devraient avoir la même signification (pensez-y comme une structure arborescente)

h1 h2 h3 h2 h2 h3 h4 

Utilisez stronget emau lieu de bet i. Visuellement, ils se ressemblent, mais les 2 premiers ont plus de sens qui leur sont associés. bet isont des éléments plus visuels.

Les listes sont importantes. Un lecteur d'écran peut détecter une liste et fournir une vue d'ensemble, puis laisser l'utilisateur choisir d'entrer ou non dans la liste.

Une table doit avoir une captionbalise qui décrit son contenu:

 Dogs age 
DogAge
Roger7

Utiliser des altattributs pour les images

Toutes les images doivent avoir une altbalise décrivant le contenu de l'image. Ce n'est pas seulement une bonne pratique, c'est requis par le standard HTML et votre HTML sans celui-ci n'est pas validé.

C'est également bon pour les moteurs de recherche, si cela vous incite à l'ajouter.

Utilisez l' roleattribut

L' roleattribut vous permet d'attribuer des rôles spécifiques aux différents éléments de votre page.

Vous pouvez attribuer de nombreux rôles différents: complémentaire, liste, élément de liste, principal, navigation, région, onglet, alerte, application, article, bannière, bouton, cellule, case à cocher, contentinfo, dialogue, document, flux, figure, formulaire, grille, gridcell, titre, img, listbox, ligne, rowgroup, recherche, commutateur, table, tabpanel, zone de texte, minuterie.

C'est beaucoup et pour la référence complète de chacun d'eux, je vous donne ce lien MDN. Mais vous n'avez pas besoin d'attribuer un rôle à chaque élément de la page. Les lecteurs d'écran peuvent déduire de la balise HTML dans la plupart des cas. Par exemple , vous n'avez pas besoin d'ajouter une balise de rôle à des balises sémantiques comme nav, button, form.

Prenons l' navexemple de la balise. Vous pouvez l'utiliser pour définir la navigation de la page comme ceci:

  • Home
  • Blog

Si vous étiez obligé d'utiliser une divbalise à la place de nav, vous utiliseriez le navigationrôle:

  • Home
  • Blog

Vous avez donc ici un exemple pratique: roleest utilisé pour attribuer une valeur significative lorsque la balise ne transmet pas déjà le sens.

Utilisez l' tabindexattribut

L' tabindexattribut vous permet de modifier l'ordre dans lequel la pression de la touche Tabulation sélectionne les éléments "sélectionnables". Par défaut, seuls les liens et les éléments de formulaire sont "sélectionnables" par navigation à l'aide de la touche Tab (et vous n'avez pas besoin de les définir tabindex).

L'ajout tabindex="0"rend un élément sélectionnable:

 ... 

Utiliser à la tabindex="-1"place supprime un élément de cette navigation par onglets, et cela peut être très utile.

Utilisez les ariaattributs

ARIA est un acronyme qui signifie Applications Internet riches accessibles et définit la sémantique qui peut être appliquée aux éléments.

aria-label

Cet attribut est utilisé pour ajouter une chaîne pour décrire un élément.

Exemple:

...

J'utilise cet attribut dans la barre latérale de mon blog, où j'ai une zone de saisie pour la recherche sans étiquette explicite, car elle a un attribut d'espace réservé.

aria-labelledby

Cet attribut définit une corrélation entre l'élément actuel et celui qui le marque.

Si vous savez comment un inputélément peut être associé à un labelélément, c'est similaire.

Nous transmettons l'ID d'élément qui décrit l'élément actuel.

Exemple:

The description of the product

...

aria-describedby

Cet attribut nous permet d'associer un élément à un autre élément qui sert de description.

Exemple:

Pay now Clicking the button will send you to our Stripe form! 

Utilisez l'aria-hidden pour masquer le contenu

J'aime un design minimaliste dans mes sites. Mon blog, par exemple, n'est que du contenu, avec quelques liens dans la barre latérale. Mais certaines choses dans la barre latérale ne sont que des éléments visuels qui ne s'ajoutent pas à l'expérience d'une personne qui ne peut pas voir la page. Comme l'image de mon logo ou le sélecteur de thème sombre / clair.

L'ajout de l' "attribut indiquera aux lecteurs d'écran d'ignorer cet élément.

Où en savoir plus

Ceci est juste une introduction au sujet. Pour en savoir plus, je recommande ces ressources:

  • //www.w3.org/TR/WCAG20/
  • //webaim.org
  • //developers.google.com/web/fundamentals/accessibility/

Vous avez atteint la fin du manuel HTML.

Cliquez ici pour obtenir une version PDF / ePub / Mobi de ce livre à lire hors ligne !