HTML

html-logoHTML è l’acronimo di HyperText Markup Language, cioè linguaggio a marcatori per ipertesti, la cui sintassi (originariamente sviluppata da sir Tim Berners-Lee su derivazione dell’SGML ed attualmente alla versione n. 5.1) è stabilita dal World Wide Web Consortium (W3C). In particolare, i predetti marcatori consistono in tag, ovverosia etichette in parentesi angolari (<nometag>), che hanno la funzione di stabilire la struttura dei documenti ipertestuali o ipermediali (pagine web, e-mail), nonché il significato del loro contenuto cioè la loro semantica (che può essere forte, ad es., “questa è un’immagine” o “questa è una lista ordinata”, oppure debole ad es. “questa è una sezione sulla pagina” o “questa è una parte del testo”) e -in misura sempre minore- la loro formattazione (che è delegata al CSS).
Dal punto di vista lessicale, l’HTML:
– è case insensitive, quindi è indifferente scrivere <div>, <Div> o <DIV> (tanto che un tag di apertura scritto in maiuscolo, può essere anche chiuso in minuscolo o viceversa). Per una più ordinata e quindi migliore leggibilità del codice, comunque, si preferisce usare sempre il minuscolo. Si segnala, inoltre, che i valori degli attributi class e id sono invece case sensitive;
– non prevede indentazione del codice, la quale ha solo una funzione estetica che migliora la leggibilità dello stesso (e non pure di sintassi, come ad esempio per Phyton);
– per i commenti, prevede i simboli <!-- per l’apertura e --> per la chiusura.

Elementi, tag e attributi

Ogni pagina web, scritta con questo linguaggio informatico, è strutturata attraverso dei particolari componenti costruttivi di base, detti Elementi HTML, ciascuno dei quali consiste in due tag omonimi, uno di apertura e l’altro di chiusura, all’interno dei quali è posto un oggetto o contenuto (testo, immagine, link, ecc.).

<[nometag]>Oggetto</[nometag]>

Ogni Elemento HTML può avere degli attributi, che ne configurano o modificano in vari modi il comportamento. Detti attributi sono indicati nel tag iniziale dell’Elemento stesso attraverso il formato [nomeattributo]="[valoreattributo]", quindi come coppie chiave-valore separate dal carattere “=” (qualora il valore dell’attributo sia true, on o il nome dell’attributo stesso, è ammessa la sola indicazione del [nomeattributo] senza bisogno di assegnargli espressamente detto valore, come ad esempio nel caso di required, controls, ecc.). Alcuni attributi accettano qualsiasi valore di ogni tipo (ad es., qualsiasi carattere alfanumerico, l’attributo class, l’attributo title, ecc.); altri attributi accettano qualsiasi valore ma solo di un certo tipo (ad es., qualsiasi URL, come l’attributo src, o qualsiasi numero intero, come l’attributo cols, ecc.); infine altri attributi accettano esclusivamente valori enumerati ossia predefiniti in una lista (ad es., POST|GET, come l’attributo method, o auto|ltr|rtl, come l’attributo dir, ecc.).
Il valore dell’attributo è (preferibilmente) indicabile tra virgolette (siano esse apici o doppi apici), oppure senza di queste se non contiene spazi, né i seguenti caratteri: " ' ` = < >.

<[nometag] [nomeattributo]="[valoreattributo]">
   Oggetto
</[nometag]>

Elementi pieni o vuoti

Alcuni Elementi html sono necessariamente vuoti sempre, non essendo mai previsto né ammesso un oggetto o contenuto e, per questo, privi del tag di chiusura, come ad esempio, il tag <br>, che indica una interruzione di linea.

Prima riga.<br>Seconda riga.

Prima riga.
Seconda riga.

Altri Elementi html, invece, sono necessariamente vuoti a volte, cioè soltanto a determinate condizioni, come ad esempio il tag <script> con l’attributo src: per questi elementi, il tag di chiusura è richiesto.

<script src="https://goo.gl/jrcXHC"></script>
<button onclick="attiva_script_esterno()">clicca</button>


Elementi annidati

Salvo eccezioni, gli Elementi html possono essere nidificati (o annidati tra loro), cioè un Elemento può contenerne un altro.

<p>Paragrafo con <i>questo</i> testo in corsivo</p>

Paragrafo con questo testo in corsivo

In altri casi, l’annidamento non è una facoltà ma un vero e proprio obbligo (logico, prima ancora che sintattico), come ad esempio nel caso dei form, delle tabelle, ecc.: il tag <td> (che riguarda le singole celle di una tabella) è annidato, cioè figlio del tag <tr> (che riguarda le singole righe della tabella stessa), che a sua volta è annidato, cioè figlio del tag <table> (che riguarda la tabella nel suo insieme).

<table>
  <tr>
    <td>cella 1</td>
    <td>cella 2</td>
    <td>cella 3</td>
  </tr>
</table>

Tra le eccezioni alla regola generale della libera nidificazione degli elementi, si ricorda che il tag form non può contenere ulteriori tag form ivi annidati. A tale limite si ovvia chiudendo immediatamente il tag form, i cui figli (esterni) sono collegati allo stesso stabilendo una relazione di identità nominale tra l’attributo id del tag form e l’attributo form dei tag figli del predetto tag form stesso. Per approfondimenti, clicca qui.

<form id="nome_form1"></form>
<form id="nome_form2"></form>
<input form="nome_form1">
<input form="nome_form2">
<input form="nome_form1">
<input form="nome_form2">




Elementi block ed elementi inline

Salvo diversa configurazione specifica tramite la proprietà css display, di default gli elementi html sono di tipo block o di tipo inline, a seconda che vadano “a capo” rispetto agli elementi adiacenti (immediatamente precedente e successivo).
Ad esempio, sono di tipo block gli elementi <blockquote>, <div>, <form>, <h1>-<h6>, <ol>, <p>, <section>, <ult>, mentre sono di tipo inline gli elementi <a>, <img>, <span>.

Visualizzazione del codice sorgente

Con qualsiasi browser di un qualsivoglia sistema operativo desktop o mobile, di ogni pagina web è possibile visualizzare, oltre al risultato grafico del codice sorgente html (c.d. rendering), anche il codice stesso: su google chrome, ad esempio, con il tasto F12 oppure con la combinazione dei tasti ctrl+u (alt+cmd+u su mac), mentre con ctrl+shift+i (alt+cmd+i su mac) si avvia la Console di sviluppo.

Bibliografia