HTML står för HyperText Markup Language och används för att bygga strukturen på en hemsida. Detta görs genom flertalet HTML-taggar som delar upp innehållet på hemsidan och anger dess funktion så att webbläsaren vet hur hemsidan ska visas. En HTML-tagg består av vanligtvis utav en öppningstagg, och en stängningstagg som omsluter innehållet. Olika taggar har olika användningsområden och har därmed olika egenskaper. "Byggstenstaggar" som bland annat <h1> och <p> har ett par standard attributer, men dessa går i regel att ändra genom CSS i efterhand. Andra taggar som <meta> och <link> används inte som byggstenar i sig, utan används för att deklarera egenskaper för hemsidan och länka ihop andra sidor.
För att deklarera ett HTML-dokument räcker det inte med att bara använda filtillägget .html, utan man behöver även deklarera det i själva dokumentet. Detta görs med <!DOCTYPE html> och bör placeras längst upp i dokumentet.
<head>-taggen placeras i början av html-dokumentet och används för att deklarera relevant metadata. Det kan till exempel vara titeln på hemsidan, och dess favicon (bilden som visas till vänster om namnet i tabben). Man kopplar även ihop html-dokumentet med eventuella tillhörande CSS-dokument och Javascript-dokument här, samt inkluderar annan information som anses viktig för webbläsaren och sökmotorer att ha tillgång till. För att inkludera sådan information används <meta> taggen.
Ett exempel på sådan information är charset. Den anger vilken teckenkodning som HTML-dokumentet använder. Moderna hemsidor använder nästan uteslutande UTF-8 då den även har stöd för internationella karraktärer vilket dess företrädare ASCII inte hade stöd för. För att deklarera charset skriver man <meta charset="UTF-8">. Om man använder Visual Studio Code går det att skriva ! och sedan trycka på tab för att få fram en standardmall på en ifylld head-tagg.
Taggen <style> kan användas för att definera CSS-stilar och klasser (alltså hur hemsidan ska renderas) direkt i HTML-dokumentet utan behov av att använda en extern CSS-fil. Dock är bästa praxis inom webbdesign att separera innehållet (HTML) och presentationen (CSS) då det kan annars bli rörigt för större webbsidor. Dessutom kan möjliggör användandet av en separat CSS-fil att nå den från flera sidor på hemsidan. Detta är viktigt för att kunna hålla ett sammanhängande tema genom hela websidan. Till exempel möjliggör det så att navigationsbaren och temat på denna sida ser exakt lika dant ut som på resten av webbsidan, utan att behöva återupprepa koden på alla sidor. Hur man använder CSS går att hitta här.
Det är <body>-taggen som omsluter själva hemsidans innehåll och fungerar därmed som hemsidans kropp. Det är här som texter, bilder, och allt annat innehåll bör vara. Det är genom body-taggen som man kan sätta globala CSS-stilar som man vill ska vara aktiva på hela sidan som T. ex. typsnitt.
<span>-taggen är en inline-elementtagg som gör det möjligt att ändra stilen på en text eller annat element, utan att layouten ändras av lägga till ett nytt "block". Till exempel används <span> för att ändra denna färg.
Taggen <div> är den vanligaste taggen på en hemsida och är en blockelementtagg som används för att gruppera innehåll. Tillsammans med CSS används divar för att bygga upp en hemsidas layout. <div> är en allmän tagg och förmedlar ingen mening i sig själv. Om man vill dela upp en sida i olika sektioner kan man därför istället använda t. ex. <section>, vilket används på denna sida. Även om <div> hade teoretiskt sett fungerat lika bra, bör man använda taggar med "mening" eftersom det gör enklare för digitala hjälpmedel att navigera sidan. Dessutom gör det koden enklare att förstå för utomstående.
Dessa taggar används för att lägga till text på en hemsida. <h1> till <h6> används för att skapa rubriker, där <h1> är den största och <h6> är den minsta. <p> används för att skapa stycken, som till exempel detta.
<a> används för att skapa hyperlänkar. Detta görs genom href attributen. T. ex. kommer <a href=:"https://google.com">Google<a> skriva ut Google.
<img>-taggen används för att infoga en bild på hemsida. Denna är en av de få taggar som Det gör det även enklare att samarbeta, eftersom flera personer kan arbeta på samma projekt utan att behöva oroa sig för att skriva över varandras ändringar. Det gör det även enklare att felsöka, eftersom du kan se alla styles på en gång istället för att behöva leta igenom alla html-filer.endast behöver en start-tagg, och varken något innehåll, eller slut-tagg. <img> består av två delar. Man behöver först och främst ange en bildkälla med hjälp av src. Sedan behöver man lägga till en så kallad alt-text villet är en beskrivning på vad bilden föreställer så att personer som är blinda kan få hjälp med digitala tillgänglighetsverktyg. Som standard visas bilderna i sin fulla storlek. Alltså om bilden är 1080x1920px så kommer den även vara så stor när man läggen in den. Det är sällan man vill ha en såpass stor bild, vilket är varför man ofta behöver dra ner storleken på den med CSS.
Genom att skriva <img src="/assets/images/Cat.jpg" alt="Bild på en katt utomhus sittandes på en gräsmatta."> så kommer webbläsaren hämta bilden som ligger vid /assets/images/Cat.jpg, och visa den som nedan.
