Explication des éléments sémantiques HTML5

Les éléments HTML sémantiques sont ceux qui décrivent clairement leur signification d'une manière lisible par l'homme et la machine.

Les éléments tels que , et sont tous considérés comme sémantiques car ils décrivent avec précision le but de l'élément et le type de contenu qui se trouve à l'intérieur.

Que sont les éléments sémantiques?

HTML a été créé à l'origine comme un langage de balisage pour décrire des documents sur les premiers temps d'Internet. À mesure qu'Internet se développait et était adopté par de plus en plus de gens, ses besoins ont changé.

Là où Internet était à l'origine destiné au partage de documents scientifiques, les gens voulaient maintenant partager d'autres choses également. Très rapidement, les gens ont commencé à vouloir rendre le Web plus agréable.

Parce que le Web n'était pas initialement conçu pour être conçu, les programmeurs ont utilisé différents hacks pour que les choses soient présentées de différentes manières. Plutôt que d'utiliser le

pour décrire des informations à l'aide d'un tableau, les programmeurs les utiliseraient pour positionner d'autres éléments sur une page.

Au fur et à mesure que l'utilisation de mises en page conçues visuellement progressait, les programmeurs ont commencé à utiliser une balise générique «non sémantique» comme . Ils attribuaient souvent à ces éléments un attribut classou un idattribut pour décrire leur objectif. Par exemple, au lieu de cela, il était souvent écrit comme .

Comme HTML5 est encore relativement nouveau, cette utilisation d'éléments non sémantiques est encore très courante sur les sites Web aujourd'hui.

Liste des nouveaux éléments sémantiques

Les éléments sémantiques ajoutés en HTML5 sont:

Des éléments tels que , , , , , et agir plus ou moins comme éléments. Ils regroupent d'autres éléments dans des sections de page. Cependant, lorsqu'une balise peut contenir n'importe quel type d'informations, il est facile d'identifier quel type d'informations irait dans une région sémantique .

Un exemple de disposition d'élément sémantique par w3schools

Éléments sémantiques mettant en page une page par w3schools

Pourquoi utiliser des éléments sémantiques?

Pour examiner les avantages des éléments sémantiques, voici deux morceaux de code HTML. Ce premier bloc de code utilise des éléments sémantiques:

Alors que ce deuxième bloc de code utilise des éléments non sémantiques:

Premièrement, il est beaucoup plus facile à lire . C'est probablement la première chose que vous remarquerez en regardant le premier bloc de code utilisant des éléments sémantiques. Ceci est un petit exemple, mais en tant que programmeur, vous pouvez lire des centaines ou des milliers de lignes de code. Plus il est facile de lire et de comprendre ce code, plus il facilite votre travail.

Il a une plus grande accessibilité . Vous n'êtes pas le seul à trouver les éléments sémantiques plus faciles à comprendre. Les moteurs de recherche et les technologies d'assistance (comme les lecteurs d'écran pour les utilisateurs malvoyants) sont également capables de mieux comprendre le contexte et le contenu de votre site Web, ce qui signifie une meilleure expérience pour vos utilisateurs.

Dans l'ensemble, les éléments sémantiques conduisent également à un code plus cohérent . Lors de la création d' un en- tête en utilisant des éléments non-sémantiques, différents programmeurs peuvent écrire ce que , , ou tout simplement . Il y a tellement de façons de créer un élément d'en-tête, et elles dépendent toutes des préférences personnelles du programmeur. En créant un élément sémantique standard, cela facilite la tâche à tous.

Depuis octobre 2014, HTML4 a été mis à niveau vers HTML5, avec quelques nouveaux éléments «sémantiques». À ce jour, certains d'entre nous pourraient encore ne pas comprendre pourquoi tant d'éléments différents ne semblent pas montrer de changements majeurs.

et

«Quelle est la différence?», Demandez-vous. Ces deux éléments sont utilisés pour la section d'un contenu, et oui, ils peuvent certainement être utilisés de manière interchangeable. Il s'agit de savoir dans quelle situation. HTML4 n'offrait qu'un seul type d'élément conteneur, à savoir . Bien que cela soit toujours utilisé dans HTML5, HTML5 nous a fourni et d'une manière à remplacer .

Les éléments et sont conceptuellement similaires et interchangeables. Pour décider lequel de ceux-ci vous devez choisir, tenez compte des points suivants:

  1. Un article est destiné à être distribuable ou réutilisable indépendamment.
  2. Une section est un regroupement thématique de contenu.

Top Stories

News

Story 1 Story 2 Story 3

Sport

Story 1 Story 2 Story 3

et

L' élément se trouve généralement en haut d'un document, d'une section ou d'un article et contient généralement le titre principal et certains outils de navigation et de recherche.

Company A

  • Home
  • About
  • Contact us

The element should be used where you want a main heading with one or more subheadings.

Heading 1

Subheading 1

Subheading 2

REMEMBER, that the element can contain any content, but the element can only contain other headers, that is

Original text


to

and including .

The element is intended for content that is not part of the flow of the text in which it appears, however still related in some way. This of as a sidebar to your main content.

This is a sidebar, for example a terminology definition or a short background to a historical figure.

Before HTML5, our menus were created with

    ’s and
  • ’s. Now, together with these, we can separate our menu items with a , for navigation between your pages. You can have any number of elements on a page, for example, its common to have global navigation across the top (in the ) and local navigation in a sidebar (in an element).

    • Home
    • About
    • Contact us

    If there is a there must be a . A is generally found at the bottom of a document, a section, or an article. Just like the the content is generally metainformation, such as author details, legal information, and/or links to related information. It is also valid to include elements within a footer.

    ©Company A

    The element often appears within a or element which would usually contain copyright information or legal disclaimers, and other such fine print. However, this is not intended to make the text smaller. It is just describing its content, not prescribing presentation.

    ©Company A Date

    The element allows an unambiguous ISO 8601 date to be attached to a human-readable version of that date.

    Tuesday, 31 October 2017

    Why bother with ? While humans can read time that can disambiguate through context in the normal way, the computers can read the ISO 8601 date and see the date, time, and the time zone.

    and

    is for wrapping your image content around it, and is to caption your image.

    Shadow of Mordor Cover art for Middle-earth: Shadow of Mordor 

    Learn more about the new HTML5 elements:

    • w3schools fournit des descriptions simples et claires de nombreux éléments d'actualité et comment / où ils doivent être utilisés.
    • MDN fournit également une excellente référence pour tous les éléments HTML et approfondit chacun d'eux.