HTML

Hypertext Markup Language (HTML) är det märkspråk som används för att skapa webbsidor. Filer som innehåller HTML använder oftast filändelsen .html.

Element

HTML-sidor byggs upp av element som lite slarvigt brukar kallas för taggar. HTML-elementen gör det möjligt att skapa strukturerade dokument genom att markera semantiskt viktiga delar av dokumentet, till exempel rubriker, stycken, listor, och länkar.

Ett HTML-element beskrivs med två taggar; en start-tag <p> och en slut-tag </p>. Om ett element innehåller text placeras det mellan starttaggen och sluttaggen. Mellan en starttag och sluttag kan man placera andra taggar tillsammans med texten om det behövs.

Vissa element kallas för tomma (eng. void element) då de inte har något semantiskt meningsfullt innehåll. Ett exempel är radbrytning <br> där det inte är tillåtet med något innehåll, varken andra taggar eller text. De tomma elementen beskrivs med en tag, en starttag och saknar helt sluttag.

Attribut

Ett element kan ha olika attribut som ändrar hur elementet beter sig. Vissa element har attribut som krävs men många attribut är helt frivilliga. Vanligtvis skrivs attribut som namn-värde-par med ett = mellan. Dessa namn-värde-par skrivs in i starttaggen efter namnet.

<tag attribut="värde">innehåll som påverkas av taggen</tag>

Här är det HTML-elementet med namnet tag som får attributet attribut satt till värdet värde. Värdet skrivs mellan citattecken ". HTML-standarden tillåter att man istället använder apostrofer ' eller för vissa typer av värden tillåter att de helt utelämnas. Rekommendationen är att alltid använda citattecken (").

De flesta taggarna kan ha följande vanliga attribut:

Elementet abbr får här demonstrera hur det kan se ut.

<abbr id="ettId" class="enKlass" style="color: red;" title="Hypertext Markup Language">HTML</abbr>

Boolska attribut

Det finns så kallade boolska attribut. Boolsk betyder att de bara har två värden, vanligtvis sant eller falskt. I det här sammanhanget handlar det om att de finns eller saknas, deras värde tas ingen hänsyn till och behöver därför inte anges.

För elementet button finns attributet disabled:

<button type="submit" disabled>Knapp som inte kan klickas på.</button>

Struktur

Ett HTML-dokument måste innehålla vissa delar.

<!doctype html>
<html lang="sv">
  <head>
    <meta charset="utf-8">
    <title>Exempeltitel</title>
  </head>
  <body>
    <p>Hello world!</p>
  </body>
</html>

Kommentarer

I HTML kan man göra kommentarer. En kommentar ignoreras helt när HTML-koden ska tolkas. En kommentar börjar med <!-- och avslutas med -->. Kommentaren kan börja och sluta på samma eller olika rader.

Semantisk HTML

Med semantisk HTML avses att använda HTML-elementen till det de är avsedda för. Det kan handla om att använda section, article och nav istället för den generiska div. Dessutom brukar semantisk HTML kräva att man lägger lite extra energi på val av klassnamn och id så att dessa ges värden med betydelse i det sammanhang de återfinns.

Implicit stängning av taggar

I HTML är det i vissa situationer okej att utelämna sluttaggen då det går att räkna ut var den ska stå. Det kan handla om p-taggen eller li-taggen där det inte är tillåtet med flera nästlade direkt i varandra och man därför kan räkna ut att den öppna taggen måste avslutas innan en ny kan öppnas.

Det är mycket bättre att vara explicit och skriva ut alla taggar.

DOM

I en fil skriver vi innehåll och märker upp detta med HTML-taggar. När detta sedan läses in och tolkas av webbläsaren bygger den upp något som kallas för en DOM. DOM står för Document Object Model och här blir våra HTML-taggar till element. Det webbläsaren visar för användaren är alltså inte HTML-filen utan en tolkning av denna.

https://developer.mozilla.org/en-US/docs/Web/HTML

http://www.brucelawson.co.uk/2010/a-minimal-html5-document/