HTML – vad är det? Definition, funktioner och användning

Lär dig vad HTML är — definition, nyckelfunktioner och praktisk användning (inkl. HTML5) för att skapa och strukturera webbsidor. Guide för nybörjare och utvecklare.

Författare: Leandro Alegsa

19-01-2026 15:48

Hyper Text Markup Language (HTML) är ett markupspråk för att skapa en webbsida. Webbsidor visas vanligtvis i en webbläsare. De kan innehålla text, länkar, bilder och till och med ljud och video. HTML används för att markera och beskriva alla dessa typer av innehåll så att webbläsaren kan visa dem korrekt. HTML kan också användas för att lägga till metainformation till en webbsida. Metainformation visas vanligtvis inte av webbläsare och är uppgifter om webbsidan, t.ex. namnet på den person som skapat sidan. Cascading Style Sheets (CSS) används för att skapa stilar för HTML-element medan JavaScript används för att manipulera HTML-element och CSS-stilar.

HTML skapades av World Wide Web Consortium (W3C). Det finns flera versioner av HTML. I september 2018 kallas den nuvarande standarden för HTML för HTML 5 och är specifikt version 5.2.

Grundläggande struktur

En vanlig HTML-dokumentstruktur innehåller en deklaration om dokumenttyp följt av roten <html> med två huvuddelar: <head> och <body>. I <head> placeras metadata som <title>, teckenkodning, länkar till CSS och andra uppgifter som inte direkt syns i sidans innehåll. I <body> ligger själva innehållet—text, bilder, länkar och interaktiva element.

<!DOCTYPE html> <html lang="sv">   <head>     <meta charset="utf-8">     <title>Exempel</title>   </head>   <body>     <h1>Hej världen</h1>     <p>Detta är en enkel webbsida.</p>   </body> </html>

Vanliga element och semantik

Rubriker: <h1>–<h6> för att ange hierarkin i innehållet.
Paragrafer och text: <p>, <span>, <strong>, <em> (eller <i>).
Layout och semantiska block: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>—hjälper både läsare och sökmotorer att förstå sidans struktur.
Media: <img> för bilder, <audio> och <video> för ljud och video, <figure> och <figcaption> för bildbeskrivningar.
Listor och tabeller: <ul>, <ol>, <li> och <table> med <tr>, <th>, <td>.

Attribut och metadata

HTML-element kan ha attribut som ger extra information eller styr hur elementet beter sig. Vanliga attribut är id, class, src, href, alt och title. Metadata i <head> inkluderar <meta charset="utf-8">, viewport-inställningar för mobilanpassning och meta-beskrivningar som hjälper sökmotorer att tolka innehållet.

Formulär och interaktivitet

HTML har stöd för formulär via <form>, <input>, <select>, <textarea> med mera. Moderna HTML-specifikationer introducerar många input-typer (t.ex. email, tel, date) och inbyggd validering som underlättar användarvänliga formulär. JavaScript används ofta tillsammans med formulär för att skapa dynamiskt beteende och avancerad validering.

Multimedia, responsivitet och moderna element

HTML5 la till bättre inbyggt stöd för multimedia (utan plugins) och element för responsiv design. Exempelvis <picture> och attribut som srcset låter dig visa olika bildstorlekar beroende på skärmstorlek. <canvas> används för ritning och grafik i realtid, och SVG kan bäddas direkt i dokumentet för skalbar vektorgrafik.

Tillgänglighet (accessibility)

Tillgänglighet är central i HTML-utveckling. Använd semantiska element och tydliga landmärken, lägg alltid till alt-text för bilder, använd korrekt rubrikhierarki och överväg ARIA-attribut (role, aria-*) när semantiska element inte räcker. Bra tillgänglighet gör sidan användbar för personer med funktionsnedsättningar och förbättrar ofta även sökmotoroptimering.

Samspel med CSS och JavaScript

HTML ansvarar för struktur och innehåll, medan CSS hanterar utseende och layout. JavaScript (JavaScript) används för att lägga till beteende och dynamik. Till exempel används <link rel="stylesheet"> för att länka CSS och <script src="..."> för att ladda JS-filer. Atribut som defer och async styr hur skript laddas och påverkar sidans laddningstid.

Standarder och utveckling

HTML:s utveckling sköts av webbstandardorganisationer. Språket skapades ursprungligen av Tim Berners-Lee och standarder för HTML underhålls idag av grupper som WHATWG (som publicerar en löpande "living standard") och W3C (som publicerat stabila rekommendationer som HTML 5.2). Browserleverantörer implementerar dessa specifikationer, vilket gör att webben utvecklas i samspel mellan standarder och praktisk användning.

Verktyg och validering

Använd webbläsarens utvecklarverktyg (DevTools) för att inspektera HTML, CSS och nätverkstrafik. W3C:s validator hjälper dig hitta syntaxfel och förbättra kompatibilitet. Byggverktyg, ramverk och paket (t.ex. npm, bundlers) kan underlätta utveckling av större projekt.

Bra praxis

Använd semantisk HTML för bättre läsbarhet och tillgänglighet.
Håll presentation separat från innehåll—undvik inline-stilar och inline-skript när det är möjligt.
Använd korrekt teckenkodning (UTF-8) och språkdeklaration (lang="sv").
Optimera bilder och media för prestanda, använd alt-attribut och loading="lazy" för tunga resurser.
Validera HTML och testa i flera webbläsare och enheter.

