Tagg-grunder: Skillnad mellan sidversioner

Nuvarande version från 20 juni 2020 kl. 14.43

Som vi konstaterade tidigare så bygger HTML på taggar och element. Taggarna är de byggklossar som bygger upp sidans grundutseende och struktur. För att kunna förstå HTML, måste vi förstå hur dess taggar och element är uppbyggda.

I de allra flesta fall består HTML-taggarna av ett taggpar, man har en starttagg och en sluttagg. Den senare utelämnas i vissa fall. Innehållet som finns mellan tagg-delarna är den data som vi vill märka upp på något vis. När webbläsaren sedan tolkar dokumentet kommer den, med hjälp av taggarna, att kunna behandla dokumentet på ett korrekt vis och skapa element utifrån taggarna och deras innehåll.

Taggarnas uppbyggnad

Alla taggar, såväl start som slut, ligger inom tecknen ”<” och ”>”. Så en tagg kan se ut så här ”<h1>”. Detta är h1-taggen, vilken används för att markera att något är en huvudrubrik. När webbläsaren tolkar ett dokument och träffar på ett ”<”-tecken kommer den att börja tolka allt från och med detta tecken som en tagg, ända tills den hittar ett motsvarande ”>”-tecken.

HTML:s hantering av ”<”, gör att man inte kan lägga in dessa tecken hur som helst i sina dokument. Så om man vill använda sig av ”<” som ett vanligt tecken och inte som start för en HTML-tagg, måste man ange en specialkod. Vi återkommer till denna typ av specialkoder...

HTML5:s tagguppsättning

Man kan inte uppfinna nya taggar allteftersom man känner för det, utan det finns en förutbestämd uppsättning av taggar som definierats i HTML5-standarden och det är enbart dessa taggar som webbläsare fattar. Det finns en uppsjö av olika taggar. Dock är det inte helt nödvändigt att kunna dem alla utantill. Det är bra att komma ihåg vilka olika typer av taggar som finns, men de mer obskyra taggarna kan man alltid slå upp när man väl behöver dem.

I de flesta fall finns det en tagg som passar det syfte man är ute efter, men för de tillfällen då man inte hittar exakt vad man behöver så finns det några generella taggar som kan användas för att märka upp information som inte har någon speciell semantisk betydelse. En vanlig anledning till att vilja markera upp saker med dessa generella taggar är för att informationen ska ges ett speciellt utseende, med hjälp av CSS, eller för att informationen ska behandlas av ett JavaScript-program.

Starttaggar

Man inleder alltså ett element i HTML-kod med en starttagg. Starttaggen anges på formen <taggnamn>, där taggnamn är en av alla de taggar som finns med i HTML5-standarden. Man kan även ange attribut och liknande i en tagg, men det återkommer vi snart till. Det är viktigt att se till att man stavar taggnamnet helt korrekt, annars kommer inte webbläsaren att fatta vad du menar. I HTML5 går det att blanda stora/små bokstäver i ett taggnamn, men det är alltid bäst att skriva taggnamn med små bokstäver (gemena).

För att skriva vettig kod är det viktigt att du använder taggarna på rätt sätt. Varje tagg har ett syfte och ska enbart användas för detta syfte. Om du är osäker på hur en tagg ska användas, läs på innan du börjar använda den! En bra början är att titta på listan över taggar.

Sluttaggar

För så gott som alla taggar används även en sluttagg. Precis som starttaggen talar om var ett en tagg börjar gälla, talar sluttaggen om var taggen upphör att gälla. Sluttaggar ser ut som och heter det samma som starttaggarna, med den skillnaden att man alltid lägger till ett ”/”-tecken före taggnamnet. Den tagg som vi hade som exempel tidigare; ”<h1>”, har alltså en motsvarande sluttagg som ser ut så här; ”</h1>”. Liksom med starttaggarna är det viktigt att stava rätt. Det är extra viktigt att inte utelämna "/"-tecknet. Gör du det kommer webbläsaren att tro att det är en ny starttagg, vilket kan leda till oförutsedda konsekvenser (knappast bra sådana).

