Vad är en hemsida? Allt du behöver veta om struktur etc.

Vi ställer oss frågan: Vad är en hemsida? De flesta av oss skulle nog säga att det är något man finner på internet. Det stämmer, men en hemsida är mycket mer än vad du ser när du skriver in en URL-adress. En hemsida är i själva verket en samling olika webbplatser som är uppbyggda av HTMl, XHTML, AMP HTML och ett antal olika element.

Utöver det finns servrar, appar, kod och mycket mer. Detta är dock något som ligger i bakgrunden på en hemsida, vilket innebär att få användare verkligen tänker på det arbete som krävs för att skapa en bra hemsida. Vi har därför skapat den här guiden för att ta dig lite djupare in i vad en hemsida egentligen är för något.

Vad är en hemsida?

Även om en hemsida består av det vi hittar genom att skriva in en adress i sökrutan i vår webbläsare, händer det en hel del i bakgrunden av en sådan förfrågan. En hemsida består faktiskt av HTML, CSS, JavaScript, XHR, JSON, PDF, CSV, bilder, teckensnitt, XHTML och olika tillägg, men om dessa var synliga för användarna skulle det vara en enda röra av siffror, rutor och otroligt långa kodremsor.

Det som faktiskt händer när vi skriver in ett domännamn i vår webbläsare är att användaragenten (webbläsaren) läser koden och producerar den visuella bilden som koden producerar. För dig som användare av hemsidan kommer den därför att se ut som en användarvänlig hemsida med en logisk struktur av rubriker, bilder och innehåll. 

Den första hemsidan på Internet publicerades den 13 november 1990 av Tim Berners-Lee. Sedan dess har miljarder hemsidor av alla typer och former utvecklats, och i den här artikeln ska vi titta närmare på vad som gör detta möjligt.

Hur är en hemsida uppbyggd?

Som utgångspunkt består en hemsida av strukturerad text där andra element som bilder och video kan integreras. Den mest grundläggande egenskapen hos en hemsida är att den innehåller en hyperlänk till andra hemsidor. Var och en av dessa hemsidor har minst en URL-adress som kan nås med en webbläsare som Chrome, Firefox, Edge och Safari. 

Innehållet på en hemsida kan vara dynamiskt eller statiskt, vilket påverkar hur det uppdateras varje gång du besöker hemsidan. En dynamisk hemsida skapas på nytt varje gång den hämtas utifrån resultatet av sökningen. En statisk hemsida har samma statiska innehåll varje gång en begäran skickas till servern. 

Dessutom finns det flera olika möjligheter att ladda in en hemsida. Det vanligaste är att ladda ner dem från Internet, men webbsidor kan också lagras lokalt på en hårddisk om den är ansluten till ett nätverk av maskiner. Vad många förväxlar med en webbsida är vad vi kallar en hemsida. Detta beror på att en hemsida består av flera webbsidor, vilket illustreras nedan. 

Om du går in på hemsidelab.se kommer du till vår hemsida. Den består dock av flera webbsidor som du finner om du klickar runt på sidan. Exempel på detta är hemsidelab.se/skapa-hemsida/ och hemsidelab.se/starta-webbshop/. Båda dessa är webbsidor som är länkade till varandra med hjälp av en gemensam domän och utgör därmed en del av vår hemsida. 

Vad består en hemsida av?

I det mest primitiva fallet kan en hemsida bestå av så lite som en HTML-fil som är länkad till en domän på nätet. Det kan vara en helt blank sida med ett enda ord eller en enda fras i klartext. På detta sätt kan du bygga upp en webbsida utan annat än text, men det ger sällan en användarvänlig upplevelse.

De flesta hemsidor byggs därför upp från en katalog med olika element som utgör den visuella utgångspunkten för din hemsida. Här kommer HTML säkerställa hur den är uppbyggd och vilken text som dyker upp var, medan CSS och JavaScript står för designen av den visuella aspekten av din hemsida. Dessutom kommer servrar, domän och programvara att behövas för att ladda upp din kod.

Den kortaste webbsidan du skulle kunna skapa skulle vara <p>.</p> – resultatet av detta skulle bli en svart prick på en vit webbsida som är kopplad till en domän. Inte särskilt användarvänlig, men i teorin kommer det att utgöra en hemsida. De flesta utvecklare kommer därför att använda ett antal olika element som tillsammans utgör vad konsumenter idag anser vara en webbplats. Här kommer design, funktionalitet och innehåll att länkas samman i en strukturerad kod. På så sätt får du en användarvänlig hemsida när du anger en URL, inte bara en vägg av text.

