HTML/Textauszeichnung/s

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Das HTML5-Element s dient dazu, Text als nicht länger richtig, genau oder relevant auszuzeichnen.

  • IE
  • Firefox
  • Chrome
  • Safari
  • Opera
  • HTML5
Beispiel ansehen …
<!doctype HTML> <html> <head> <meta charset="utf-8"> <title>Beispiele für die Verwendung des <code>s</code>-Elements</title> </head> <body> <h1>SELFHTML</h1> <p><s>DIE Referenz für HTML ist die Dokumentation SELFHTML.</s></p> <p>DIE Referenz für HTML ist das SELFHTML-Wiki.</p> </body> </html>
Beachten Sie: Das s-Element markierte früher durchgestrichenen Text und war in HTML4.01 als missbilligtes Element eingestuft. In HTML5 wird es für die Auszeichnung von nicht korrektem Text gebraucht.
Empfehlung: Um ersetzten oder gelöschten Text auszuzeichnen, sollten Sie das del-Element verwenden.

[Bearbeiten] s-Elemente mit CSS formatieren

Wie genau der Browser die Elemente zur Textauszeichnung darstellt, darauf haben Sie mit HTML allein keinerlei Einfluss. Die Browser benutzen zwar default-Einstellungen, diese können sich aber von Browser zu Browser unterscheiden. Mit Stylesheets (CSS) können Sie Ihre Elemente jedoch nach Wunsch formatieren. Bei Verwendung von Stylesheets müssen Sie zunächst wissen, wie man CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang folgende CSS-Eigenschaften:

Beachten Sie: Bei den Elementen zur Textauszeichnung handelt es sich um sogenannte inline-Elemente. Deshalb bleibt beispielsweise eine Zuweisung von Länge oder Breite zunächst einmal wirkungslos.
Beispiel ansehen …
<!doctype HTML> <html> <head> <meta charset="utf-8"> <title>Beispiele für die Verwendung des <code>s</code>-Elements</title> <style> body { max-width: 40em; font-family: arial, sans-serif; } p, dl { font-size: 1.1em; } s { text-decoration: none; background-color: red; color: white; padding: 0 3px; } p s { background-color: transparent; color: inherit; padding: 0; } s s { text-decoration: underline; color: red; padding: 0 3px; } .korrekt { font-weigth: bold; color: green; } .korrekt span { text-decoration: underline; padding: 0 3px; } </style> </head> <body> <h1>Häufige Fehler</h1> <h2><span class="korrekt">Standard</span> - <s>Standart</s></h2> <dl> <dt>Richtige Schreibweise:</dt> <dd class="korrekt">Standard</dd> <dt>Falsche Schreibweise:</dt> <dd><s>Standart</s></dd> </dl> <p>Wenn man nicht gerade die Art und Weise eines Kiosks meint, ist die Schreibweise <em><s>Standar<s>t</s></s></em> falsch.</p> <p>Die korrekte Schreibweise lautet <em class="korrekt">Standar<span>d</span></em>, weil Standard eben nichts mit Standarte zu tun hat.</p> </body> </html>

[Bearbeiten] siehe auch

  • Referenz: s
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML