_ 1.3 Huvudstruktur

Uppgiften introducerar till semantiska element för struktur som används för att på ett tydligt sätt dela upp ett HTML-dokument i olika delar. Dessa olika delar kan sedan stilsättas och positioneras ut med hjälp av CSS.

__ Uppgift

För varje HTML-dokument utom §index.html§ skapa en huvudstruktur för innehållet genom att använda följande taggar (minst en gång på hemsides-webbplatsen) markerade med fet stil (eventuella övriga är frivilliga):

= Huvudstruktur:
-- £§main§£: Innehållet ska vara unikt på HTML-sidan och inte innehålla saker som upprepas på andra HTML-sidor (sidofält, navigationslänkar, copyright info, webbplatslogotyper, sökformulär, osv). Det ska bara finnas ett enda §main§-element och det får inte vara barn till ett §article§-, §aside§-, §footer§-, §header§-, eller §nav§-element.
-- £§section§£: Grupperar relaterat innehåll och har ofta en egen rubrik, exempelvis senaste nyheter, topp-produkter och prenumerering av nyhetsbrev. Det kan innehålla flera §article§-element med ett gemensamt tema. Kan ha egna §header§:s, §footer§:s och/eller andra §section§:s.
-- §article§: Ska innehålla oberoende fristående innehåll och vara meningsfull på egen hand och bör vara möjlig att distribuera oberoende av resten av webbplatsen (syndikerbar) exempelvis en hel fristående artikel, en nyhet, ett blogginlägg eller en kommentar i ett forum.  En §article§ kan nästlas i andra §article§-områden. Varje §article§-område kan även ha med egna §header§-, §footer§- och §aside§-områden.
-- £§aside§£: Ska innehålla relaterad men inte essentiell sidoinformation till huvudinnehållet där det är placerat. Det kan finnas:
--- Utanför en §article§ och gäller då hela sidan
--- Innanför en §article§ och gäller då artikeln 
= Navigation:
-- £§nav§£: Ska innehålla navigationslänkar för webbplatsen (det får givetvis finnas andra typer av länkar på andra ställen).
= Huvud och fot, används för hela sidan och i §article§- och §section§-taggar:
-- £§header§£: Ska innehålla introducerande innehåll eller en mängd navigationslänkar. Innehåller ofta en eller flera rubrikelement (§h1§-§h6§), logotyper, ikoner, författarnamn osv.
-- £§footer§£: Ska innehålla information om HTML-sidan eller en §article§ eller §section§, exempelvis författare, copyright, kontaktinformation, sitemap, länkar tillbaka till toppen och/eller länkar till relaterade dokument.
= Extra detaljer:
-- §details§: Ska innehålla ytterligare detaljer som användaren kan visa eller gömma. Kan användas för att skapa en interaktiv widget som användaren kan öppna eller stänga. Kan innehålla all möjlig information. Innehållet ska inte visas om inte §open§-attributet är satt till §open§.
-- §summary§: Ska innehålla en synlig rubrik för §details§-elementet som kan klickas för att visa och gömma detaljerna i §details§.

För att göra denna uppgift bör man titta framåt på resten av uppgifterna 1.4-1.10 för att se vad som ska läggas in senare och vart det passar i huvudstrukturen. Exempelvis så ska man ha med formulär i uppgift [1.10 Formulär, 05_ass/ip3/1.10.txt].

Senare, i uppgift [2.1 Layout, 05_ass/ip3/2.1.txt], så ska man även stilsätta och positionera ut de olika delarna i denna huvudstruktur och denna positionering ska göras på flera olika sätt beroende på om användaren använder en dator, platta, mobil eller skrivare. 

Varje HTML-dokument ska följa kraven under sidan [Krav, 05_ass/requirements/ip3.txt].

__ Exempel

Inget exempel ges.

__ Tips

Taggen §div§ (enda neutrala taggen, ingen semantik) användes tidigare för layout men har ersatts av de semantiska taggar för layout i HTML5 som beskrivs ovan och bör enbart användas i undantagsfall (för exempelvis äldre webbläsare osv).

Man kan använda temporär text under konstruktionen av huvudstrukturen:

- [Wikipedia: Lorem ipsum, https://sv.wikipedia.org/wiki/Lorem_ipsum]

__ Hjälp

~ 05_ass/help/01.txt

>
[Klicka här för hjälp, helper.dsv@gmail.com, Webbutv I: 1.3 Layout: http://people.dsv.su.se/~pierre/i/i.cgi?href=05_ass/ip3/1.3.txt] ½===system_tutoring_message===½
<

~ 05_ass/help/02.txt