Jeder, der an Webdesign oder -entwicklung beteiligt ist, wird den Begriff "Semantik" in Bezug auf HTML5 und das Web im Allgemeinen finden. Dieser oft problematische Begriff ist für viele von uns verständlicherweise verwirrend, zumal es in bestimmten Kontexten einen deutlichen Konsensmangel gibt.

In diesem Artikel untersuchen wir, was HTML5 semantischer macht als seine Vorgänger, und erläutern, was dies für die Webentwicklung heute und in Zukunft bedeutet.

In der Semantik geht es um Bedeutung

Das Konzept der Semantik stammt aus dem Bereich der Linguistik, der sich dem Studium der Bedeutung widmet. Bei natürlichen Sprachen wie Englisch unterscheiden wir zwischen Syntax (oder Grammatik) und Bedeutung. Wenn Sie an einen Satz denken, hat Bedeutung damit zu tun, wie Menschen ihn interpretieren:

"Der Mann hat den Computer durch das Fenster geworfen."

Die Semantik bezieht sich auf den Aspekt des Satzes, der es den Lesenden ermöglicht, die darin enthaltene Botschaft zu verstehen. Zusammen mit Syntax ist Semantik ein großer Teil dessen, was Kommunikation über Sprache erleichtert. Wenn wir über Semantik in Bezug auf HTML sprechen, sprechen wir über die Kommunikation zwischen Computerprogrammen, nicht Menschen. Semantisches HTML zielt im Wesentlichen darauf ab, das Ausmaß zu verbessern, in dem Anwendungen Webinhalte verarbeiten oder interpretieren können. Betrachten Sie beispielsweise den folgenden Webseitenauszug, der einige der länger bestehenden HTML-Strukturen enthält:

The man threw the computer through the window.

Die Elemente (und Attribute) geben dem Browser Informationen darüber, wie der Inhalt dem Benutzer präsentiert wird. Absatzelemente werden standardmäßig mit Leerzeichen über und unter ihnen angezeigt, Bildelemente werden mit der Bilddatei angezeigt, die im Attribut src enthalten ist, und so weiter. Wenn der Browser auf jedes dieser Elemente trifft, rendert er den Inhalt in einer bestimmten Weise, die letztendlich durch die verwendeten Tags bestimmt wird.

HTML-Strukturen haben bereits Bedeutung

Es ist wichtig zu verstehen, dass HTML5 zum ersten Mal keine Semantik in HTML einführt. HTML hatte bereits eine eingebaute Semantik. Die vorhandenen HTML-Strukturen sind in unterschiedlichem Maße aussagekräftig. Wenn Sie sich dieses vertraute HTML-Element wie im obigen Auszug ansehen, werden Sie sehen, was ich meine:

Obwohl es abgekürzt ist, zeigt der Name des Elements img etwas Bedeutungsvolles über den Inhalt des Tags an, dh dass es ein Bild ist. Auf diese Weise können Sie sich den semantischen Aspekt von HTML als ähnlich zu Metadaten vorstellen, indem die Element-Tag- und Attributnamen die Daten beschreiben (die Daten in einer Webseite sind der Element- und Attribut-Inhalt).

Erinnern Sie sich daran, als wir begannen, Inhalte vom Stil zu trennen?

Einige der Strukturen, die wir in HTML verwendet haben, teilen dem Browser mit, wie die Inhaltselemente auf einer Seite formatiert werden sollen. Im Laufe der Zeit wurden wir ermutigt, die Formatierung einer Seite von ihrem Inhalt zu trennen.

Zum Beispiel haben wir das i-Tag durch em ersetzt, was aussagekräftiger ist und dem Browser nicht genau sagt, wie der Text innerhalb des Elements angezeigt werden soll. Der Zweck der Verwendung von em anstelle von i besteht darin, Informationen über die Art des Inhaltselements und nicht über dessen Formatierung zu vermitteln. Das em beeinflusst natürlich den Stil, was der Hauptgrund ist, warum wir es verwenden, jedoch überlässt es die Details des Stils dem Browser und / oder CSS-Code, der idealerweise von der Seitenmarkierung getrennt ist.

Semantisches HTML5 ist ein größerer Schritt in diesem Prozess. Das ultimative Ziel ist es, ein System zu schaffen, in dem Anwendungen auf eine größere Bedeutungsebene zugreifen können - dies ist jedoch keine KI, sondern nur beschreibende Informationen über Datenelemente innerhalb der Code-Strukturen, die sie modellieren.

Ist das nicht XML ähnlich?

