Quale tag dovrebbe essere usato per un elemento logo se il logo è testo?

Ho letto che un tag <h1>is inappropriate for a logo. Ma se il tuo logo è in chiaro, cosa dovresti usare? Mi sento come <p> e <span> sono anche inadatte. Ecco un esempio:Quale tag dovrebbe essere usato per un elemento logo se il logo è testo?

<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>

Grazie!

fonte

2016-02-12 Mike

Dato il tuo esempio di markup, sembra chiedere un collegamento nell'elemento nav. In questo caso, non dovresti usare un elemento di intestazione per questo, perché l'elemento di intestazione etichetterebbe la sezione nav (probabilmente non è ciò che vuoi trasmettere, se vuoi avere un'intestazione in nav, probabilmente dovrebbe essere qualcosa del tipo " Navigazione").

In tal caso, non avrebbe bisogno di un elemento di speciale a tutti, basta elencare i link a nav (idealmente entro un 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>

Tuttavia, se si parla del nome del sito che ottiene (tipicamente) mostrato nel banner/intestazione del sito in ogni pagina, utilizzando un h1 ha senso, perché rappresenta il sito, in cui devono essere incluse tutte le sezioni della pagina (ad esempio, la navigazione a livello di sito), e conferisce al documento una struttura di livello superiore (altrimenti non specificato). In tal caso non deve far parte dello nav; la sezione più vicina dovrebbe essere la radice di sezionamento body.

Semanticamente, non fa alcuna differenza se il nome/logo del sito è mostrato come immagine o come testo.In caso di un'immagine, l'attributo alt fornisce contenuti equivalenti come testo.

Così per un logo del sito si potrebbe avere:

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

E per il nome del sito che si potrebbe avere:

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

fonte

2016-02-13 01:38:30 unor

Credo che il tag sarebbe principalmente da te.

Non vedo perché non dovrebbe essere h1, dato che è testo normale.

Ma analizzando il caso, questo è quello che vorrei fare.

Opzione 1. Utilizzare h1 e determinarlo come tag da utilizzare per visualizzare il logo. Mai più dovrebbe essere usato nella dom.

Opzione 2. Creare un nuovo tag per il logo, ad esempio. Questi sono chiamati "Elementi personalizzati". Dovrebbe andare qualcosa del genere:

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

Quindi si dovrebbe formattare il logo con CSS.

Leggi this per saperne un po 'di più sugli elementi personalizzati! :)

fonte

2016-02-12 20:23:42

io non sono sicuro di fare il mio proprio elemento. Sono tentato di lasciarlo direttamente nel tag. Ma per quanto riguarda quello che ho letto sul tag h1: http://www.fastcompany.com/3016894/should-your-tag-be-your-logo – Mike

Non esiste un modo "semantico" (cioè la sintassi) per contrassegnare un logo in HTML, quindi su un livello fondamentale non esiste un modo giusto o sbagliato. Detto questo, non userei un <h1> per un logo, dal momento che i tag di intestazione dovrebbero strutturare il tuo HTML.

Io di solito uso un semplice <div> o <a> con il logo come immagine di sfondo perché penso che sia il modo migliore per nasconderlo dagli screen reader. Francamente non vedo molto valore nel mettere il logo come <img> in un <section> poiché una sezione dovrebbe comprendere un raggruppamento tematico di contenuti.

Nel tuo caso, formattarei il tuo <a> come inline-block e impostare il logo come immagine di sfondo.

fonte

2016-02-12 20:37:30

Il logo è testo semplice, non un'immagine. – Mike

Allora perché non usare solo un tag ? –

Questo è quello che ho finito per fare. Semplice, vero? Stavo solo verificando se fosse la migliore scelta semantica. Forse era una domanda sciocca. – Mike

Quale tag dovrebbe essere usato per un elemento logo se il logo è testo?

risposta

Problemi correlati