Vi kan alltså sammanfatta komponenterna i en hemsida med följande lista:

  • Hemsida
  • Kategorisida
  • Tjänst, produkt, bloggsida
  • Hemsidans innehåll
  • Server för hemsidan
  • Design av hemsidan
  • HTML, CSS, JS, bilder, fontfiler och kod

Vad är syftet med HTML, CSS och JS?

Nu har vi snackat en del om olika förkortningar, men vi har inte kommit fram till vad syftet med dem på en hemsida är. Eftersom de flesta hemsidor idag består av en teknisk blandning av HTML, CSS och JS kan det vara bra att veta vad dessa begrepp egentligen betyder rent tekniskt. Hur dessa placeras i koden kan variera beroende på vem som har skrivit koden, men funktionaliteten är i stort sett densamma. 

JavaScript (JS) kan placeras direkt i en HTML-beskrivning så att skripttaggen i HTML kan användas för att skapa funktionalitet. Dessa kommer dessutom att implementeras med HTML och CSS för att bilda ramverket för hemsidan. Genom att kombinera alla tre metoderna kan JS beskriva funktionaliteten, HTML bestämma innehållet och CSS utseendet på innehållet. På så sätt kan du enkelt separera de olika delarna och på så sätt göra justeringar på hemsidan i farten om du vill ändra något. 

Nedan har vi tittat på hur de tre olika delarna fungerar var för sig och vad de har för syfte på en hemsida.

  • HTML: HTML används bara för att hålla innehållet som det ska visas. Olika HTML-taggar används för att beskriva typen av innehåll. Det kan till exempel vara stycken, rubriker, bilder och liknande – något som gör det möjligt för en dator att förstå vad den tittar på.
  • CSS: Vidare har vi det visuella elementet som bestäms av CSS-filer. Det är dessa filer som webbläsaren använder för att avgöra hur HTML-innehållet ska återges i webbläsaren. Om du skulle ta bort all CSS från en webbsida skulle användaren bara få se en lång textsträng när han eller hon går in på en webbplats. CSS-filer används bland annat för att genomföra responsiv design, vilket är viktigt när webbplatsen ska användas på flera olika enheter samtidigt. 
  • JavaScript: Det sista elementet är beteendet och här kommer JavaScript in i bilden. Detta är en separat kod som vanligtvis skrivs efter HTML-koden i koden, men som också integreras i källkoden genom olika taggar. På så sätt vet webbläsaren vilka skript den ska läsa när den laddar en webbsida för användaren. 

Kombinationen av dessa tre delar är vad vi idag betraktar som en hemsida. Av de tre är det bara HTML du måste ha, men om du skapar en användarvänlig hemsida är det viktigt att kombinera alla tre. 

Hur skapar man en webbplats?

Om du skapar en hemsida skrivs den vanligtvis i HTML för att se till att alla webbläsare har möjlighet att ladda ner innehållet. Du skriver alltså innehållet med hjälp av olika HTML-taggar, och sedan skapas det visuella utseendet med hjälp av CSS-filer. Detta har länge varit standarden för hur man bygger en webbsida eftersom det är så enkelt att lägga upp strukturen mellan CSS och HTML.

Om du behöver skapa en mer komplicerad hemsida görs detta vanligtvis med hjälp av HTML-källkod tillsammans med ett skript på serversidan. Där kommer programmeringsspråk som PHP, Perl, Python, Ruby och VCScript in i bilden. Många använder också Java på grund av möjligheten att integrera databaser under Java. 

Slutligen kommer funktioner för användarna att integreras med hjälp av Javascript som är inbäddat i koden. De olika program som du kan skriva kod i skapar sedan ett skript som fungerar i webbläsaren. Detta skickas som HTML-text till den webbläsare som användaren använder. Här får webbläsaren instruktioner om hur en hemsida ska visas på skärmen för användaren.

Du kan faktiskt vara värd för en hemsida på din egen maskin genom att ansluta den till internet, men de flesta laddar upp koden till en webbserver i ett datacenter. Dessa är enheter som hyr ut datorkraft så att du snabbt och enkelt kan ladda upp ny kod och skapa en hemsida.

Vad är syftet med en webbplats?

