HTML5 Semantic. Informationen kommer från w3schools.com. En semantisk elementet beskriver tydligt dess betydelse för både webbläsaren och utvecklaren.

Transkript

1 Vad är Semantic Elements? HTML5 Semantic Informationen kommer från w3schools.com Semantik (av grekiska sema, "tecken") avser det vetenskapliga studiet av teckensystems innebörd och tolkning. Semantic elements = element med mening. En semantisk elementet beskriver tydligt dess betydelse för både webbläsaren och utvecklaren. Exempel på icke-semantiska element: <div> och <span> - Berättar ingenting om dess innehåll. Exempel på semantiska element: <form>, <table> och <img> - tydligt definierar dess innehåll.

2 Browser Support Internet Explorer, Firefox, Opera Google, Chrome och Safari HTML5 semantiska element stöds i alla moderna webbläsare. Dessutom kan du "lära" äldre webbläsare hur man hanterar "okända element". Läs om det i HTML5 Browser Support. Nya semantiska element i HTML5 Många webbsidor innehåller HTML-kod som: <div id = "nav"> <div class = "header"> <div id = "footer"> för att indikera navigering, sidhuvud och sidfot.

3 HTML5 erbjuder nya semantiska element för att definiera olika delar av en webbsida: <article> <aside> <details> <figcaption> <figure> <footer> <header> <main> <mark> <nav> <section> <summary> <time>

4 HTML5 <section> Element HTML5 Semantic Sektions taggens element <section> </section>, definierar ett avsnitt i ett dokument. Enligt W3C: s HTML5 dokumentation: "Ett avsnitt är en gruppering av innehåll, vanligtvis med en rubrik. Webbplatsens startsida kan delas upp i sektioner för: * introduktion * innehåll HTML5 <article> Element * kontaktinformation. En Artikel element <article>, anger oberoende samt fristående innehåll. Det är vettigt att en artikel <article> </article> är ensam och inte i en grupp med andra taggar, för att det ska vara möjligt att läsa den oberoende från resten av webbplatsen. Som exempel används <article> elementet i form av; Forum inlägg, Blogg inlägg och nyhets artiklar.

5 Blandande (nästlade) semantiska element I HTML5-standarden definierar <article> elementet som ett komplett, fristående block av tillhörande element. Elementet <section> definieras som ett block av relaterade element. Kan vi använda de definitioner för att avgöra uppsättningen av elementen? Nej, det kan vi inte! På Internet hittar du HTML-sidor med artikel element innehållande <article> och <article> element innehållande <section> element. Du hittar också sidor med sektions element innehållande <section> element och artikel element innehållande <article> element. Tidning: I sportartiklar används <article> och i sportdelen <section>, om det finns en teknisk avdelning används <section> i varje artikel (<article>).

6 HTML5 <header> Element HTML5 Semantic <header> elementet anger en rubrik för ett dokument eller avsnitt. <header> elementet bör användas som en behållare för introduktions innehåll. Du kan ha flera <header> element i ett dokument. I följande exempel definieras en rubrik för en artikel: <article> <header> <h1>what Does WWF Do?</h1> <p>wwf's mission:</p> </header> <p>wwf's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p> </article>

7 HTML5 <footer> Element <footer> element anger en sidfot för ett dokument eller avsnitt. <footer> element ska innehålla information om dess innehåller element. En sidfot innehåller normalt författaren av information handlingen, upphovsrätt, länkar till användarvillkoren, kontaktinformation mm Du kan ha flera <footer> element i ett dokument. HTML5 <nav> Element Den <nav> elementet definierar en uppsättning navigeringslänkar. Den <nav> elementet är avsedd för stora block av navigeringslänkar. Dock bör inte alla länkar i ett dokument vara inuti en <nav> elementet!

8 HTML5 <aside> Element HTML5 Semantic Den <aside> elementet definierar en del innehåll bortsett från det innehåll som är placerad i (som en sidebar). Innehållet bör relateras till det omgivande innehållet. <aside> <h4>epcot Center</h4> <p>the Epcot Center is a theme park in Disney World, Florida.</p> </aside> HTML5 <figure> and <figcaption> Elements I böcker och tidningar, är det vanligt att ha bildtexter med bilder. Syftet med en bildtext är att lägga till en visuell förklaring till en bild. Med HTML5, kan bilder och bildtexter grupperas tillsammans i <Bild> element. <Img> elementet definierar bilden, <figcaption> definierar elementet och bildtexten.

9 Exempel: <figure> <img class= ImageWidth src="pic_mountain.jpg" alt="the Pulpit Rock > <figcaption>fig1. - The Pulpit Rock, Norway.</figcaption> </figure> Varför Semantisk HTML5 Elements? Med HTML4, utvecklare använde sin egen favorit attributnamn till stil och side element som; header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav m m Detta gjorde det omöjligt för sökmotorer att identifiera rätt sidans innehåll. Med HTML5 element som: <header> <footer> <nav> <section> <article>, kommer detta att bli lättare. Enligt W3C, en semantisk webb: Tillåter att data kan delas och återanvändas mellan applikationer, företag och samhällen."

10 Beskrivning av de nya taggarna i HTML5 <article> Definierar en artikel <aside> Definierar innehåll bortsett från innehållet på sidan <details> Definierar ytterligare detaljer som användaren kan visa eller dölja <figcaption> Definierar en bildtext till en <figure> elementet <figure> Anger fristående innehåll, som illustrationer, diagram, foton, kodexempel. <footer> Definierar en sidfot för ett dokument eller avsnitt <header> Anger en rubrik för ett dokument eller avsnitt <main> Anger det huvudsakliga innehållet i ett dokument <mark> Definierar märkt eller markerad text <nav> Definierar navigeringslänkar <section> Definierar en sektion i ett dokument <summary> Definierar en synlig rubrik för en <details> elementet <time> Definierar ett datum och tid