Generelles zum Thema Semantic

Gerade im Zeitalter des Web 3.0 und den sozialen Netzwerken, des Web 4.0 und dem mobilen Internet und des fortlaufend weiterentwickelten Internets wird ein großes Thema oft vernachlässigt: Die Semantic. HTML bietet dafür hervorragende Mittel, die jedoch häufig nicht genutzt werden. Durch Javascript und Frameworks wie jQuery, aber vor allem durch CSS kann ein einziges Element, dem einen semantischen Sinn in HTML gegeben wurde, komplett verändert und im Grunde für alle anderen Elemente stellvertretend genommen werden. Ein Beispiel dazu:

  • Html
  • Javascript
  • Ergebnis
<!-- Eine Überschrift in Rot mit der Schriftgröße 20px --> <h1 style="display: block; color: red; font-size: 20px; font-weight: 700;">Überschrift</h1> <!-- Eine Überschrift in Rot mit der Schriftgröße 20px --> <p style="display: block; color: red; font-size: 20px; font-weight: 700;">Überschrift</p> <!-- Ein Link, als Inlineelement, das nicht unterstrichen ist --> <a href="https://www.coding-lab.de/" style="display: inlnie; text-decoration: none; cursor: pointer; color: blue;" target="_blank" >CodingLab</a> <!-- Ein Link, als Inlineelement, das nicht unterstrichen ist --> <div id="paragraph_link" ziel="https://www.coding-lab.de/" style="display: inlnie; text-decoration: none; cursor: pointer; color: blue;">CodingLab</div> <script> // Javascript Code </script>
document.addEventListener( "DOMContentLoaded", function(e) { document.getElementById( "paragraph_link" ).addEventListener( "click", function(e) { var ZielUrl = this.getAttribute( "ziel" ); window.open( window.open( ZielUrl ) ); }); });

Im obigen Beispiel ist die Semantic des <p></p> Elements, mithilfe von CSS soweit abgeändert, dass wir das Element zweifelsfrei als Überschrift verwenden könnten. Weiterhin haben wir mithilfe von Javascript aus einem <div></div> Element einen Link gestaltet.

Ein enorm wichtiger Aspekt ist bei dem obigen Beispiel allerdings außer Acht gelassen: Braille-Geräte und Sprachsynthesizer; die Rede ist von Menschen mit Handicap, die das Internet ebenfalls unbeschwert benutzen wollen. Diese Geräte und Hilfsprogramme sind darauf angewiesen, dass die Semantic in HTML eingehalten wird, damit sie einwandfrei funktionieren können. Somit sollte ein <p></p> Element auch immer als Paragraph und ein <h1></h1> Element auch immer als Überschrift genutzt werden.

Ein leckerer Beigeschmack: Wenn man sich bei der Gestaltung seiner Website strikt an die Einhaltung der Regeln und in Zeiten von HTML5 auch an die richtige Verwendung der neuen semantischen Elemente hält, bekommt man in puncto SEO auch einen Vorteil von Google und anderen Suchmaschinen.

Überschriften

Überschriften werden in HTML immer mit einem der folgenden Elemente angegeben:

  • <h1></h1>
  • <h2></h2>
  • <h3></h3>
  • <h4></h4>
  • <h5></h5>
  • <h6></h6>

Dabei fällt auf, dass das Element aus einem "h", als Abkürzung für das englische Wort "headline" (Überschrift) und einer Zahl von 1 bis 6 besteht. Dabei kennzeichnet <h1></h1> nicht nur die größte, sondern auch immer die Hauptüberschrift und <h6></h6> demnach die Überschrift mit der wenigsten Gewichtung und der vordefinierten kleinsten Größe. Möchte man also eine Kapitelüberschrift eines Buches mit Slogan und Autor auszeichnen, so könnte man das in HTML wie folgt machen:

  • Html
  • Ergebnis
<h1>Holzarten</h1> <h2>Ein Buch über die weltweit prächtigsten Holzarten</h2> <h3>Mit einem Vorwort von Fiktiv Holzmann</h3>

Paragraphen

Das <p></p> Element wird mit am häufigsten genutzt, denn es ist für normalen Text auf einer Webseite bestimmt und davon gibt es bekanntlich reichlich.

  • Html
  • Ergebnis
<p>Hier kommt der Inhalt für den ersten Paragraphen hinein.</p> <p>Hier kommt der Inhalt für den zweiten Paragraphen hinein.</p> <p>Hier kommt der Inhalt für den dritten Paragraphen hinein.</p> <p>Hier kommt der Inhalt für den vierten Paragraphen hinein.</p>

Whitespaces

