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.
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.
"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.
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.
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.
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.
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.
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.
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.