Wenn Sie in der Vergangenheit XML verwendet haben, werden Sie mit den Konzepten im semantischen Markup vertraut sein. Wenn Sie beispielsweise ein XML-Dokument (oder Schema) für ein Dataset entwerfen, wählen Sie Elemente und Attribute zum Modellieren von Elementen in den Daten aus. Idealerweise definieren die Element- und Attributnamen die Datenelemente auf sinnvolle Weise:

Jim Smith23 November 2012

Der Entwickler hat hier Namen gewählt, die die modellierten Datenwerte intuitiv beschreiben. Mit HTML5 können Sie keine eigenen Elemente auswählen, da es nicht frei erweiterbar ist. Die gewählten Strukturen haben im Vergleich zu früheren Versionen einfach eine größere Bedeutung.

Nebenbei bemerkt gibt es verschiedene Arten von Bedeutung

Wir haben über Bedeutung gesprochen, aber tatsächlich gibt es verschiedene Arten, auf die ein Element oder ein anderer Codeausschnitt sinnvoll sein kann.

Das img-Tag ist insofern sinnvoll, als es etwas über den Inhalt des Elements aussagt und beschreibt, was es ist.

Einige der neuen HTML5-Elemente wie Kopf- und Fußzeile sind insofern sinnvoll, als sie etwas über die Rolle oder den Zweck des Elements in der Gesamtstruktur einer Seite anzeigen.

Wie verhält sich das alles zu HTML5-Code?

Was beinhaltet dieser erweiterte, sinnvolle Aspekt von HTML5? Im Wesentlichen enthält HTML5 einige neue Elemente, mit denen Sie mehr semantische Informationen in Ihre Seitenmarkierung einfügen können. Es gibt eine Menge neuer Elemente, von denen wir hier nur einige betrachten werden. Das Header-Tag gibt Informationen über den Inhalt des Elements und seine Rolle innerhalb der Seitenstruktur an:

Man in Window Outburst

Das Kopfzeilenelement kann andere Elemente enthalten und neigt dazu, mindestens ein Kopfzeilenelement zu enthalten. Das Fußzeilen-Tag ist ähnlich, wobei das Tag wieder etwas Sinnvolles über den Inhalt des Elements und seine Beziehung zum Rest der Seite ausdrückt:

Das nav- Tag beschreibt den Zweck eines Seitenabschnitts, dh es enthält Navigationslinks:

Das Abschnittselement enthält normalerweise eine Gruppe von Elementen zum selben Thema, oft zusammen mit einem Header. Das Abschnittselement hat eine ziemlich abstrakte Bedeutung, ist aber dennoch sinnvoll:

What happened
Police officers apprehended the man at 3.30pm...

Das Artikelelement ist ähnlich, um ein eigenständiges Element zu definieren:

The Law
The law on throwing items through windows is very clear...

Ein side- Tag gibt die Rolle eines Elements relativ zu seinem Kontext innerhalb der Seite an, wie in der folgenden erweiterten Version des obigen Artikelcodes:

The Law
The law on throwing items through windows is very clear...

Dies sind nur einige der neuen HTML5-Elemente, die semantische Verbesserungen bieten, andere umfassen Medien- und Benutzereingabeelemente sowie zusätzliche Attribute. Die Einbeziehung von Mikrodaten in HTML5 bietet auch einen größeren Spielraum für die Einbeziehung semantischer Informationen in Webseiten und Anwendungen. Wie Sie sehen, sind einige dieser neuen Elemente inhaltlich und strukturell sinnvoll.

Denken Sie an einige der älteren Tags (von denen viele noch immer vorhanden sind), z. B. div. Das div-Element ist einfach ein Stück einer Seite - der Tag-Name sagt uns absolut nichts über den Inhalt des Elements oder seine Rolle innerhalb der Seite. Mit anderen Worten, das Etikett vermittelt sehr wenig Bedeutung. Viele der altbekannten Tags vermitteln entweder so gut wie gar keine oder in manchen Fällen generische, lose definierte Bedeutung. Jedes Element in einer Webseite wurde in einer Gruppe sehr allgemeiner Elementkategorien enthalten. Der Schlüssel, um etwas sinnvoll zu machen, ist spezifisch zu sein. Die neuen HTML5-Tags ermöglichen es uns, Webinhalte mit spezifischeren Begriffen zu definieren.

Haben Sie Ihrem Markup bereits Bedeutung hinzugefügt?

Wenn Sie Webseiten für eine vernünftige Zeitspanne erstellt haben, können einige der neuen HTML5-Elemente für Sie einige Glocken läuten. In Wirklichkeit bauten Entwickler mit ihren Elementattributen, insbesondere Klasse und ID, bereits eine Bedeutungsebene in ihre Seiten auf. Zum Beispiel, wenn Sie jemals ein Element eine Klasse oder ID-Attribut von "Fußzeile" oder "Kopfzeile" gegeben haben, sind Sie sicherlich nicht allein. Mit HTML5 wird diese Bedeutung im Markup selbst und nicht in Attributwerten angegeben. Wenn Sie diese Attribute zum Implementieren bestimmter Styling-Eigenschaften verwendet haben, haben Sie tatsächlich manuell etwas getan, das standardmäßig in HTML5 integriert ist - und mit semantischen Elementen gibt es zusätzliche Vorteile ...

