DOMANDA [HTML5] Aiutatemi/aiutiamoci a capire meglio il sectioning

[MC23]

Come da titolo vorrei che mi aiutaste a fare un po' di chiarezza fra tutti i tag che aiutano il sezionamento di una pagina web: i tag in questione sono address, p, main, aside, section, article, nav, header e footer. Di seguito vi spiego come li ho capiti io, e sperando di non fare errori troppo madornali l'intento è quello di creare una sorta di mini-guida legata a questo ostico argomento, sul quale non son riuscito a venire a capo nonostante le varie documentazioni e le varie guide di siti specializzati in Web Development lette.

Partiamo da quelli "facili":

• nell'header da quel che ho capito ci vanno le informazioni super generali della pagina: dal logo, passando per il titolo per arrivare alla barra di ricerca. Spesso al suo interno si trova il:
• nav: è il contenitore di link di navigazione per la pagina (homepage, paginaPrincipale1, paginaPrincipale2) ecc

Un esempio è appunto il sito di Tom's HW (non il forum): abbiamo infatti la scritta/logo (ossia l'header) e se clicchiamo a sinistra sul pulsante con le tre barrette orizzontali accediamo al nav con le macrosezioni (Apple, Android, VG ecc.)

• footer: è l'opposto dell'header, di solito ci si trovano link quali copyright, contattaci, chi siamo ecc. Spesso contiene:
• address: viene utilizzato per racchiudere indirizzi utili al contatto dell'autore della pagina o del contenuto di ciò che si sta leggendo.

Fin qui tutto chiaro, ma per i rimanenti tag faccio molta più fatica a distinguerli, quindi correggetemi se sbaglio!

• main: da quel che ho capito è la parte principale body della pagina (ed il body è la parte principale della pagina). usabile una sola volta per pagina, rappresenta l'argomento principale che si decide di trattare in quella pagina. Di solito figura dopo l'header e prima del footer
• section: utilizzato per raggruppare fra loro elementi correlati. Nel modo in cui l'ho capito io, section può essere paragonato ad esempio ad un capitolo di un libro. Questo tag utilizza gli heading (da non confondere con header!) nella seguente maniera: <sezione1> <h1> <sezione2> <h2> </sezione2> </sezione1>
• articoli: sono unità a sé stanti, che possono, teoricamente, essere prese e messe in un altro sito senza che la loro comprensione venga sminuita. Un paragone azzardato potrebbe essere quello di considerarlo come un racconto breve, inseribile in diverse collezioni di racconti. Non ho capito il nesso che spesso viene fatto parlando di article e blog, qualche aiuto qui? Inoltre, non avrebbe senso mettere un address dentro un articolo per citare chi l'ha fatto, se ad esempio mi trovo su un sito di scienze con diversi articoli scritti da diverse persone?
  
• aside: collegato direttamente a ciò che lo circonda, ma non così direttamente da finire nel contenuto principale. Un esempio che ho visto fare include informazioni sull'autore o link utili relativi al contenuto principale
  
• p: sembra uno dei più facili ma io proprio non capisco quando usarlo. Dovrebbe indicare un paragrafo, ma potendo scrivere e rendere visibile il contenuto di una pagina html senza utilizzarlo a me viene proprio difficile usarlo

EDIT: ho trovato questa guida che un po' ci semplifica la vita grazie alle numerose immagini presenti

Passando ad un esempio pratico: sto facendo un sito web statico molto semplice, ma questo sezionamento mi sta mandando un po' in crisi. Ad esempio, ho una pagina dedicata all'introduzione di HTML, CSS e JS. Ho una sezione dal titolo (attributo title) "intro per ..." per ognuno dei tre argomenti, seguita da un h1 che dice appunto "Introduzione a...". Per ogni sotto-sezione utilizzo un articolo. Ad esempio, per il CSS ho un articolo per la sintassi generale (circa 5 righe, con titolo "sintassi CSS") ed uno per i prefissi (10 righe circa con titolo "prefissi CSS"). Da quel che ho scritto sopra capisco che è sbagliato, ma ho talmente tanta scelta che non so come procedere. Dovrei avere un main con titolo "Introduzione a JS, CSS e HTML" e poi una sezione per ognuno dei tre, con dentro paragrafi? Oppure un main con dentro articoli ed heading ma senza sezioni e paragrafi?

 

[Utente 16812]

Il tag di paragrafo <p> o il tag "contenitore" <div>, per fare due esempi, possono contenere qualsiasi testo ma in pratica non offrono alcuna informazione utile all'interpretazione dei contenuti o, meglio, non hanno alcuna valenza "semantica" :asd:
Ecco che l'HTML5 fornisce uno strumento, quello dei tag semantici per l'appunto, in grado di dare "significato" ai contenuti di una pagina Web, rendendoli più chiari e migliorando la "leggibilità" del codice :sisi:
I tag semantici si "autoesplicano", quindi potresti, ad esempio, pensare ad una struttura di questo tipo (in cui all'interno di ciascun tag inserisci il contenuto):

<head>
</head>
<body>
<header>
</header>
<nav>
</nav>
<section>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>

Come vedi si tratta di una struttura "significativa", che "esplica" in modo chiaro i contenuti che implementerai :sisi:
A presto, ciao ;)

 

[MC23]

Dopo aver letto la guida che ho linkato alla fine del topic, ho modificato tutta la struttura del sito (w il trova e sostituisci :'>) e mi sono molto avvicinato alla struttura da te indicata per quello che sto facendo, salvo il non utilizzo di aside a cui vedrò di rimediare, se noterò che semanticamenrte serve tale tag. Grazie!

 

[Mursey]

se noterò che semanticamenrte serve tale tag

Solitamente viene usato per le sidebar.

 

[MC23]

Solitamente viene usato per le sidebar.

Ok, terrò a mente questa considerazione, dato che nella documentazione diceva che spesso veniva usato in coppia con article, ma sopra veniva messo dentro section, pensavo il suo utilizzo fosse semanticamente: ho qualcosa da dire che non è strettamente collegato al topic "principale" ma comunque collegato.

 

[Mursey]

ho qualcosa da dire che non è strettamente collegato al topic "principale" ma comunque collegato

Puoi anche usarlo in questo modo.

Sarebbe meglio usare i tag per lo scopo che hanno, ma la natura del HTML non pone nessun vincolo nell'uso che di loro si fa.