HTML/Textauszeichnung/mark

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Das HTML5-Element mark dient dazu, Textstellen aufgrund einer Nutzeraktion oder vermuteter Absicht des Nutzers zu markieren. Dies unterscheidet die Verwendung des mark-Elements von anderen Elementen zur Texthervorhebung wie etwa strong oder em.

  • IE 9
  • Firefox
  • Chrome
  • Safari
  • Opera
  • HTML5
Beispiel ansehen …
<!doctype HTML> <html> <head> <meta charset="utf-8"> <title>Beispiel zur Verwendung des <code>mark</code>-Elementes</title> <style> #testfeld { width: 30em; height: 20em; padding: 1em; border: 1px solid; background-color: #8FBCFF; } #testfeld div { height: 20em; overflow: hidden; } button { margin: 1em 0; } button:not(:hover) + #testfeld mark { background-color: transparent; color: inherit; } </style> </head> <body> <h1>Ein Konzentrationstest</h1> <p>Markieren Sie mit gedrückter <kbd>Strg</kbd>-Taste alle Buchstaben <strong>b</strong>!</p> <button>Führen Sie die Maus über diesen Button um die Lösung anzuzeigen.</button> <div id="testfeld"><div> d d p d p p d p p p d d p d d d <mark>b</mark> p p d d <!-- … --> </div></div> </body> </html>
Die Browser stellen die mark-Elemente mit unterschiedlichen Farben dar. Diese Darstellung wird unterbunden, wenn der Button nicht gehovert wird. Wenn Sie auch ältere Browser unterstützen wollen, sollten Sie die Formatierung für mark-Elemente in Ihr CSS übernehmen.
/* verbreitete Defaultwerte für mark-Elemente in Browserstylesheets */
mark {
  background-color: yellow;
  color: black;
}

Das mark-Element wird verwendet, um

  • auf Textinhalte hinzuweisen
  • Suchbegriffe in Suchergebnissen hervorzuheben
  • vom Seitenautor vorgenommene Hervorhebungen in Zitaten zu kennzeichen

[Bearbeiten] mark-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.
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML