Semantische HTML5-Elemente erklärt

Semantische HTML-Elemente sind solche, die ihre Bedeutung auf menschlich und maschinenlesbare Weise klar beschreiben.

Elemente wie , und alle semantischen betrachtet , weil sie genau den Zweck des Elements und die Art des Inhalts beschreiben , die in ihnen ist.

Was sind semantische Elemente?

HTML wurde ursprünglich als Auszeichnungssprache erstellt, um Dokumente im frühen Internet zu beschreiben. Als das Internet wuchs und von mehr Menschen angenommen wurde, änderten sich seine Bedürfnisse.

Wo das Internet ursprünglich für den Austausch wissenschaftlicher Dokumente gedacht war, wollten die Menschen jetzt auch andere Dinge teilen. Sehr schnell wollten die Leute das Web schöner machen.

Da das Web ursprünglich nicht für das Design entwickelt wurde, verwendeten Programmierer verschiedene Hacks, um die Dinge auf unterschiedliche Weise zu gestalten. Anstatt das zu benutzen

Um Informationen anhand einer Tabelle zu beschreiben, würden Programmierer sie verwenden, um andere Elemente auf einer Seite zu positionieren.

Mit fortschreitender Verwendung visuell gestalteter Layouts verwendeten Programmierer ein generisches „nicht-semantisches“ Tag wie . Sie gaben diesen Elementen oft ein classoder ein idAttribut, um ihren Zweck zu beschreiben. Zum Beispiel wurde stattdessen oft als geschrieben .

Da HTML5 noch relativ neu ist, ist diese Verwendung nicht-semantischer Elemente auf Websites heute noch sehr verbreitet.

Liste neuer semantischer Elemente

Die in HTML5 hinzugefügten semantischen Elemente sind:

Elemente wie , , , , , und wirkt mehr oder weniger wie Elemente. Sie gruppieren andere Elemente zu Seitenabschnitten. Wenn ein Tag jedoch irgendeine Art von Information enthalten könnte, ist es leicht zu identifizieren, welche Art von Information in einer semantischen Region enthalten wäre.

Ein Beispiel für das Layout semantischer Elemente von w3schools

Semantische Elemente, die eine Seite von w3schools erstellen

Warum semantische Elemente verwenden?

Um die Vorteile semantischer Elemente zu betrachten, finden Sie hier zwei Teile des HTML-Codes. Dieser erste Codeblock verwendet semantische Elemente:

Während dieser zweite Codeblock nicht-semantische Elemente verwendet:

Erstens ist es viel einfacher zu lesen . Dies ist wahrscheinlich das erste, was Sie bemerken werden, wenn Sie den ersten Codeblock mit semantischen Elementen betrachten. Dies ist ein kleines Beispiel, aber als Programmierer können Sie Hunderte oder Tausende von Codezeilen lesen. Je einfacher es ist, diesen Code zu lesen und zu verstehen, desto einfacher wird Ihre Arbeit.

Es hat eine bessere Zugänglichkeit . Sie sind nicht der einzige, der semantische Elemente leichter verständlich findet. Suchmaschinen und unterstützende Technologien (wie Bildschirmleser für Benutzer mit Sehbehinderung) können auch den Kontext und den Inhalt Ihrer Website besser verstehen, was für Ihre Benutzer eine bessere Erfahrung bedeutet.

Insgesamt führen semantische Elemente auch zu einem konsistenteren Code . Wenn eine Kopfzeile mit nicht-semantischen Elemente erstellen, können verschiedene Programmierer schreiben dies als , , oder einfach . Es gibt so viele Möglichkeiten, wie Sie ein Header-Element erstellen können, und alle hängen von den persönlichen Vorlieben des Programmierers ab. Durch das Erstellen eines semantischen Standardelements wird es für alle einfacher.

Seit Oktober 2014 wurde HTML4 zusammen mit einigen neuen „semantischen“ Elementen auf HTML5 aktualisiert. Bis zum heutigen Tag sind einige von uns möglicherweise immer noch verwirrt darüber, warum so viele verschiedene Elemente keine wesentlichen Änderungen aufweisen.

und

“What’s the difference?”, you may ask. Both these elements are used for sectioning a content, and yes, they can definitely be used interchangeably. It’s a matter of in which situation. HTML4 offered only one type of container element, which is . While this is still used in HTML5, HTML5 provided us with and in a way to replace .

The and elements are conceptually similar and interchangeable. To decide which of these you should choose, take note of the following:

  1. An article is intended to be independently distributable or reusable.
  2. A section is a thematic grouping of content.

Top Stories

News

Story 1 Story 2 Story 3

Sport

Story 1 Story 2 Story 3

and

The element is generally found at the top of a document, a section, or an article and usually contains the main heading and some navigation and search tools.

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 bietet einfache und klare Beschreibungen vieler Nachrichtenelemente und wie / wo sie verwendet werden sollten.
    • MDN bietet auch eine hervorragende Referenz für alle HTML-Elemente und geht tiefer in die einzelnen Elemente ein.