Articolo originale: Basic HTML5 Template: Use This HTML Boilerplate as a Starter for Any Web Dev Project
Qando stai costruendo un nuovo website è importante avere una buona fondazione iniziale. In questo articolo ti spiegherò cosa è un boilerplate HTML e come creare un template basico da usare nei tuoi progetti.
Cosa è un boilerplate HTML 5?
Secondo Wikipedia,
codice boilerplate o solo boilerplate sono sezioni di codice che sono ripetute in vari punti con poche o senza variazioni.
Un boilerplate in HTML è un template che aggiungi all'inizio del tuo progetto. Dovresti aggiungere questo boilerplate a tutte le tue pagine HTML.
Esempio di un boilerplate HTML 5
Guardiamo un esempio basico.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="index.js"></script>
</body>
</html>Cosa è un doctype in HTML?
La prima riga del tuo HTML dovrebbe essere la dichiarazione doctype. Un doctype dice al tuo browser quale versione di HTML è usata per scrivere la pagina.
<!DOCTYPE html>Se dimentichi di includere questa riga di codice nel tuo file allora alcune tag HTML 5 come <article>, <footer>, <header> potrebbero non essere supportate dal tuo browser.
Cosa è l'elemento HTML root?
La tag <html> è l'elemento a livello più alto del tuo file HTML. Anniderai le tag <head> e <body> dentro di esso.
<!DOCTYPE html>
<html lang="en">
<head></head>
<body></body>
</html>L'attributo lang dentro la tag di apertura <html> imposta la lingua per la pagina. È anche buona norma includerlo per questioni di accessibilità, così che i screenreader sappiano come pronunciare il testo.
Cosa sono le tag head in HTML?
Le tag <head> contengono informazioni che sono processate dalle macchine. Dentro le tag <head> anniderai i metadata, cioè dati che descrivono il documento alla macchina.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
</head>Cosa è codifica dei caratteri UTF-8?
UTF-8 è lo standard di codifica dei caratteri che dovresti usare nelle due pagine web. Questo sarà in genere la prima tag <meta> mostrato nell'elemento <head>.
<meta charset="UTF-8">Secondo quanto dice il World Wide Web Consortium,
Una codifica basata su Unicode come UTF-8 può supportare molte linghe e può accomodare pagine e moduli in ogni mix di quelle lingue. Il suo uso elimina anche la necessità per logica sul server per determinare individualmente la codifica dei caratteri per ogni pagina servita o per ogni modulo ricevuto.
Cosa è la tag meta viewport in HTML?
Questa tag renderizza la larghezza della pagina alla larghezza dello schermo del dispositivo. Se hai un dispositivo mobile largo 600px, allora la pagina del browser sarà anch'essa larga 600px.
initial-scale controlla il livello di zoom. Il valore di 1 per initial-scale previene lo zoom di default dei browser.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Cosa significa X-UA-Compatible?
Questa tag meta <meta> specifica la modalità del documento per Internet Explorer. IE=edge è la modalità più alta supportata.
<meta http-equiv="X-UA-Compatible" content="ie=edge">
Cosa sono le tag HTML title?
La tag <title> è il titolo della pagina. Questo testo è mostrato nel titolo della pagina nel browser.
<title>HTML 5 Boilerplate</title>
CSS stylesheet
Questo codice linka il tuo CSS personalizzato alla pagina HTML. rel="stylesheet" definisce la relazione tra il file HTML e la risorsa esterna
<link rel="stylesheet" href="style.css">
Le tag Script in HTML
Tag script esterne sono piazzate prima del tag body di chiusura. Qui è dove linki al tuo codice JavaScript esterno.
<script src="index.js"></script>
Conclusioni
Dovresti sempre aggiungere un boilerplate HTML 5 a tutte le tue pagine HTML. Questo codice di partenza contiene imformazioni importanti come doctype, metadata, fogli di stile esterni, e tag script.