HTML5
Layout - Semantiska element
Semantiska element
Med semantiska element menas att de beskriver vad som visas. Det är bra både för webbläsaren (och sökrobotar) samt utvecklaren.
Exempel på icke-semaniska element är div och span. De säger absolut ingenting om innehållet.
Exempel på semantiska element är table, img, h1. De talar om vad som visas i elementet.
Nya semantiska element för sidstruktur
Vilka
header, main, section, article, nav, aside, footer
Varför
Dessa bygger på undersökningar hur webbsidor är uppbyggda. Tidigare löste vi det med <div class="header">, <div class="menu">, osv.
När ska de användas
Header kan vara överst på sidan men även i en section.
Main samlar ihop det som är kopplat till sidans huvudinnehåll. Den ska inte innehålla sådant som upprepas på sidor inom sajten, logga, sajtrubrik, sajtnavigeringsdel, footer. Dessutom får det bara finnas en "main" på varje webbsida
Section paketerar ihop innehåll som hör ihop. Section innehåller oftast både rubrik och innehåll.
Article är väldigt likt section men bör användas då innehållet är mer oberoende av annat som t ex foruminlägg, tidskriftsartikel. Både section och article kan ligga i sig själva eller i varandra. En article ska kunna lyftas ut ur sitt sammanhang och placeras på ett helt annat ställe.
Nav är ju för någon typ av meny.
Aside för att gruppera visst innehåll men bör inte användas till sidans huvudsakliga innehåll, dvs lämpligt är en kolumn eller en del av en kolumn vid sidan av det viktiga innehållet.
Footer används för att notera vissa fakta och hamnar oftast underst där man har sin information, det kan vara en hel webbsida men även en section eller article.
Article eller section. Som vi ser så är de flesta rätt tydliga men det kan vara lite förvirrande när article och section ska användas. Article brukar vara en egen del av en webbsida vilket inte är fallet med section. Om ett visst innehåll är tydligt i sig självt och att det går bra att flytta till ett annat ställe så bör article användas, om det inte fungerar att flytta så bör section användas.
Nu finns inga rätt och fel här utan du försöker använda dessa så långt som möjligt efter rekommedationerna, men också så att de fyller en logisk funktion för dig.
Så här kan det till exempel se ut:
Eller kanske så här:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Strukturtaggar</title>
<link rel="stylesheet" href="stilmall.css">
</head>
<body>
<div class="container">
<header>
Testsida
</header>
<section>
<nav>
<ul>
<li class="rubrikrad">Rubrik</li>
<li><a href="#">Länk ett</a></li>
<li><a href="#">Länk två</a></li>
<li><a href="#">Länk tre</a></li>
</ul>
</nav>
<section>
<p>Text text text</p>
<p>Text text text</p>
</section>
</section>
<!-- end section nav-->
<main>
<article class="content">
<section class="box">
<h2>Rubrik</h2>
<p>Text text text</p>
</section>
<section class="box">
<h2>Rubrik</h2>
<p>Text text text</p>
</section>
</article>
<!-- end article.content -->
<aside class="sidebar2">
<section class="ruta bg-green">
<h4>Nyheter</h4>
<p>Text text text ...</p>
</section>
</aside>
<!-- end aside -->
</main>
<footer>
<p>© XXX</p>
<address>xxx¤vgy.se</address>
</footer>
<!-- end footer -->
</div>
<!-- end .container -->
</body>
</html>
Följande taggar har strykits i HTML5
applet, basefont, center, font, frame, frameset
Källor
HTML5 & CSS3 FOR THE REAL WORLD, Goldstein, Lazaris, Weyl (Sitepoint 2011)
w3schools - html5 Semantiska element
Filmer
HTML5 Tutorial - 3 - Setting up the body (thenewboston 8 min)
HTML5 Tutorial - 4 - Adding the Meat! (thenewboston 5 min)
HTML5 Tutorial - 9 - Laying Out the Website (thenewboston 5 min)
HTML5 Tutorial - 10 - Starting the Styling (thenewboston 6 min)
HTML5 Tutorial - 11 - Styling the Navigation Menu (thenewboston 9 min)
HTML5 Tutorial - 12 - Making Everything Pretty (thenewboston 9 min)
HTML5 Tutorial - 13 - Finishing the Layout (thenewboston 5 min)