Text Markups
Die Kunst, deinen Texten Bedeutung zu verleihen
Worte in HTML tragen mehr als nur ihre schlichte Oberfläche – mit der richtigen Textauszeichnung entfalten sie eine tiefere Bedeutung. Durch semantische Markups wie <strong> und <em> kannst du bestimmte Teile deines Textes betonen, als würdest du auf einer Lesung plötzlich sehr dramatisch und bedeutungsvoll die Stimme senken.
Semantische Markups sind wie kleine, hilfreiche Elfen, die Schlüsselstellen hell aufleuchten lassen, als hätte jemand einen Scheinwerfer auf sie gerichtet. Mit diesen kleinen Zaubertricks wirst du zum wahren Meister der digitalen Geschichtenerzählung. Jedes Element in deinem Text fügt sich zusammen wie ein gut choreografiertes Ballett, das deine Leser mit Staunen und einem Lächeln durch deine Inhalte tanzen lässt.
Textauszeichnung
Gib deinen Texten Gewicht und Bedeutung
Die tapferen Beschützer
Mut zur Betonung
Das <b>-Element ist wie ein starker Ritter in strahlender Rüstung, der den Text optisch in den Vordergrund hebt. Doch wenn es um wahre Bedeutung geht, greif lieber zum <strong>-Element, denn es verleiht deinen Worten nicht nur Gewicht, sondern auch Substanz. Für visuelle Schriftstärken kannst du ruhig CSS den Job überlassen.
<strong>fetter Text</strong>
Anmutige Betonung
Die Eleganz der Kursivschrift
Wie eine grazile Tänzerin, die sich leichtfüßig über die Bühne bewegt, schenkt das <i>-Element deinem Text in Kursivschrift eine Portion Stil und Schwung. Doch wenn du wirklich etwas hervorheben willst, nimm das <em>-Element –es bringt nicht nur Form, sondern auch den tieferen Sinn deines Textes zur Geltung.
<em>kursiv hervorheben</em>
Kleine Schrift
Lies das Kleingedruckte
Das <small>-Element ist wie ein leiser Flüsterton in einem überfüllten Raum, der zwar wichtige, aber dezente Informationen vermittelt. Es schrumpft den Text auf unauffällige Größe, perfekt geeignet für Fußnoten oder subtile Anmerkungen. So bleibt der Haupttext im Rampenlicht, während die feinen Details sanft im Hintergrund mitschwingen.
<small>Kleingedrucktes</small>
Durchgestrichen
Vergangenes ausradieren
Das <s>-Element ist wie ein durchgestrichener Eintrag in einem Zauberbuch, der zeigt, was nicht mehr gilt. Mit einem eleganten Strich macht es klar, dass der Text seine Gültigkeit verloren hat oder korrigiert wurde – ein Zeichen, dass sich der Lauf der Dinge geändert hat.
<s>durchgestrichen</s>
Unterstrichen
Unterstreiche mit Bedacht
Das <u>-Element ist wie der Gelehrte, der wichtige Passagen in alten Schriften unterstreicht. Er sorgt dafür, dass bestimmte Textstellen auffallen. Doch es ist Vorsicht ist geboten, denn auch viele Links tragen eine Unterstreichung. Nutze diesen Zauber also nur, wenn es wirklich wichtig ist!
<u>unterstrichen</u>
Markieren
Der Leuchtstift für Textpassagen
Das <mark>-Element wirkt wie ein magischer Leuchtstift, der Text hervorhebt, als hätte jemand mit einem neonfarbenen Marker darüber gefahren. Es sorgt dafür, dass niemand die wichtigen Stellen übersieht und lenkt die Aufmerksamkeit direkt auf das Wesentliche.
<mark>markierter Text</mark>
Tiefgestellt
Die Kunst des Schrumpfens
Das <sub>-Element ist wie ein verschmitzter Magier, der Text unter die Grundlinie zaubert und dabei ein wenig schrumpfen lässt – als würde er sich in den Schatten der großen Buchstaben verstecken. Es ist ideal für Fußnoten, chemische Formeln oder kleine geheime Botschaften, die unauffällig, aber unverzichtbar sind.
H<sub>2</sub>O
Hochgestellt
Die Macht des Erhebens
Das <sup>-Element ist der Experte für Hochstellungen, der Text über die Grundlinie schweben lässt – kleiner und dennoch wichtig. Ob hochgestellte Zahlen, Copyright-Symbole oder geheime Anmerkungen, dieser Zauber hebt sie in luftige Höhen, wo sie sofort ins Auge fallen.
Logo<sup>©</sup>In dieser Lektion hast du gelernt…
- Wie du Text fett oder kursiv hervorhebst, indem du
<strong>für inhaltliche Betonung und<b>für rein optische Hervorhebung nutzt, sowie<em>für Bedeutung und<i>für Stil. - Warum du
<small>für dezente Anmerkungen einsetzt, um Fußnoten oder rechtliche Hinweise unauffällig darzustellen. - Wie du durch
<s>Text als veraltet kennzeichnest, um frühere oder ungültige Informationen sichtbar zu machen. - Wann du
<u>sparsam verwendest, da unterstrichener Text oft mit Links verwechselt wird. - Wie
<mark>,<sub>und<sup>spezielle Effekte erzeugen, um Text zu markieren, tiefzustellen oder hochzustellen – ideal für Hervorhebungen, chemische Formeln oder Hochzahlen.
Hier siehst du den Code, den du gelernt hast – aber fühl dich frei, zu experimentieren! Probiere Änderungen aus, teste neue Ideen und sieh, was passiert. Das ist dein Raum zum Tüfteln!
Die Kunst der Markierungen
Tief im geheimen Tempel von Greenwood Hollow fand Seran, der etwas sonderbare Waldläufer, alte Schriften, die mit seltsamen Zeichen verziert waren – Zeichen, die anscheinend mehr über die Bedeutung des Textes verrieten, als der Text selbst je preisgegeben hätte. Um diese Rätsel zu lösen, musst du lernen, wie du solche Zeichen in der digitalen Welt wiedererweckst. Mit HTML-Markups machst du unsichtbare Bedeutungen sichtbar und bringst das Chaos der Worte in ordnende Bahnen.
Deine Aufgabe: Die Anwendung der Text-Markups
Arbeite dieses Bild nach:
Fragen:
Worin liegt der Unterschied zwischen <strong> und <em>, und wann sollte man sie verwenden?
Welche Bedeutung haben <small> und <em> für die Betonung und die visuelle Darstellung von Text?
In welchen Situationen könnte es sinnvoll sein <mark> und <s> zu verwenden?
Wie verändern sie die visuelle Darstellung des Textes?
Welche Anwendungsbereiche gibt es für <sup> und <sub>?
<article>
<h2>Die Schriften von Greenwood Hollow</h2>
<p>In den tiefen Wäldern verstecken sich die <strong>alten Geheimnisse</strong> der Natur. Es heißt, dass die
Geister des Waldes manchmal <em>flüstern</em>, wenn der Wind durch die Bäume weht.</p>
<p>Die Geschichten des Waldes sind oft in <small>kleinen Andeutungen</small> verborgen und lassen sich <mark>nur
von denen entdecken</mark>, die mit dem Herzen lauschen.</p>
<p>Manchmal kann es notwendig sein, die Wahrheit zu <s>verbergen</s> oder sie <u>deutlich sichtbar</u> zu
machen.</p>
<p>Der alte Seran erzählte von einer <strong>prophezeiten Begegnung</strong>, bei der die Helden <sup>über</sup>
und <sub>unter</sub> die Äste des großen Baums blicken müssen, um die Antwort zu finden.</p>
</article>