Gewöhnungsbedürftig bei HTML ist das Thema Whitespaces. Den Unterschied zu einer Programmiersprache, bei der ein String, genau ein Character-Array repräsentiert und Leerzeichen auch meistens als Zeichen mit speichert, macht der Parser. Dieser schneidet nämlich überschüssige Leerzeichen und ganze Leerzeilen weg. Ein Beispiel dazu:

  • Html
  • Ergebnis
<p> Hier ist ein Paragraph mit ganz vielen Leerzeichen und ganz vielen Zeilen </p>

Im Ergebnis ist klar zu sehen, dass zwischen den Wörtern lediglich ein Leerzeichen vom Parser erlaubt ist. Der Rest wird weggeschnitten.

Line-Breaks

Da Whitespaces von dem Parser weggeschnitten werden, stellt sich die Frage, wie man einen Zeilenumbruch in HTML erzeugen kann. Dafür wurde ein eigenes Element eingeführt:

  • Html
  • Ergebnis
<p> Ich bin ein Text in der ersten Zeile<br /> Ich bin ein Text in der zweiten Zeile </p>

Das Element <br /> steht für "break rule" (Zeilenumbruch) und ist ein leeres Element. Nach XHTML Konformität ist deswegen der Schrägstrich (Slash) am Ende des Tags gesetzt.

Kursiver Text

Schon in den Anfängen von HTML gab es für eine kursive Schrift das Element <i></i>. Dieses Element wurde jedoch durch das <em></em> Element abgelöst. Beide Elemente erreichen im Browser das gleiche Bild:

  • Html
  • Ergebnis
<i> Ich bin ein kursiver Text ohne inhaltlich wichtiger zu sein </i> <br /> <em> Ich bin ein kursiver Text, der inhaltlich hervorzuheben ist </em>

Dennoch besteht ein gravierender Unterschied, der hier nicht detailliert, aber kurz zusammengefasst werden soll:

<i></i> bezieht sich lediglich auf das Aussehen des Textes. Das heißt, wir haben hier keine Gewichtung des Inhalts. <em></em> hat einen ganz wichtigen Einfluss auf den Inhalt des Textes, denn wenn ein Wort oder ein Satz mit diesem Element ausgezeichnet ist, dann bekommt es eine ausstehende Bedeutung. Sprachsynthesizer, die Text auf einer Webseite vorlesen würden bei <i></i> keine Sprachänderung vornehmen, während bei <em></em> eventuell eine andere Stimme oder andere Betonung vorkommen würde.

Fettgedruckter Text

Mit fettgedrucktem Text, verhält es sich genauso, wie mit kursivem Text. Das historische Element <b></b> wird heutzutage nur noch für eine äußerliche Veränderung des Textes genommen. Das Element <strong></strong> bewirkt jedoch nicht nur eine äußerliche Veränderung des Textes, sondern gibt dem Inhalt mehr Ausdruck. Sprachsynthesizer könnten ein Wort oder einen Satz, der mit diesem Element ausgezeichnet ist, kräftiger und lauter aussprechen, was gerade für blinde Menschen enorm wichtig ist, damit auch sie erkennen können, welche Aspekte des Inhalts als wichtig zu deuten sind.

  • Html
  • Ergebnis
<b> Ich bin ein fettgedruckter Text ohne inhaltlich wichtiger zu sein </b> <br /> <strong> Ich bin ein fettgedruckter Text, der inhaltlich hervorzuheben ist </strong>

Hochgestellter/Tiefgestellter Text

Möchte man Wörter oder Zahlen höher bzw. tiefer stellen, so brauchen wir die folgenden beiden Elemente:

  • Html
  • Ergebnis
<p>Text mit einem hochgestelltem Vermerk<sup>1</sup></p> <p>Text mit einem tiefgestellten Vermerk<sub>2</sub></p>

Das Element <sup></sup> ist eine Abkürzung für das englische Wort "superscript" und bedeutet "hochgestellt". Das Element <sub></sub> ist eine Abkürzung für das englische Wort "subscript" und bedeutet "tiefgestellt".

Zitate

Zitate auf einer Webseite sorgen immer für interessante Eindrücke anderer Menschen zu einem bestimmten Thema. An dieser Stelle sollen die folgenden Elemente mit einem sehr mächtigen Zitat von Steve Jobs gefüllt werden:

  • Html
  • Ergebnis
<q> Everybody in this country should learn a computer language, because it teaches you how to think. </q>

