Baseline Widely available
Das <mark> HTML-Element repräsentiert Text, der markiert oder hervorgehoben ist für Referenz- oder Notationszwecke, aufgrund der Relevanz des markierten Abschnitts im umgebenden Kontext.
<p>Search results for "salamander":</p>
<hr />
<p>
Several species of <mark>salamander</mark> inhabit the temperate rainforest of
the Pacific Northwest.
</p>
<p>
Most <mark>salamander</mark>s are nocturnal, and hunt for insects, worms, and
other small creatures.
</p>
mark {
/* Add your styles here */
}
Dieses Element enthält nur die globalen Attribute.
AnwendungshinweiseTypische Anwendungsfälle für <mark> umfassen:
<q>) oder Blockzitat (<blockquote>) verwendet wird, zeigt es im Allgemeinen Text an, der von besonderem Interesse ist, aber im Originalmaterial nicht markiert wurde, oder Material, das besondere Aufmerksamkeit erfordert, auch wenn der ursprüngliche Autor es nicht für besonders wichtig hielt. Denken Sie dabei an die Verwendung eines Textmarkers in einem Buch, um Passagen zu markieren, die Sie für interessant halten.<mark> einen Teil des Dokuments an, der wahrscheinlich für die aktuelle Aktivität des Nutzers relevant ist. Dies könnte beispielsweise verwendet werden, um die Wörter hervorzuheben, die mit einer Suchoperation übereinstimmen.<mark> nicht für Syntaxhervorhebungszwecke; verwenden Sie stattdessen das <span>-Element mit entsprechendem CSS.Hinweis: Verwechseln Sie <mark> nicht mit dem <strong>-Element; <mark> wird verwendet, um Inhalte mit einem gewissen Grad an Relevanz zu kennzeichnen, während <strong> Textabschnitte von Wichtigkeit anzeigt.
Das Vorhandensein des mark-Elements wird von den meisten Screenreader-Technologien in der Standardkonfiguration nicht angekündigt. Es kann durch Verwendung der CSS-content-Eigenschaft zusammen mit den ::before und ::after Pseudo-Elementen angekündigt werden.
mark::before,
mark::after {
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
mark::before {
content: " [highlight start] ";
}
mark::after {
content: " [highlight end] ";
}
Einige Personen, die Screenreader verwenden, deaktivieren bewusst das Ankündigen von Inhalten, die zusätzliche Redundanz schaffen. Aus diesem Grund ist es wichtig, diese Technik nicht zu missbrauchen und sie nur in Situationen anzuwenden, in denen das Nichtwissen, dass Inhalt hervorgehoben wurde, das Verständnis erheblich beeinträchtigen würde.
In diesem ersten Beispiel wird ein <mark>-Element verwendet, um einen Text innerhalb eines Zitats zu markieren, der für den Benutzer von besonderem Interesse ist.
<blockquote>
It is a period of civil war. Rebel spaceships, striking from a hidden base,
have won their first victory against the evil Galactic Empire. During the
battle, <mark>Rebel spies managed to steal secret plans</mark> to the Empire's
ultimate weapon, the DEATH STAR, an armored space station with enough power to
destroy an entire planet.
</blockquote>
Dieses Beispiel demonstriert die Verwendung von <mark>, um Suchergebnisse innerhalb einer Passage zu markieren.
<p>
It is a dark time for the Rebellion. Although the Death Star has been
destroyed, <mark class="match">Imperial</mark> troops have driven the Rebel
forces from their hidden base and pursued them across the galaxy.
</p>
<p>
Evading the dreaded <mark class="match">Imperial</mark> Starfleet, a group of
freedom fighters led by Luke Skywalker has established a new secret base on
the remote ice world of Hoth.
</p>
Um die Verwendung von <mark> für Suchergebnisse von anderen potenziellen Nutzungen zu unterscheiden, wendet dieses Beispiel die benutzerdefinierte Klasse "match" auf jeden Treffer an.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4