Introduction à HTML5

HTML 5 est la cinquième et actuelle version de HTML, cette introduction te permettra d'en savoir plus.

Jean Claude Mise à jour : 20 décembre 2022 781

Introduction

HTML signifie Hyper Text Markup Language. Il est utilisé pour concevoir des pages Web à l'aide d'un langage de balisage. HTML est la combinaison de l'hypertexte et du langage de balisage. L'hypertexte définit le lien entre les pages Web. Le langage de balisage est utilisé pour définir le document texte dans la balise qui définit la structure des pages Web. HTML 5 est la cinquième et actuelle version de HTML. Il a amélioré le balisage disponible pour les documents et a introduit des interfaces de programmation d'application (API) et le modèle d'objet de document (DOM).

Caractéristiques

Il a introduit également de nouvelles fonctionnalités multimédias qui prennent en charge les contrôles audio et vidéo en utilisant les balises <audio> et <video>.
Il existe de nouveaux éléments graphiques, notamment des graphiques vectoriels et des balises.
Enrichir le contenu sémantique en incluant <header> <footer>, <article>, <section> et <figure> sont ajoutés.
Glisser-déposer - L'utilisateur peut saisir un objet et le faire glisser davantage en le déposant sur un nouvel emplacement.
Services de géolocalisation - Il aide à localiser l'emplacement géographique d'un client.
Installation de stockage Web qui fournit des méthodes d'application Web pour stocker des données sur un navigateur Web.
Utilise la base de données SQL pour stocker les données hors ligne.
Permet de dessiner diverses formes comme un triangle, un rectangle, un cercle, etc.
Capable de gérer une syntaxe incorrecte.
Déclaration DOCTYPE facile, c'est-à-dire <!doctype html>
Encodage de caractères facile, c'est-à-dire <meta charset=”UTF-8″>

Élements supprimés dans HTML5

De nombreux éléments ont été dépréciés de HTML 5 :

Éléments supprimés	Utiliser à la place
<acronym>	<abbr>
<applet>	<object>
<basefont>	CSS
<big>	CSS
<center>	CSS
<dir>	<ul>
<font>	CSS
<frame>
<frameset>
<noframes>
<isindex>
<strike>	CSS, <s>, <del>
<tt>	CSS

Nouveaux éléments ajoutés dans HTML 5 :

<article> : La balise <article> est utilisée pour représenter un article. Plus précisément, le contenu de la balise <article> est indépendant des autres contenus du site (même s'il peut être lié).
<aside> : La balise <aside> est utilisée pour décrire l'objet principal de la page Web d'une manière plus courte comme un surligneur. Il identifie essentiellement le contenu qui est lié au contenu principal de la page Web mais ne constitue pas l'intention principale de la page principale. La balise <aside> contient principalement des informations sur l'auteur, des liens, du contenu connexe, etc.
<figcaption> : la balise <figurecaption> en HTML est utilisée pour définir une légende pour l'élément figure dans un document.
<figure> : La balise <figure> en HTML est utilisée pour ajouter du contenu autonome comme des illustrations, des diagrammes, des photos ou des listes de codes dans un document. Il est lié au flux principal mais il peut être utilisé dans n'importe quelle position d'un document et la figure va avec le flux du document et si vous le supprimez, cela ne devrait pas affecter le flux du document.
<header> : Il contient le titre de la section ainsi que d'autres contenus, tels que des liens de navigation, une table des matières, etc.
<footer> : La balise <footer> en HTML est utilisée pour définir un pied de page de document HTML. Cette section contient les informations de pied de page (informations sur l'auteur, informations sur les droits d'auteur, transporteurs, etc.). La balise footer est utilisée dans la balise body. La balise <footer> est nouvelle dans le HTML 5. Les éléments de pied de page nécessitent une balise de début ainsi qu'une balise de fin.
<main> : délimite le contenu principal du corps d'un document ou d'une application Web.
<mark> : La balise <mark> en HTML est utilisée pour définir le texte marqué. Il est utilisé pour mettre en évidence la partie du texte dans le paragraphe.
<nav> : la balise <nav> est utilisée pour déclarer la section de navigation dans les documents HTML. Les sites Web ont généralement des sections dédiées aux liens de navigation, qui permettent à l'utilisateur de naviguer sur le site. Ces liens peuvent être placés dans une balise de navigation.
<section> : Elle délimite un groupement thématique de contenu.
<details> : La balise <details> est utilisée pour le contenu/l'information qui est initialement caché mais qui pourrait être affiché si l'utilisateur souhaite le voir. Cette balise est utilisée pour créer un widget interactif que l'utilisateur peut ouvrir ou fermer. Le contenu de la balise de détails est visible lors de l'ouverture des attributs définis.
<summary> : La balise <summary> en HTML est utilisée pour définir un résumé pour l'élément <details>. L'élément <summary> est utilisé avec l'élément <details> et fournit un résumé visible par l'utilisateur. Lorsque l'utilisateur clique sur le résumé, le contenu placé à l'intérieur de l'élément <details> devient visible, ce qui était auparavant masqué. La balise <summary> a été ajoutée dans HTMl 5. La balise <summary> nécessite à la fois une balise de début et une balise de fin.
<time> : la balise <time> est utilisée pour afficher les données/l'heure lisibles par l'homme. Il peut également être utilisé pour coder les dates et les heures sous une forme lisible par machine. Le principal avantage pour les utilisateurs est qu'ils peuvent proposer d'ajouter des rappels d'anniversaire ou des événements programmés dans leur calendrier et les moteurs de recherche peuvent produire des résultats de recherche plus intelligents.
<bdi> : la balise <bdi> fait référence à l'isolation bidirectionnelle. Il différencie un texte d'un autre texte qui peut être formaté dans une direction différente. Cette balise est utilisée lorsqu'un utilisateur a généré un texte avec une direction inconnue.
<wbr> : la balise <wbr> en HTML signifie opportunité de saut de mot et est utilisée pour définir la position dans le texte qui est traitée comme un saut de ligne par le navigateur. Il est principalement utilisé lorsque le mot utilisé est trop long et qu'il est possible que le navigateur saute des lignes au mauvais endroit pour ajuster le texte.
<datalist> : la balise <datalist> est utilisée pour fournir une fonctionnalité de saisie semi-automatique dans les fichiers HTML. Il peut être utilisé avec une balise d'entrée, afin que les utilisateurs puissent facilement remplir les données dans les formulaires en utilisant sélectionner les données.
<keygen> : La balise <keygen> en HTML est utilisée pour spécifier un champ générateur de paire de clés dans un formulaire. Le but de l'élément <keygen> est de fournir un moyen sécurisé d'authentifier les utilisateurs. Lorsqu'un from est soumis, deux clés sont générées, une clé privée et une clé publique. La clé privée est stockée localement et la clé publique est envoyée au serveur. La clé publique est utilisée pour générer un certificat client afin d'authentifier l'utilisateur pour l'avenir.
<output> : La balise <output> en HTML est utilisée pour représenter le résultat d'un calcul effectué par le script côté client tel que JavaScript.
<progress> : Il est utilisé pour représenter la progression d'une tâche. Il est également défini que la quantité de travail est effectuée et combien il reste à télécharger des choses. Il n'est pas utilisé pour représenter l'espace disque ou la requête pertinente.
<svg> : Il s'agit des graphiques vectoriels évolutifs.
<canvas> : la balise <canvas> en HTML est utilisée pour dessiner des graphiques sur une page Web à l'aide de JavaScript. Il peut être utilisé pour dessiner des chemins, des boîtes, des textes, des dégradés et ajouter des images. Par défaut, il ne contient ni bordure ni texte.
<audio> : Il définit la musique ou le contenu audio.
<embed> : définit les conteneurs pour les applications externes (généralement un lecteur vidéo).
<source> : Il définit les sources pour <video> et <audio>.
<piste> : définit les pistes pour <vidéo> et <audio>.
<video> : Il définit le contenu vidéo.

Avantages

Tous les navigateurs sont pris en charge.
Plus convivial pour l'appareil.
Facile à utiliser et à mettre en œuvre.
HTML 5 en intégration avec CSS, JavaScript, etc. peut aider à créer de beaux sites Web (sites modernes).

Désavantages

De longs codes doivent être écrits, ce qui prend du temps.
Seuls les navigateurs modernes le supportent.
Navigateurs pris en charge : Il est pris en charge par tous les navigateurs modernes.

Les exemples ci-dessous illustrent le contenu HTML 5.

Exemple 1:

<!DOCTYPE html>

<html> 

<head> 

    <title>HTML 5 Demo</title>

     <meta charset="UTF-8">

    <style> 

         body {

            text-align:center;

        }

        .bloc { 

            font-size: 2em; 

            font-weight: bold;

            color: cyan;

        }

    </style> 

</head> 

<body> 

    <div class = "bloc">Letecode.com</div> 

    <aside> 

        <div>Apprendre l'informatique sans limite</div> 

    </aside> 

</body> 

</html>

Exemple 2 :

<!DOCTYPE html> 

<html> 

<head> 

    <title>HTML 5 introduction</title> 

    <meta charset="UTF-8">

    <style> 

        h1 { 

            font-size:2em; 

        } 

    </style> 

</head> 

      

<body> 

    <h1>Letecode.com</h1> 

</body> 

</html>

vote

Laisser un commentaire

Jean Claude Mbiya

Développeur Web full stack, Développeur Android (Certifié Google AAD) Formateur dans les domaines du numérique, Créateur letecode.com 👨‍💻. Je suis un grand passionné des nouvelles technologies et j'adore partager ce que j'apprend.