Din första HTML-sida – lär dig HTML från grunden

Skapa din allra första webbsida med HTML. Du behöver bara en textredigerare och en webbläsare – inget annat.

Vad du behöver

För att skapa en HTML-sida behöver du bara två saker:

En textredigerare – Anteckningar (Windows) eller TextEdit (Mac) fungerar, men vi rekommenderar Visual Studio Code (gratis)
En webbläsare – Chrome, Firefox, Edge eller Safari

Vad är HTML?

HTML (HyperText Markup Language) är märkspråket som beskriver strukturen på en webbsida. Det talar om för webbläsaren vad som är en rubrik, en paragraf, en bild, en länk – och så vidare.

HTML är inte ett programmeringsspråk. Det har ingen logik, inga villkor, inga loopar. Det är ett strukturspråk som märker upp innehåll med taggar.

Din första sida

Skapa en fil som heter index.html och klistra in följande kod:

<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Min första webbsida</title>
</head>
<body>
<h1>Hej världen!</h1>
<p>Det här är min allra första webbsida.</p>
<p>Jag lär mig <strong>HTML</strong> och det går bra!</p>
</body>
</html>

Dubbelklicka på filen – den öppnas i din webbläsare och du ser resultatet direkt.

Vad gör varje del?

Kod	Förklaring
`<!DOCTYPE html>`	Talar om att det här är HTML5
`<html lang="sv">`	Starttaggen för hela sidan, språk: svenska
`<head>`	Metadata – saker som inte syns på sidan
`<meta charset="UTF-8">`	Teckenkodning så att å, ä, ö fungerar
`<title>`	Titeln som visas i webbläsarens flik
`<body>`	Allt synligt innehåll
`<h1>`	Huvudrubrik (störst)
`<p>`	Paragraf (brödtext)
`<strong>`	Fetstil

Fler taggar att testa

Lägg till följande i <body> och ladda om sidan:

Rubriker

<h1>Rubrik nivå 1</h1>
<h2>Rubrik nivå 2</h2>
<h3>Rubrik nivå 3</h3>

Listor

<ul>
<li>Punkt ett</li>
<li>Punkt två</li>
<li>Punkt tre</li>
</ul><ol>
<li>Steg ett</li>
<li>Steg två</li>
</ol>

Länkar

<a href="https://webbdesigna.se">Besök Webbdesigna</a>

Bilder

<img src="bild.jpg" alt="En beskrivning av bilden">

Tips: Attributet alt beskriver bilden för sökmotorer och skärmläsare. Hoppa aldrig över det.

Strukturen i ett HTML-dokument

Tänk på HTML som en trädstruktur:

html
├── head
│   ├── meta
│   └── title
└── body
├── h1
├── p
└── ul
├── li
├── li
└── li

Varje tagg som öppnas måste stängas. Taggar kan nästlas (placeras inuti varandra), men de måste stängas i rätt ordning.

Vanliga nybörjarmisstag

Glömma stängtaggen: Text utan 
Korsade taggar: text – fel ordning
Glömma charset: Utan UTF-8 kan å, ä, ö visas som konstiga tecken

Prova själv

Kopiera koden ovan, spara som index.html och experimentera! Ändra texten, lägg till fler taggar, skapa en lista med dina favoritsaker. Det bästa sättet att lära sig HTML är att skriva det själv.

Nästa steg

Nu har du en fungerande HTML-sida – men den ser ganska tråkig ut. I nästa artikel lär du dig CSS, språket som ger din sida färg, typografi och layout.

Nästa steg

Du har byggt din första HTML-sida – grattis! Men den ser ganska avskalad ut. I nästa artikel ger vi den liv med färger, typografi och layout:

👉 Styla med CSS – färger, typografi och layout

Har du missat hur webben fungerar under huven? Gå tillbaka till Hur webben fungerar – domäner, servrar och webbläsare.