Wie füge ich Hervorhebungen oder besondere Formatierungen ohne zu viel CSS ein?
- Hervorhebungen durch semantische HTML-Elemente
- <em> und <strong> für Betonung und Wichtigkeit
- <mark> für farbliche Hervorhebungen
- Inline-Code mit <code>
- Fazit
Hervorhebungen durch semantische HTML-Elemente
Um Text hervorzuheben oder besonders zu formatieren, ist es am besten, die semantischen HTML-Elemente zu verwenden, die für diesen Zweck vorgesehen sind. Diese Elemente benötigen meist nur sehr wenig oder gar kein Extra-CSS, da Browser sie standardmäßig unterschiedlich darstellen.
<em> und <strong> für Betonung und Wichtigkeit
Das <em>-Element steht für eine betonte Stelle im Text und wird in der Regel kursiv dargestellt. Das <strong>-Element signalisiert eine starke Bedeutung und erscheint normalerweise fett. Diese beiden Tags helfen dabei, die Aufmerksamkeit des Lesers zu lenken, ohne dass viel CSS nötig ist.
<mark> für farbliche Hervorhebungen
Wenn du Text farblich hervorheben möchtest, ohne aufwändiges Styling zu betreiben, eignet sich das <mark>-Element. Es hebt den Text mit einer gelben Hintergrundfarbe hervor – vom Browser vorgegeben und barrierefreundlich.
Inline-Code mit <code>
Für kurze Codebeispiele oder Befehle innerhalb des Textes empfiehlt sich das <code>-Element. Es hebt den Text meist in einer Monospace-Schriftart hervor und kann mit minimalem CSS noch besser lesbar gemacht werden.
Fazit
Zusammengefasst solltest du möglichst die semantisch passenden HTML-Tags verwenden. Sie sind einfach zu nutzen, benötigen wenig bis gar kein zusätzliches CSS und verbessern zugleich die Zugänglichkeit und Suchmaschinenoptimierung deiner Webseite. So kannst du Hervorhebungen elegant umsetzen, ohne deine CSS-Datei unnötig aufzublähen.