HTML5 - Tutorial 15: Struttura ed elementi semantici in HTML

💻 #HTML5 - Tutorial 15: Struttura ed elementi semantici in HTML / HTML Semantics

In questo #tutorial del corso di HTML (in italiano) parleremo di struttura ed elementi semantici in HTML5

• L'elemento header / HTML header element
• L'elemento nav/ HTML nav element
• L'elemento section / HTML section element
• L'elemento article / HTML article element
• L'elemento aside / HTML aside element
• L'elemento footer / HTML footer element
• L'elemento details / HTML details element
• L'elemento summary / HTML summary element
• L'elemento figure / HTML figure element
• L'elemento figcaption / HTML figcaption element

📌 Elemento ﹤header﹥

L'elemento ﹤header﹥ definisce un’intestazione per l’intero documento o per una sezione.
Un elemento ﹤header﹥ in genere contiene:
• uno o più elementi di intestazione
• logo o icona
• nome brand
NB: si possono avere più elementi ﹤header﹥ in un documento HTML. Tuttavia, ﹤header﹥ non può essere inserito all'interno di un elemento ﹤footer﹥, ﹤address﹥ o un altro ﹤header.

📌 Elemento ﹤nav﹥

L’elemento ﹤nav﹥ definisce un insieme di collegamenti di navigazione.

NB: Non tutti i collegamenti di un documento HTML devono trovarsi all'interno di un elemento ﹤nav﹥. L'elemento ﹤nav﹥ è spesso usato solo per il blocco principale dei collegamenti di navigazione.

📌 Elemento ﹤section﹥

L’elemento ﹤section﹥ definisce una sezione di un documento HTML, ovvero un raggruppamento tematico di contenuti, generalmente con un’intestazione.

📌 Elemento ﹤article﹥

L’elemento ﹤article﹥ definisce un contenuto indipendente e autonomo.
Un article dovrebbe avere un senso da solo e dovrebbe essere possibile distribuirlo indipendentemente dal resto del sito web.
Esempi di dove è possibile utilizzare un elemento ﹤article﹥

• Post su un forum
• Post su un blog
• Articolo di giornale

📌 Elemento ﹤aside﹥

L’elemento ﹤aside﹥ definisce alcuni contenuti oltre al contenuto in cui è posizionato (come, ad esempio, una barra laterale).

Il contenuto ﹤aside﹥ dovrebbe essere indirettamente correlato al contenuto circostante.

📌 Elemento ﹤footer﹥

L’elemento ﹤footer﹥ definisce un piè di pagina per un documento o una sezione.
Un elemento ﹤footer﹥ in genere contiene:

• informazioni sul copyright
• informazioni sui contatti
• mappa del sito
• link che portano a pagine interne del sito o a documenti correlati

NB: è possibile avere più elementi ﹤footer﹥ in un documento HTML.

📌 Elemento ﹤details﹥

L’elemento ﹤details﹥ definisce dettagli aggiuntivi che l'utente può visualizzare o nascondere.
Viene spesso utilizzato per creare una sorta di widget interattivo che l'utente può aprire e chiudere. Per impostazione predefinita, il widget è chiuso. Quando è aperto, si espande e visualizza il contenuto.

NB: è possibile inserire qualsiasi tipo di contenuto dentro quest’elemento.

📌 Elemento ﹤summary﹥

L’elemento ﹤summary﹥ definisce un’intestazione visibile per un elemento ﹤details﹥
Sarà possibile fare clic sull'intestazione per visualizzare/nascondere i dettagli.

📌 Elemento ﹤figure﹥

L’elemento ﹤figure﹥ definisce un contenuto autonomo, come ad esempio un’illustrazione, un diagramma, una foto e così via…

📌 Elemento ﹤figcaption﹥
L’elemento ﹤figcaption﹥ definisce una didascalia per un elemento ﹤figure﹥

Buona visione

💼 Ing. Francesca Martorana

[shaidend]

Ciao Francesca. Volevo chiederti se le risposte alle domande fatte nel modulo contatti della tua pagina mi arrivano via mail. Grazie, ti stimo molto.