Elemento HTML

Un elemento HTML, in informatica, spesso chiamato anche tag HTML, indica una struttura in un documento HTML e un metodo per ordinare gerarchicamente i contenuti. Più specificamente è un elemento SGML che soddisfa i requisiti di uno o più DTD HTML.

Descrizione

Gli elementi possono rappresentare intestazioni, paragrafi, collegamenti ipertestuali, elenchi, form, oggetti multimediali incorporati e diverse altre strutture.

Gli elementi vuoti vengono chiusi aggiungendo una "/", come nei tag di chiusura. Per questioni di retrocompatibilità è consigliato mettere uno spazio prima della barra.

Alcuni elementi, sebbene non siano contenuti in nessun DTD ufficiale, sono supportati da alcuni web browser e utilizzati da pagine web. Tali elementi possono essere ignorati o visualizzati impropriamente da browser che non li supportano.

Tipologie

Gli elementi HTML consistono generalmente di quattro parti:

un tag di apertura che definisce l'inizio di un elemento;

uno o più attributi di tale elemento con i loro rispettivi valori;

il contenuto informativo da visualizzare;

un tag di chiusura: è opzionale per molti elementi, in pochissimi casi un "elemento vuoto" non ha contenuti o tag di chiusura. Gli elementi XHTML vanno sempre chiusi.

Annidamento

Molti elementi HTML possono essere "nidificati". La nidificazione è più facilmente comprensibile attraverso esempi:

<p>You<em>rock</em></p>

ha un elemento <em> dentro un elemento <p>. La situazione può complicarsi, per esempio

<h1>Children that <em>do <span style="color:red">not</span> clean up</em> their rooms</h1>

Si possono nidificare gli elementi fin quando si vuole ma i tag devono essere chiusi nell'ordine inverso nel quale sono stati aperti.

Sbagliato

<p>Lucy kissed <em>Jimmy</p></em>

Corretto

<p>Lucy kissed <em>Jimmy</em></p>

La possibilità di nidificare è regolamentata da alcune regole che definiscono se un elemento è un block-level o inline.

Elementi della struttura del documento

<html>...</html>

Delimita un documento HTML (invece di un documento XML o altro). Questi tag sono opzionali in HTML, ma alcuni browser e altre utility possono non riconoscere il documento senza di essi.

<head>...</head>

Delimita la sezione header (d'intestazione) del documento che contiene informazioni sulla pagina. Questi tag sono opzionali in HTML; se omessi l'esistenza dell'header può essere dedotto in altri modi.

<body>...</body>

Delimita il corpo del documento che contiene i contenuti visualizzati nella pagina. Come <html> e <head> i tag non sono necessari se il documento è in HTML.

Elementi block-level ed elementi inline

Un elemento block-level inizia di solito su una nuova riga mentre un elemento inline di solito no. Un elemento block-level può contenere altri elementi sia di tipo block-level sia di tipo inline mentre un elemento inline può contenere solo altri elementi di tipo inline. Esempi di elementi block-level sono paragrafi, elenchi, tabelle, intestazioni e il contenitore generale <div>. Gli elementi di blocco sono elementi con un contenitore rettangolare composto del contenuto, padding, border e padding esterno (margin). Si possono specificare le sue dimensioni con i CSS. Gli elementi in linea (ad esempio STRONG, ITALIC e UNDERLINE) non creano blocchi, vengono visualizzati sulla stessa linea con i contenuti del tag adiacenti. La larghezza e l'altezza dell'elemento "in linea" dipende solo dal suo contenuto, non si possono specificare le sue dimensioni con i CSS.

Elementi d'intestazione in HTML 4.01

<title>...</title>

Indica il titolo della pagina. Questo elemento è richiesto in ogni documento HTML e XHTML. Differenti user agent e sistemi operativi visualizzano il titolo in maniera differente. I browser web di solito lo visualizzano nella barra del titolo quando la finestra è aperta e nella barra delle applicazioni quando è minimizzato. Può essere il nome predefinito quando si salva la pagina o altro. Al contrario degli altri tag, l'elemento title non permette di contenere altri tag. I browser visualizzeranno i tag inclusi come sono. Per esempio <title>My <b>first</b> webpage</title> verrebbe visualizzato come "My <b>first</b> webpage", e non come "My first webpage".

<meta>...</meta>

Delimita i metadata e può essere utilizzato per specificare la descrizione della pagina, parole chiave e una forma particolare <meta http-equiv="foo"> è utilizzata per specificare comandi che devono essere spediti come header HTTP.

<link>

<link /> (in XTML)

Specifica qualsiasi tipo di link per un documento come collegamenti precedenti e successivi o versioni alternative. È uso più comune collegare un Foglio di stile esterno alla pagina, nel modo seguente:

<link rel="stylesheet" type="text/css" href="url ">

<base>

<base/> (in XTML)

Specifica i valori base per i collegamenti, come la destinazione o il target.

<script>...</script>

Utilizzato per includere JavaScript o altri script nel documento.

<style>...</style>

Specifica un foglio di stile per il documento, solitamente:

<style type="text/css">...</style>

con dati sullo stile o riferimenti come

/*<![CDATA[*/ @import "url "; @import "url "; /*]]>*/

Elementi body definiti in HTML

Tutti i tag body non sono elementi block-level e non possono essere contenuti all'interno di un elemento inline.