Det finns otaliga användningsområden för en hemsida och lika många syften. De flesta företag skapar en hemsida för att presentera sin verksamhet, medan andra använder den som en virtuell närvaro för webbshoppar, försäljningsställen och liknande. Vi har därför sammanställt en lista över några av de olika syften och typer av webbplatser som du kan hitta på nätet idag:

  • Informativa hemsidor som avser att presentera så mycket information som möjligt på ett organiserat sätt. Exempel på Wikipedia, Wikibooks och svenska.se kan lyftas fram här. Den här typen av sajter består ofta av flera miljoner webbsidor som alla behandlar ett separat ämne.
  • Nyhetssidor fungerar som en motsvarighet till traditionella nättidningar. Syftet med sådana hemsidor är ofta att publicera nytt innehåll löpande, men det befintliga innehållet behöver inte vara lika organiserat som i informativa referensverk. Ett exempel på detta är att aftonbladet.se har en enklare struktur än Wikipedia. 
  • Webbshoppar är en annan typ av hemsida som det dyker upp fler och fler av. Dessa är webbplatser som har för avsikt att sälja saker online och marknadsföra olika produkter för sina besökare. Dessa sidor har ofta en noggrant planerad visuell profil och kravlöst innehåll så att kunderna snabbt hittar den produkt de vill köpa.
  • Landningssidor är ett bra exempel på statiskt innehåll som endast syftar till att presentera ett visst budskap eller en viss produkt. De flesta av oss har förmodligen besökt denna typ av hemsida när vi laddat ner något eller prenumererat på ett nyhetsbrev. 

Varför är SEO viktigt för en hemsida?

Ett ämne som ofta dyker upp när man pratar om hemsidor och synlighet är sökmotoroptimering eller SEO. Detta har stor relevans till hur man uppnår organisk trafik genom sökmotorer som Google och Bing. Anledningen till att detta är högst relevant när man skriver koden är att de flesta sökrobotar som GoogleBot använder källkod när de kartlägger hemsidor.

Det betyder att Google läser av koden på din webbplats och använder denna för att avgöra vad för typ av innehåll som finns på din sida. Det är då viktigt att det finns en struktur och ett språk som GoogleBot förstår så att den kan kategorisera det korrekt. På så sätt kommer din hemsida att placeras i rätt sökresultat och du kan därmed få bättre resultat för din trafik.

Sammanfattning

Även om de flesta människor kan förklara vad en hemsida i princip är, finns det många delar bakom en hemsida som de flesta inte känner till. Det är här som HTML, CSS och JavaScript kommer in som tre av de viktigaste byggstenarna för att skapa en webbplats. Vi har därför tittat på hur de fungerar tillsammans och vad du bör veta om deras funktionalitet. 

Vi har också tittat på hur man skapar en hemsida med hjälp av de olika kodspråken samt varför det är så viktigt att använda rätt kod för din hemsida. Detta handlar främst om hur en webbläsare kommer att återspegla webbsidan för slutanvändare och kan därför vara skillnaden mellan framgång och katastrof.

3 av 5
flag Mest populär
Wix
Webnode
Squarespace
Shopify
Site123
Prova Wix Prova Webnode Prova Squarespace Prova Shopify Prova Site123
Pris från Gratis Gratis $16 Gratis Gratis
Onlinebutikslösning Ja Ja Ja Ja Ja
Enkel användning
star icon star icon star icon star icon star icon

4.9/5

star icon star icon star icon star icon star icon

4.7/5

star icon star icon star icon star icon star icon

4.5/5

star icon star icon star icon star icon star icon

4.4/5

star icon star icon star icon star icon star icon

4.6/5

Designmöjligheter
star icon star icon star icon star icon star icon

4.6/5

star icon star icon star icon

2.4/5

star icon star icon star icon star icon

3.6/5

star icon star icon star icon star icon star icon

4.9/5

star icon star icon star icon star icon star icon

4.1/5

Kundtjänst
  • Livechatt
  • Telefon
  • E-post
  • 24/7
  • E-post
  • Livechatt
  • E-post
  • 24/7
  • Livechatt
  • Telefon
  • E-post
  • 24/7
  • Livechatt
  • E-post
  • 24/7
Totalscore
star icon star icon star icon star icon star icon

4.8/5

star icon star icon star icon star icon star icon

4.6/5

star icon star icon star icon star icon star icon

4.2/5

star icon star icon star icon star icon star icon

4.7/5

star icon star icon star icon star icon star icon

4.3/5

Läs vår Wix
recension
Läs vår Webnode
recension
Läs vår Squarespace
recension
Läs vår Shopify
recension
Läs vår Site123
recension

Om Mats

Mats är utbildad interaktionsdesigner och har erfarenhet som entreprenör vilket gör att han inte bara är kräsen när det kommer till design och användarvänlighet utan även effektivitet. Mats målsättning är därför att kunna hitta de lösningar som har goda möjligheter till sömlösa användarupplevelser utan att de blir komplicerade att arbeta med.