Che cos'è un tag HTML e un elemento HTML?

Il web design, come ogni settore o professione, ha un linguaggio tutto suo. Quando entri nel settore e inizi a parlare con i tuoi pari, ti imbatterai senza dubbio in una raffica di termini e frasi che sono nuovi per te, ma che fluiscono dalle lingue dei tuoi colleghi professionisti del web. Due dei termini che ascolterai sono "tag" e "elemento" HTML.

Mentre ascoltate questi due termini pronunciati, potreste rendervi conto che vengono usati in qualche modo in modo intercambiabile. Di conseguenza, una domanda che molti nuovi professionisti del Web hanno quando iniziano a lavorare con il codice HTML è "qual è la differenza tra un tag HTML e un elemento HTML?"

Sebbene questi due termini abbiano un significato simile, non sono realmente sinonimi. Quindi qual è la somiglianza con questi due termini? La risposta breve è che entrambi i tag e gli elementi si riferiscono al markup usato per scrivere HTML. Ad esempio, potresti dire che stai usando il

tag per definire un paragrafo o l'elemento per creare collegamenti. Molte persone usano i termini tag ed elemento in modo intercambiabile, e qualsiasi web designer o sviluppatore con cui parli capirà cosa intendi, ma la realtà è che c'è una leggera differenza tra i due termini.

Tag HTML

L'HTML è un linguaggio di marcatura, il che significa che è scritto con codici che possono essere letti da una persona senza che sia necessario prima compilarli. In altre parole, il testo di una pagina Web viene "contrassegnato" con questi codici per fornire le istruzioni del browser Web su come visualizzare il testo. Questi tag di markup sono i tag HTML stessi.

Quando scrivi HTML, stai scrivendo tag HTML. Tutti i tag HTML sono costituiti da un numero di parti specifiche, tra cui:

Un segno di meno che
<
Una parola o un carattere che determina quale tag è stato scritto
Qualsiasi numero di attributi HTML opzionali sotto forma di a
name = "valore" paio
E infine un segno più grande di
>

Ad esempio, ecco alcuni tag HTML:

Questi sono tutti tag di apertura HTML, senza alcun attributo opzionale aggiunto a loro. Questi tag rappresentano:

- definisce un paragrafo
- definisce la pagina come HTML
- definisce una divisione

I seguenti sono anche tag HTML:

Questi esempi includono tutti gli attributi che sono stati aggiunti ai tag HTML di apertura.

Il
La divisione ha un attributo di classe
L'elemento anchor o link include l'attributo "href"
Il tag immagine con un attributo "src"

Per i tag anchor e image, gli attributi non sono in realtà opzionali, sono necessari per la corretta visualizzazione di questi tag. Devi dire al link dove andare (che è ciò che fa "href") e all'immagine cosa mostrare (che è ciò che fornisce l'attributo "src").

Cosa sono gli elementi HTML?

Secondo le specifiche HTML del W3C, a elemento è il componente base di HTML e in genere è composto da due tag : un tag di apertura e un tag di chiusura. Finora abbiamo solo esaminato i tag di apertura, che avvia gli elementi. Per terminare quell'elemento, scrivi i tag di chiusura corrispondenti.

Ad esempio, per l'elemento di paragrafo scrivi questo:

Questo è composto dal tag di apertura che abbiamo visto un momento fa e dal tag di chiusura -

. I tag di chiusura sono in realtà solo i tag di apertura ripetuti, ma con una "barra in avanti" aggiunta direttamente dopo il simbolo "minore di".
Quasi tutti gli elementi HTML hanno un tag di apertura e un tag di chiusura. Questi tag circondano il testo che verrà visualizzato sulla pagina web. Ad esempio, per scrivere un paragrafo di testo, scrivi il testo da visualizzare sulla pagina e poi lo circonda con questi tag:

Qui è dove si scriverebbe il testo del paragrafo che si desidera visualizzare sulla pagina web.

Alcuni elementi HTML non hanno un tag di chiusura. Questi sono chiamati "elementi vuoti". A volte, vengono anche chiamati elementi "singleton" o "void". Gli elementi vuoti sono facili da usare perché devi includere un solo tag nella tua pagina web e il browser saprà cosa fare. Ad esempio, per aggiungere un'interruzione di riga singola alla pagina, si utilizzerà il comando
etichetta.

Un altro elemento comune che include solo un tag di apertura è l'elemento "immagine". Per esempio:

Abbiamo visto questo esempio in precedenza, ma non esiste un tag di chiusura per questo elemento immagine. Il browser semplicemente sostituisce questo codice con l'immagine a cui fa riferimento l'attributo "href". In questo caso, sarebbe "logo.png".

In generale, quando ci riferiamo a un elemento o tag HTML, useremo il termine "elemento" per indicare che ci stiamo riferendo a tutte le parti dell'elemento (sia i tag di apertura che di chiusura). Usiamo solo "tag" quando ci riferiamo solo uno o l'altro. Questo è l'uso corretto di questi due termini e ti incoraggiamo ad usarli correttamente, ma sappi che se li elimini e li interscambia un po ', sarai comunque compreso dai tuoi nuovi compagni di sviluppo web!