Das Element <q></q> ist - wie so oft - eine Abkürzung für das englische Wort "quote" und bedeutet entweder als Verb "zitieren" oder als Nomen "Zitat". Wollen wir also einen wichtigen Satz einer bestimmten Person zitieren, so können wir das mit genau diesem Element. Im Ergebnis sieht man, dass der Satz auch gleich in Anführungszeichen gesetzt wird. Wollen wir nun den Autor des Zitats mit angegeben, so brauchen wir ein Element, dass ebenfalls aus dem englischen kommt und so viel bedeutet wie "zitieren": <cite></cite>

  • Html
  • Ergebnis
<cite>Steve Jobs</cite> <q> Everybody in this country should learn a computer language, because it teaches you how to think. </q>

Wichtig ist jedoch zu wissen, dass wir mit dem <cite></cite> Element nicht nur Autoren angeben, sondern alles, was über dem Konsens des Zitates als Herkunft genannt werden kann. Somit fallen auch Buchtitel oder Webseiten in den Anwendungsbereich.

Wollen wir einen ganzen Abschnitt auf unserer Webseite zitieren, so benötigen wir ein anderes Element:

  • Html
  • Ergebnis
<cite>Bill Gates</cite> <blockquote cite="Bill Gates"> <p> The first rule of any technology used in a business is that automation applied to an efficient operation will magnify the efficiency. The second is that automation applied to an inefficient operation will magnify the inefficiency. </p> <footer> - an einem warmen Sommerabend auf der Veranda in Bill Gates Haus (<em>nicht bestätigt</em>) </footer> </blockquote>

Das <blockquote></blockquote> Element ist ein Block-Level-Element, d.h. es hat einen Zeilenumbruch vor und nach sich selbst gestellt. Auffällig an dem oberen Beispiel sind jedoch zwei wesentliche Punkte:

  • Das Attribut cite="" hat keinerlei äußerliche Erscheinung, allerdings für Suchmaschinen und Hilfsprogramme für Menschen mit Handycap eine wichtige Rolle. Insofern macht es Sinn, beides mit anzugeben.
  • In dem Element <blockquote></blockquote> können wir ohne Probleme Elemente einfügen. Seit HTML5 allerdings kann auch das <footer></footer> Element in einem Zitatblock benutzt werden. Damit geben wir zusätzliche Informationen über das Zitat an, wie zum Beispiel der Ort, wo es entstand und zu welcher Zeit.

Code

Wollen wir auf unserer Webseite Code einfügen, so benötigen wir gleich zwei Elemente, damit uns das Leben leichter gemacht wird. Das erste Element ist folgendes:

  • Html
  • Ergebnis
<code> $(document).ready( function() { //Webdokument geladen //Hier kommt der Inhalt rein }); </code>

Mit dem <code></code> Element zeichnet man in HTML code aus. Bis auf den semantischen Aspekt hat dieses Element auch einen äußerlichen. Standardmäßig wird dafür nämlich eine Schriftart genommen, bei der jedes Zeichen eine feste Breite hat. Diese sind allgemein dafür bekannt, dass Code lesbarer wird. Achtet man bei den folgenden Code-Abschnitten genauer auf die Schriftart, so sollte man das klar sehen.

  • Html
  • Ergebnis
<code>function TestFunc(){alert("");}</code> <p>function TestFunc(){alert("");}</p>

Allerdings hat das Einfügen von Code auf einer Webseite einen gravierenden Nachteil. Die Rede ist von Whitespaces. Quellcode wird leserlicher, wenn man ihn in Blöcke aufteilt und dazu gehören leider auch eine Reihe von "überflüssigen" Leerzeilen, Tabs und Leerzeichen, die ja bekanntlich vom Parser weggeschnitten werden. Aus diesem Grund bedarf man sich in HTML um eine Hilfestellung: dem <pre></pre> Element. "Pre" ist eine Abkürzung für "preformatted" und bedeutet "vorformatiert". Dieses Element hat die Besonderheit, dass alle Whitespaces erhalten bleiben:

  • Html
  • Ergebnis
<pre> $(document).ready( function() { //Webdokument geladen //Hier kommt der Inhalt rein }); </pre>

Im Gegensatz zum Ergebnis des obigen Quellcodes mit dem <code></code> Element sind bei dieser Ausgabe alle Leerzeilen, Tabs und Leerzeichen erhalten geblieben. Deswegen ist dieser Code auch wesentlich lesbarer. In HTML5 wird dazu empfohlen, das <code></code> Element im <pre></pre> Element zu Schachteln, da <code></code> ursprünglich für einen kleinen Codeauschnitt und nicht für einen gesamten Block gedacht war. <pre></pre> hingegen war für längere Textabschnitte gedacht, bei denen Whitespaces eine große Wichtigkeit darstellten. Somit ist als Empfehlung gegeben, beide zusammen für ganze Codeblöcke zu benutzen.