Utelämna sluttaggar

I vissa fall kan man utelämna sluttaggen, men det är oftast en bra vana att lägga dit den även om den inte är nödvändig. Det gör det lättare att se var ett element börjar och var det slutar, samt att vissa utvecklingsverktyg fungerar bättre om båda tagg-delarna är med. I de fall man råkar utelämna sluttaggen och den är nödvändig, kan det bli rejäla fel när webbläsaren försöker tolka ditt dokument och slutresultatet kanske inte alls blir vad du tänkt dig.

Dock finns det ett fåtal taggar till vilka man aldrig använder en sluttagg. Vi återkommer till dessa senare.

Hur skriver man ett "<"-tecken?

Som vi konstaterat så indikerar < att en tagg ska starta. Om man vill ha ett ”mindre än”-tecken i sitt dokument, måste man skriva det med hjälp av en speciell kod – i detta fall är koden ”<”. Då kommer webbläsaren att förstå att man vill visa det specifika tecknet och att det inte är en starttagg. Det finns många dylika teckenkoder.

Sammanfattning av taggar

Övningar

Tagg-grunder övningar

Nästa sektion

Element-grunder

@@ Rad 1: / Rad 1: @@
-Som vi konstaterade tidigare bygger [[HTML]] på [[tagg]]ar och [[element]]. För att kunna förstå [[HTML]], måste vi förstå hur dess [[tagg]]ar och [[element]] är uppbyggda. I de allra flesta fall består [[HTML]]-[[tagg]]arna av ett taggpar. Vi har alltid en [[starttagg]] och oftast en [[sluttagg]]. Innehållet som finns mellan [[tagg]]arna är alltså det som vi vill märka upp på något vis. När webbläsaren sedan tolkar dokumentet kommer den med hjälp av [[tagg]]arna att kunna behandla dokumentet på ett korrekt vis och skapa [[element]] utifrån [[tagg]]arna och deras innehåll. Taggarna är de byggklossar som bygger upp sidans grundutseende och struktur.
+Som vi konstaterade tidigare så bygger [[HTML]] på [[tagg]]ar och [[element]]. Taggarna är de byggklossar som bygger upp sidans grundutseende och struktur. För att kunna förstå [[HTML]], måste vi förstå hur dess [[tagg]]ar och [[element]] är uppbyggda.
-== Taggarnas uppbyggnad ==
-Alla [[tagg]]ar, såväl start som slut, ligger inom tecknen ”<code>&lt;</code>” och ”<code>&gt;</code>”. Så en [[tagg]] kan se ut så här ”<code>&lt;[[hx|h1]]&gt;</code>”. Detta är <code>h1</code>-taggen, vilken används för att markera att något är en huvudrubrik. När webbläsaren tolkar ett dokument och träffar på ett ”<code>&lt;</code>”-tecken kommer den att börja tolka allt från och med den punkten som en tagg, ända tills den hittar ett motsvarande ”<code>&gt;</code>”-tecken. Detta gör att man inte kan skriva ”<code>&lt;</code>”-tecken hur som helst i sina dokument.
-== HTML5:s tagguppsättning ==
-Man kan inte hitta på sina [[tagg]]ar hipp som happ, utan det finns en förutbestämd uppsättning av [[tagg]]ar som definierats i [[HTML5]]-[[standard]]en och det är enbart dessa som webbläsare fattar. Det finns en uppsjö av olika [[tagg]]ar. Dock är det inte helt nödvändigt att kunna dem alla utantill. Det är bra att komma ihåg vilka olika typer av [[tagg]]ar som finns, men de mer obskyra [[tagg]]arna kan man alltid slå upp när man väl behöver dem. I de flesta fall finns det en [[tagg]] som passar det syfte man är ute efter, men för de tillfällen då man inte hittar exakt vad man behöver så finns det några generella [[tagg]]ar som kan användas för att märka upp information som inte har någon speciell [[semantik|semantisk]] betydelse. En vanlig anledning till att vilja markera upp saker på detta vis är för att informationen ska ges ett speciellt utseende, med hjälp av [[CSS]], eller för att informationen ska behandlas av ett [[JavaScript]]-program.
-== Starttaggar ==
+I de allra flesta fall består [[HTML]]-[[tagg]]arna av ett taggpar, man har en [[starttagg]] och en [[sluttagg]]. Den senare utelämnas i vissa fall. Innehållet som finns mellan [[tagg]]-delarna är den data som vi vill märka upp på något vis. När webbläsaren sedan tolkar dokumentet kommer den, med hjälp av [[tagg]]arna, att kunna behandla dokumentet på ett korrekt vis och skapa [[element]] utifrån [[tagg]]arna och deras innehåll.
-Man inleder alltså ett kommando i HTML-kod med en starttagg. Starttaggen anges på formen <code>&lt;''taggnamn''&gt;</code>, där <code>taggnamn</code> är en av alla de taggar som finns med i HTML5-standarden. Man kan även ange attribut och liknande i en tagg, men det återkommer vi snart till. Det är viktigt att se till att man stavar taggnamnet helt korrekt, annars kommer inte webbläsaren att fatta vad du menar. I HTML5 går det att blanda stora/små bokstäver i ett taggnamn, men det är alltid bäst att skriva taggnamn med små bokstäver (gemena). För att skriva vettig kod är det viktigt att du använder taggarna på rätt sätt, varje tagg har ett syfte och ska enbart användas för detta syfte. Om du är osäker på hur en tagg ska användas, läs på innan du börjar använda den!
-== Sluttaggar ==
+== Taggarnas uppbyggnad ==
-För så gott som alla [[tagg]]ar används även en [[sluttagg]]. Precis som [[starttagg]]en talar om var ett en tagg börjar gälla, talar [[sluttagg]]en om var taggen upphör att gälla. [[Sluttagg]]ar ser ut som och heter samma som [[starttagg]]arna, med den skillnaden att man alltid lägger till ett ”/”-tecken före taggnamnet. Så den [[tagg]] som vi hade som exempel tidigare; ”<code>&lt;[[hx|h1]]&gt;</code>”, har alltså en motsvarande [[sluttagg]] som ser ut så här; ”<code>&lt;/h1&gt;</code>”.
+Alla [[tagg]]ar, såväl start som slut, ligger inom tecknen ”<code>&lt;</code>” och ”<code>&gt;</code>”. Så en [[tagg]] kan se ut så här ”<code>&lt;[[hx|h1]]&gt;</code>”. Detta är <code>h1</code>-taggen, vilken används för att markera att något är en huvudrubrik. När webbläsaren tolkar ett dokument och träffar på ett ”<code>&lt;</code>”-tecken kommer den att börja tolka allt från och med detta tecken som en tagg, ända tills den hittar ett motsvarande ”<code>&gt;</code>”-tecken.
-=== Utelämna sluttaggar ===
-I vissa fall kan man utelämna [[sluttagg]]en, men det är oftast en bra vana att lägga dit den även om den inte behövs. Det gör det lättare att se var ett [[element]] börjar och var det slutar, samt att vissa utvecklingsverktyg fungerar bättre om båda [[tagg]]arna är med. I de fall då [[sluttagg]]en måste anges, kan det bli rejäla fel när webbläsaren försöker tolka ditt dokument och slutresultatet kanske inte alls blir vad du tänkt dig. Hellre än att försöka hålla reda på de specialfall där [[sluttagg]]arna inte behövs, är det oftast bättre att alltid ange dem. Det blir en god vana som leder till färre fel. Dock finns det ett fåtal [[tagg]]ar till vilka man aldrig använder en [[sluttagg]]. Vi återkommer till dessa senare.
-== Element ==
+HTML:s hantering av ”<code>&lt;</code>”, gör att man inte kan lägga in dessa tecken hur som helst i sina dokument. Så om man vill använda sig av ”<code>&lt;</code>” som ett vanligt tecken och inte som start för en HTML-tagg, måste man ange en specialkod.  Vi återkommer till denna typ av specialkoder...
-Ett taggpar plus dess innehåll skapar tillsammans vad vi kallar för ett [[element]]. Ett exempel på ett komplett [[element]] kan vara:
-<syntaxhighlight lang="html5">
+== HTML5:s tagguppsättning ==
-<h1>Detta är en huvudrubrik</h1>
+Man kan inte uppfinna nya [[tagg]]ar allteftersom man känner för det, utan det finns en förutbestämd uppsättning av [[tagg]]ar som definierats i [[HTML5]]-[[standard]]en och det är enbart dessa taggar som webbläsare fattar. Det finns en uppsjö av olika [[tagg]]ar. Dock är det inte helt nödvändigt att kunna dem alla utantill. Det är bra att komma ihåg vilka olika typer av [[tagg]]ar som finns, men de mer obskyra [[tagg]]arna kan man alltid slå upp när man väl behöver dem.
-</syntaxhighlight>
-Detta är ett <code>[[hx|h1]]</code>-element vars innehåll är texten ”Detta är en huvudrubrik”. På detta vis talar vi om för webbläsaren att texten har ett speciellt syfte, i det här fallet att det är denna sektions huvudrubrik. Vi talar dock inte om hur texten ska visas, utan enbart dess syfte. Alla webbläsare har ett grundutseende för hur olika [[element]] ska se ut. I vårt fall kommer antagligen innehållet att visas med lite större och fetare text, men så länge vi jobbar med [[HTML]], arbetar vi inte med utseende. Det exakta utseendet som [[tagg]]arna ger upphov till skiljer sig ifrån webbläsare till webbläsare. Det kan till och med vara som så att slutanvändaren som använder vår webbsida är blind (eller har något annat handikapp) och därför får sidan uppläst för sig. När vi jobbar med ren [[HTML]], kan vi aldrig vara säkra på hur slutresultatet kommer att återges. Med hjälp av [[CSS]] får vi mer kontroll över hur sidan återges, men inte ens då kan vi inte vara 100 % säkra på att slutanvändaren kommer att uppleva sidan exakt så som vi tänkt oss. Vi återkommer dock till utseendet i en senare aktivitet.
+I de flesta fall finns det en [[tagg]] som passar det syfte man är ute efter, men för de tillfällen då man inte hittar exakt vad man behöver så finns det några generella [[tagg]]ar som kan användas för att märka upp information som inte har någon speciell [[semantik|semantisk]] betydelse. En vanlig anledning till att vilja markera upp saker med dessa generella [[tagg]]ar är för att informationen ska ges ett speciellt utseende, med hjälp av [[CSS]], eller för att informationen ska behandlas av ett [[JavaScript]]-program.
-== Underelement och nästling ==
+== Starttaggar ==
-[[Element]] kan i sin tur innehålla andra [[element]]. Ett exempel på det skulle kunna vara:
+Man inleder alltså ett element i HTML-kod med en starttagg. Starttaggen anges på formen <code>&lt;''taggnamn''&gt;</code>, där <code>''taggnamn''</code> är en av alla de taggar som finns med i HTML5-standarden. Man kan även ange attribut och liknande i en tagg, men det återkommer vi snart till. Det är viktigt att se till att man stavar taggnamnet helt korrekt, annars kommer inte webbläsaren att fatta vad du menar. I HTML5 går det att blanda stora/små bokstäver i ett taggnamn, men det är alltid bäst att skriva taggnamn med små bokstäver (gemena).
-<syntaxhighlight lang="html5">
+<div class="well well-warning">
-<code><h1>Detta är en <em>huvudrubrik</em></h1></code>
+För att skriva vettig kod är det viktigt att du använder taggarna på rätt sätt. Varje tagg har ett syfte och ska enbart användas för detta syfte. Om du är osäker på hur en tagg ska användas, läs på innan du börjar använda den! En bra början är att titta på [[html5-taggar|listan över taggar]].
-</syntaxhighlight>
-Här har vi alltså ett <code>[[em]]</code>-element är nästlat inuti ett <code>[[hx|h1]]</code>-element. Det gör att <code>[[em]]</code>-elementet är en del av <code>[[hx|h1]]</code>-elementet, men det är även ett eget [[element]] i sig. <code>[[Em]]</code>-[[tagg]]en används för att markera att något har mer emfas än omkringliggande material – det vill säga att det ska betonas på något vis. I de flesta fall kommer webbläsaren att visa sådan text med fet stil.
-Ett mer avancerat nästlingsexempel skulle kunna vara följande (konstlade och dumma) kod:
-<syntaxhighlight lang="html5">
-<div>
-   <h1>Detta är en huvudrubrik</h1>
-   <div>
-      <h2>En underrubrik</h2>
-  </div>
 </div>
