Frage zu semantischem Code bzgl. A-Element

Jan-Frederik Stieler

Jan-Frederik Stieler

Monsterator
Moderator
Frage zu semantischem Code

Hallo,
mal wieder eine Frage zur Semantik. Wenn ich eine Seite mit semantischen Code aufbaue und die Seite aber ansonsten mit CSS style, dann bekomme ich doch Probleme bei Leuten bei denen CSS deaktiviert ist, oder Geräten die kein CSS unterstützen.
Als Beispiel nehme ich jetzt mal das <a>-Element. Die Zustände dieses Elementes definiere ich in einer CSS-Datei, nun kann diese aber nicht angezeigt werden somit sieht doch auch keiner welcher Link gerade aktiv ist.
Wie habe ich mich jetzt z.B. in diesem Fall zu verhalten? Soll ich die Zustände wieder im Body-Element definieren?

Eine weitere Frage ist ich habe zwei überschriften welche gleich gewichtet werden und untereinander stehen. Sollte ich dann beide in ein <h1>-Element einbinden oder zwei <h1>-Elemente verwenden?

Viele Grüße
 
Zuletzt bearbeitet:
Hallo,

Semantik hat mit CSS wenig zu tun. Das A-Element ist für jeden Browser ein Hyperlink und verliert seine Bedeutung nicht durch CSS-Formatierung, egal ob er grün oder blau geschrieben ist. Mit CSS werden die HTML-Elemente nur ausgestaltet und formatiert.

Bei Überschriften wird den Elementen H1 ... H6 eine Rangfolge zugewiesen. Ich würde dir raten H1 möglichst nur einmal auf der Seite zu verwenden. Allerdings ergibt sich das aus dem Kontext deiner Seite, ob du sie in Abschnitte (sections) untergliedern und diesen Abschnitten eine Überschrift mit entsprechender Rangordnung zuweisen kannst.
Zitat aus der HTML-Spezifikation des W3C (The global structure of an HTML document):
A heading element briefly describes the topic of the section it introduces.
Zum Vergrößern anklicken....
So sollte man also eine Überschrift inhaltlich gestalten.

Guter Artikel zu diesem Thema: Semantics, HTML, XHTML, and Structure
 
Hi!

Das h1-Tag solltest du auf jeden Fall maximal 1 Mal pro Seite verwenden, was sowohl aus semantischer Sicht, als auch für Suchmaschinen mehr Sinn macht. Was willst du denn darin alles platzieren? Denn generell gilt meines Erachtens, dass man Überschriften kurz und knackig formulieren sollte.
Von welchen Geräten sprichst du denn, wenn du meinst, dass diese kein CSS unterstützen?

Lg,
Manuel ;-]
 
Hi,
also es ist so das es zwei gleichwertige Sätze sind die nur durch einen Umbruch geteilt sind.
Also Kunde... Branche: .... .
Und die Frage war ja ob ich hier beide von einem h1-Element einfasse oder zwei verwende?
Wenn ich euch jetzt richtig verstehe soll ich ein h1 um beide laufen lassen?
Was die Gerte betrifft so gibt es doch bestimmt welche die kein CSS unetrstützen. Ich kenn jetzt selbst keins und warscheinlich ist es auch etwas übertrieben von mir.

Gruß
 
Jan-Frederik Stieler hat gesagt.:
Hi,
also es ist so das es zwei gleichwertige Sätze sind die nur durch einen Umbruch geteilt sind.
Also Kunde... Branche: .... .
Und die Frage war ja ob ich hier beide von einem h1-Element einfasse oder zwei verwende?
Wenn ich euch jetzt richtig verstehe soll ich ein h1 um beide laufen lassen?...
Zum Vergrößern anklicken....
Diese Frage kann man nur beantworten, wenn man den Seitenkontext kennt. Ich vermute mal, dass die Seite doch etwas mehr Inhalt als nur Überschrift und zwei Sätze hat.

Folgende Beispielstrukturen wären denkbar:
HTML: 
<body>

    <h1>Branche: Sanitärporzellan</h1>
    <p><!-- globaler Branchentext --></p>

    <div id="produzenten">

        <h2>Hersteller: Billi Boy und Blech</h2>
        <p><!-- globaler Hersteller-Text --></p>

            <h3>Produkt_1</h3>
            <p><!-- Produktbeschreibung --><p>
            <h3>Produkt_2</h3>
            <p><!-- Produktbeschreibung --><p>
        
        <h2>Hersteller: Durawas</h2>
        <p><!-- globaler Hersteller-Text --></p>

            <h3>Produkt_1</h3>
            <p><!-- Produktbeschreibung --><p>

    </div>

</body>
oder aber
HTML: 
<body>

    <h1>Hersteller_1</h1>
    <p><!-- globaler Hersteller-Text --></p>

    <h2>Technik und Technologie</h2>
    <p><!-- technische Möglichkeiten des Herstellers --></p>
    
    <div id="branchen">

        <h2>Branche: Raumfahrtzubehör</h2>
            <h3>Produkt_1</h3>
            <p><!-- Produktbeschreibung --><p>
            <h3>Produkt_2</h3>
            <p><!-- Produktbeschreibung --><p>

        <h2>Branche: Autoersatzteile</h2>
            <h3>Produkt_1</h3>
            <p><!-- Produktbeschreibung --><p>

        <h2>Branche: Haushaltbedarf</h2>
            <h3>Produkt_1</h3>
            <p><!-- Produktbeschreibung --><p>
            <h3>Produkt_2</h3>
            <p><!-- Produktbeschreibung --><p>

    </div>

</body>
oder ... oder ... oder ...
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück