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.