En viktig princip i webbdesign är idén att använda HTML-element för att ange vad de faktiskt är, snarare än hur de kan visas i webbläsaren som standard. Detta kallas för att använda semantisk HTML.

Vad är semantisk HTML?

Semantisk HTML eller semantisk markering är HTML som introducerar betydelse för webbsidan snarare än bara presentation. Till exempel, a

 tagg anger att den bifogade texten är ett stycke. Detta är både semantiskt och presentationsmässigt eftersom människor vet vad stycken är och webbläsare vet hur de ska visas.

På baksidan av denna ekvation, taggar som  och  är inte semantiska. De definierar bara hur texten ska se ut (fet eller kursiv) och ger ingen ytterligare betydelse för markeringen.

Exempel på semantiska HTML-taggar inkluderar:

• Rubrikmärken

   genom

Det finns många fler semantiska HTML-taggar att använda när du bygger en standardkompatibel webbplats.

Varför du borde bry dig om semantik

Fördelen med att skriva semantisk HTML härrör från vad som ska vara drivkraften för alla webbsidor: önskan att kommunicera. Genom att lägga till semantiska taggar i ditt dokument ger du ytterligare information om det dokumentet, vilket hjälper kommunikationen. Specifikt gör semantiska taggar det tydligt för webbläsaren vad en sida och dess innehåll betyder. Denna tydlighet kommuniceras också med sökmotorer, vilket säkerställer att rätt sidor levereras för rätt frågor.

Semantiska HTML-taggar ger information om innehållet i dessa taggar som går utöver hur de ser ut på en sida. Text som finns i  taggen känns genast igen av webbläsaren som någon typ av kodningsspråk. Istället för att försöka återge den koden förstår webbläsaren att du använder den texten som ett exempel på koden i en artikel eller onlinehandledning.

Att använda semantiska taggar ger dig många fler krokar för att utforma ditt innehåll också. Kanske i dag föredrar du att dina kodprover visas i standardwebbläsarstil, men imorgon kanske du vill ringa upp dem med en grå bakgrundsfärg; senare ändå kanske du vill definiera den exakta teckensnittsfamiljen med monoavstånd eller teckensnittsstack att använda för dina prover. Du kan göra alla dessa saker enkelt genom att använda semantisk markering och smart tillämpad CSS.

Använda semantiska taggar korrekt

När du använder semantiska taggar för att förmedla mening snarare än för presentationsändamål, var försiktig så att du inte använder dem felaktigt bara för deras vanliga displayegenskaper. Några av de mest missbrukade semantiska taggarna inkluderar:

• Block citat - Vissa människor använder tagg för inryckning av text som inte är ett citat. Detta beror på att blockquotes är indragna som standard. Om du helt enkelt vill stryka in text som inte är en blockcitation, använd istället CSS-marginaler.
• sid - Vissa webbredaktörer använder (ett icke-brytande utrymme som finns i ett stycke) för att lägga till extra utrymme mellan sidelement, snarare än att definiera verkliga stycken för texten på den sidan. Som i föregående exempel bör du använda egenskapen marginal eller vadderingstil istället för att lägga till utrymme.
• ul - Som med

  , bifoga text inuti en

   tagga den text i de flesta webbläsare. Detta är både semantiskt felaktigt och ogiltigt HTML, för endast
  •  taggar är giltiga inom a
    märka. Återigen, använd marginalen eller vadderingsstilen för att dra in text.
  • h1, h2, h3, h4, h5 och h6 - Du kan använda rubriktaggar för att göra teckensnitt större och djärvare, men om texten inte är en rubrik, använd istället fontvikt och fontstorlek CSS-egenskaper.

  Genom att använda HTML-taggar som har betydelse skapar du sidor som ger mer information än de som helt enkelt omger allt med

   taggar.

  Vilka HTML-taggar är semantiska?

  Även om nästan alla HTML4-taggar och alla HTML5 taggar har semantiska betydelser, vissa taggar är primärt semantisk.

  Till exempel har HTML5 omdefinierat innebörden av  och  taggar för att vara semantiska. De  tag inte förmedla extra vikt; snarare återges den taggade texten i fetstil. Likaså  tag inte förmedla extra vikt eller betoning; snarare definierar den text som vanligtvis återges i kursiv stil.

  Semantiska HTML-taggar

  Förkortning
  Akronym
  Långt offert
  Definition
  Adress till dokumentets författare
  Citat
  Kodreferens
  Teletyptext
  Logisk uppdelning
  Generisk inline-stilbehållare
  Borttagen text
  Infogad text
  Betoning
  Stark betoning
  Första nivåens rubrik
  Andra nivåens rubrik
  Tredje nivå rubrik
  Fjärde nivå rubrik
  Femte nivå rubriken
  Rubrik på sjätte nivån
  	Tematisk paus
  Text som ska anges av användaren
  Förformaterad text
  Kort inline offert
  Provutdata
  Index
  Exponent
  Variabel eller användardefinierad text