L'HTML è la spina dorsale di Internet odierno. Milioni di siti web insieme hanno formato Internet. Dove l'HTML è il mattone di tutti questi siti web. Vent'anni fa, anche se eri solo un blogger amatoriale, dovevi conoscere un po' di codice web per proteggerti o per aggiungere una semplice funzione al tuo sito. Ma ora ci sono così tanti editor e plugin disponibili che persino conoscere le basi dell'HTML non è più necessario.
Il problema è che se non si conoscono alcune nozioni di base, si rischia facilmente di ritrovarsi in seri guai con il proprio blog e di dover assumere uno sviluppatore costoso per risolvere quello che potrebbe essere un problema minore. Non solo, apportare modifiche al blog, come l'aggiunta di un widget di testo personalizzato, richiede un minimo di competenza.
E se il layout del contenuto non sembra corretto, la conoscenza dell'HTML può aiutarti a rimetterti in carreggiata.
Prima di iniziare: le basi dell'HTML
Cos'è l'HTML?
HTML è l'abbreviazione di Hyper Text MArkupe LLingua. È il linguaggio standard per il taggaggio dei contenuti nei browser web.
L'HTML è rappresentato dagli "Elementi". Gli elementi sono anche noti come "Tag".
Perché è necessario l'HTML?
I browser web possono visualizzare un sito web solo se scritto nel linguaggio da loro supportato. HTML è il linguaggio di markup più diffuso e quello più accettato dai browser web.
Ecco perché hai bisogno dell'HTML.
L'HTML distingue tra maiuscole e minuscole?
L'HTML non distingue tra maiuscole e minuscole. Ma la prassi migliore è scrivere HTML con le maiuscole e le minuscole corrette.
Passaggi per creare il tuo primo file HTML
Puoi creare un file HTML di base usando il Blocco note del tuo computer. Ma sarà faticoso scrivere molte righe di codice.
Hai bisogno di un editor di codice. Un buon editor di codice renderà più facile scrivere e organizzare codice di grandi dimensioni. Io uso e consiglio Notepad++ (gratuito e open source) per scrivere linguaggi web. Puoi usare altri editor come Sublime Text, Atom ecc.
Ecco cosa devi fare:
- Installa un editor di codice
- Aprilo
- Crea un nuovo file
- Salvalo come file .html
1. Ciao a tutti!
Copia e incolla il codice seguente nel tuo nuovo file HTML e salvalo. Ora eseguilo sul tuo browser web.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Produzione:
Congratulazioni! Hai creato il tuo primo file HTML. Non è necessario che tu lo capisca a questo punto. Lo vedremo tra poco.
Comprensione della struttura HTML
Ogni file HTML ha una struttura nuda e cruda comune. È da qui che tutto inizia. E ogni pagina di codice di grandi dimensioni, dopo essere stata ridotta, arriverà a questa struttura.
Cerchiamo quindi di capirlo partendo dal codice "Hello World!". I seguenti elementi sono obbligatori per ogni file HTML.
- = È una dichiarazione al browser che questo è un file HTML. È necessario specificarlo prima di etichetta.
- = Questo è l'elemento radice di un file HTML. Tutto ciò che scrivi va tra E .
- = Questa è la parte meta-informativa per un browser. I codici all'interno di questo tag non hanno alcun output visivo.
- = Questa è la parte che un browser web visualizza. Ciò che vedi esattamente su un sito web è il rendering dei codici tra E .
2. Tag HTML
L'HTML è il risultato della collaborazione di centinaia di tag diversi. Devi imparare come funzionano. Devi anche assicurarti che vengano utilizzati nel modo corretto.
I tag HTML di solito hanno un tag di apertura e uno di chiusura. Il tag di apertura ha la parola chiave circondata dai simboli di minore (<) e maggiore (>). Il tag di chiusura ha tutto uguale, tranne una barra (/) in più dopo il simbolo di minore (<).
Etichette di testa
Tutti i tag di testa vanno tra E Contengono meta-informazioni per browser web e motori di ricerca. In pratica, non hanno alcun output visivo.
Il tag title definisce il titolo di una pagina web, visibile nella scheda del browser. Questa informazione viene utilizzata dai programmi web e dai motori di ricerca. È possibile avere al massimo un titolo per file HTML.
Codice:
<title>My first web page</title>
Il tag link collega la tua pagina HTML a risorse esterne. Il suo utilizzo principale è collegare la pagina HTML ai fogli di stile CSS. È un tag autochiudente e non necessita di una chiusura. Qui rel sta per relazione con il file e src significa sorgente.
Codice:
<link rel="stylesheet" type="text/css" src="style.css">Meta è un altro tag auto-chiudente che fornisce meta-informazioni su un file HTML. I motori di ricerca e altri servizi web utilizzano queste informazioni. I meta-tag sono indispensabili se si desidera ottimizzare la propria pagina per i motori di ricerca.
Codice:
<meta name="description" content="This is the short description that search engines show"Il tag script viene utilizzato per includere uno script lato server o per creare un collegamento a un file script esterno. Può avere due attributi nel tag di apertura. Uno è il tipo e l'altro è la sorgente (src).
Codice:
<script type="text/javascript" src="scripts.js"></script>Il tag noscript funziona quando gli script sono disabilitati in un browser web. Rende una pagina compatibile con chi non consente l'uso di script nei propri browser.
Codice:
<noscript><p>Alas! Scripts are disabled.</p></noscript>Tag del corpo
Tutti i tag del corpo vanno tra E Hanno output visivi. È qui che si svolge la maggior parte del lavoro. Devi usare questi tag per strutturare il contenuto della pagina principale.
A
Questi sono i tag di intestazione. Il titolo più importante è contrassegnato con e il meno importante con Dovresti usarli nella gerarchia corretta.
Codice:
<h1>This is a h1 heading</h1>
<h2>This is a h2 heading </h2>
<h3>This is a h3 heading </h3>
<h4>This is a h4 heading </h4>
<h5>This is a h5 heading </h5>
<h6>This is a h6 heading </h6>Produzione:
Tag di formattazione
Il testo in un file HTML può essere formattato utilizzando numerosi tag di formattazione. Saranno necessari quando si desidera evidenziare una parola o una riga del contenuto.
Codice:
<p>You can highlight your text in many ways.</p>
<p>You can <strong>bold</strong>, <u>underline</u>, <em>italic</em>, <mark>mark</mark>, <sub>subscript</sub>, <sup>superscript</sup> and more!</p>Produzione:
È possibile deviare alcuni codici dal rendering utilizzando il tag di commento. Il codice verrà visualizzato nel codice sorgente, ma non verrà renderizzato. L'uso principale di questo tag è la creazione di documentazione di file HTML per riferimento futuro.
Esempio:
<!-- <p>You can comment out any code by surrounding them in this way</p> -->Altri tag HTML importanti
L'ancora è un tag prezioso, utilizzato praticamente ovunque. Non vedrai nessuna pagina web online senza almeno un link di ancoraggio.
La struttura è la stessa. Ha una parte iniziale e una finale . Il testo che vuoi ancorare va inserito tra e .
Ci sono alcuni attributi che definiscono dove e come va l'utente dopo aver cliccato su di esso.
- ahref=” “ = Definisce il collegamento di destinazione. Il collegamento va inserito tra virgolette.
- obiettivo="" " = Definisce se l'URL verrà aperto in una nuova scheda del browser o nella stessa scheda. target="_blank" è per la nuova scheda e target="_self" è per l'apertura nella stessa scheda.
- rel="" " = Definisce la relazione tra la pagina corrente e la pagina collegata. Se non ti fidi della pagina collegata, puoi definire rel="nofollow".
Codice:
<p><a target="_blank" href="https://www.google.com/">Click here</a> to go to Google.
It will open in a new tab.</p>
<p><a target="_self" href="https://www.google.com/">Click here</a>.
It will also take you to Google but will open in the current tab.</p>Produzione:
Il tag immagine è un altro tag importante senza il quale non sarebbe possibile immaginare molti siti web basati su immagini.
è un tag autochiudente. Non necessita della chiusura tradizionale come Ci sono alcuni attributi che devi conoscere prima di poterlo utilizzare correttamente.
- src=” “ = Serve per definire il link sorgente dell'immagine. Inserisci il link tra virgolette doppie.
- alt="" " = Sta per testo alternativo. Quando l'immagine non si carica, questo testo darà agli utenti un'idea dell'immagine mancante.
- larghezza="" " = Definisce la larghezza di un'immagine in pixel.
- Altezza="" = Definisce l'altezza di un'immagine in pixel.
<p>This is the Googleplex in August 2014.</p>
<p>This image has a width of 500 pixels and a height of 375 pixels.</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG"
alt="Google's Headquarter in August 2014" width="500" height="375" />Produzione:
Suggerimenti: vuoi inserire un'immagine cliccabile? Aggiungi un tag al codice dell'immagine. Vediamo come funziona.
O
Il tag elenco serve per creare un elenco di elementi. sta per elenchi ordinati (elenchi numerati) e sta per elenchi non ordinati (punti elenco).
Gli elementi dell'elenco all'interno del O è taggato con . li sta per elenco. Puoi averne quanti ne vuoi come vuoi all'interno del genitore O etichetta.
Codice:
<p>This is an ordered list:</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<p>This is an unordered list:</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Produzione:
Il tag Table serve per creare una tabella di dati. Ci sono alcuni tag di livello interno che definiscono intestazioni, righe e colonne della tabella.
è il codice padre esterno. In questo tag, sta per riga della tabella, sta per colonna della tabella e sta per intestazione della tabella.
Codice:
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Profession</th>
</tr>
<tr>
<td>Jo
<td>27</td>
<td>Businessman</td>
</tr>
<tr>
<td>Carol</td>
<td>26</td>
<td>Nurse</td>
</tr>
<tr>
<td>Simone</td>
<td>39</td>
<td>Professor</td>
</tr>
</table>Produzione:
Nota: i valori all'interno del primo sono titoli. Quindi, abbiamo usato che applica l'effetto grassetto al testo.
Raggruppamento di tabelle
È possibile estendere le funzionalità di una tabella utilizzando elementi di raggruppamento. A volte sarà necessario creare tabelle di grandi dimensioni suddivise in più pagine.
Raggruppando i dati della tabella in intestazione, corpo e piè di pagina, è possibile consentire lo scorrimento indipendente. L'intestazione e il corpo verranno visualizzati su ogni pagina in cui si estende la tabella.
I tag di raggruppamento della tabella sono:
- = Per racchiudere le intestazioni di una tabella. Stampa su ogni pagina divisa della tabella.
- = Per racchiudere i dati principali di una tabella. Puoi averne quanti ne vuoi di cui hai bisogno. A tag indica un gruppo separato di dati.
- = Per racchiudere le informazioni del piè di pagina di una tabella. Stampa su ogni pagina divisa della tabella.
Si noti che non è obbligatorio utilizzare il raggruppamento. È possibile utilizzarlo per rendere più leggibili le tabelle più grandi. Alcuni sviluppatori specializzati, invece, utilizzano questi tag come selettori CSS.
Ecco come possiamo raggruppare la nostra tabella esemplificata in , E :
Codice:
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Profession</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>27</td>
<td>Businessman</td>
</tr>
<tr>
<td>Carol</td>
<td>26</td>
<td>Nurse</td>
</tr>
<tr>
<td>Simone</td>
<td>39</td>
<td>Professor</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total Persons:</td>
<td>3</td>
</tr>
</tfoot>
</table>Produzione:
L'elemento Form viene utilizzato per creare moduli interattivi per le pagine web. Un modulo HTML contiene diversi elementi consecutivi. Ad esempio : , ecc.
L'attributo action nel modulo è molto importante. Punta a una pagina lato server o di terze parti per l'elaborazione delle informazioni. Per l'elaborazione, è necessario prima definire un metodo.
Puoi usare due metodi: get o post. Get invia tutte le informazioni nel formato URL, mentre Post invia le informazioni nel corpo del messaggio.
Esistono molti tipi di input per i moduli. Il tipo di input più basilare è il testo. È scritto come I tipi potrebbero anche essere "radio", "checkbox", "email" e così via. Dovrebbe esserci un input per il tipo di invio in basso per creare un pulsante di invio.
Il tag viene utilizzato per creare etichette e associarle agli input. La regola per associare le etichette agli input è che gli attributi for="" dell'etichetta e id="" dell'input abbiano lo stesso valore.
Codice:
<form action="#">
<label for="firstname">First Name: </label>
<input type="text" id="firstname"><br>
<label for="lastname">Last Name: </label>
<input type="text" id="lastname"><br>
<label for="bio">Short Bio: </label>
<textarea id="bio" rows="10" cols="30" placeholder="Enter your bio here..."></textarea><br>
<label>Gender:</label><br>
<label for="male">Male</label>
<input type="radio" name="gender" id="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female"><br>
<input type="submit" value="Submit">
<form>Produzione:
Nota: ho puntato l'azione su un valore nullo perché non era connessa ad alcun server per elaborare le informazioni.
3. Attributi HTML
Gli attributi sono un tipo di modificatori per i tag HTML. Aggiungono nuove configurazioni ai tag HTML.
Un attributo si presenta come "attributoname="" e si trova nel tag HTML di apertura. Il valore dell'attributo va racchiuso tra virgolette.
id=”” e classe=””
id e class sono gli identificatori dei tag HTML. Nomi diversi vengono assegnati a diversi elementi HTML tramite gli identificatori. È possibile utilizzare un identificatore di classe per più elementi. Ma non è possibile utilizzare un identificatore di id per più elementi.
Codice:
<h1 class="heading">This is the main title</h1>href=""
href sta per Hypertext Reference (Riferimento Ipertestuale). Indirizza gli utenti a link di riferimento. Il tag anchor usa href per indirizzare gli utenti a un URL di destinazione.
Codice:
<a href="https://www.google.com/">Google</a>src=””
src sta per sorgente. Definisce la sorgente di un contenuto multimediale o di una risorsa utilizzata nel file HTML. La sorgente può essere un URL locale o di terze parti.
Codice:
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" />alt =””
alt sta per "alternativa". È un testo di backup che viene utilizzato quando un elemento HTML non può essere caricato.
Codice:
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" alt="Google's Headquarter" />stile=””
L'attributo style è spesso utilizzato nei tag HTML. Svolge la funzione del CSS all'interno del tag HTML. Le proprietà di stile vanno inserite tra virgolette.
Codice:
<h2 style="color:red">This is another title</h2>4. Visualizzazione del codice: blocco vs in linea
Alcuni elementi iniziano sempre su una nuova riga e occupano l'intera larghezza disponibile. Questi sono gli elementi "Block".
Ex: , , - , forma ecc.
Alcuni elementi occupano solo lo spazio necessario e non iniziano su una nuova riga. Questi sono elementi "inline".
Esempio: , , , , ecc.
Quando si utilizzano gli stili CSS, sarà necessario differenziare gli elementi a blocco da quelli in linea. In questa guida HTML, non è strettamente necessario.
Codice:
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h2>This is a H2 heading. It has Block display.</h2>
<h2>This is <u>another</u> H2 heading. Here the underline tag has Inline display.</h2>
</body>
</html>Produzione:
5. Virgolette doppie vs virgolette singole in HTML
Questa domanda è ovvia. Cosa si dovrebbe usare in HTML? Apostrofo singolo o doppio? Sembra che le persone usino entrambi, ma qual è la scelta corretta?
In HTML, virgolette singole e doppie sono la stessa cosa. Non fanno alcuna differenza nell'output.
Puoi usare quello che preferisci. Ma mescolarli entrambi in una pagina di codice è considerata una cattiva pratica. Dovresti essere coerente con qualsiasi di essi.
6. HTML semantico vs HTML non semantico
L'HTML semantico è l'ultima versione dell'HTML, chiamata anche HTML5. È la versione sviluppata dell'HTML non semantico e dell'XHTML.
Perché HTML5 è migliore? Nelle versioni precedenti, gli elementi HTML erano identificati da nomi id/classe. Ad esempio: era considerato un articolo.
In HTML5, Il tag si rappresenta come un articolo senza bisogno di alcun identificatore id/classe.
Grazie a HTML5, ora i motori di ricerca e altre applicazioni web possono comprendere meglio una pagina web. I siti web semantici hanno dimostrato di essere più efficaci per la SEO.
Ecco un elenco di alcuni tag HTML5 più diffusi:
- = Serve per racchiudere il contenuto principale che vuoi mostrare ai tuoi spettatori.
- = Serve a contrassegnare la parte dell'intestazione di un contenuto, come il titolo o i metadati dell'autore.
- = Specifica un contenuto definito dall'utente o indipendente per i tuoi spettatori.
- = Può raggruppare qualsiasi codice, come intestazione, piè di pagina o barra laterale. Si può dire che è la forma semantica di un div.
- = Qui è dove risiedono il contenuto del piè di pagina, il disclaimer o il testo del copyright.
- = Ti consente di inserire file audio senza avere alcun problema con i plugin.
- = Mi piace , puoi inserire video utilizzando questo tag senza problemi di plugin.
Una semplice struttura HTML5 potrebbe apparire così:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first web page</title>
</head>
<body>
<header>
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>This is the title of the article</h2>
<p>Posted by John Doe</p>
</header>
<p>Content of the article goes here</p>
</article>
</main>
<footer>
<p>Copyright 2025 John Doe</p>
</footer>
</body>
</html>7. Validazione HTML
La maggior parte dei professionisti del web convalida il proprio codice dopo averlo completato. Perché è necessario convalidare un codice quando funziona correttamente?
Ci sono due possibili motivi per convalidare i tuoi codici:
- Ti aiuterà a rendere il tuo codice compatibile con più browser e piattaforme. Il codice potrebbe non mostrare alcun errore nel tuo browser attuale, ma potrebbe mostrarlo in un altro. La convalida del codice risolverà il problema.
- I motori di ricerca e altri programmi web potrebbero interrompere la scansione della tua pagina se contiene errori. Puoi confermare tramite convalida che non ci siano errori gravi.
W3C Validator è il servizio più diffuso per la convalida del codice. Offre diversi metodi per convalidare i codici. È possibile caricare un file o inserire direttamente il codice nel loro motore di convalida.
Il passo successivo: dalla scrittura HTML alla creazione e all'hosting del tuo sito web
Ora che hai una solida conoscenza dei fondamenti dell'HTML, sei sulla buona strada per creare pagine web funzionali e ben strutturate. Che tu continui a programmare manualmente o preferisca un approccio più snello, ci sono molti strumenti che ti aiuteranno a dare vita ai tuoi progetti.
Se stai cercando di creare siti web senza immergerti nel codice, prendi in considerazione l'esplorazione la nostra lista dei migliori creatori di siti web senza codiceQueste piattaforme ti consentono di progettare e lanciare siti web professionali con facilità, utilizzando interfacce intuitive drag-and-drop, perfette per trasformare rapidamente le tue idee in realtà senza rinunciare alla flessibilità.
Per chi è pronto a pubblicare i propri progetti HTML, scegliere il servizio di hosting giusto è fondamentale. Scopri alcuni dei i migliori provider di hosting di siti web statici in questa guida per trovare soluzioni convenienti che completino perfettamente i tuoi siti codificati manualmente.
Qualunque sia la tua scelta, combinare le tue competenze HTML con gli strumenti e le soluzioni di hosting giusti getterà le basi per la tua presenza online. Buon coding!
