Introduzione a HTML e CSS
HTML (HyperText Markup Language) e CSS (Cascading Style Sheets) sono i due linguaggi fondamentali del web. HTML definisce la struttura e il contenuto di una pagina, mentre CSS ne controlla l'aspetto visivo: colori, layout, tipografia e animazioni.
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 meccanismo con cui CSS identifica gli elementi HTML a cui applicare gli stili. Esistono diversi livelli di specificità:
- 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 è rappresentato come un box rettangolare composto da quattro livelli concentrici: content, padding, border e margin.
/* 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 è un sistema di layout bidimensionale che permette di controllare righe e colonne contemporaneamente, creando griglie complesse con poche righe di codice.
.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 controlla come un elemento si colloca nel flusso del documento:
- 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 permettono di applicare stili diversi in base alle caratteristiche del dispositivo, principalmente la larghezza della viewport. Sono il pilastro 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 è la best practice attuale: si parte dagli stili per schermi piccoli e si aggiungono regole per schermi più grandi con min-width. Questo garantisce che i dispositivi meno potenti carichino meno CSS. Visto che oggi la maggior parte del traffico arriva da smartphone, progettare prima per il mobile non è solo una scelta tecnica ma una decisione strategica che incide direttamente su esperienza utente, conversioni e posizionamento sui motori di ricerca.
Per approfondire le tecniche avanzate come clamp() e le container queries, consulta la guida sul Responsive Design Avanzato. Per rendere le pagine interattive, il passo successivo è JavaScript.
Vuoi imparare ad applicarlo davvero?
Scopri i corsi e la formazione di Federico Boggia su AI, dati e digitale.