Contenitori
div
<div>Il codice HTML</div>
<div class="coding-sleep">aiuta a rilassarsi.</div>
Nota:
Il tag <div> è un contenitore generico non semantico.
È utilizzato per dividere e separare contenuti in html.
Il tag <div> è un elemento di tipo blocco.
article
<article>
<h2>Il caffè</h2>
<p>Il caffè ti accompagnerà per tutti i progetti che dovrai realizzare.</p>
</article>
<article>
<h2>Il the</h2>
<p>Il the, forse, lo prenderai la domenica in compagnia del tuo animale domestico.</p>
</article>
<article>
<h2>Un bicchiere d'acqua</h2>
<p>Bisogna pur risciacquare la bocca dopo aver lavato i denti.</p>
</article>
Nota:
Il tag <article> definisce un contenuto indipendente.
Deve aver senso da solo indipendentemente dal resto del contenuto del sito web.
Alcuni esempi di utilizzo:
- Messaggi di blog
- Schede di un prodotto
- Articolo di giornale
Il tag <article> è un elemento di tipo blocco.
aside
<p>Ho deciso di acquistare un bulldog Francese. È pigro come me.
<aside>
<h4>Bulldog Francese</h4>
<p>Il bulldog Francese è una razza di tipo molossoide di taglia piccola.<br>
Il Bulldog Francese è una razza che raggiunge un peso compreso fra gli 8kg e i 14kg.</p>
</aside>
Nota:
Il tag <aside> ha contenuti che sono marginalmente correlati al contenuto circostante.
Spesso, viene utilizzato come barra laterale in un documento.
Il tag <aside> è un elemento di tipo blocco.
details
<details>
<summary>Bulldog francese</summary>
<p>l bulldog francese è una razza di tipo molossoide di taglia piccola.<br>
Il bulldog francese è una razza che raggiunge un peso compreso fra gli 8kg e i 14kg.</p>
</details>
<!-- con l'aggiunta dell'attributo open, l'elemento appare subito aperto. -->
<details open="open">
<summary>Bulldog francese</summary>
<p>l bulldog francese è una razza di tipo molossoide di taglia piccola.<br>
Il bulldog francese è una razza che raggiunge un peso compreso fra gli 8kg e i 14kg.</p>
</details>
Nota:
Il tag <details> permette di avere un elemento con contenuti aggiuntivi che l’utente può aprire e chiudere su richiesta.
L’impostazione predefinita è chiuso. Quando è aperto, si espande e visualizza il contenuto al suo interno.
Aggiungendo l’attributo open="open" l’elemento è aperto e il contenuto visualizzato.
All’interno del tag è possibile inserire qualsiasi tipo di contenuto.
Suggerimento: il tag <details> viene usato assieme al tag <summary> per specificare un titolo visibile per i dettagli.
Il tag <details> è un elemento di tipo blocco.
figcaption
<figure>
<img src="bulldog.jpg" alt="Bulldog Francese">
<figcaption>Fig.1 - Bulldog Francese</figcaption>
</figure>
Nota:
Il tag <figcaption> (opzionale) definisce una didascalia per il contenuto del tag <figure>.
Può essere collocato come primo o come ultimo elemento all’interno del tag <figure>.
Il tag < è un elemento di tipo blocco.figcaption>
figure
<figure>
<img src="bulldog.jpg" alt="Bulldog Francese">
<figcaption>Fig.1 - Bulldog Francese</figcaption>
</figure>
Nota:
Il tag <figure> definisce un contenuto supplementare e autonomo, come illustrazioni, diagrammi, immagini, elenchi di codici, ecc.
Il tag < è un elemento di tipo blocco.figure>
footer
<footer>
<p>Copyright © 1854 - 1892 • Bulletti Ciotole • Tutti i diritti risevati.</p>
</footer>
Nota:
Il tag <footer> definisce il piè pagina di un documento o di una sezione.
Ad esempio, può contenere queste informazioni:
- informazioni sull’autore
- informazioni sul copyright
- informazioni di contatto
- mappa del sito
È possibile avere più tag <footer> nello stesso documento.
Il tag <footer> è un elemento di tipo blocco.
header
<header>
<h1>Il titolo principale della pagina</h1>
<p>Creata da Carlotta Bulletti</p>
</header>
Nota:
Il tag <header> definisce l’intestazione di un documento o di una sezione.
All’interno del tag <header> generalmente possiamo trovare:
- un titolo (
<h1>–<h6>) - logo
- informazioni sull’autore
- navigazione
Attenzione: l’elemento <header> non può essere inserito all’interno del tag <footer>, <address> o di un altro tag <header>.
È possibile avere più tag <header> nello stesso documento.
Il tag <header> è un elemento di tipo blocco.
main
<main>
<h1>Le bevande di tutti i giorni</h1>
<p>Caffè, the e acqua, le bevande preferite di chi non finisce le</p>
<article>
<h2>Il caffè</h2>
<p>Il caffè ti accompagnerà per tutti i progetti che dovrai</p>
</article>
<article>
<h2>Il the</h2>
<p>Il the, forse, lo prenderai la domenica in compagnia del</p>
</article>
<article>
<h2>Un bicchiere d'acqua</h2>
<p>Bisogna pur risciacquare la bocca dopo aver</p>
</article>
</main>
Nota:
Il tag <main> definisce il contenuto principale di una pagina.
Il contenuto presente nel tag <main> deve essere esclusivo. Al suo interno non devono essere presenti elementi che si ripetono in tutte le pagina, come barre laterali, link di navigazione, informazioni sul copyright, loghi del sito e moduli di ricerca.
In una pagina web, il tag <main>, può essere presente una sola volta. Inoltre, non deve essere inserito all’interno di un elemento <article>, <aside>, <footer>, <header>.
Il tag <main> è un elemento di tipo blocco.
mark
<p>Tanto va la <mark>gatta</mark> al lardo che ci lascia lo zampino</p>
Nota:
Il tag <mark> serve a evidenziare il testo.
Il tag < è un elemento di tipo inline.mark>
nav
<nav>
<a href="i-gatti.html">I Gatti</a>
<a href="i-cani.html">I Cani</a>
<a href="i-topi.html">I Topi</a>
<a href="tu.html">Chi scrive codice</a>
</nav>
Nota:
Il tag <nav> definisce una sezione della pagina che contiene i link di navigazione.
Attenzione: non tutti i link di navigazione devono trovarsi all’interno del tag <nav>.
Il tag <nav> è riservato principalmente a grandi menu di navgazione
Il tag <nav> è un elemento di tipo blocco.
section
<section>
<h2>Sviluppatore Web</h2>
<p>Un programmatore è una persona che inizia a contare da zero.</p>
</section>
<section>
<h2>Unicorno</h2>
<p>Sei un designer e anche uno sviluppatore</p>
</section>
Nota:
Il tag <section> definisce una sezione di una pagina web che raggruppa contenuti tematici, generalmente, con un titolo.
Aluni esempi di utilizzo del tag <section>:
- Introduzione
- gruppi di notizie
- informazioni di contatto
Il tag <section> è un elemento di tipo blocco.
summary
<details>
<summary>Bulldog francese</summary>
<p>l bulldog francese è una razza di tipo molossoide di taglia piccola.<br>
Il bulldog francese è una razza che raggiunge un peso compreso fra gli 8kg e i 14kg.</p>
</details>
Nota:
Il tag <summary> definisce l’intestazione visibile per l’elemento <details>. Cliccando l’elemento <summary> si potrà visualizzare/nascondere l’elemento <details>.
Attenzione: il tag <summary> deve essere il primo tag all’interno del tag <details>.
Il tag < è un elemento di tipo blocco.summary>
address
<address>
Scritto da <a href="mailto:carlotta.bulletti@icanirussatori.com">Carlotta Bulletti</a>.<br>
Vieni a trovare Carlotta a:<br>
Parco dei Bulletti<br>
6900 Lugano<br>
Svizzera
</address>
Alcune informazioni di contatto che possono essere inserite all’interno del rag <address> possono essere:
il tag <address> racchiude le informazioni di contatto dell’autore di un documento o di un articolo.
- un indirizzo e-mail
- un URL
- un indirizzo fisico
Attenzione: solitamente il testo all’interno del tag <address> viene visualizzato in corsivo.
Il tag < è un elemento di tipo blocco.address>