-</syntaxhighlight>
-Det mest intressanta med ovanstående exempel är att vi har ett <code>[[div]]</code>-element inuti i ett annat <code>[[div]]</code>-element. När webbläsaren ska tolka ovanstående, så kommer den att fatta att den första ”<code>&lt;/[[div]]&gt;</code>”-[[tagg]]en är [[sluttagg]]en till den andra ”<code>&lt;[[div]]&gt;</code>”-[[tagg]]en och att den sista [[sluttagg]]en hör samman med den första [[starttagg]]en. Webbläsaren är alltså rätt så ”smart” när den ska tolka hur [[tagg]]ar och [[sluttagg]]ar hör samman, dock gäller det att se till så att man får dit [[sluttagg]]arna i rätt ordning. Moderna webbutvecklingsverktyg har bra stöd som hjälper dig med att få dit [[sluttagg]]arna där de hör hemma. De flesta verktyg fyller i möjliga sluttaggsnamn, direkt du skriver ”<code>&lt;/</code>”. Men man kan inte helt förlita sig på att verktygen gör allting rätt...
+== Sluttaggar ==
+För så gott som alla [[tagg]]ar används även en [[sluttagg]]. Precis som [[starttagg]]en talar om var ett en tagg börjar gälla, talar [[sluttagg]]en om var taggen upphör att gälla. [[Sluttagg]]ar ser ut som och heter det samma som [[starttagg]]arna, med den skillnaden att man alltid lägger till ett ”<code>/</code>”-tecken före taggnamnet. Den [[tagg]] som vi hade som exempel tidigare; ”<code>&lt;[[hx|h1]]&gt;</code>”, har alltså en motsvarande [[sluttagg]] som ser ut så här; ”<code>&lt;/h1&gt;</code>”. Liksom med starttaggarna är det viktigt att stava rätt. Det är extra viktigt att inte utelämna "<code>/</code>"-tecknet. Gör du det kommer webbläsaren att tro att det är en ny starttagg, vilket kan leda till oförutsedda konsekvenser (knappast bra sådana).
-== Vikten av snygg kod ==
+== Utelämna sluttaggar ==
-När man skriver mycket stor och komplex kod, så kan lätt bli en enda stor soppa av allting. Med lite tur är det en soppa som webbläsaren kanske klarar av att tolka, medan du som skrivit koden kanske tappar bort dig helt. I värsta fall är det en soppa som vare sig du eller webbläsaren klarar av att tolka. Så det gäller att strukturera sin kod på ett vettigt vis. Det finns en del tricks, eller goda vanor, som gör att det blir enklare att hålla ordning på sin kod. I exemplet ovan har vi använt oss av så kallad [[indentering]], det vill säga vi har skjutit in texten med några extra mellanslag (tabbar går också bra) på vänster sida. Det gör att vi kan se strukturen i koden och lätt se vilka start- och sluttaggar som hör samman. Vi återkommer till goda kodvanor i en senare aktivitet.
+I vissa fall kan man utelämna [[sluttagg]]en, men det är oftast en bra vana att lägga dit den även om den inte är nödvändig. Det gör det lättare att se var ett [[element]] börjar och var det slutar, samt att vissa utvecklingsverktyg fungerar bättre om båda [[tagg]]-delarna är med. I de fall man råkar utelämna sluttaggen och den är nödvändig, kan det bli rejäla fel när webbläsaren försöker tolka ditt dokument och slutresultatet kanske inte alls blir vad du tänkt dig.
-== Felaktigt angivna sluttaggar ==
+Dock finns det ett fåtal [[tagg]]ar till vilka man ''aldrig'' använder en [[sluttagg]]. Vi återkommer till dessa senare.
-När vi skapar nästlade [[element]] gäller det att hålla tungan rätt i munnen och se till att [[tagg]]arna hamnar i rätt ordning. Det här skulle till exempel bli rejält fel:
-<syntaxhighlight lang="html5">
+== Hur skriver man ett "&lt;"-tecken? ==
-<h1>Detta är en <i>huvudrubrik</h1></i>
+Som vi konstaterat så indikerar <code>&lt;</code> att en tagg ska starta. Om man vill ha ett ”mindre än”-tecken i sitt dokument, måste man skriva det med hjälp av en speciell kod – i detta fall är koden ”<code>&amp;lt;</code>”. Då kommer webbläsaren att förstå att man vill visa det specifika tecknet och att det inte är en [[starttagg]]. Det finns många dylika [[teckenkod]]er.
-</syntaxhighlight>
-Här har vi satt [[sluttagg]]arna i fel ordning, vilket kommer att ge webbläsaren en hel del huvudbry. De flesta webbläsare är godvilliga och sväljer flertalet fel utan några direkta klagomål. I vissa fall kommer slutresultatet att bli felaktigt, men förvånansvärt ofta lyckas webbläsaren få till en korrekt tolkning av dokumentet, trots att man gjort fel. Dock kan det vara som så att det fel som en typ av webbläsare klarar av, kanske en annan webbläsare inte alls klarar. Det är därför viktigt att använda sig av testverktyg som kollar igenom ens [[HTML]]-kod och påpekar fel och brister. Dessa testverktyg sväljer inte vad som helst, utan är riktigt, riktigt petiga och ska ha allt absolut rätt innan de godkänner koden. Användningen av dylika testverktyg ger mer robust kod, som är lättare att felsöka och underhålla. Så gör det till en god vana att testa din kod ofta – det vinner du på i längden. Vi kommer att titta mer på verktyg i en senare aktivitet.
+== Sammanfattning av taggar ==
+[[Fil:tldr2.png|center|En taggs uppbyggnad]]
-== Hur skriver man ett "&lt;"-tecken? ==
+== Övningar ==
-Som vi konstaterat så indikerar <code>&amp;lt;</code> att en tagg ska starta. Om man vill ha ett ”mindre än”-tecken i sitt dokument, måste man skriva det med hjälp av en speciell kod – i detta fall är koden ”<code>&amp;lt;</code>”. Då kommer webbläsaren att förstå att man vill visa det specifika tecknet och att det inte är en [[starttagg]]. Det finns många dylika teckenkoder, men vi återkommer till dem senare.
+[[Tagg-grunder övningar]]
+== Nästa sektion ==
+[[Element-grunder]]
-Nästa aktivitet: [[En webbsidas anatomi]]
+[[Category:Webbutveckling]]