Guida allo stile HTML
Un codice HTML coerente, pulito e ordinato facilita la lettura e la comprensione del codice da parte degli altri.
Ecco alcune linee guida e suggerimenti per creare un buon codice HTML.
Dichiara sempre il tipo di documento
Dichiara sempre il tipo di documento come prima riga del documento.
Il tipo di documento corretto per HTML è:
<!DOCTYPE html>
Usa nomi di elementi minuscoli
L'HTML consente di mescolare lettere maiuscole e minuscole nei nomi degli elementi.
Tuttavia, consigliamo di utilizzare nomi di elementi minuscoli, perché:
- Mischiare nomi maiuscoli e minuscoli sembra brutto
- Gli sviluppatori normalmente usano nomi minuscoli
- Le lettere minuscole sembrano più pulite
- Il minuscolo è più facile da scrivere
Buono:
<body>
<p>This is a paragraph.</p>
</body>Male:
<BODY>
<P>This is a paragraph.</P>
</BODY>Chiudi tutti gli elementi HTML
In HTML, non è necessario chiudere tutti gli elementi (ad esempio l' <p>elemento).
Tuttavia, consigliamo vivamente di chiudere tutti gli elementi HTML, in questo modo:
Buono:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>Male:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>Usa nomi di attributi minuscoli
HTML consente di mescolare lettere maiuscole e minuscole nei nomi degli attributi.
Tuttavia, consigliamo di utilizzare nomi di attributi minuscoli, perché:
- Mischiare nomi maiuscoli e minuscoli sembra brutto
- Gli sviluppatori normalmente usano nomi minuscoli
- Le minuscole sembrano più pulite
- Le minuscole sono più facili da scrivere
Buono:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>Male:
<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>Citare sempre i valori degli attributi
HTML consente valori di attributo senza virgolette.
Tuttavia, consigliamo di citare i valori degli attributi, perché:
- Gli sviluppatori normalmente citano i valori degli attributi
- I valori citati sono più facili da leggere
- È NECESSARIO utilizzare le virgolette se il valore contiene spazi
Buono:
<table
class="striped">Male:
<table class=striped>Molto brutto:
Questo non funzionerà, perché il valore contiene spazi:
<table class=table striped>Specifica sempre alt, larghezza e altezza per le immagini
Specificare sempre l' altattributo per le immagini. Questo attributo è importante se l'immagine per qualche motivo non può essere visualizzata.
Inoltre, definisci sempre il widthe
heightdelle immagini. Ciò riduce lo sfarfallio, perché il browser può riservare spazio per l'immagine prima del caricamento.
Buono:
<img
src="html5.gif" alt="HTML5" style="width:128px;height:128px">Male:
<img
src="html5.gif">Spazi e segni di uguale
HTML consente spazi attorno ai segni di uguale. Ma senza spazio è più facile da leggere e raggruppa meglio le entità insieme.
Buono:
<link rel="stylesheet" href="styles.css">Male:
<link
rel = "stylesheet" href = "styles.css">Evita le linee di codice lunghe
Quando si utilizza un editor HTML, NON è conveniente scorrere a destra ea sinistra per leggere il codice HTML.
Cerca di evitare righe di codice troppo lunghe.
Righe vuote e rientro
Non aggiungere righe vuote, spazi o rientri senza motivo.
Per maggiore leggibilità, aggiungi righe vuote per separare blocchi di codice grandi o logici.
Per leggibilità, aggiungi due spazi di rientro. Non utilizzare il tasto Tab.
Buono:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the
center of the Greater Tokyo Area,
and the most
populous metropolitan area in the world.
It is the
seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>
</body>
Male:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>
Tokyo is the capital of Japan, the
center of the Greater Tokyo Area,
and the most
populous metropolitan area in the world.
It is the
seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
</p>
</body>
Buon esempio di tabella:
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>
Esempio di buona lista:
<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
Non saltare mai l'elemento <titolo>
L' <title>elemento è obbligatorio in HTML.
Il contenuto del titolo di una pagina è molto importante per l'ottimizzazione dei motori di ricerca (SEO)! Il titolo della pagina viene utilizzato dagli algoritmi dei motori di ricerca per decidere l'ordine quando si elencano le pagine nei risultati di ricerca.
L' <title>elemento:
- definisce un titolo nella barra degli strumenti del browser
- fornisce un titolo per la pagina quando viene aggiunta ai preferiti
- visualizza un titolo per la pagina nei risultati dei motori di ricerca
Quindi, cerca di rendere il titolo il più accurato e significativo possibile:
<title>HTML
Style Guide and Coding Conventions</title>
Omettendo <html> e <body>?
Una pagina HTML verrà convalidata senza i tag <html>e
:<body>
Esempio
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Tuttavia, consigliamo vivamente di aggiungere sempre i tag <html>e
!<body>
L'omissione <body>può produrre errori nei browser meno recenti.
Omettendo <html>e <body>
può anche mandare in crash il software DOM e XML.
Omettendo <testa>?
Il tag HTML <head> può anche essere omesso.
I browser aggiungeranno tutti gli elementi prima di , a un
elemento <body>predefinito .<head>
Esempio
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Tuttavia, consigliamo di utilizzare il <head>tag.
Chiudi elementi HTML vuoti?
In HTML, è facoltativo chiudere gli elementi vuoti.
Consentito:
<meta
charset="utf-8">
Consentito anche:
<meta charset="utf-8" />
Se prevedi che il software XML/XHTML acceda alla tua pagina, mantieni la barra di chiusura (/), perché è richiesta in XML e XHTML.
Aggiungi l'attributo lang
Dovresti sempre includere l' langattributo all'interno del <html>tag, per dichiarare la lingua della pagina Web. Questo ha lo scopo di aiutare i motori di ricerca e i browser.
Esempio
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Metadati
Per garantire una corretta interpretazione e una corretta indicizzazione dei motori di ricerca, sia la lingua che la codifica dei caratteri dovrebbero essere definite il prima possibile in un documento HTML:<meta charset="charset">
<!DOCTYPE html>
<html
lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
Impostazione della vista
Il viewport è l'area visibile dell'utente di una pagina web. Varia a seconda del dispositivo: sarà più piccolo su un telefono cellulare che sullo schermo di un computer.
Dovresti includere il seguente <meta>elemento in tutte le tue pagine web:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Questo fornisce al browser le istruzioni su come controllare le dimensioni e il ridimensionamento della pagina.
La width=device-widthparte imposta la larghezza della pagina per seguire la larghezza dello schermo del dispositivo (che varierà a seconda del dispositivo).
La initial-scale=1.0parte imposta il livello di zoom iniziale quando la pagina viene caricata per la prima volta dal browser.
Ecco un esempio di una pagina web senza il meta tag viewport e la stessa pagina web con il meta tag viewport:
Suggerimento: se stai navigando questa pagina con un telefono o un tablet, puoi fare clic sui due collegamenti sottostanti per vedere la differenza.
Commenti HTML
I commenti brevi dovrebbero essere scritti su una riga, in questo modo:
<!-- This is a comment -->
I commenti che si estendono su più righe devono essere scritti in questo modo:
<!--
This is a long comment example. This is
a long comment example.
This is a
long comment example. This is a long comment example.
-->
I commenti lunghi sono più facili da osservare se sono rientrati di due spazi.
Utilizzo dei fogli di stile
Use simple syntax for linking to style sheets (the
type attribute is not necessary):
<link rel="stylesheet" href="styles.css">
Short CSS rules can be written compressed, like this:
p.intro {font-family:Verdana;font-size:16em;}
Long CSS rules should be written over multiple lines:
body {
background-color: lightgrey;
font-family: "Arial
Black", Helvetica, sans-serif;
font-size: 16em;
color:
black;
}
- Place the opening bracket on the same line as the selector
- Use one space before the opening bracket
- Use two spaces of indentation
- Use semicolon after each property-value pair, including the last
- Only use quotes around values if the value contains spaces
- Place the closing bracket on a new line, without leading spaces
Loading JavaScript in HTML
Use simple syntax for loading external scripts (the
type attribute is not necessary):
<script src="myscript.js">
Accessing HTML Elements with JavaScript
Using "untidy" HTML code can result in JavaScript errors.
These two JavaScript statements will produce different results:
Example
getElementById("Demo").innerHTML = "Hello";
getElementById("demo").innerHTML
= "Hello";
Visit the JavaScript Style Guide.
Use Lower Case File Names
Some web servers (Apache, Unix) are case sensitive about file names: "london.jpg" cannot be accessed as "London.jpg".
Other web servers (Microsoft, IIS) are not case sensitive: "london.jpg" can be accessed as "London.jpg".
If you use a mix of uppercase and lowercase, you have to be aware of this.
If you move from a case-insensitive to a case-sensitive server, even small errors will break your web!
To avoid these problems, always use lowercase file names!
File Extensions
HTML files should have a .html extension (.htm is allowed).
CSS files should have a .css extension.
JavaScript files should have a .js extension.
Differences Between .htm and .html?
There is no difference between the .htm and .html file extensions!
Both will be treated as HTML by any web browser and web server.
Default Filenames
When a URL does not specify a filename at the end (like "https://www.w3schools.com/"), the server just adds a default filename, such as "index.html", "index.htm", "default.html", or "default.htm".
If your server is configured only with "index.html" as the default filename, your file must be named "index.html", and not "default.html".
However, servers can be configured with more than one default filename; usually you can set up as many default filenames as you want.