Warum machen wir das alles?

OK, das ist alles sehr gut, aber es wäre dir verziehen zu fragen, warum wir all diese Schwierigkeiten für etwas tun, das im Wesentlichen konzeptionell / akademisch zu sein scheint. Nun, Sie können sicher sein, dass es gute Gründe gibt, sich in eine semantischere Richtung zu bewegen. Wie wir gesehen haben, ermöglicht uns die HTML5-Semantik, Markup-Code zu erstellen, der Inhaltselemente beschreibt. Dieser beschreibende Aspekt des Codes ermöglicht es anderen Programmen, den Inhalt mit verschiedenen Anwendungen effektiver zu nutzen:

• Die Durchsuchbarkeit wird durch den Fortschritt der Web-Semantik transformiert. Semantisches Markup macht Inhalte / Daten durchsuchbarer. Webseiten werden natürlich nicht nur im Webbrowser betrachtet, sondern auch von anderen Programmen wie Suchmaschinenrobotern verarbeitet. Da semantisches Markup so konzipiert ist, dass Anwendungen Webseiten auf sinnvollere Weise interpretieren können, sollte dies letztlich die Qualität der Such- / Abfragefunktionen erheblich verbessern. In Tim Berners-Lees oft zitierten "Traum" für das Web könnten Computer alle Daten online analysieren - was weit entfernt sein mag, aber die semantische Ausrichtung von HTML5 ist von dieser Art von langfristigem Ziel motiviert .
• Barrierefreiheit ist einer der wichtigsten Vorteile für semantisches Markup. Eingabehilfen können enorm von einem aussagekräftigeren Zugriff auf Webinhalte profitieren. Zu diesen Tools gehören Browser-Add-Ons für Benutzer mit eingeschränktem Sehvermögen, Hörvermögen, Lernschwierigkeiten und so weiter. Semantisches Markup macht es für eine Anwendung möglich, Webinhalte zu verarbeiten, und das Ergebnis kann die ursprüngliche Nachricht an den Benutzer auf eine Art und Weise kommunizieren, die ihren Bedürfnissen entspricht. Dieses Konzept geht über die Barrierefreiheit hinaus und in die Bereiche der Geräteflexibilität über Techniken wie Responsive Design. Das Ergebnis ist ein umfassenderer Ansatz für die Bereitstellung von Web-Inhalten.
• Konsistenz sollte ein echter Vorteil für semantisches HTML5 sein. Semantisches Markup verbessert die Konsistenz, da Inhaltselemente bestimmten Elementtypen logischer zugeordnet werden können. Dies steht im Gegensatz zu den älteren Modellen, in denen Elemente oft genauso logisch in einem von verschiedenen Elementtypen enthalten sein könnten - die Auswahl eines Elements war kein Indikator für die Art des Inhalts oder seine Rolle innerhalb der Seite war nur eine Reflexion der Wahl des Entwicklers. Mit semantischem Markup macht die spezifischere Bedeutungsebene diese Auswahlmöglichkeiten weniger frei, aber die Ergebnisse sind inhärent zuverlässiger, wenn es um die Interpretation durch den Browser oder andere Anwendungen geht.

Entwickler treiben den Fortschritt von Webtechnologien voran

Als ich (vor einigen Jahren) an der Uni war, erinnere ich mich an einen Dozenten, der uns erzählte, dass das Gebiet der akademischen Forschung durch Fortschritte in der Suche revolutioniert werden würde. Er sprach über das Semantische Web - unnötig zu sagen, dass es noch nicht passiert ist. Jede Art von fokussierter neuer Richtung mit etwas so verschiedenartig und sprunghaft wie das World Wide Web wird immer eine schwierige Aufgabe sein. Wenn wir uns jedoch zumindest mit der Idee des semantischen Markups einlassen, können wir als Entwickler die Bewegung in Richtung eines zukünftigen Webs beeinflussen, das für alle Benutzer zugänglicher, durchsuchbarer und konsistenter ist.

Verwenden Sie die semantischen Elemente von HTML5? Führt die Fokussierung auf die Semantik zu einem Produkt höherer Qualität? Lassen Sie uns wissen, was Sie in den Kommentaren denken.

Vorgestelltes Bild / Thumbnail, verwendet Sprachbild über Shutterstock.