HTML: introduzione e fondamenti

 In Web design

Il linguaggio HTML, o Hypertext Markup Language, è stato creato nel lontano 1991 da Tim Berners-Lee presso il CERN, per poi ricevere successive revisioni nel corso degli anni, di cui va menzionato il recente HTML5.  HTML è un ipertesto e descrive il contenuto della pagina web attraverso le tag. Un elemento viene inserito fra una tag di apertura  <>e una di chiusura </>.

<p>Inizia qui il mio primo paragrafo.</p>

In questo articolo, verrà preso lo standard HTML5 come riferimento.

Una pagina web si riconosce dal suffisso .html o .htm.

Il browser legge e interpreta il codice HTML innanzitutto identificando la versione del documento grazie al !DOCTYPE (XHTML 1.0 Transitional o HTML5). In base alla versione dichiarata, cambia leggermente la sintassi. Pertanto, ometterlo è un grave errore. Ogni pagina web  è sempre strutturata come segue:

<!DOCTYPE HTML>
 <html>
 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Titolo della pagina</title>
 </head>
 <body>
 </body>
</html>

Head: cosa va inserito in questa sezione

Nella <head>vanno sempre inseriti il titolo della pagina, i CSS, i Javascript, le metainformazioni. Insomma, tutto il codice che non è contenuto in senso stretto e che serve a renderizzare la pagina. Nella tabella qui sotto, sono riportate le tag che non devono mai mancare.

Tag nella sezione <head>

TagScopoEsempio
<title></title>Titolo della pagina<title>Svizzera vince i Mondiali Europei 2016</title>
<style></style>CSS embedded<style>h1 {color:#000;}</style>
<link>CSS esterno<link rel=”stylesheet” type=”text/css” href=”style.css”>
<meta charset=””>Codifica carattere documento<meta charset=”UTF-8″>
<meta name=”description” content=””>Descrizione pagina<meta name=”description” content=”Free Web tutorials”>

Body: come formattare il testo

Nel <body>va inserito il contenuto vero e proprio. Testi, immagini, tabelle, form, ecc. Un’ottima pagina web fa uso di titoli, paragrafi e quant’altro. I motori di ricerca hanno bisogno di capire la struttura di una pagina web, pertanto evitare l’uso della tag <p> rappresenta un grave errore. Le tag da utilizzare nel <body> si possono inserire a volontà e nell’ordine desiderato. Per intenderci, è possibile inserire un titolo <h1> seguito da un paragrafo, un elenco, una citazione e infine da un altro paragrafo.

Tag di testo nel <body>

TagScopoEsempio
<p></p>Paragrafo<p>Testo.</p>
<strong></strong>Grassetto<p>Testo <strong>in grassetto</strong>.</p>
<em></em>Italico<p>Testo <em>in corsivo</em>.</p>
<del></del>Testo barrato<p>Il mio eroe è <del>Thor</del> Hulk.</p>
<blockquote></blockquote>Citazione<p><blockquote>Testo della citazione</blockquote>.</p>
<br>A capo<p>Testo di una riga.<br>Il testo va a capo!</p>
<hr>Filetto orizzontale<p>Testo.</p><hr><p>Testo.</p>
<h1>Titolo 1<h1>Titolo</h1>
<h2>Titolo 2<h2>Titolo</h2>
<h3>Titolo 3<h3>Titolo</h3>
<h4>Titolo 4<h4>Titolo</h4>
<h5>Titolo 5<h5>Titolo</h5>
<h6>Titolo 6<h6>Titolo</h6>
<ol><li></li></ol>Elenco numerato<ol><li>Mela</li><li>Pera</li><li>Banana</li></ol>
<ul><li></li></ul>Elenco puntato<ul><li>Mela</li><li>Pera</li><li>Banana</li></ul>

Un discorso a parte va fatto per la tag <span></span>. Non essendo questa un paragrafo, va usata per raggruppare elementi inline del documento HTML. Non produce effetti visivi se non applicata ad uno stile CSS.

Conclusone

Il linguaggio HTML non è programmazione, non vi sono formule da calcolare. Si tratta di uno standard internazionale e diffusissimo che se scritto bene crea pagine snelle. L’editor di WordPress, ad esempio, genera ipertesto ogni volta che si redige un nuovo post. Oltre al fatto che è facile da imparare, saper scrivere codice HTML significa poter controllare al 100% la struttura dei post. Certo, ci sono i pulsanti che fanno tutto, tuttavia questi editor non sono infallibili. Tag aperte e non chiuse, errori di battitura o tag proprietarie sono gli errori più comuni. Conviene sempre dare un’occhiata al codice! Taluni software, come l’odiato MS FrontPage, spesso lo sporcano fino alla nausea.

Una pagina web che aderisce agli standard W3C, ha più probabilità di visulizzarsi allo stesso modo attraverso i browser moderni (Firefox, Chrome, Safari, Opera. Ah già, IE Microsoft Edge).  Validare sempre il proprio codice!

Link interessanti

Common DOCTYPE declarations
HTML – Wikipedia

Post suggeriti

Leave a Comment

Inizia a digitare e premi Enter per effettuare una ricerca