Eine CSS-Klasse weniger

Ich habe heute meinen HTML-Code leicht verändert. Aber erstmal von vorne. Meine linke Navigation (mainmenu) habe ich als Liste aufgebaut:

<ul>
<li><a href="/link_1/">Link 1</a></li>
<li><a href="/link_2/">Link 2</a>
<ul>
<li><a href="/link_2/sub_1/">Sub 1</a></li>
<li><a href="/link_2/sub_2/">Sub 2</a></li>
</ul>
</li>
<li><a href="/link_3/">Link 3</a></li>
</ul>

Das kann ich mit CSS sehr gut formatieren und ist auch ohne CSS sehr gut lesbar. Als nächstes habe ich den aktuellen Navigationspunkt mit einer Klasse active gekennzeichnet.

<style type="text/css">
.active { font-weight: bold; color: #f00; }
</style>
<ul>
<li><a href="/link_1/">Link 1</a></li>
<li><a class="active" href="/link_2/">Link 2</a>
<ul>
<li><a href="/link_2/sub_1/">Sub 1</a></li>
<li><a class="active" href="/link_2/sub_2/">Sub 2</a></li>
</ul>
</li>
<li><a href="/link_3/">Link 3</a></li>
</ul>

Dadurch wurde der Link „Link 2“ und „Sub 2“ über CSS entsprechend gekennzeichnet und jeder konnte sofort sehen, wo er sich befindet. Wirklich jeder? Nein! Für Besucher ohne CSS ist das nicht ersichtlich. Warum mache ich das eigentlich so umständlich? Mit <strong> habe ich doch den gleichen Effekt. Ich will dem Besucher zeigen, wo er sich befindet. Ob der Text jetzt Rot oder Schwarz ist, ist egal – solange er z.B. sich durch Fettdruck von den anderen Navigationspunkten abhebt.

<style type="text/css">
strong a { font-weight: bold; color: #f00; }
</style>
<ul>
<li><a href="/link_1/">Link 1</a></li>
<li><strong><a href="/link_2/">Link 2</a></strong>
<ul>
<li><a href="/link_2/sub_1/">Sub 1</a></li>
<li><strong><a href="/link_2/sub_2/">Sub 2</a></strong></li>
</ul>
</li>
<li><a href="/link_3/">Link 3</a></li>
</ul>

Die CSS-Eigenschaften der ursprünglichen Klasse kann ich direkt übernehmen. Statt .active verwendet ich als Selektor einfach strong a (bzw. strong a:link, strong a:visited …). Zudem ist der Text des Navigationspunkt als „wichtig“ markiert – und da es meistens inhaltlich zur Seite paßt könnte sich das positiv auf Suchmaschinen auswirken (ist nur eine Vermutung).

Warum ich <strong><a>..</a></strong> und nicht <a><strong>..</strong></a> schreibe? Ich gebe <a> im Mainmenu über CSS gerne die Eigenschaft display: block; und verwenden border und background. Dadurch, dass <strong> außerhalb von <a> ist, kann ich über den CSS-Selektor strong a sehr einfach z.B. eine andere Hintergrundfarbe für den gekennzeichneten Menueintrag verwenden.

Warum ist der aktuelle Menüpunkt verlinkt? Okay, Links die auf sich selber zeigen könnten den Besucher verwirren. Auch wurde mir von dieser Methode gelegentlich abgeraten. Es sei kein Mehrwert. Besucher und Suchmaschinen würde man nur verwirren.
Ich bin der Meinung, dass ich dem Besucher damit die Möglichkeit gebe auf übergeordnete Bereiche oder die Startseite eines Menüeintrags zurückspringen zu können – nicht jeder Inhalt ist im Mainmenu vorhanden – auch wenn man gerade auf dieser Startseite ist. Durch <strong> kann der Besucher sehen, wo er sich befindet und ich glaube nicht, dass ein Besucher nochmal auf den Menupunkt klickt, den er gerade ausgewählt hatte.