Vad är HTML?
HTML står för HyperText Markup Language och är en standardiserad kodningsspråk som används för att skapa och formatera webbsidor på internet. HTML används för att definiera strukturen och innehållet på en webbsida, inklusive text, bilder, länkar, listor, tabeller och andra element.
Varför är det bra att ha lite koll på HTML?
- Skapa och redigera webbsidor: Med HTML-kunskaper kan du skapa och redigera egna webbsidor från grunden. Det ger dig möjlighet att ha full kontroll över layouten, innehållet och designen på dina webbsidor.
- Förstå webbstrukturer: HTML hjälper dig att förstå och skapa rätt webbstrukturer, såsom rubriker, stycken, listor och länkar. Detta är viktigt för att skapa webbsidor som är användarvänliga och tillgängliga.
- Hantera SEO: Att ha en grundläggande förståelse för HTML kan hjälpa dig att optimera dina webbsidor för sökmotorer (SEO). Genom att använda rätt HTML-element, attribut och taggar kan du hjälpa sökmotorer att förstå och indexera din webbsida på ett bättre sätt.
- Anpassa och felsöka: Genom att känna till HTML-kod kan du anpassa och felsöka webbsidor efter dina behov. Du kan ändra och justera kod för att göra önskade ändringar i utseende och funktion på din webbsida.
- Samarbeta med utvecklare: Om du samarbetar med webbutvecklare är det värdefullt att ha grundläggande kunskaper om HTML för att kunna kommunicera och samarbeta på ett effektivt sätt. Det kan underlätta diskussioner och förståelse mellan dig och dina utvecklingskollegor.
HTML är grunden för webbutveckling och att ha koll på det kan vara mycket fördelaktigt för att skapa, anpassa och förstå webbsidor på internet. En webbsida som bara innehåller html-kod ser inte så mycket ut för världen, därför kopplar man en CSS-fil till sin HTML-fil som beskriver hur html-elementen ska se ut och vips kan vi designa webbsidan. CSS står för Cascading styling sheet. Html bygger alltså strukturen och CSS ger strukturen liv och färg.
Head, title och meta
Inom HTML-taggen <head> finns metadata och information om webbsidan, det syns inte direkt på själva webbsidan när den visas i webbläsaren. Istället används det för att ge instruktioner och beskrivningar om webbsidan till webbläsaren och sökmotorer. Inom head-taggen hittar man title och meta:
- <title>: Denna tagg används för att definiera titeln på webbsidan, alltså den text som visas i webbläsarens titelrad eller flik. Exempel: <title>Min Hemsida</title>. Titeln är också viktig för sökmotoroptimering (SEO), eftersom den kan visas i sökresultat och hjälpa användare att förstå vad webbsidan handlar om.
- Meta-taggar: Det finns flera meta-taggar som kan användas inom <head> för att ge instruktioner till webbläsaren och sökmotorer. Exempel:
- <meta charset=”utf-8″>: Denna tagg används för att ange teckenkodningen för webbsidan, vilket är viktig för att korrekt visa text på olika språk.
- <meta name=”description” content=”En kort beskrivning av webbsidan”>: Denna tagg används för att ge en kort beskrivning av webbsidan, som kan visas i sökresultat eller på sociala medier.
- <meta name=”keywords” content=”nyckelord, för, webbsidan”>: Denna tagg används för att ange nyckelord som är relevanta för webbsidan och kan användas av sökmotorer för att indexera sidan.
Mer om meta
En meta-text, eller en metabeskrivning, är en kort sammanfattning av innehållet på en webbsida som visas i sökresultatet på sökmotorer. Här är en enkel beskrivning av hur man skriver en meta-text:
- Identifiera huvudbudskapet: Tänk på vad som är det viktigaste budskapet eller syftet med webbsidan som du vill förmedla i meta-texten.
- Håll det kort: Meta-texten bör vara kort och koncis, vanligtvis mellan 150-160 tecken lång, för att passa inom sökmotorers begränsningar för visning i sökresultaten.
- Använd relevanta sökord: Inkludera relevanta sökord eller fraser som användare kan använda när de söker efter innehållet på din webbsida. Detta kan hjälpa till att öka chansen att din webbsida visas i sökresultaten.
- Väcka intresse: Försök att skapa en meta-text som är engagerande och intressant för användaren så att de blir lockade att klicka på din länk i sökresultaten.
- Var unik: Undvik att använda samma meta-text för alla dina webbsidor. Försök istället att skapa unika meta-texter för varje sida som beskriver det specifika innehållet på den sidan.
- Läs igenom och testa: Läs igenom och testa din meta-text för att se hur den ser ut i sökresultaten och om den lockar till klick. Du kan också använda verktyg och analyser för att få insikt i hur din meta-text presterar och göra eventuella förbättringar.
- Tänk på användaren: Kom ihåg att din meta-text är till för att hjälpa användaren att förstå vad din webbsida handlar om och om den är relevant för deras sökning. Se till att din meta-text är användarvänlig och ger en tydlig och korrekt beskrivning av din webbsida.
Genom att följa dessa enkla steg kan du skapa effektiva meta-texter som lockar användare att besöka din webbsida från sökresultaten och ökar chansen att din webbsida rankas högre i sökresultaten.
Body – här ligger allt som du ser på hemsidan
Inom HTML-taggen <body> definieras innehållet som visas på webbsidan i webbläsaren. Här är några enkla exempel på vanliga HTML-taggar som används inom <body> för att formatera och strukturera innehållet på en webbsida:
- <h1> till <h6>: används för att definiera rubriker på en webbsida. Exempel: <h1>Detta är en rubrik</h1>
- <p>: används för att definiera en styckesindelad text. Exempel: <p>Detta är en styckestext</p>
- <a>: används för att skapa länkar till andra webbsidor eller filer. Exempel: <a href=”https://www.example.com”>Klicka här</a>
- <img>: används för att infoga bilder på en webbsida. Exempel: <img src=”bild.jpg” alt=”En bildbeskrivning”>
- <ul> och <li>: används för att skapa oordnade listor, där <ul> definierar början av listan och <li> används för att definiera varje listelement.
- <table>, <tr>, <td>: används för att skapa tabeller, där <table> definierar en tabell, <tr> används för att skapa en rad i tabellen, och <td> används för att definiera celler i raden.
Det finns många fler HTML-taggar som kan användas inom <body>. Det som är viktigast att ha koll på för att ranka högre på google är H1
Mer om H1
H1 är det samma som huvudrubrik och här kan du verkligen fånga google och dina besökare. Använd en H1 per sida och se till att beskriva din verksamhet med dina viktigaste nyckelord/sökord här. En H1 ska innehålla så mycket som möjligt av det du tror att användaren söker efter på google.
- Tydlighet: En <h1> bör tydligt beskriva vad webbsidan handlar om och ge en snabb överblick över innehållet. Det ska vara lätt för användaren att förstå vad webbsidan handlar om bara genom att läsa <h1>.
- Relevant: <h1> ska vara relevant för det innehåll som följer på webbsidan. Det bör spegla huvudämnet eller huvudbudskapet på webbsidan och matcha användarens förväntningar baserat på sidans ämne.
- Koncis: En <h1> bör vara kort och koncis, helst innehålla endast en mening eller en kort fras. Det är viktigt att undvika överdrivet långa eller otydliga rubriker som kan förvirra användaren.
Starta en webbsida
För att bygga en hemsida behöver man egentligen inte så mycket mer än ett program att skriva kod i. Det finns HTML-editorer som ger hjälp med koden – exempelvis Visual studio code.
Det finns även WYSIWYG-editorer där du ser hur sidan kommer att se ut i webbläsaren (What You See Is What You Get). Exempelvis WordPress
Behöver du hjälp med befintligt hemsida eller behöver en ny?
Kontakta Marie på Formkontakt så tar vi ett snack!
marie@formkontakt.se
073-9193093