Dokumentets struktur

Kontraktet med webbläsaren

Varje HTML-dokument ska innehålla en grund. Det är ett kontrakt mellan din kod och webbläsaren. HTML HyperText Markup Language, det språk som används för att strukturera innehåll på webben med hjälp av taggar och element. Se: Dokumentets struktur är ett otroligt robust språk, det vill säga att det kan hantera massor med fel och ändå fungera. Men utan en korrekt struktur kan webbläsaren missförstå vad du menar, och resultatet blir oförutsägbart.

I den här delen skapar du din övningssida: ett komplett HTML-grundskal med <head> (för webbläsaren) och <body> (för användaren), och utforskar det i DevTools.

Tagg, element och attribut

Tre begrepp du behöver känna till innan vi studerar koden.

Begrepp	Vad det är	Exempel
Tagg	Större än och mindre än + elementnamnet, talar om var något börjar och slutar. Varje tagg har en öppning och en stängning	`<p>` och `</p>`
Element	Helheten från öppningstagg till stängningstagg, inklusive innehållet	`<p>Hej!</p>`
Attribut	Extra information inuti en öppningstagg, format `namn="värde"`	`lang="sv"` i `<html lang="sv">`

En tagg är alltså inte samma sak som ett element, taggen är skiljetecknet, elementet är hela meningen. Du stöter på alla tre direkt när du öppnar ett HTML-dokument. Att ha orden på plats gör det lättare att läsa felmeddelanden och dokumentation.

Strukturens delar

Här är ett komplett, korrekt HTML-dokument:

<!DOCTYPE html>
<html lang="sv">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Min webbsida</title>
    </head>
    <body>
        <h1>Hej, världen!</h1>
        <p>Det här är synligt innehåll.</p>
    </body>
</html>

Begrepp

<!DOCTYPE html> Inte en tagg, utan en deklaration. Den talar om för webbläsaren att du skriver HTML5. Utan den kan webbläsaren aktivera ett gammalt kompatibilitetsläge (Quirks Mode) och resultatet blir oförutsägbart.
<html lang="sv"> Rotelementet som omsluter hela dokumentet. Attributet lang anger sidans språk. Skärmläsare använder det för att välja rätt uttal; sökmotorer för att förstå för vilken publik sidan är skriven. Det är lang-attributet som gör att webbläsaren erbjuder automatiska översättningar.
<meta charset="utf-8" /> Anger Teckenkodning Standarden för hur tecken (bokstäver och symboler) representeras digitalt. UTF-8 är det moderna standardvalet och stöder i princip alla världens skriftsystem, inklusive å, ä och ö. Se: Dokumentets struktur . UTF-8 stöder i princip alla världens skriftsystem och är standardvalet. Utan den kan svenska tecken som å, ä och ö visas fel. Lägg den alltid först i <head> så att webbläsaren vet hur den ska tolka resten av dokumentet.
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> Utan denna tror mobilen att den är en desktop-skärm i 1080p. Din text kommer bli mikroskopisk och användaren måste zooma för att läsa.
<title> Texten som visas i webbläsarfliken och i Googles sökresultat. Aldrig synlig som en rubrik på själva sidan.

Head vs body

Tänk på <head> som maskinrummet, här finns logistik, inställningar och kommunikation med omvärlden. Det kallas ofta metadata. Användaren ser inget härifrån förutom flikens titel.

Tänk på <body> som scenen, allt du placerar här är till för mänskliga ögon.

Innehåll	Var?
Text, bilder, rubriker, knappar	`<body>`
Sidtitel (webbläsarfliken)	`<title>` i `<head>`
Teckenkodning, viewport	`<meta>` i `<head>`
Länk till CSS-fil	`<link>` i `<head>`

Uppgift: Inspektera i DevTools

Skapa en mapp för din övningssida. Den bygger du vidare på genom hela temat, del för del. I mappen skapar du filen index.html och klistrar in grundskalet ovan (eller generera det med Emmet: ! + Tab). Skapa också en readme.md i samma mapp, det är där du samlar dina reflektioner under områdets gång. Den ligger lokalt på din dator, du behöver inte lägga upp något online ännu.

Spara och öppna index.html i webbläsaren. Tryck F12 för att öppna DevTools och välj fliken Element/Inspektera.

Du ser nu hela ditt dokument som ett klickbart träd. Det är webbläsarens tolkning av din kod. Prova:

Hovra över <body>, den blå markeringen visar dig “scenen”, allt synligt utrymme
Hovra över <head>, ingenting lyser upp, maskinrummet är osynligt
Hovra över <title>, inget markeras i viewport eftersom titeln bara syns i webbläsarfliken

Vad händer om… du tar bort viewport-raden (<meta name="viewport" ... />) ur <head>? Spara, ladda om och slå på mobilläget i DevTools (ikonen uppe till vänster, eller Ctrl+Shift+M). Texten krymper till nästan oläslig storlek. Utan viewport-raden antar mobilen att sidan är byggd för en bred datorskärm och zoomar ut alltihop. Lägg tillbaka raden och ladda om, nu fyller texten skärmen igen.

DevTools är ditt viktigaste verktyg. Det visar vad webbläsaren faktiskt gör med din kod, inte bara vad du har skrivit.

Motivera & reflektera

I din readme.md, förklara med egna ord vad viewport-raden gör. Vad hände i mobilläget när den saknades, och vilka användare drabbas om du glömmer den?