Devo marcare cosa significano i blocchi negli attributi data- *?

Question

Devo marcare cosa significano i blocchi negli attributi data- *?

#1 da (6 voti)
#2 da (4 voti)
#3 da (2 voti)

1

Oggi stavo scrivendo una pagina web con un commento dopo l'inizio di ogni sezione importante . Invece di usare un commento, che viene fornito con la sintassi  ingombrante, potrei invece inserirlo in un attributo data-* ? Questo sarebbe più per me di qualsiasi altra cosa, quindi non lo faccio vuoi metterlo in un id o class , ma lascerebbe anche aperto per consentire agli utenti di analizzare più facilmente la pagina.

Esempi

Il mio metodo attuale:

<article> <!-- news -->
    <header> <!-- headline -->
        <h1>How To Fix Everything</h1>
    </header>

    <section> <!-- news body -->
        <p>This is the best magic there is:</p>
        <ol>
            <li>Find a problem</li>
            <li>FIX IT</li>
            <li>Back to step 1</li>
        </ol>
    </section>

    <footer> <!-- social -->
        <a href="//example.com/share">Share on Example.com!</a>
    </footer>
</article>

Il mio metodo proposto:

<article data-news>
    <header data-headline>
        <h1>How To Fix Everything</h1>
    </header>

    <section data-news-body>
        <p>This is the best magic there is:</p>
        <ol>
            <li>Find a problem</li>
            <li>FIX IT</li>
            <li>Back to step 1</li>
        </ol>
    </section>

    <footer data-social>
        <a href="//example.com/share">Share on Example.com!</a>
    </footer>
</article>

html5 comments semantics attributes

posta Supuhstar 22.09.2014 - 22:21

fonte

3 risposte

4

L'attuale specifica HTML5 (PR) dice di attributi dati personalizzati (enfasi mia):

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

E la definizione dell''attributo class contiene:

[…] representing the various classes that the element belongs to […]

[…] authors are encouraged to use values that describe the nature of the content […]

Quindi sembra che class sia più appropriato di data-* per il tuo caso d'uso.

Tuttavia, non sarebbe sbagliato utilizzare invece attributi di dati personalizzati (o in aggiunta). La tua comprensione dei tuoi contenuti è importante, e potresti obiettare che qualcosa è o non è una classe (come solo definita vagamente dalla specifica).

(Il CSS non ha importanza per questa decisione, poiché puoi usare entrambi gli attributi come hook nel tuo CSS.)

(Nota a margine: il tuo uso di section in questo esempio è molto probabilmente sbagliato. Non usarlo per il "corpo del testo" di un article . Utilizza solo section qui se rappresenta un sotto- sezione della sezione genitore, cioè, quando si utilizzano sottotitoli.)

risposta data 23.09.2014 - 12:44

fonte

2

Vorrei usare le classi come quello che stai facendo è aggiungere la classificazione contestuale:

<footer class="social">
  <a href="//example.com/share">Share on Example.com!</a>
</footer>

Può essere letto come un footer contenente funzioni di social media, che ha un significato semantico più specifico di appena <header> .

Questo insieme agli attributi di role può essere usato per rendere l'html migliore per descrivere l'argomento.

risposta data 22.09.2014 - 23:05

fonte

Leggi altre domande sui tag html5 comments semantics attributes

come creare un database in cui nuove colonne devono essere aggiunte periodicamente? È hashing di solo "username + password" sicuro come hashing salato

score 6 · Accepted Answer

Utilizza una classe.

Una classe etichetta i contenuti su di esso se lavori semanticamente. Che tu possa usare un selettore CSS su di esso è, ovviamente, anche buono e utile, ma in generale descrive il ruolo dell'elemento, ed è esattamente quello che stai cercando.

Accanto a ciò, le persone sono abituate a leggere i nomi delle classi come dati semantici che descrivono l'elemento.

Riduce anche il codice duplicato perché si dovrebbe usare comunque una classe anche per il CSS. Anche se in questo momento non hai bisogno della classe in CSS, può essere utile allegarlo. Detto questo, ha un vero significato. Ciò renderà più semplice cambiare gli stili senza modificare le classi nell'HTML, che è importante nei team più grandi.

E infine, rende il codice più leggibile in generale, perché puoi semplicemente abbinare la classe. Questo sembra (ma non è mai stabile) essere, per quanto riguarda le prestazioni, una buona soluzione. In termini di organizzazione del codice, rende le cose molto più facili da gestire.