Struktur
Last updated
Was this helpful?
Last updated
Was this helpful?
En webbsidas struktur anvÀnds till att samla element och definiera dess omrÄden. De flesta webbsidor ser nÄgorlunda olika ut, men de innehÄller nÀstan alla liknande komponenter. Det Àr viktigt och praktiskt att lÀra sig detta och att följa den strukturen.
Strukturen skapas med ett antal semantiska element. Det hjÀlper oss att ytterligare definiera dessa komponenter.
Försök identifiera komponenterna pÄ SVT Nyheter.
Ett sidhuvud Àr en del av sidan som ofta följer med mellan webbplatsens olika sidor. Det kan vara en logotyp eller liknande. Logotypen bör vara en lÀnk som tar anvÀndaren tillbaka tills startsidan. Ofta kombineras det med sidans navigation och dÄ kan det vara sÄ att enbart elementet för navigationen anvÀnds. För ett sidhuvud sÄ anvÀnds elementet <header>.
I navigationen finns det oftast lÀnkar till webbplatsens huvudsektioner. LÀnkarna i en navigation skrivs ofta som text, tabbar eller knappar. Det Àr viktigt att vara konsekvent i sidans navigation för att göra det sÄ anvÀndbart som möjligt. Försök Àven om möjligt ge anvÀndaren en indikation pÄ vilken sida som Àr den aktiva i navigationen. Elementet för navigationen Àr <nav>.
Sidans huvudinnehÄll samlas ofta under elementet <main>. InnehÄllet kommer att varierar frÄn sida till sida. Elementet kan i sin tur vara uppdelat i ett antal sektioner. I innehÄllets sektioner kan vi i sin tur anvÀnda komponenter vid behov, som ett sidhuvud.
Ofta finns det ytterligare information pÄ en webbplats som behöver samlas. Ett sÀtt att göra det Àr att placera dem i ett sidofÀlt. Det semantiska elementet för ett sidofÀlt Àr <aside>. Ett sidofÀlt kan vara placerat i sidans innehÄllstagg.
Sist kommer en sidfot, oftast en rad lÀngst ned pÄ sidan dÀr det samlas information om sidan. Kontaktuppgifter, copyright och sÄ vidare. Elementet för en sidfot Àr <footer>.
Precis som att det finns en grundmall för ett HTML dokument sÄ kan vi skapa en liknande grund för komponenterna. HÀr nedan följer en grund för SVT Nyheter utifrÄn bilden.
Koden pĂ„ svt.se Ă€r lĂ„ngt mer komplex Ă€n exemplet, bland annat pĂ„ grund av olika tekniker pĂ„ bĂ„de klient och server. Ăr du nyfiken pĂ„ webbsidas kod sĂ„ högerklicka pĂ„ sidan och vĂ€lj Visa sidkĂ€lla(engelska View page source).
Koden hÀr ovan Àr inte komplett och vissa attribut har utelÀmnats för att förenkla, men strukturen finns dÀr. Notera att sidan inte har en <header>, istÀllet tjÀnar sidans navigation som ett sidhuvud. Sidans huvudinnehÄll börjar med en <header> för att ge fokus till viktiga nyheter. Varje nyhet anvÀnder sedan elementet <article>. I sidans navigation anvÀnds en oordnad-lista för att rada upp elementen i menyn.
Kopiera koden och kör den i webblÀsaren, det du kommer se Àr att sidan saknar design. Det du ser Àr enbart standardformateringen av HTML.
Försök att strukturera din kod med hjÀlp av semantiska element dÀr det Àr möjligt eftersom det underlÀttar för tillgÀngligheten. Men det finns Àven mÄnga tillfÀllen dÀr det inte Àr möjligt. Du kommer Àven att behöva dela upp dig kod i nÀstlade element.
För att dela upp innehÄll kan artikel-elementet anvÀndas som i exemplet. Ett annat element med semantisk betydelse Àr <section>, vilket representerar en sektion av en helhet(vilket kan vara en artikel), lÀs mer hÀr. Det kan vara svÄrt att vÀlja element för sitt innehÄll och dÀrför finns det Àven ett generiskt element för innehÄll, det heter <div>. En <div> har ingen semantisk mening och bör enbart anvÀndas nÀr en semantisk mening saknas. LÀs mer om div-elementet hÀr.
Studera och inspektera koden pÄ webben som du anvÀnder. LÀr dig anvÀnda webblÀsarens verktyg (tryck F12).
Högerklicka pÄ sidan.
VÀlj, Visa sidkÀlla (View Page Source).
Undersök.
Du kan ocksÄ vÀlja att Inspektera (Inspect) dÄ kan du vÀlja specifika element och undersöka dem.
NÀsta steg Àr att koppla samman HTML koden med webbens sprÄk för stilar, Cascading Style Sheets(CSS). Det Àr först dÄ du kommer att fÄ kontroll över sidans utseende.