Was wird als Best Practice (semantisch) angesehen, wenn Text mit einem Bild zum Verknüpfen mit einer internen Seite oder Kategorie verwendet wird?
Option 1
<nav>
<a href="/kittens">
<img src="kittens.png" />
<span>Kittens</span>
</a>
<a href="/puppies">
<img src="puppies.png" />
<span>Puppies</span>
</a>
</nav>
Option 2
<nav>
<a href="/kittens" class="kittens">Kittens</a>
<a href="/puppies" class="puppies"><span>Puppies</a>
</nav>
wo das CSS definiert ist:
a.kittens {
background-image:url("kittens.png");
width:40px;
height:60px;
}
a.puppies {
background-image:url("puppies.png");
width:40px;
height:60px;
}
Sollte ich einen gestalteten Hintergrund für den Link oder einen <img>
innerhalb des Ankerelements verwenden?
Ich verwende in solchen Szenarien fast immer einen "Option 2" -Ansatz, um meine Präsentation und meinen Inhalt getrennt zu halten .
Es wird empfohlen, Schnickschnack oder dekorative Aspekte Ihrer Website nach Möglichkeit in CSS zu belassen. HTML sollte zum Markieren von Inhalten verwendet werden und nicht zum Hinzufügen abgerundeter Ecken oder anderer visueller Aspekte Ihrer Webseite. Wenn Ihre Kätzchen- und Welpenbilder Ihrer Seite nur Ästhetik verleihen, ist es der richtige Weg, die Bilder in Ihrem CSS zu behalten .
Es gibt jedoch mindestens ein Szenario, in dem ich nicht glaube, dass dies der Fall ist. Bildergalerien. Eine Bildgalerie wäre eine hervorragende Verwendung von „Option 1“ sein, da in diesem Fall der Bildminiaturen sind der Inhalt.
quelle