04 – Elementi HTML

Un elemento HTML è definito da un tag iniziale, alcuni contenuti e un tag finale.

Elementi HTML

L’ elemento HTML è tutto, dal tag iniziale al tag finale:

<tagname> Il contenuto va inserito qui … </tagname>

Esempi di alcuni elementi HTML:

<h1> Il mio primo titolo “Heading”</h1>

<p> Il mio primo paragrafo “paragraph”.</p>

Tag InizialeContenutoTag Finale
<h1>Il mio primo Titolo “Heading”</h1>
<p>Il mio primo paragrafo “paragraph”.</p>
<br>nonenone
Nota: alcuni elementi HTML non hanno contenuto (come l’elemento <br>). Questi elementi sono chiamati elementi vuoti. Gli elementi vuoti non hanno un tag di chiusura!

Elementi HTML nidificati

Gli elementi HTML possono essere nidificati (ciò significa che gli elementi possono contenere altri elementi).

Tutti i documenti HTML sono costituiti da elementi HTML nidificati.

L’esempio seguente contiene quattro elementi HTML ( <html>, <body> e <h1>) <p>

Esempio

<!DOCTYPE html>
<html>
<body>

<h1>Il mio primo Titolo "Heading"</h1>
<p>Il mio primo paragrafo "paragraph".</p>

</body>
</html>

Esempio spiegato

L’ <html> elemento è l’elemento radice e definisce l’intero documento HTML.
Ha un tag di inizio <html> e un tag di fine </html>.
Quindi, all’interno dell’elemento <html> c’è un <body> elemento:

<body>

<h1>Il mio primo Titolo "Heading"</h1>
<p>Il mio primo paragrafo "paragraph".</p>

</body>

L’ <body> elemento definisce il corpo del documento.
Ha un tag di inizio <body> e un tag di fine </body>.
Quindi, all’interno dell’elemento <body> ci sono altri due elementi: <h1> e <p>:

<h1>Il mio primo Titolo "Heading"</h1>
<p>Il mio primo Titolo "paragraph".</p>

L’ <h1> elemento definisce un’intestazione.
Ha un tag di inizio <h1> e un tag di fine </h1>:

<h1>Il mio primo Titolo "Heading"</h1>

L’elemento <p> definito paragrafo.
inizio tag <p> e fine tag </p>:

<p>Il mio primo paragrafo "paragraph."</p>

Non saltare mai il tag di fine

Alcuni elementi HTML verranno visualizzati correttamente, anche se dimentichi il tag di chiusura:

Esempio

<html>
<body>

<p>Questo è un paragrafo "paragraph".
<p>Questo è un altro paragraph

</body>
</html>

Tuttavia, non fare mai affidamento su questo! Se dimentichi il tag finale, potrebbero verificarsi risultati ed errori imprevisti!


Elementi HTML vuoti

Gli elementi HTML senza contenuto sono chiamati elementi vuoti.
Il tag <br> definisce un’interruzione di riga ed è un elemento vuoto senza tag di chiusura:


L’HTML non fa distinzione tra maiuscole e minuscole

I tag HTML non fanno distinzione tra maiuscole e minuscole: <P> significa lo stesso di <p>.
Lo standard HTML non richiede tag minuscoli, ma il W3C consiglia minuscolo in HTML e richiede minuscolo per tipi di documenti più rigidi come XHTML.
C’è da dire che i Motori di ricerca da anni fanno distinsione con il maiuscolo e minuscolo e tiene conto del codice scritto male cioè in maiuscolo e lo penalizza a livello di SEO.
Consiglio: Informati sul SEO fondamentale per avere un sito web che si piazza bene in cima nei motori di ricerca.
In questo Corso useremo sempre i nomi dei tag in minuscolo.


Riferimento tag HTML

Tag reference contiene informazioni aggiuntive su questi tag e sui loro attributi.

TagDescrizione
<html>Definisce la radice di un documento HTML
<body>Definisce il corpo del documento
<h1> a <h6>Definisce le intestazioni HTML
Per un elenco completo di tutti i tag HTML disponibili, visita HTML Tag Reference.

Pubblicato da Luca Bocaletto

Sviluppatore, Creatore, Musicista, Artista, Radiantista, Scacchista.