Elemento HTML: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
mNessun oggetto della modifica |
m →Vari: + punto fermo in didascalia, +parm lingua |
||
| (258 versioni intermedie di oltre 100 utenti non mostrate) | |||
Riga 1:
{{Organizzare|Bisogna riorganizzare la struttura della pagina|informatica|febbraio 2025}}
[[File:HTML element content categories.svg|miniatura|Categorie in cui sono divisi gli elementi 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ù [[Document Type Definition|DTD]] HTML.<ref name=":1">{{Cita web|url=https://www.ocean-team.com/upload/immagini/certificazioni/e77dd6f7bc9604ae793a68a9ce4d0f64.pdf|titolo=pdf|accesso=23 novembre 2021|dataarchivio=20 gennaio 2021|urlarchivio=https://web.archive.org/web/20210120044935/http://www.ocean-team.com/upload/immagini/certificazioni/e77dd6f7bc9604ae793a68a9ce4d0f64.pdf|urlmorto=sì}}</ref>
== Descrizione ==
Gli elementi possono rappresentare ''intestazioni'', ''paragrafi'', ''[[collegamento ipertestuale|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.<ref name=":0">Come consigliato dal [http://www.w3c.it/traduzioni/xhtml1-it.html#guidelines W3C Appendix C. Linee guida per la compatibilità con HTML]</ref>
Alcuni elementi, sebbene non siano contenuti in nessun DTD ufficiale, sono supportati da alcuni [[web browser]] e utilizzati da [[pagina web|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 "[[Annidamento (informatica)|nidificati]]". La nidificazione è più facilmente comprensibile attraverso esempi<ref>{{Cita web|url=https://www.andreaminini.com/html/annidamento-tag-html|titolo=L'annidamento dei tag in Html|accesso=2021-11-23}}</ref>:
:<code><nowiki><p>You<em>rock</em></p></nowiki></code>
ha un elemento <code><nowiki><em></nowiki></code> dentro un elemento <code><nowiki><p></nowiki></code>. La situazione può complicarsi, per esempio
:<code><nowiki><h1>Children that <em>do <span style="color:red">not</span> clean up</em> their rooms</h1></nowiki></code>
Si possono nidificare gli elementi fin quando si vuole ma i tag devono essere chiusi nell'ordine inverso nel quale sono stati aperti.
Riga 22 ⟶ 31:
:<code><nowiki><p>Lucy kissed <em>Jimmy</em></p></nowiki></code>
La possibilità di nidificare è regolamentata da alcune regole che definiscono [[#Elementi block-level ed elementi inline|se un elemento è un
== Elementi
;<code><html>...</html></code>
:Delimita un documento HTML (invece di un documento [[XML]] o altro).
;<code><head>...</head></code>
:Delimita la sezione header (d'intestazione) del documento che contiene informazioni sulla pagina.
;<code><body>...</body></code>
:Delimita il corpo del documento che contiene i contenuti visualizzati nella pagina. Come <code><html></code> e <code><head></code> i tag non sono necessari se il documento è in HTML.
== Elementi block-level ed elementi inline ==
[[File:Boxmodel-html.png|alt=Boxmodel|miniatura|Il ''box-model'' è una scatola che avvolge ogni elemento HTML<ref>{{Cita web|url=https://www.w3schools.com/css/css_boxmodel.asp|titolo=CSS Box Model|accesso=31 gennaio 2021}}</ref>.]]
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 <code><nowiki><div></nowiki></code>. 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<ref>{{Cita web|url=https://www.w3schools.com/html/html_blocks.asp|titolo=HTML Block and Inline Elements|lingua=en|accesso=2021-11-23}}</ref>.
== Elementi d'intestazione in HTML 4.01 ==
{{Vedi anche|Meta tag}}
;<code><title>...</title></code>
:Indica il titolo della pagina. Questo elemento è richiesto in ogni documento HTML e XHTML. Differenti [[user agent]] e [[Sistema operativo|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 <code><title>My <b>first</b
;<code><meta>...</meta></code>
Riga 41 ⟶ 56:
;<code><link></code>
;<code><link /></code> (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:
:;<code><link rel="stylesheet" type="text/css" href="''url'' "></code>
;<code><base></code>
;<code><base/></code> (in
:Specifica i valori base per i collegamenti,
;<code><script>...</script></code>
:Utilizzato per includere [[JavaScript]] o altri script nel documento.
;<code><style>...</style></code>
:Specifica un [[foglio di stile]] per il
::;<code><style type="text/css">...</style></code>
:con dati sullo stile o riferimenti come
::;<code>/*<![CDATA[*/ @import "''url'' "; @import "''url'' "; /*]]>*/</code>
== 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<ref name=":1" /><ref>{{Cita web|url=http://www-db.deis.unibo.it/courses/TW/DOCS/w3schools/html/html5_semantic_elements.asp.html|titolo=HTML5 Semantic Elements|sito=www-db.deis.unibo.it|accesso=2021-11-23}}</ref>.
=== Intestazioni ===
;da <code><h1></h1></code> a <code><h6></h6></code>
:Intestazioni (o Titoli) a diversi livelli. Si utilizza <code><h1></code> per il livello massimo di intestazione (la sezione principale), <code><h2></code> per il successivo livello sottostante (sottosezione), <code><h3></code> per un livello al di sotto del precedente e così via. Il livello più basso d'intestazione è <code><h6></code>.
:La maggior parte dei browser web mostreranno <code><h1></code> come un testo grande con un [[tipo di carattere|font]] differente e <code><h6></code> come testo piccolo in grassetto ma questo comportamento può essere modificato con i fogli di stile CSS. Gli elementi d'intestazione non sono utilizzabili solamente per creare testo grande o in grassetto: descrivono anche la struttura del documento e l'organizzazione. Alcuni programmi li utilizzano per generare indici e outline.
=== Testo strutturato ===
Molti elementi HTML sono realizzati per cambiare la struttura o il significato del testo. Alcuni sono block-level ma la maggior parte sono inline e possono essere inclusi nel normale flusso del testo.
==== Block-level ====
;<code><p>...</p></code>
:Crea un paragrafo. In HTML il tag di chiusura non è opzionale.
;<code><blockquote>...</blockquote></code>
:Crea una citazione, convenzionalmente visualizzata indentata ma non realizzata per indentare il testo. Può automaticamente aggiungere
;<code><pre>...</pre></code>
:Crea testo pre
;<code><address>...</address></code>
:Usato per delimitare informazioni sull'indirizzo.
==== Inline ====
;<code><em>...</em></code>
;<code><strong>...</strong></code>
:''Enfasi'' (convenzionalmente visualizzato in corsivo) e '''enfasi forte''' (convenzionalmente visualizzato in grassetto).
;<code><q>...</q></code>
:Una breve
;<code><code>...</code></code>
:Un pezzo di
;<code><del>...</del></code>
:Testo cancellato.
;<code><ins>...</ins></code>
:Testo inserito. Spesso utilizzato per
;<code><cite>...</cite></code>
:Citazione. Riferimento ad una citazione di una fonte od elemento all'interno del testo. ''CITE'' è stato accettato all'interno dell{{'}}''HTML 2.0''<ref>[https://tools.ietf.org/html/rfc1866 RFC 1866 - Hypertext Markup Language - 2.0<!-- Titolo generato automaticamente -->]</ref>.
;<code><dfn>...</dfn></code>
;<code><samp>...</samp></code>
Riga 97 ⟶ 114:
;<code><sub>...</sub></code>
;<code><sup>...</sup></code>
:Crea un testo <sub>
=== Elenchi ===
;<code><dl>...</dl></code>
:Crea un elenco di descrizioni, formate da coppie di termini (o nomi) e rispettiva descrizione (o valore).
:;<code><dt>...</dt></code>
::Crea un termine
:;<code><dd>...</dd></code>
::Crea una
;<code><ol>...</ol></code>
;<code><ul>...</ul></code>
:
Per <code> Per <code>ul</code>, CSS può essere utilizzato per definire il marcatore dell'elenco: <code>{list-style-type: foo}</code>. Il marcatore predefinito è un punto annerito :;<code><li>...</li></code>
::Crea un oggetto dell'
;<code><dir>...</dir></code> (deprecato)
:Delimita l'elenco di una cartella. In disuso in favore di <code><ul></code>.
Riga 117 ⟶ 135:
:Crea un elenco di menu. Dovrebbe essere più sintetico di un elenco <code><ul></code>, ma non è ben supportato. In disuso in favore di <code><ul></code>.
===
===== Elenchi ordinati =====
Per creare un elenco ordinato in HTML si usa un elemento '''<code>ol</code>''' contenente un elemento '''<code>li</code>''', per ognuna delle voci dell'elenco stesso. Ad esempio:
{| border="0" width="50%"|
!Codice HTML
|-
|
<pre>
<ol>
<li>Giovanni</li>
<li>Luca</li>
<li>Marco</li>
<li>Giacomo</li>
</ol>
</pre>
|
<ol>
<li>Giovanni</li>
<li>Luca</li>
<li>Marco</li>
<li>Giacomo</li>
</ol>
|-
|}
La numerazione predefinita utilizza il sistema arabo, ma è possibile scegliere anche le [[Alfabeto latino|lettere dell'alfabeto latino moderno]] o la [[Sistema di numerazione romano|numerazione romana]], sia maiuscoli che minuscoli.
Per impostare il tipo di numerazione, è sufficiente assegnare all'attributo <code>type</code> di <code>ol</code> il primo termine della numerazione. Ad esempio:
{| border="0" cellpadding="5" width="90%"|
!Codice con <code>type</code> predefinito (1)
!Lettere minuscole (a)
!Lettere maiuscole (A)
!Numeri romani minuscoli (i)
!Numeri romani maiuscoli (I)
|-
|
<pre>
<ol type="1">
<li>Luca</li>
<li>Marco</li>
<li>Carlo</li>
</ol>
</pre>
|
<ol type="a">
<li>Luca</li>
<li>Marco</li>
<li>Carlo</li>
</ol>
|
<ol type="A">
<li>Luca</li>
<li>Marco</li>
<li>Carlo</li>
</ol>
|
<ol type="i">
<li>Luca</li>
<li>Marco</li>
<li>Carlo</li>
</ol>
|
<ol type="I">
<li>Luca</li>
<li>Marco</li>
<li>Carlo</li>
</ol>
|-
|}
L'attributo <code>start</code>, invece, permette di specificare il punto di inizio della numerazione, utile, per esempio quando si desidera temporaneamente interrompere l'elenco. Infatti:
{| border="0" cellpadding="5" width="90%"|
!Codice HTML, con <code>start</code> predefinito (1)
!Inizio a 8
!Inizio a 26
|-
|
<pre>
<ol type="a" start="1">
<li>Luca</li>
<li>Marco</li>
<li>Carlo</li>
</ol>
</pre>
|
<ol type="a" start="8">
<li>Luca</li>
<li>Marco</li>
<li>Carlo</li>
</ol>
|
<ol type="a" start="26">
<li>Luca</li>
<li>Marco</li>
<li>Carlo</li>
</ol>
|-
|}
===== Elenchi non ordinati =====
Gli elenchi non ordinati (definiti anche puntati) vanno creati con un elemento <code>ul</code> che conterrà, come per gli elenchi ordinati, un elemento <code>li</code>. L'elenco non ordinato definisce di default lo stile di un elenco puntato con cerchi pieni. Ad esempio:
{| border="0" width="50%"|
!Codice HTML
|-
|
<pre>
<ul>
<li>Giovanni</li>
<li>Luca</li>
<li>Marco</li>
<li>Giacomo</li>
</ul>
</pre>
|
<ul>
<li>Giovanni</li>
<li>Luca</li>
<li>Marco</li>
<li>Giacomo</li>
</ul>
|-
|}
L'attributo <code>type</code> di <code>ul</code> può far assumere tre stili diversi ai puntatori dei singoli elementi: con il valore <code>disc</code> verrà creata una lista puntata con cerchi pieni come quella predefinita, col valore <code>circle</code> i cerchi saranno di stessa dimensione ma vuoti, e infine con <code>square</code> verrà creato un elenco puntato a piccoli quadrati pieni. Non avendo nessun tipo di ordine di interpretazione, non è previsto l'attributo <code>start</code>.
{| border="0" width="50%"|
!Codice con <code>type</code> predefinito (disc)
|-
|
<pre>
<ul type="disc">
<li>Luca</li>
<li>Marco</li>
<li>Carlo</li>
</ul>
</pre>
|
<ul type="disc">
<li>Luca</li>
<li>Marco</li>
<li>Carlo</li>
</ul>
|-
|}
=== Tabelle ===
;<code><table>...</table></code>
Riga 140 ⟶ 297:
:Specifica la parte bassa della tabella. Come <code><thead></code>, Questa sezione può essere ripetuta se la tabella è divisa in più pagine (nella stampa o in altre possibili tipi di stampa).
=== Moduli ===
L'HTML può solo definire il formato del [[form|modulo]], gli input degli utenti vengono processati da un [[linguaggio di scripting]] [[lato client]] oppure [[lato server]]<ref>{{Cita web|url=https://www.w3schools.com/html/html_forms.asp|titolo=HTML Forms|lingua=en|accesso=2021-11-23}}</ref>.
;<code><form>...</form></code>
Riga 153 ⟶ 309:
:Crea una casella di spunta (checkbox).
;<code><input type="radio"></code>
:Crea un pulsante
;<code><input type="submit" value="NAME"></code>
:Crea un pulsante d'invio.
Riga 165 ⟶ 321:
:Crea un'area di testo multilinea impostasta dagli attributi <code>cols</code> (colonne) e<code>rows</code> (righe). Il testo tra i tag apparirà nell'area di testo al caricamento della pagina.
=== Altri elementi ===
;<code><span>...</span></code>
:Crea una divisione logica sulla riga. Permette di assegnare a porzioni di testo un id o una classe, utilizzabili con i CSS.
;<code><div>...</div></code>
:Crea un livello logico block-level. Soprattutto per l'uso dei CSS.
;<code><center>...</center></code> (
:Crea un blocco centrato anche di testo. In disuso a favore di <code><div></code> con l'
;<code><hr></code>
;<code><hr /></code> (in XHTML)
Riga 179 ⟶ 335:
;<code><param>...<param/></code> (in XHTML)
:Questo tag appare solamente all'interno dell'elemento <code>object</code> e imposta i parametri per l'oggetto per esempio larghezza, altezza o URL del contenuto.
;<code><embed>...</embed></code> (
:Richiama un gestore di plug-in per il tipo specificato dall'attributo <code>type</code>. Utilizzato per includere file flash, file audio. non ufficiale
;<code><noembed>...</noembed></code> (
:Specifica un'alternativa se l'oggetto incluso non può essere visualizzato.
;<code><applet>...</applet></code> (
:Include un'applet Java nella pagina.
=== Formattazione ===
{{Vedi anche|CSS}}
;<code><b>...</b></code> (deprecato)
:Utilizza il
;<code><i>...</i></code>
:Usa il
;<code><big>...</big></code>
:Crea testo <
;<code><small>...</small></code>
:Crea testo <small>più piccolo</small>. CSS equivalente: <code>{font-size: smaller}</code
;<code><s>...</s></code> e <code> <strike>...</strike></code> (deprecati)
:Cancella il testo: <s>Cancellato</s>. CSS equivalente: <code>{text-decoration: line-through}</code>
;<code><tt>...</tt></code>
:Usa un carattere simile a quelli da <
;<code><u>...</u></code> (
:Usa un carattere <
;<code><font [color=
:
Esempi:
# <code><font color="green">text</font></code> crea <
# <code><font color="#1f4099">text</font></code> crea <
# <code><font size="4">text</font></code> crea <
# <code><font size="+1">text</font></code>
# <code><face="Courier">text</font></code>visualizza <
Css equivalenti per gli attributi del testo:
:* <code><font size="N"></code> corrisponde a <code>{font-size: Ypx}</code> (le specifiche HTML non definisco la relazione tra grandezza "N" e grandezza pixel "Y").
:* <code><font color="red"></code> corrisponde a <code>{color: red}</code>
:* <code><font face="Courier"></code> corrisponde a <code>{font-family: Courier}</code>
===
{{vedi anche|Colori Web}}
'''I colori Web''' sono [[Colore|colori]] usati nella [[Web design|visualizzazione di pagine Web]] sul [[World Wide Web]] e nei metodi per descrivere e specificare tali colori. I colori possono essere specificati come una tripletta [[RGB]] o in formato [[Sistema numerico esadecimale|esadecimale]] (una ''tripletta esadecimale'') o in alcuni casi in base ai loro nomi comuni inglesi. Uno strumento di prelievo colore o un altro [[Software grafico|software di grafica]] viene spesso utilizzato per generare valori di colore. Un esempio: <code>#0099CC</code> (un tipo di azzurro che si può anche scrivere <code>Pacific Blue</code>)<ref>{{Cita web|url=http://www.dannydesign.it/tabella-colori-web.html|titolo=Danny Design: tabella colori web|accesso=2021-11-23}}</ref>.
=== Collegamenti e ancore ===
{{vedi anche|Anchor}}
;<code><a>...</a></code>
:Crea un elemento che diventa un{{'}}''ancora'', che può essere sia l'origine che la destinazione di un [[collegamento ipertestuale]].
:Con l'attributo <code>href</code> impostato ad una [[Uniform Resource Locator|URL]] l'ancora diventa l{{'}}''origine'' di un collegamento ipertestuale ''a'' un'altra risorsa (o ad un altro punto della stessa pagina);
:Alternativamente (e a volte contemporaneamente), con l'attributo <code>name</code> (o <code>id</code>) l'ancora diventa la ''destinazione'' di un collegamento ipertestuale ''da'' un'altra risorsa, che come un segnalibro farà scorrere la pagina fino a quel punto. Una URL può indicare tale destinazione con un [[fragment identifier]] (l'aggiunta alla fine dell'URL di un simbolo '#' seguito dal nome dell'ancora) nell'URL<ref>{{Cita web|url=https://www.html.it/pag/16049/i-link-interni-o-ancore/|titolo=HTML anchor: cos'è un link interno e come inserirlo {{!}} Guida HTML.it|autore=Wolfgang Cecchin|sito=HTML.it |accesso= 2021-11-23}}</ref>.
:Ogni elemento può essere trasformato in un'ancora attraverso l'attributo <code>id</code> così usare <code><a name="foo"></code> non è necessario.
:Inoltre l'attributo <code>title</code> può essere impostato per dare una breve informazione sul collegamento ipertestuale.
;<code><a href="''URL''" title="''testo in aiuto''">''Etichetta collegamento''</a></code>
:Quando il puntatore è sul collegamento
:Alcuni browser
===
;<code><img...></code>
;<code><img... /></code> (in XHTML)
:Include un'immagine con l'attributo <code>src</code>, <code>alt</code> fornisce testo alternativo nel caso l'immagine non
=== Vari ===
;<code><br></code>
;<code><br/></code> (in XHTML)
:Specifica un'interruzione di linea.[[File:Area-shape-html.png|alt=Esempio di area shape su una immagine. In alto sono indicate le aree cliccabili dall'utente, in basso cosa vede l'utente.|miniatura|Esempio di tag <map> su una immagine. In alto sono indicate le aree cliccabili dall'utente, in basso cosa vede l'utente. Quest'ultimo le noterà solo quando passerà sopra di esse con il mouse.]]
;<code><map>...</map></code>
:Specifica una mappa lato client, ossia aree cliccabili dall'utente.
;<code><blink>...</blink></code> (
:Testo lampeggiante.
;<code><marquee>...</marquee></code> (
:Tag deprecato<ref>{{Cita web|lingua=en|url=https://stackoverflow.com/questions/31951282/why-is-marquee-deprecated-and-what-is-the-best-alternative|titolo=javascript - Why is deprecated and what is the best alternative?|sito=Stack Overflow|accesso=5 febbraio 2021}}</ref>, crea l'effetto di testo scorrevole. Non ha nessun equivalente nelle direttive di stile. Gli attributi sono:
::<code>behaviour</code>: indica il tipo di movimento del testo, può assumere i valori:
:::<code>scroll</code>: il testo arrivato alla fine viene ripresentato dall'inizio in modo continuo;
:::<code>slide</code>: il testo arrivato alla fine si ferma;
:::<code>alternate</code>: il testo arrivato alla fine rimbalza e torna indietro.
::<code>direction</code>: indica la direzione del movimento, può essere:
:::<code>left</code>: verso sinistra;
:::<code>right</code>: verso destra;
:::<code>up</code>: verso l'alto;
:::<code>down</code>: verso il basso.
::<code>loop</code>: indica il numero di volte per il quale il movimento deve ripetersi. Se non specificato equivale a infinito.
::<code>scrollamount</code>: indica la velocità del movimento. Il numero è espresso in pixel al secondo.
:Tramite JavaScript è possibile ottenere l'effetto di blocco/ripartenza dello scorrimento tramite gli attributi di eventi associati al puntatore <code>onmouseover</code>, <code>onmouseout</code>, <code>onfocus</code> e <code>onblur</code> richiamando i metodi <code>this.stop()</code> e <code>this.start()</code>.
;<code><!--...--></code>
:
;<code><hr></code>
;<code><hr/></code> (in XHTML)
:Questo tag serve per creare delle linee separatorie. È possibile creare linee di grandezze e colori diversi grazie agli attributi <code>width</code> (per la lunghezza), <code>height</code> (per l'altezza) e <code>color</code>, deprecati a favore dell'impiego delle direttive di stile equivalenti.
:Esempi:
::<code><hr width = "400" height = "10"> </code> (deprecato) oppure
::<code><hr style="width: 400px; height: 10px;" /> </code> (con direttiva di stile) generano:
<hr style="width: 400px; height: 10px;" />
::<code><hr width = "50%" height = "2"></code> (deprecato) oppure
::<code><hr style="width: 50%; height: 2px;" /></code> (con direttiva di stile) generano:
<hr style="width: 50%; height: 2px;" />
::<code><hr color = "red" width = "200" height = "2"></code> (deprecato) oppure
::<code><hr style="background-color: red; width: 200px; height: 2px;" /> </code> (con direttiva di stile) generano:
<hr style="background-color: red; width: 200px; height: 2px;" />
== Frame ==
{{Vedi anche|Iframe|Frameset}}
I frame, in italiano "cornici", permettono di strutturare il documento HTML in sotto-documenti che il browser gestisce come finestre separate. Ad esempio è possibile tenere sempre fisso e visibile un menu di navigazione in una prima cornice posizionata nel bordo sinistro della pagina, affiancata ad una seconda cornice che racchiude il contenuto principale scorrevole. Gli elementi <code>frame</code> devono essere inclusi dentro un elemento <code>frameset</code> che sostituisce il <code>body</code> e lo stesso documento HTML deve essere dichiarato come Frameset. In altre parole, un elemento <code>html</code> può contenere un <code>head</code> ed un <code>body</code> (nel caso di documenti Strict o Transitional) o, in alternativa, un <code>head</code> e un <code>frameset</code>.<ref>{{cita web |url=https://www.w3.org/TR/html4/present/frames.html#h-16.1 |titolo=HTML 4.01 Specification, Frames |data=24 dicembre 1999 |editore=W3C |lingua=en |accesso=14 giugno 2014}}
</ref>
Le cornici sono parte dello standard HTML 4.0 Frameset, mentre in HTML5 sono state dichiarate obsolete<ref>{{Cita web|url=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/frameset|titolo=- HTML: HyperText Markup Language {{!}} MDN|sito=developer.mozilla.org|accesso=5 febbraio 2021}}</ref><ref>{{Cita web|url=https://www.ostraining.com/blog/webdesign/against-using-iframes/|titolo=3 Reasons You Might Not Want To Use Iframes|accesso=5 febbraio 2021}}</ref>.
;<code><frameset>...</frameset></code>
:Delimita
;<code><frame>...</frame></code>
:Racchiude un singolo frame, o regione, all'interno del frameset. Un documento different collegato attraverso l'attributo <code>src</code> appare all'interno.
;<code><noframes>...</noframes></code>
:Contiene un normale elemento <code>
:
;<code><iframe>...</iframe></code>
:Un frame speciale ''inline'', inseribile all'interno di un normale elemento <code>
== RDFa ==
RDFa (Resource Description Framework in Attributes ) è una raccomandazione del [[W3C]] che aggiunge una serie di estensioni a livello di attributo a HTML, XHTML e vari tipi di documenti basati su XML per incorporare metadati ricchi nei documenti Web. La mappatura del modello dati RDF consente il suo utilizzo per incorporare espressioni RDF soggetto-predicato-oggetto all'interno di documenti XHTML. Consente inoltre l'estrazione di triple del modello RDF da parte di programmi utente conformi .
La comunità RDFa gestisce un sito web wiki per ospitare strumenti, esempi e tutorial<ref name="rdfa wiki">{{Cita web|url=http://rdfa.info/|titolo=RDFa / Tools}}</ref>.
=== Essenza ===
L'essenza di RDFa è fornire un insieme di attributi che possono essere usati per trasportare i metadati in un linguaggio XML (da qui la "a" in RDFa).
Questi attributi sono:
; about
: un URI o CURIE che specifica la risorsa di cui trattano i metadati
; rel e rev
: specificando rispettivamente una relazione e una relazione inversa con un'altra risorsa
; src , href e resource
: specificando la risorsa partner
; property
: specificando una proprietà per il contenuto di un elemento o della risorsa partner
; content
: attributo opzionale che sostituisce il contenuto dell'elemento quando si utilizza l'attributo della proprietà
; datatype
: attributo facoltativo che specifica il tipo di dati del testo specificato per l'uso con l'attributo della proprietà
; typeof
: attributo facoltativo che specifica il / i tipo / lo RDF del soggetto o della risorsa partner (la risorsa su cui si riferiscono i metadati).
=== Vantaggi ===
Ci sono cinque "principi di metadati interoperabili" soddisfatti da RDFa<ref>[http://assets.adida.net/presentations/w3c-2006-04-06/w3c-2006-04-06.pdf Building Interoperable Web Metadata]</ref>.
* Indipendenza dal publisher: ogni sito può utilizzare i propri standard
* Riutilizzo dei dati: i dati non vengono duplicati. Non sono necessarie sezioni XML e HTML separate per lo stesso contenuto.
* Auto contenimento: l'HTML e l'RDF sono separati
* Modularità dello schema: gli attributi sono riutilizzabili
Inoltre RDFa può trarre vantaggio dall'accessibilità web poiché maggiori informazioni sono disponibili per la tecnologia assistiva<ref>{{Cita web|url=http://www.standards-schmandards.com/2007/rdfa-and-accessibility/|titolo=RDFa – Implications for Accessibility – Standards Schmandards}}</ref>.
=== Esempio ===
<syntaxhighlight lang="html">
<div xmlns: dc = "http://purl.org/dc/elements/1.1/"
about = "http://www.example.com/books/wikinomics" >
Nel suo ultimo libro
<span property = "dc: title" > Wikinomics </span> ,
<span property = "dc: creator" > Don Tapscott </span>
spiega i profondi cambiamenti nella tecnologia,
demografia e affari.
Il libro dovrebbe essere pubblicato in
<span property = "dc: date" content = "2006-10-01" > ottobre 2006 </span> .
</div>
</syntaxhighlight>
== HTML5 ==
{{Vedi anche|HTML5}}
{| class="wikitable"
|'''TAG'''<ref>{{Cita web|url=https://www.html.it/guide/guida-html5/|titolo=HTML5: guida completa|sito=HTML.it|accesso=29 gennaio 2021}}</ref>
|'''SCOPO'''
|-
| colspan="2" |'''Nuovi elementi strutturali e semantici'''
|-
|Header
| rowspan="6" |[[File:Html4-vs-html5-struttura.png|alt=Confronto tra pagina di base HTML4 e 5|centro|miniatura|Confronto tra pagina di base HTML4 e 5]]
|-
|Footer
|-
|Section
|-
|Nav
|-
|Article ''(nel caso di articoli in homepage)''
|-
|Aside ''(contenuti correlati al principale)''
|-
|Hgroup
|Raggruppa i tag Heading
|-
|<figure> e <figcaption>
|Didascalie per contenuti
|-
|Embed
|Inserisce contenuti interattivi o multimediali
|-
|Ruby
|Specifica le annotazioni Ruby
|-
|Wbr
|Il browser può inserire un a capo
|-
|<command> e <menu>
|Definiscono barre degli strumenti o menu di scelta rapida
|-
|<details> e <summary>
|Widget informativi per gli utenti
|-
|mark
|Parte di un testo segnato o evidenziato all'utente
|-
|<nowiki><time> e attributi </nowiki>''pubdate'' e ''datetime''
|Tempo su 24 ore o una data nel calendario Gregoriano
|-
|Meter
|Misura scalare di un intervallo noto o un valore frazionario
|-
|Progress
|Stato di completamento di un compito
|-
|Picture
|Contenitore per immagini
|-
|Microdati
|Per ogni tag HTML si possono specificare degli attributi semantici
|-
| colspan="2" |'''Nuovi attributi e tipi di input per i form'''
|-
|autofocus, placeholder e form
| rowspan="8" |[[File:Form-errori.png|alt=form|centro|miniatura|L'autofocus in questo caso è in rosso. Gli input type equivalgono agli spazi da riempire (in questo caso c'è "email"). Il placeholder è il testo di esempio di ogni spazio]]
|-
|Input type: tel
|-
|Input type: search
|-
|Input type: url
|-
|Input type: email
|-
|Input type: number
|-
|Input type: range
|-
|Input type: color
|-
|Datalist
|Completamento automatico ad un elemento del form
|-
|Autocomplete
|Permette o no al browser di riempire i campi
del form in maniera automatica
|-
|Min, max
|Definiscono il valore minimo e massimo consentito
|-
|Multiple
|Permette all’utente possa inserire più valori per lo stesso input
|-
|Pattern
|Verifica che il valore inserito rispetti determinate regole
|-
|Required
|Rende obbligatoria la compilazione di uno spazio del form
|-
|Step
|Definisce la distanza che intercorre tra un valore e il successivo
|-
|keygen
|Generatore di chiavi numeriche all’interno di un form
|-
|output
|Restituisce il risultato di un calcolo
|-
| colspan="2" |'''API per Web Applications'''
|-
|Applicazioni web offline (file ".manifest")
|Dopo la prima sessione di navigazione online,
resteranno accessibili alcuni oggetti anche
in assenza di una connessione di rete.
|-
|Indexed Database API
|Creare e manipolare un database all’interno del browser
|-
|WebStorage API
|Si possono ad esempio tenere aperti contemporaneamente
due account social o mail sullo stesso browser e ogni navigazione
sul primo comporterà il logout del secondo e viceversa
|-
|Web Workers API
|Consentono l’esecuzione di pezzi di codice JavaScript
senza intaccare le performance della pagina web
|-
|WebSocket API
|Stabiliscono e mantengono una connessione dati tra browser
e server remoto sulla quale far transitare messaggi
in entrambe le direzioni
|-
|Drag and Drop
|Trascinamento e rilascio di oggetti
|-
|Geolocation API
|Geolocalizzazione
|-
| colspan="2" |'''Multimedia'''
|-
|[[.svg|SVG]] e [[MathML]]
|Immagini vettoriali e formule matematiche
|-
|[[Canvas (elemento HTML)|Canvas]]/[[WebGL]]
|API adatte a tracciare linee, cerchi, rettangoli, immagini e oggetti 3D
|-
|Video
|Inserisce file video (prima fattibile solo con [[Adobe Flash]])
|-
|Audio
|Inserisce file audio
|-
|'''Elementi HTML4 deprecati'''
|[[File:Deprecated-HTML.png|alt=Elementi HTML4 deprecati|centro|miniatura|290x290px]]
|}
== Haml ==
'''Haml''' ( HTML Abstraction Markup Language) è un sistema di modelli progettato per evitare di scrivere codice inline in un documento web e rendere l'HTML più pulito. Haml offre la flessibilità di avere alcuni contenuti dinamici in HTML. Simile ad altri linguaggi web come [[PHP]], ASP, JSP e sistemi di modelli come eRuby , Haml incorpora anche del codice che viene eseguito durante il runtime e genera codice HTML per fornire alcuni contenuti dinamici. Per eseguire il codice Haml, i file devono avere un'estensione .haml. Questi file sono simili ai file .erb o eRuby che aiutano anche a incorporare il codice Ruby durante lo sviluppo di un'applicazione web<ref>{{Cita web|url=https://haml.info/|titolo=Haml|sito=haml.info|accesso=4 febbraio 2021}}</ref>.
=== Esempio ===
Haml utilizza il rientro degli spazi (due spazi) per la nidificazione e l'ambito dei tag. Questo funge da sostituto per le coppie di tag open-end, rendendolo asciutto e più pulito. L'esempio seguente confronta le sintassi di Haml ed eRuby (Embedded Ruby), insieme all'output HTML.
{| class="wikitable"
!Haml
!ERB
!HTML
|-
|
% div .category
% div .recipes
% h1 = ricetta . nome
% h3 = ricetta . categoria
% div
% h4 = ricetta . descrizione
|
< div class = "category" >
< div class = "ricette" >
< h1 > <% = ricetta . nome %> </ h1 >
< h3 > <% = ricetta . categoria %> </ h3 >
</ div >
< div >
< h4 > <% = ricetta . descrizione %> </ h4 >
<
</ div >
|
< div class = "category" >
< div class = "ricette" >
< h1 > Cookie </ h1 >
< h3 > Dessert </ h3 >
</ div >
< div >
< h4 > A base di pasta e zucchero. Di solito di forma circolare e ha circa 400 calorie. </ h4 >
</ div >
</ div >
|}
== Note ==
<references />
==Voci correlate==
* [[Anchor]]
* [[Annidamento (informatica)]]
* [[HTML]]
* [[Pagina web]]
== Collegamenti esterni ==
* Lista completa degli elementi per HTML 4.01: [https://web.archive.org/web/20070928000621/http://www.diodati.org/w3c/html401/index/elements.html elementi] e [https://web.archive.org/web/20070928000840/http://www.diodati.org/w3c/html401/index/attributes.html attributi]
* {{cita web|http://www.caratterispecialihtml.com/|Tabella dei Caratteri Speciali HTML}}
{{portale|internet}}
[[
[[Categoria:Terminologia del web]]
[[Categoria:Formattazione del testo]]
| |||