Skip to main content

Linguaggio di marcatura ipertestuale (HTML)

TL;DR

HTML (HyperText Markup Language) è un linguaggio usato per creare pagine web. Alcune pagine possono essere scritte direttamente in HTML, mentre altre possono usare page builder o altri strumenti per creare pagine web che producono anche output HTML, che a loro volta possono essere letti dai browser.

Cosa significa HTML?

HTML sta per HyperText Markup Language ed è il linguaggio usato per creare pagine web. Usa i markup per definire e dare stile agli elementi. Per esempio, può definire font, colori, posizione, link ecc. Anche se la maggior parte dei costruttori di siti web non scrive direttamente in HTML, gli output finali che vengono letti e interpretati dai browser web sono in formato HTML. Questo è il motivo per cui, quando si clicca con il tasto destro del mouse su qualsiasi pagina web e si seleziona "View page source", la prima riga di testo nella finestra risultante dovrebbe essere <!doctype html>.

Qual è la struttura di una pagina HTML?

Mentre le strutture possono variare, alcuni degli elementi che dovresti trovare in qualsiasi HTML sono i seguenti (con le spiegazioni in corsivo). Controlla questo su qualsiasi pagina web cliccando con il tasto destro del mouse in qualsiasi punto e selezionando "Visualizza sorgente della pagina":

<!DOCTYPE html> - questo mostra al browser web che questo è un file HTML che può leggere

<html lang="en"> - questo mostra la lingua in cui è scritta la pagina web

<head> - questo segna l'inizio della sezione head, dove sono collocati i codici generali

<title>Titolo della pagina</title> - questo è un meta tag che mostra il titolo della pagina, che appare nella scheda del browser

<meta name="description" content="..." /> - questo è usato per descrivere di cosa tratta la pagina, per i motori di ricerca

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=0" /> - questo è un comando che dice come la pagina web dovrebbe essere visualizzata su varie dimensioni dello schermo

<meta name="robots" content="index,follow" /> - questo dice ai bot che scansionano la pagina che possono indicizzarla e aggiungerla ai risultati dei motori di ricerca

<link rel="stylesheet" type="text/css" href="/css/style/style.css"> - questo collega l'HTML a un file CSS, dove viene inserito uno stile più dettagliato per il testo

<script src="/js/random.js" type="text/javascript"></script> - questo si collega a un file JavaScript, usato per eseguire un'azione sulla pagina web

<link rel="canonical" href="https://yourpage.com"/> - se ci sono pagine con contenuti simili o la pagina può essere trovata in più di un URL, questo mostra ai crawler quale URL deve essere preso in considerazione per scopi di autorità

</head> - questo chiude la sezione head

<body> - questo apre la sezione del corpo, dove viene inserito il contenuto effettivo della pagina

<div class="container"> - questo apre una sezione chiamata container, che di solito crea la cornice per il contenuto

<a href="https://yoursiteshomepage.com"><img class="navbar-brand-logo-normal" src="/images/logo.svg" alt="Visitor Analytics logo" height="52" width="180"></a> - questo è un modo per inserire un'immagine del logo che rimanda alla tua homepage

<div class="first-text">Queste sono le prime parole da visualizzare effettivamente sul tuo sito web</div> - del testo che può essere stilizzato nel file CSS collegato

...

</body>