Quale tag HTML semantico per la visualizzazione di note a margine e ammonizioni?

Question

Sto scrivendo un tutorial online con una sorta di note a margine o come lo chiamano "ammonizioni" simili a quelle del tutorial di Django: https://docs.djangoproject.com/en/dev/intro/tutorial01/ (intendo le caselle con una cornice verde e un'icona di nota).

Quale tag HTML dovrei usare per racchiudere tali note per aggiungere un significato semantico di una nota che potrebbe essere utile leggere in un dato punto di un'esercitazione, ma non fa parte del flusso del tutorial principale?

Notevole, il tag deve consentire di includere elementi di blocco.

Answer 1

In HTML5 (supportato da tutti i browser moderni), il tag è aside.

Da http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-aside-element:

La parte elemento rappresenta una sezione di una pagina che consiste di contenuto che è tangenzialmente correlato al contenuto attorno elemento a parte, e che potrebbe essere considerato separato dal contenuto. Tali sezioni sono spesso rappresentate come barre laterali nella tipografia stampata.

L'elemento può essere utilizzato per effetti tipografici come le virgolette pull o barre laterali, per la pubblicità, per i gruppi di elementi NAV, e per altri contenuti che è considerato separato dal contenuto principale della pagina.

Non è appropriato utilizzare l'elemento aside solo per parentesi, poiché quelle fanno parte del flusso principale del documento.

Questo è un elemento a livello di blocco e racchiude qualsiasi cosa un elemento a livello di blocco di solito può (vale a dire quasi tutto). È essenzialmente un "div semantico".

Answer 2

Credo che la risposta accettata non sia del tutto corretta. Secondo il HTML5 working draft, l'elemento <aside> può essere utilizzato per marcare le note laterali in alcuni, ma non tutti i casi:

1. <aside> è appropriata se la nota a margine "potrebbe essere considerato distinto dal contenuto", per esempio materiale di base sulla Svizzera in una notizia molto più lunga, o una citazione in un articolo più lungo. (esempi dal documento W3C)
2. <aside> non è appropriato se la nota a margine è "una parentetica". Il W3C non fornisce esempi di cosa significhi. Un'interpretazione ristretta sarebbe tutto ciò che viene messo tra parentesi, tra virgole o tra trattini.

Se si vuole interpretare le specifiche W3C rigorosamente, non tutte le note a margine in Django tutorial può essere contrassegnato con <aside>. Ad esempio, la nota intitolata "non corrisponde a quello che vedi?" non può essere considerato come separato dal contenuto, poiché non ha senso senza il contenuto accanto ad esso. Probabilmente, "Dove dovrebbe vivere questo codice?" non è anche un <aside>, in quanto menziona "questo codice", che lo lega al contenuto.

A mio parere, la definizione del W3C è inutilmente confusa e restrittiva.La definizione del dizionario di a parte è "una partenza temporanea da un tema principale o argomento", e le specifiche dovrebbero limitarsi a questo, piuttosto che introdurre sottili distinzioni. Naturalmente, non vi è alcun motivo per cui non è possibile utilizzare <aside> per tutti i sidenotes, se rende più semplice il codice. Pensala come una disobbedienza civile. :)

---

preventivo Rilevante:

L'elemento parte rappresenta una sezione di una pagina contenente contenuto che è tangenzialmente correlato al contenuto attorno elemento a parte, e che potrebbe essere considerato separato da quel contenuto. Tali sezioni sono spesso rappresentate come barre laterali nella tipografia stampata.

L'elemento può essere utilizzato per effetti tipografici come le virgolette pull o barre laterali, per la pubblicità, per i gruppi di elementi NAV, e per altri contenuti che è considerato separato dal contenuto principale della pagina.

Nota: non è appropriato utilizzare l'elemento aside solo per parentesi, poiché quelle fanno parte del flusso principale del documento.