Vad är HTML?

HTML står för HyperText Markup Language och är en av webbens grundläggande byggstenar tillsammans med CSS (Cascading Style Sheets) och Javascript. (Vad CSS och Javascript är kommer att besvaras i kommande blogginlägg.) HTML utgör strukturen för alla internets webbsidor i form av rubriker, styckeindelning, att särskilja visst innehåll från annat och liknande. Det går också att infoga bilder med HTML.

HTML är ett märkspråk och inte ett programmeringsspråk, eftersom HTML-kod endast har i uppgift att ge struktur. För att ett språk ska få kallas programmeringsspråk behöver det finnas möjlighet att utföra kommandon, vilket inte går med HTML.

Varför är det egentligen viktigt att strukturera webbsidor, kan man fråga sig. En stor anledning är för att göra design och funktionalitet möjlig, vilket åstadkoms i ett samarbete mellan HTML och CSS respektive HTML och Javascript. Om HTML utgör strukturen kan man säga att CSS utgör designen och Javascript funktionaliteten på en webbsida.

För att kunna göra alla rubriker på en webbsida röda behövs en struktur i HTML-koden som gör det möjligt att särskilja rubrikerna från övrigt innehåll. På samma sätt är det med funktionalitet. För att kunna få ett pop-up-fönster att dyka upp när man klickar på en knapp på en webbsida, behöver den knappen märkas ut i HTML-koden.

En annan anledning till varför det är viktigt att strukturera webbsidor är att strukturen används av sökmotorer. Att det här blogginlägget har rubriken "Vad är HTML", vilket är märkt i HTML-koden, låter sökmotorer förstå att det här blogginlägget handlar om HTML och lägger alltså större vikt vid det än vid det andra innehållet.

Hur använder man HTML?

Med anledning av den goda responsen från blogginlägget Vad är ett API?, där jag visade vad ett API är genom att använda ett API, tänkte jag även förklara vad HTML är med hjälp av praktiska exempel.

HTML är egentligen väldigt enkelt. Så här skrivs exempelvis ett paragraf-element:

<p>Det här är en vanlig paragraf.</p>

En paragraf skulle kunna likställas med brödtext och har förkortningen p. Man börjar med starttaggen <p>, avslutar med sluttaggen </p> och låter innehållet vara mellan dessa taggar. Hela raden med starttagg, innehåll och sluttagg kallas för ett element, i det här fallet ett paragraf-element.

Rubriker är ofta viktiga på hemsidor för att en användare lätt ska kunna navigera sig till rätt ställe så snabbt som möjligt. För rubriker används taggarna h1, h2, h3, h4, h5 och h6, där h:et står för heading och siffran definierar hierarkin för rubriken. En h1-tagg är ofta huvudrubriken för en hemsida eller ett blogginlägg medan h6-taggen är en underrubrik långt ner i rubriksträdet.

För rubriken till det här blogginlägget används en h1-tagg, på det här sättet:

<h1>Vad är HTML?</h1>

Rubriken till den här delen av blogginlägget är en h2-tagg och skrivs så här:

<h2>Hur använder man HTML?</h2>

För att betona en del av en mening kan till exempel taggen strong användas, så här:

<p>HTML är viktigt för 
<strong>strukturen</strong>
på en hemsida.</p>

Föregående rad är också ett exempel på hur ett HTML-element kan användas inuti ett annat, strong-elementet befinner sig ju helt och hållet inom p-elementet. Det går nämligen aldrig att låta ett HTML-element börja i ett annat element men sluta utanför, på det här viset:

<p>Om man använder HTML så här så
gör man <strong>fel!</p></strong>

För att lägga till bilder används img-taggen. En sak som är lite speciell med img-elementet är att den inte har någon sluttagg. För att infoga en bild på Exsitecs logga skriver man så här (utan radbrytningar):

<img 
src="https://www.exsitec.se/hubfs/Nyhetsbrev
/Exsitec_Symbol_Original_RGB.png" 
alt="Exsitecs logga">

Notera att starttaggen i ovanstående exempel inte är tom, utan innehåller texten src="...". Detta kallas ett attribut och används ofta i HTML-starttaggar för att ge ytterligare information av någon typ. I detta fall är anges sökvägen (src för source) för bilden. Testa att skriva in adressen https://www.exsitec.se/hubfs/Nyhetsbrev
/Exsitec_Symbol_Original_RGB.png så kan du se att bilden kommer upp. I alt-attributet skriver man den text som ska visas om användaren av någon anledning inte kan visa bilden.

En tagg som kan kännas lite mer abstrakt för en nybörjare är div-taggen. Den används för att definiera en sektion (division) i ett HTML-dokument. Anledningen till varför man vill dela in ett dokument i sektioner kan bland annat vara för att det är lättare att se strukturen själv, men också exempelvis för att man vill att viss design ska gälla för en viss del av en hemsidan men inte annan.

För att ge en sektion bakgrundsfärgen grön och texten vit kan man göra så här:

<div style="background-color: green; 
color: white">
<h3>Här är en rubrik!</h3>
<p>Här skriver jag en lite onödigt 
och underligt lång mening mest bara 
för att jag vill att den ska kräva mer
än en rad för att kunna bevisa min poäng 
med att använda div-taggen.</p>
<p>Och här kommer en rubrik till!</p>
</div>

I det här exemplet används CSS-kod med hjälp av attributet style="..." för att göra bakgrundsfärgen grön och textfärgen vit, men det är med hjälp av div-taggen som just den rubriken och de två paragraferna kan bilda en sektion där den färgsättningen gäller, som inte gäller utanför div-elementet.

Det finns mycket annat man kan åstadkomma med HTML, bland annat tabeller och listor, men jag nöjer mig med att behandla det mest grundläggande här.

På Exsitec gör vi webbapplikationer till våra kunder, som i botten fungerar som vanliga hemsidor och därför använder vi bland annat HTML när vi bygger dem.

Hör av dig till oss om du har ett behov av en webbapplikation!