I due linguaggi
HTML (HyperText Markup Language) e CSS (Cascading Style Sheets) sono i due mattoni del web. HTML dice cosa c'è nella pagina e come è organizzato; CSS dice come si presenta: colori, spazi, impaginazione, caratteri, animazioni. Sono due lingue diverse con due compiti diversi, e confonderle è l'errore che rende il codice ingestibile dopo un mese.
Punti chiave
- HTML descrive la struttura e il significato del contenuto, CSS ne governa la presentazione: tenere separati i due livelli è il principio cardine del web moderno.
- I tag semantici di HTML5 migliorano accessibilità, SEO e leggibilità del codice.
- Il box model e
box-sizing: border-boxsono la base per controllare dimensioni e spaziature. - Flexbox serve per layout monodimensionali, CSS Grid per quelli bidimensionali.
- Le media query con approccio mobile-first rendono il sito responsive su ogni dispositivo.
Ogni sito web, dalla landing page più semplice alla web app più complessa, si basa su questa coppia. Padroneggiare HTML e CSS è il primo passo per chiunque voglia lavorare nello sviluppo web, nel SEO o nel web design. Per chi opera nel marketing o lavora con strumenti di AI, anche solo saper leggere e ritoccare il codice di una pagina significa poter intervenire in autonomia su landing page, newsletter e contenuti generati automaticamente senza dipendere sempre da uno sviluppatore.
"HTML fornisce il significato, CSS fornisce la presentazione. Separare struttura e stile è il principio cardine dello sviluppo web moderno."
Struttura di una pagina HTML
Ogni documento HTML segue una struttura standard dichiarata attraverso il DOCTYPE e organizzata in due sezioni principali: <head> (metadati, titolo, fogli di stile) e <body> (contenuto visibile).
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titolo della pagina</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>...</header>
<main>...</main>
<footer>...</footer>
</body>
</html>Il tag <meta name="viewport"> è essenziale per il responsive design: indica al browser come scalare la pagina sui dispositivi mobili. La sezione <head> ospita anche i metadati che gli strumenti di marketing e i motori di ricerca leggono per primi (titolo, descrizione, dati Open Graph): curarli bene significa controllare come la pagina appare nei risultati di ricerca e quando viene condivisa sui social.
Tag semantici HTML5
HTML5 ha introdotto tag semantici che descrivono il ruolo del contenuto, migliorando accessibilità, SEO e leggibilità del codice.
| Tag | Significato | Uso tipico |
|---|---|---|
<header> | Intestazione | Logo, navigazione principale |
<nav> | Navigazione | Menu, breadcrumb |
<main> | Contenuto principale | Corpo unico della pagina |
<article> | Contenuto autonomo | Post blog, notizia, scheda prodotto |
<section> | Sezione tematica | Raggruppamento logico di contenuti |
<aside> | Contenuto laterale | Sidebar, widget, contenuto correlato |
<footer> | Piè di pagina | Copyright, link utili, contatti |
Selettori CSS
I selettori sono il modo in cui il CSS dice «questi elementi qui». Hanno un peso diverso fra loro, e il peso è la causa del 90% dei «perché questo stile non si applica»:
- Selettore di tipo:
p,h1,div, seleziona tutti gli elementi di quel tipo. - Selettore di classe:
.card, seleziona tutti gli elementi con quella classe. - Selettore ID:
#header, seleziona l'elemento con quell'ID univoco. - Selettore di attributo:
input[type="email"], seleziona in base all'attributo. - Pseudo-classi:
a:hover,li:first-child, selezionano uno stato o una posizione specifica. - Combinatori:
div > p(figlio diretto),div p(discendente),h2 + p(fratello adiacente).
La specificità determina quale regola vince in caso di conflitto: inline (1000) > ID (100) > classe (10) > tipo (1). Evitare l'uso di !important salvo casi eccezionali, perché annulla la gerarchia e rende il CSS difficile da mantenere. In progetti reali conviene basare gli stili sulle classi e adottare una convenzione di denominazione coerente (ad esempio BEM): così il codice resta prevedibile anche quando il sito cresce e più persone ci lavorano sopra.
Il Box Model
Ogni elemento HTML è una scatola con quattro strati concentrici: contenuto, padding, bordo, margine. Capire il box model è il momento in cui il CSS smette di sembrare imprevedibile.
/* Box model standard */
.card {
width: 300px; /* larghezza del contenuto */
padding: 20px; /* spazio interno */
border: 1px solid #ccc;
margin: 16px; /* spazio esterno */
}
/* Con box-sizing: border-box il padding e il border
sono inclusi nella larghezza dichiarata */
*, *::before, *::after {
box-sizing: border-box;
}La dichiarazione box-sizing: border-box è ormai uno standard de facto: semplifica enormemente il calcolo delle dimensioni e viene inclusa in ogni reset CSS moderno. Senza di essa, aggiungere padding o bordo aumenta la larghezza effettiva dell'elemento e manda fuori posto il layout: applicarla a tutti gli elementi all'inizio del foglio di stile evita la maggior parte degli errori di allineamento che fanno perdere tempo ai principianti.
Flexbox
Flexbox (Flexible Box Layout) è un modello di layout unidimensionale che distribuisce lo spazio tra gli elementi lungo un asse principale (orizzontale o verticale).
.container {
display: flex;
justify-content: space-between; /* asse principale */
align-items: center; /* asse trasversale */
gap: 16px;
}
.item {
flex: 1; /* cresce per occupare lo spazio disponibile */
min-width: 200px; /* larghezza minima prima del wrap */
}
.container { flex-wrap: wrap; } /* va a capo se necessario */Flexbox è ideale per navbar, card layout, centratura verticale e distribuzione uniforme degli elementi. Per layout bidimensionali complessi, si preferisce CSS Grid. La centratura perfetta di un contenuto, da sempre uno dei problemi storici del CSS, con Flexbox si risolve in due righe (justify-content: center; align-items: center): è uno dei motivi per cui ha cambiato il modo di costruire le interfacce.
CSS Grid
CSS Grid lavora su due dimensioni insieme, righe e colonne, e ti fa costruire impaginazioni complesse con poche righe. Quando ho imparato Grid ho buttato via metà del CSS che scrivevo prima.
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
/* Layout a 3 colonne con sidebar */
.page {
display: grid;
grid-template-columns: 250px 1fr 200px;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}Posizionamento
La proprietà position decide come un elemento si colloca rispetto al flusso della pagina:
- static (default): l'elemento segue il normale flusso del documento.
- relative: si sposta rispetto alla sua posizione originale senza alterare il flusso.
- absolute: esce dal flusso e si posiziona rispetto all'antenato più vicino con posizione diversa da static.
- fixed: resta fisso rispetto alla viewport (ideale per header sticky o pulsanti flottanti).
- sticky: si comporta come relative finché non raggiunge una soglia di scroll, poi diventa fixed.
Il posizionamento absolute e fixed rimuovono l'elemento dal flusso normale: gli altri elementi si comportano come se non esistesse. Usarli con attenzione per evitare sovrapposizioni indesiderate, gestendo lo stacking degli elementi con la proprietà z-index. Casi pratici tipici sono i pulsanti WhatsApp flottanti, i banner cookie e i menu di navigazione che restano agganciati in alto durante lo scroll.
Media Query
Le media query applicano stili diversi in base al dispositivo, in genere alla larghezza della finestra. Sono la base del responsive design.
/* Approccio mobile-first: stili base per mobile */
.container { padding: 16px; }
/* Tablet (768px in su) */
@media (min-width: 768px) {
.container { padding: 24px; max-width: 720px; margin: 0 auto; }
}
/* Desktop (1024px in su) */
@media (min-width: 1024px) {
.container { padding: 32px; max-width: 1140px; }
}L'approccio mobile-first è quello che si usa oggi: si scrivono gli stili per lo schermo piccolo e si aggiunge con min-width man mano che c'è spazio. I dispositivi meno potenti caricano meno CSS, e dato che la maggior parte delle visite arriva da telefono, questa è anche la scelta che si vede nei numeri delle conversioni e del posizionamento.
Da qui in avanti: le tecniche moderne tipo clamp() e le container query stanno nella guida sul responsive design avanzato, e per far muovere le pagine si passa a JavaScript. Un consiglio sull'ordine: prima impara a fare una pagina statica che ti piace, poi aggiungi il movimento. Il contrario produce siti che si muovono e non si leggono.
Vuoi imparare ad applicarlo davvero?
Scopri i corsi e la formazione di Federico Boggia su AI, dati e digitale.