Sammanfattningsvis är HTML grunden för webbinnehåll—det strukturerar text och media, ger semantik för tillgänglighet och sökmotorer, och samarbetar med CSS och JavaScript för att skapa moderna, responsiva och interaktiva webbsidor.

Taggar

HTML använder speciella bitar av programmeringsspråk som kallas "taggar" för att låta webbläsaren veta hur en webbsida ska se ut. Taggarna kommer vanligtvis i par: en öppningstagg definierar början på ett innehållsblock och en stängningstagg definierar slutet på det blocket. Det finns många olika typer av taggar och alla har olika syften. Se Grundläggande HTML-taggar nedan för exempel på taggar.

Vissa taggar fungerar bara i vissa webbläsare. Till exempel fungerar <menuitem>-taggen, som används för att få något att visas när personen trycker på höger musknapp, endast i webbläsaren Mozilla Firefox. Andra webbläsare ignorerar helt enkelt den här taggen och visar skriften normalt. Många skapare av webbsidor undviker att använda dessa "icke-standardiserade" taggar eftersom de vill att deras sidor ska se likadana ut i alla webbläsare.

Exempel

Här är en exempelsida i HTML.

1 <!DOCTYPE html> 2 < html> 3 < head> 4 < title> Detta är sidans titel. </title> 5 </head> 6 < body> 7 < p> Detta är ett stycke. </p> 8 < a href="https://www.domain.com"> Detta är en länk. </a> 9 < img src="image.jpg" alt="Image"> 10 </body> 11 </html>

En enkel HTML-sida skulle se ut så här: ett enda stycke med "Hello world! " skrivet på det.

1 <!DOCTYPE html> 2 < html> 3 < head> 4 < title> Hej! </title> 5 </head> 6 < body> 7 < p> Hello world! </p> 8 </body> 9 </html>

Grundläggande HTML-taggar

Taggnamn	Namn	Funktion	Exempel på kod
`<!DOCTYPE>`	Doctype	Definierar dokumenttypen	<!DOCTYPE html>
`<html>`	HTML	Definierar ett HTML-dokument och startar ett HTML-dokument.	< html> All kod</html>
`<head>`	Chef	Innehåller all kod som inte används för att visa element på webbsidan.	< head></head>
`<titel>`	Titel	Definierar titeln på webbsidan (visas på fliken) och anges i `<head>.`	<titel> Webbsida</titel>
`<body>`	Kropp	Innehåller webbsidans synliga element (och innehåller stycket med mera).	< body> Html-taggar</body>
`<h1>` till `<h6>`	Rubriker	Rubriker i olika storlekar (`<h1>` är den största)	< h1> Rubrik</h1>
<p>	Stycke	Definierar ett stycke text	< p> TEXT</p>
<a>	Ankare	Skapa aktiva länkar till andra webbsidor	< a href="www.domain.com"> Besök vår webbplats</a>
`<img>`	Bild	Visar en bild på sidan	< img src="ImageUrl" alt="Text som visas om bilden inte är tillgänglig">
`<br>`	Paus	Infogar ett enkelt radbrytningstecken.	Text < br> Text
`<center>`	Centrum	Flyttar innehållet till sidans mitt	<center> Kod</center>
`<script>`	Skrift	Skapar ett skript på webbsidan, vanligtvis skrivet i JavaScript.	< script> document. write("Hello World!")</script>

Användning av HTML-taggar

Skapa en webbsida

Det är enkelt att göra en webbsida.Allt du behöver komma ihåg är taggarna och ordningen för att göra en webbsida.

Först måste du hitta ett ställe där du kan skriva in HTML-taggarna (jag rekommenderar Anteckningsblock) och skriva in taggarna.

Här är ett annat exempel på en HTML Tag-sida.

<html>

<head>

<h1> Hej, världen!</h1>

</head>

<body>

<p>

Detta är en HTML Tag-sida.

</p>

Av: *Insätt namn här*

</footer>

</html>

När du är klar, spara i detta format: helloworld.htm

(inga mellanslag)

Och du är klar! När du har sparat den på din dator kommer du att få en tryckning på den och den kommer att skicka dig till din webbsida på Google!

Frågor och svar

F: Vad är HTML?

S: HTML är en typ av märkspråk som används för att skapa webbsidor som innehåller text, länkar, bilder och audiovisuella material.

F: Vad är HTML:s funktion?

S: HTML:s funktion är att tala om för webbläsare hur webbsidor ska se ut och lägga till metainformation, t.ex. namnet på den som skapat webbsidan.

F: Vad är några exempel på media som kan inkluderas i webbsidor skapade med HTML?

S: Några exempel på media som kan inkluderas i webbsidor som skapas med HTML är ljudfiler och videoklipp.

F: Hur kompletterar CSS HTML?

S: CSS används för att ändra utseendet på HTML-sidor.

F: Vilken roll spelar JavaScript i webbutveckling?

S: JavaScript är ett viktigt skriptspråk i webbutveckling eftersom det talar om för webbplatser hur de ska bete sig och kan ändra utseendet på HTML och CSS.

F: Vem är ansvarig för att skapa HTML?

S: HTML skapas av World Wide Web Consortium (W3C).

F: Vilken är den aktuella standardversionen av HTML?

S: Från och med september 2018 är HTML 5 den senaste standardversionen av HTML i version 5.2.

Sök