Vi säger ofta att vi programmerar en hemsida med HTML-kod, vilket egentligen inte är helt korrekt. HTML är akronym för HyperText Markup Language, ett så kallat märkspråk med hypertext. HTML är alltså inte ett programmeringsspråk och vi programmerar därför inte en hemsida med HTML-kod.
Enkelt förklarat är ett märkspråk en struktur som talar om för till exempel en webbläsare eller ordbehandlare hur en text ska presenteras. Hypertext är information som kan följas i ”fri ordning”, en hypertext tillåter läsaren att hoppa till olika delar i en text genom så kallade länkar.
Generellt kan vi säga att alla hemsidor som vi ser på internet är uppbyggt i HTML. Det finns flera olika sätt att förstärka och förändra utseendet och upplevelsen av en hemsida, men HTML är allt som behövs för att skapa en hemsida.
Element och taggar
Du har kanske hört begreppet ”HTML-tagg”, det är en kombination av olika taggar som utgör strukturen i själva märkspråket. I det svenska skrivspråket påbörjas en mening alltid med stor bokstav och avslutas med ett skiljetecken, på liknande vis använder vi en starttagg i kombination med en sluttagg för att avgränsa information. Alla starttaggar börjar med tecknet ”<” och avslutas med ”>”, sluttaggen särskiljs med begynnelsetecknen ”</”. Kombination av start- och sluttagg kallas för ett element och kan alltså jämföras med meningsuppbyggnad.
Alla HTML-baserade hemsidor bygger på ett flertal olika element. Grundtaggarna som betraktas som nödvändiga är HTML, HEAD och BODY. Traditionellt skrevs alla taggar med stora bokstäver, idag kan detta nästan upplevas som avvikande och vi skriver så gott som alltid taggarna med små bokstäver. Bägge alternativen fungerar lika bra, men det anses vara ”god programmeringssed” att vara konsekvent i sitt val.
<html>
<head></head>
<body></body>
</html>I exemplet ovan ser vi hur elementen head och body kapslas in av HTML-taggarna, alla element som förekommer inom ett annat element kallar vi för barnelement. HTML-elementet talar om för webbläsaren vart hemsidan börjar och slutar, alla element innanför HTML-taggarna talar i sin tur om hur hemsidan ser ut och hur informationen ska visas och tolkas. Själva taggarna är inte synliga i webbläsaren, generellt kan vi säga att det bara är det som finns mellan taggarna som syns och mer specifikt att det endast är det som står innanför taggen ”BODY” som visas för hemsidans besökare – detta är en sanning med modifikation men vi håller oss till det för att förenkla konceptet.
Head
I head-elementet definieras sidans metadata (data om data). Exempel på metadata är rubrik, författare, nyckelord, beskrivning med mera. Här återfinns även sådant som påverkar sidans utseende och beteende i form av stilar och script. Metadata syns inte på hemsidan men hämtas upp av sökmotorer, så som t.ex. Google och Bing. Den viktigaste barntaggen i head-elementet är title som motsvarar hemsidans rubrik och är den text som oftast visas högst upp i webbläsaren när du besöker en hemsida.
<head>
<title>Min första hemsida</title>
</head>Body
Den största skillnaden mellan head och body är att i stort sett allting som skrivs inom body-elementet är synligt för besökaren. Det är innanför detta element som vi skriver texter och skapar hemsidans innehåll och utseende.
<body>Välkommen till min hemsida!</body>Sammanfattning
HTML är ett så kallat märkspråk som används för att strukturera upp information. En webbläsare, t.ex. Google Chrome eller Microsoft Edge tolkar HTML-koden och presenterar den för hemsidans besökare.
Taggar används för att avgränsa och särskilja delar i koden. Ett element består av en starttagg och en sluttagg som omsluter någon typ av information eller instruktion. Taggar är alltid dolda i webbläsaren.
Här följer en sammanslagning av det som tagits upp i denna artikel, det är allting som behövs för en fungerande hemsida.
<html>
<head>
<title>Min första hemsida</title>
</head>
<body>
Välkommen till min hemsida!
</body>
</html>