För den som vill bli en framstående frontend-utvecklare är det ett allmänt råd att skaffa sig kunskaper i HTML. Hypertext Markup Language, eller HTML, är själva grunden för nästan alla webbsidor.
HTML bygger på olika komponenter som taggar, attribut och element. Vi kommer framför allt att fokusera på HTML-taggar. Dessa taggar används för att ge webbläsare instruktioner om hur innehåll ska struktureras, som rubriker, titlar, stycken och bilder. De fungerar som nyckelord som definierar hur webbläsaren ska presentera och formatera text.
Webbservrar tolkar HTML-taggar sekventiellt, från topp till botten. Det finns ingen fast gräns för hur många taggar en webbsida kan innehålla.
- Alla HTML-taggar omsluts av tecknen < och >.
- Varje tagg har sin egen specifika funktion.
- De flesta taggar består av en öppnande <tag> och en avslutande </tag>.
HTML-taggar kontra HTML-element kontra HTML-attribut
Många använder termerna HTML-taggar och element synonymt. Men är de verkligen samma sak? Tekniskt sett är HTML-element och HTML-taggar olika saker.
HTML-taggar används för att definiera HTML-element. Detta åstadkoms genom att omsluta innehållet med en inledande och en avslutande tagg som matchar typen av innehåll som hanteras.
Här följer ett exempel på ett HTML-element:
<p>Detta är ett stycke</p>
<p> är ett exempel på en HTML-tagg.
HTML-attribut utgör ytterligare information om HTML-element i ett dokument. Attribut inkluderas inuti HTML-element.
Detta är ett exempel på ett HTML-attribut:
<button id="SkickaBeställning" class="knapp">Beställ</button>
HTML-taggar som alla borde känna till
HTML som markeringsspråk har utvecklats betydligt sedan Tim Berners-Lee introducerade det 1993. Den första versionen av HTML hade 18 taggar. Nya taggar har lagts till med varje ny HTML-version. Den senaste uppdateringen var HTML5 2014.
Jämför vi HTML och HTML5 ser vi att den senare introducerade semantiska taggar såsom <article>, <header> och <footer> som ger tydligare beskrivningar av innehållet. Idag finns det över 100 HTML-taggar. Nedan följer några av de viktigaste taggarna som alla bör känna till:
<!DOCTYPE>
<!DOCTYPE> är tekniskt sett inte en tagg, utan en deklaration som informerar webbläsaren om vilken dokumenttyp som ska laddas. Denna deklaration anger vilken version av HTML som används.
I HTML5 deklareras en fil med:
<!DOCTYPE html>
Eller:
<!doctype html>
Obs! Deklarationen har ingen sluttagg och är inte skiftlägeskänslig.
<html> </html>
Taggen <html> … </html> följer efter <!DOCTYPE> deklarationen. Den definierar dokumentet som en webbsida och alla andra element inkluderas inuti den. HTML-taggen markerar början och slutet av ett HTML-dokument.
En <html>-tagg representeras så här:
<html>Innehåll</html>
<head></head>
Huvudet på ett HTML-dokument representeras av en <head>-tagg. Denna tagg placeras inuti <html>-taggen och innehåller allmän information om webbsidan.
<head>-taggen innehåller andra taggar som ger information om webbsidan, som sidans titel och författare. Innehållet i denna tagg visas inte direkt på webbsidan.
Syntaxen för en <head>-tagg ser ut så här:
<head>…</head>
<title></title>
Taggen <title> definierar webbsidans titel. Denna tagg placeras inuti <head>-taggen. Texten i <title>-taggen visas i webbläsarens namnlist eller flik, men inte direkt på webbsidan.
Syntaxen för <title>-taggen är:
<title>HTML-taggar för nybörjare</title>
Inuti en <head>-tagg visas det som:
<head> <title>HTML-taggar för nybörjare</title> </head>
<body> </body>
<body>-taggen innehåller allt synligt innehåll på en webbsida. Det inkluderar bilder, länkar, vanlig text, videor och mycket mer som placeras mellan <body> och </body> taggarna.
Andra taggar som kan återfinnas inuti <body> inkluderar <p> för stycken, <a> för länkar, <strong> för fet text och <ol> för ordnade listor, bara för att nämna några.
Syntaxen för <body>-taggen ser ut så här:
<body> Innehåll </body>
<h1> till <h6> Taggar
Ett HTML-dokument kan ha upp till sex rubriktaggar. Varje tagg representeras av ett nummer som börjar från 1 till 6, som <h1>, <h2>, <h3>, <h4>, <h5> och <h6>.
<h1> är den största rubriktaggen, medan <h6> är den minsta.
I ett HTML-dokument representeras rubriktaggar på följande sätt:
<h1>Rubrik 1</h1> <h2>Rubrik 2</h2> <h3>Rubrik 3</h3> <h4>Rubrik 4</h4> <h5>Rubrik 5</h5> <h6>Rubrik 6</h6>
<h1> till <h6>-taggarna placeras inuti <body>-taggen.
Till exempel kommer en <h1>-tagg att placeras så här:
<body>
<h1> Detta är rubrik 1 </h1>
</body>
<p></p>
<p> eller stycketaggen används för att strukturera innehåll i stycken. Att trycka på Enter i en kodredigerare i ett HTML-dokument skapar inte ett nytt stycke.
För att skapa fler än ett stycke, måste du använda flera <p>-taggar i dokumentet. Stycketaggarna ska inkluderas i <body>-taggen.
Syntaxen för en stycketagg är:
<p>…här kommer text…</p>
Om du vill ha fyra stycken, ska koden struktureras så här:
<body>
<p>Innehåll för första stycket.</p>
<p>Innehåll för andra stycket.</p>
<p>Innehåll för tredje stycket.</p>
<p>Innehåll för fjärde stycket.</p>
</body>
<b></b>
Taggen <b> </b> eller fetstil formaterar texten som placeras mellan den inledande <b> och avslutande </b> till fetstil.
Den fetstilta taggen kan användas i en rubrik, som <h1>, eller till och med i en stycketagg.
Här följer ett exempel på en fet tagg:
<b>Fet tagg</b>
Frasen ”Fet tagg” visas i fetstil.
<h1>Håll det lugnt, <b>femte upplagan</b>, vinnarupplagan </h1>
Texten ”femte upplagan” visas i fetstil.
<i> </i>
Den kursiva taggen, betecknad med <i>, kursiverar texten som finns inuti taggarna.
Till exempel, om vi har:
<i>Detta är kursiv text</i>
Orden ”Detta är kursiv text” visas i kursiv stil.
<u> </u>
Understrykningstaggen, eller <u>, används för att understryka en viss text i ett HTML-dokument.
Till exempel, om vi har:
<u>understryk de här orden</u>
Frasen mellan taggarna understryks.
<center> </center>
Centreringstaggen, <center>, används för att centrera innehåll i ett HTML-dokument.
Om vi t.ex. har en <h2>-tagg skriven så här:
Centrera innehåll i HTML
, kan vi centrera den på följande sätt:
<center> <h2>Centrera innehåll i HTML</h2> </center>
<span></span>
<span>-taggen är en generisk inline-behållare utan någon standardstil. Du kan använda <span>-taggen för att gruppera text som du vill styla.
Du kan använda <span> inuti andra taggar som rubriker och stycken:
<h2>Lär dig HTML <span> från experter</span> och gör dig redo för marknaden</h2>
<p>Lär dig HTML <span> från experter</span> och gör dig redo för marknaden</p>
<div></div>
En divisionstagg, förkortad <div>, är en tagg som låter dig gruppera olika taggar i ett HTML-dokument.
En <div>-tagg kan ges en ”klass” för att lägga till extern stil med CSS.
Så här representeras en <div> som omsluter en <h1>, <h2> och en paragraftagg:
<div>
<h1>Lär dig HTML</h1>
<h2>HTML-taggar</h2>
<p>HTML är ett markeringsspråk…</p>
</div>
<em> </em>
Betoning, eller <em>-taggen, används för att betona vissa ord i ett HTML-dokument.
Innehåll mellan <em>-taggarna visas lutande eller i kursiv stil.
Betonat innehåll i ett stycke kan visas i en kodredigerare på följande sätt:
<p>Mötet börjar kl. <em>0800</em>, var vänlig och håll tiden.</p>
<sup></sup>
<sup> eller den upphöjda taggen gör att texten placeras ovanför den övriga texten. Ett bra exempel är när du vill kvadrera ett tal X och representera det matematiskt som X².
Syntaxen för <sup> i en stycketagg ser ut så här:
<H1> Harveys <sup>TM</sup> Company Limited </H1>
<sub></sub>
Den nedsänkta eller <sub>-taggen är motsatsen till den upphöjda taggen. Innehållet i <sub>-taggen visas under den vanliga textraden. Ett bra exempel är när du skriver vattens kemiska formel som H₂O.
Syntaxen för den nedsänkta taggen är:
Kom ihåg att H<sub>2</sub>O är den kemiska formeln för vatten.
<br>
<br> är en självstängande tagg som representerar en radbrytning. Allt innehåll efter <br /> börjar på en ny rad.
Syntaxen för <br> i ett stycke ser ut så här:
<p>HTML är förkortningen av Hypertext Markup Language <br> Det har pågått en debatt om huruvida det är ett programmeringsspråk eller inte <br> Men vi kan inte underskatta dess betydelse <br> HTML används i mer än 95 % av dagens webbplatser</p>
<ol></ol> och <li> </li>
Taggen för ordnad lista eller <ol> måste användas med en annan tagg, t.ex. <li>.
De två kan visas i en kodredigerare på följande sätt:
<ol>
<li>Asien</li>
<li>Afrika</li>
<li>Europa</li>
</ol>
När det renderas i webbläsaren visas innehållet numrerat.
<img src=””/>
Ibland vill man lägga till en bild för att göra sidan mer visuell eller till och med lägga till en logotyp. Den självstängande bildtaggen, <img src=””/>, passar bra i dessa fall.
Syntaxen för bildtaggen ser ut så här:
<img src="https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png"/>
Innehållet inom citattecknen representerar källans URL.
Sammanfattning
Det finns över 100 HTML-taggar, men de som presenterats ovan är viktiga för en nybörjare. HTML stöds i de flesta kodredigerare, vilket gör att man är säker på att man inte kommer att gå vilse när man börjar lära sig.