Welches Tag sollte für ein Logoelement verwendet werden, wenn das Logo ein Text ist?

Ich habe gelesen, dass ein <h1> Tag is inappropriate for a logo. Aber wenn Ihr Logo einfacher Text ist, was sollten Sie verwenden? Ich fühle mich wie <p> und <span> sind auch ungeeignet. Hier ist ein Beispiel:Welches Tag sollte für ein Logoelement verwendet werden, wenn das Logo ein Text ist?

<header> 
    <nav> 
    <a id="logo" href="."> 
     <span>Company Name</span> 
    </a> 
    <a id="linkOne" href="#thingOne"> 
     <img src="…"> 
    </a> 
    <a id="linkTwo" href="#thingTwo"> 
     <img src="…"> 
    </a> 
    <a id="linkThree" href="#thingThree"> 
     <img src="…"> 
    </a> 
    </nav> 
</header>

Vielen Dank!

Quelle

2016-02-12 Mike

Markup Beispiel gegeben, scheinen Sie über einen Link im nav Element zu fragen. Wenn das der Fall ist, sollten Sie kein Überschriftenelement dafür verwenden, da das Überschriftenelement den Abschnitt nav beschriftet (das ist wahrscheinlich nicht das, was Sie vermitteln möchten; wenn Sie eine Überschrift in nav hätten, sollte es wahrscheinlich so etwas wie " Navigation").

In diesem Fall würden Sie kein spezielles Element brauchen überhaupt, die Liste nur die Links in nav (idealerweise innerhalb eines ul):

<header> 
    <nav> 
    <ul> 
     <li><a id="logo" href="." rel="home">Company Name</a></li> 
     <li><a id="linkOne" href="#thingOne"><img src="…" alt="…"></a></li> 
     <li><a id="linkTwo" href="#thingTwo"><img src="…" alt="…"></a></li> 
     <li><a id="linkThree" href="#thingThree"><img src="…" alt="…"></a></li> 
    </ul> 
    </nav> 
</header>

Wenn Sie jedoch über die Site-Namen sprechen, bekommt (typisch) in der Site-weiten Banner/Header auf jeder Seite, mit einem h1 macht Sinn, weil es die Website darstellt, in dem Umfang alle Abschnitte der Seite sein sollte (z. B. die Site-weite Navigation), und es gibt dem Dokument eine Gliederungsebene (die sonst nicht spezifiziert wäre). In diesem Fall darf es nicht Teil der nav sein; Der nächste Abschnitt sollte der body Abschnittswurzel sein.

Semantisch macht es keinen Unterschied, ob der Site Name/das Logo als Bild oder als Text angezeigt wird.Im Falle eines Bildes liefert das Attribut alt äquivalenten Inhalt als Text.

So für eine Site-Logo könnten Sie haben:

<body> 
    <header> 
    <h1><a href="/" rel="home"><img src="…" alt="ACME Inc."></a></h1> 
    </header> 
</body>

Und für einen Site-Namen könnten Sie haben:

<body> 
    <header> 
    <h1><a href="/" rel="home">ACME Inc.</a></h1> 
    </header> 
</body>

Quelle

2016-02-13 01:38:30 unor

Ich glaube, das Tag wäre meistens Ihnen überlassen.

Ich sehe nicht, warum es nicht h1, also Klartext gegeben sein sollte.

Aber analysieren Sie Ihren Fall, das ist was ich tun würde.

Option 1. Verwenden Sie h1 und es als Tag bestimmen, um das Logo zu verwenden. Nie wieder sollte es in der Dom benutzt werden.

Option 2. einen neuen Tag für das Logo erstellen, wie. Diese heißen "Benutzerdefinierte Elemente". Es sollte so etwas gehen:

var logo = document.registerElement('com-logo', { 
    prototype: Object.create(HTMLElement.prototype) 
});

Dann müssten Sie das Logo mit CSS formatieren.

Lese this ein wenig mehr über die benutzerdefinierten Elemente zu lernen! :)

Quelle

2016-02-12 20:23:42

Ich bin nicht sicher über mein eigenes Element zu machen. Ich bin versucht, es direkt im a-Tag zu belassen. Aber wofür habe ich das über das h1-Tag gelesen: http://www.fastcompany.com/3016894/should-your-tag-be-your-logo – Mike

Es gibt keine „semantische“ Art und Weise (das heißt Syntax) ein Logo in HTML-Markup, so auf einer grundlegenden Ebene gibt es keine richtigen oder falschen Weg ist. Das heißt, ich würde kein <h1> für ein Logo verwenden, da die Überschrift-Tags Ihr HTML strukturieren sollten.

Normalerweise verwende ich eine einfache <div> oder <a> mit dem Logo als Hintergrundbild, weil ich denke, das ist der schönste Weg, um es von Screenreadern zu verstecken. Ehrlich gesagt, sehe ich keinen großen Wert darin, das Logo als in eine <section> zu setzen, da ein Abschnitt eine thematische Gruppierung von Inhalten umfassen sollte. In Ihrem Fall würde ich Ihre <a> als inline-block formatieren und das Logo als Hintergrundbild setzen.

Quelle

2016-02-12 20:37:30

Das Logo ist Klartext, kein Bild. – Mike

Dann warum nicht einfach ein -Tag verwenden? –

Das habe ich getan. Einfach, oder? Ich untersuchte nur, ob es die beste semantische Wahl war. Vielleicht war es eine dumme Frage. – Mike

Welches Tag sollte für ein Logoelement verwendet werden, wenn das Logo ein Text ist?

Antwort

Verwandte Themen