SEMANTISK HTML

Rätt tagg på rätt plats </>

Vad är semantisk HTML?

  • Semantisk HTML berättar vad innehållet kommer att vara inuti taggarna.
  • I praktiken: Märka upp innehåll med rätt HTML-tagg

Varför semantisk HTML?

  • Tillgängligheten (exempelvis hur blinda "läser" en webbsida)
  • Sökmotorer
  • Utvecklaren
  • Alltid fördel med god struktur

Vanliga element

Typografi Struktur Media Övrigt
h1-h6 main img a (länk)
p nav video
em section audio
strong article
header
footer
aside
div
span

Strukturelement

Element som märker upp struktur.

Sidhuvud högst upp, sidfot längst ner, navigationsmeny, etc..

Används för att presentera innehållet i ett sidhuvud på en webbsida.

<header></header>

 

Består av navigationsmenyn eller funktionalitet för navigering på en webbsida.

<nav></nav>

 

Består av huvudinnehållet som i sin tur kan vara <article>, <section>, <aside>, m.fl.

 

<main></main>

 

Används för en självständig del av innehållet i ett dokument, till exempel ett blogginlägg eller tidningsartikel.

<article></article>

 

Tillämpas för att gruppera olika artiklar i olika syften eller definiera olika delar av en artikel på en webbsida.

<section></section>

 

Definierar ett block av innehåll som är relaterat till det huvudsakliga innehållet, men inte centralt för det, eller till webbsidan i helhet.

<aside></aside>

 

Innehåller information om en sidfot på en webbsida.

Kan exempelvis innehålla copyright eller kontaktuppgifter.

<footer></footer>

 

 Innehåll som tex bilder, illustrationer, diagram etc.

<figure></figure>

 

En bildtext till elementet <figure>

<figcaption></figcaption>

 

HTML5 Doctor

Källa: HTML5 Doctor

Hjälp

http://html5doctor.com/article-archive/

 

http://www.w3schools.com/html/html5_semantic_elements.asp

 

ÖVNING

  1. Välj en valfri webbplats på nätet (förstasida)
  2. Undersök sidans strukturelement m h a Chrome Dev Tools (eller annan webbläsares verktyg)
  3. Skissa ner de primära strukturelementen på papper och ange vilket strukturelement som valts till sidan.
  4. Redovisa 

 

 

<header>

<nav>

<main>

<article>

<section>

<aside>

<footer>

<article>

<section>

Semantiska element för struktur (HTML5)

<div id="header">

<div id="nav">

<div id="main">

<div id="article">

<div id="article">

<div id="section">

<div id="section">

<div id="aside">

<div id="footer">

Exempel på hur innehåll organiserades innan HTML5

Tyvärr tillämpas det fortfarande 🥺. Inte god HTML 🥴

Ett semantiskt element beskriver tydligt dess betydelse för både webbläsaren och utvecklaren.

Exempel på icke-semantiska element är <div> och <span>

<article>

<aside>

<details>

<figcaption>

<figure>

<footer>

<header>

 

<main>

<mark>

<nav>

<section>

<summary>

<time>

+100 till typ...