This article is currently in the process of being translated into German (~76% done).
Kursiv & Dick oder Fett & Unterstrichen
Bisher habe ich herausgestellt, dass HTML nicht dazu verwendet werden sollte das Aussehen und Verhalten der Webseite zu gestalten. Aber ebenso wie in Word kann man Wörter oder Sätze mittels HTML auch fett oder kursiv darstellen. Bisher waren die Elemente <b>, <i>, <em> und <strong> rein für die Darstellung gedacht. Aber mit HTML5 wurde auch noch eine semantische Bedeutung zu den einzelnen Elementen hinzugefügt.
- Das <i> Element war bisher nur für die Darstellung von kursivem Text, jetzt wird es auch für Alternativtext wie z.B. Fremdwörter, technische Fachbegriffe oder Bühnenanweisungen genutzt.
- Das <b> Element war bisher für die Darstellung von fett gedrucktem Text, jetzt wird es auch als stilistisches Mittel z.B. zur Hervorhebung von Schlüsselwörtern in einem Dokument voller Produktnamen genutzt.
- Das <em> Element wurde zur Hervorhebung genutzt, jetzt wird es auch für Wörter oder Sätze, die anders betont werden sollen genutzt.
- Zuletzt noch das <strong> Element, dass genutzt wird um starke Betonung oder hohe Wichtigkeit auszudrücken.
Es folgen einige Beispiele um zu sehen wie die einzelnen Tags zur Formatierung genutzt werden - nutzt den "Try this example!" Button um zu sehen wie die unterschiedlichen Tags sich auf die Formatierung auswirken.
<!DOCTYPE html>
A foreign word, <i>smuk</i>, means beautiful in Danish <br /><br />
The phrase <b>semantinc meaning</b> might be keywords in this document<br /><br />
Alternate accentuation? Use the <em>em</em>, not the italic element.<br /><br />
If you want to write semantic code <strong>it is important that you understand the differences</strong>!
</html>Beispiel
Im folgenden Beispiel wird eine Passage aus Shakespeares MacBeth zitiert. Mittels des <i> Elements werden Bühnenanweisungen kenntlich gemacht und mit dem <b> Element wird hervorgehoben, welcher Charakter gerade in der entsprechenden Zeile spricht.
Enter MACBETH and BANQUO
MACBETH So foul and fair a day I have not seen.
BANQUO How far is't call'd to Forres? What are these
So wither'd and so wild in their attire,
That look not like the inhabitants o' the earth,
And yet are on't? Live you? or are you aught
That man may question? You seem to understand me,
By each at once her chappy finger laying
Upon her skinny lips: you should be women,
And yet your beards forbid me to interpret
That you are so.
MACBETH Speak, if you can: what are you?
First Witch All hail, Macbeth! Hail to thee, thane of Glamis!
Second Witch - All hail, Macbeth, Hail to thee, thane of Cawdor!
Third Witch All hail, Macbeth, thou shalt be king hereafter!
Die Nutzung des <i> und des <b> Elements in diesem Fall ruft ein Problem hervor -was wenn man sich plötzlich entscheidet, dass man etwas anders aussehen lassen möchte? Hier kommt wieder CSS ins Spiel. Indem man ein Klassen-Attribut auf jedes <i> und <b> Element legt kann man sich die semantischen Eigenschaften zu nutze machen und dennoch die volle Kontrolle über das Aussehen behalten. Die Bühnenanweisungsklasse sollte in dem Fall mit stg-direc und die Charakterklasse mit char abgekürzt werden um den Quelltext nicht zu lang werden zu lassen. Nach den Änderungen sollte es dann so aussehen:
<p>
<i class="stg-direc">Enter MACBETH and BANQUO</i>
<b class="char">MACBETH</b> So foul and fair a day I have not seen.
<b class="char">BANQUO</b>How far is't call'd to Forres? What are these
…
</p>Was wir gelernt haben
- Wenn man kein CSS benutzt wird der Inhalt der <em> und <i> Elemente gleich aussehen.
- Wenn man kein CSS benutzt wird der Inhalt der <strong> und <b> Elemente gleich aussehen.
- Die Elemente <em> und <strong> sollten der Nutzung von <i> und <b> vorgezogen werden.
- Diese Elemente sollten nicht für Zitate genutzt werden. Hier sollte man die Elemente <blockquote> oder <aside> heranziehen.
- Diese Elemente sollten in Kombination mit Klassen verwendet werden. So kann man das Aussehen der Elemente beeinflussen und diese gleichzeitig semantisch anreichern.
