HTML – struktur & semantik
Använd HTML för att beskriva innehållets struktur och betydelse med lämpliga element. Genomgången kopplar webbstandarder och utvecklingsmetoder till konkreta webbsidor och mindre projekt.
- Nivå 1
Förstå → Se exempel → Träna
Förstå
Kärnan
HTML är ett märkspråk där element beskriver dokumentets struktur. Semantiska element som header, nav, main och article uttrycker innehållets roll tydligare än generiska behållare.
Så arbetar du
Utgå från innehållets betydelse, välj passande element och kontrollera att rubriknivåer och struktur är logiska.
Nyanser och begränsningar
Semantik handlar inte om hur sidan ser ut. Visuell design hör i första hand hemma i CSS.
I ett webbprojekt
Koppla kunskapen till ett tydligt användarbehov, en definierad struktur och konkreta kvalitetskrav. Bygg i små steg och kontrollera både funktion, standarder, tillgänglighet och dokumentation innan projektet avslutas.
Exempel
Exempel
- En huvudrubrik markeras som h1 och navigationen som nav i stället för att allt byggs med div-element.
- Förklara därefter vilket webbtekniskt val som är viktigast för att lösningen ska bli robust, begriplig och ändamålsenlig.
Så gör du
- 1Bestäm innehållets struktur och semantik i HTML.
- 2Separera presentationen i CSS.
- 3Bygg layouten så att den kan anpassas till olika skärmar.
- 4Optimera bilder, media, typografi och teckenkodning.
- 5Kontrollera resultatet i relevanta viewport-storlekar.
Vanliga misstag
Vanligt misstag
Att använda HTML-element enbart efter hur de ser ut.
Bättre
Välj HTML efter semantisk betydelse och använd CSS för presentation.
Struktur och utseende har olika roller.
Vanligt misstag
Att använda onödigt stora mediefiler.
Bättre
Anpassa format, dimensioner och komprimering efter användningen.
Filstorlek påverkar laddningstid.
Fundera
Vilket val skulle vara viktigast att kunna motivera när du arbetar med html – struktur & semantik?
Träna
Övning
Beskriv hur du skulle använda kunskapen om html – struktur & semantik i ett mindre webbprojekt.
Sammanfattning
- Använd HTML för att beskriva innehållets struktur och betydelse med lämpliga element.
- Använd webbstandarder och välj teknik efter dess avsedda roll.
- Testa funktion, tillgänglighet och interoperabilitet systematiskt.
- Dokumentera viktiga tekniska, juridiska och etiska val i projektet.
Relaterade genomgångar
Fortsätt med något som hänger ihop med den här genomgången.
CSS – presentation & separation
Använd CSS för färg, typografi, avstånd och layout utan att blanda presentation med HTML-strukturen.
Läs genomgångenResponsiv design – grunder
Anpassa webblayouten till olika skärmstorlekar och tillgängligt utrymme.
Läs genomgångenBilder & media för webben
Välj lämpliga format och dimensioner för bilder och media så att kvalitet, prestanda och användning balanseras.
Läs genomgången