<header> </header> <footer> </footer>

Storlek: px

Starta visningen från sidan:

Download "<header> </header> <footer> </footer>"

Göran Ström
för 8 år sedan
Visningar:

1 Tidigare har man använt taggen <div> </div> för att märka delar av dokument. I HTML5 har man lagt till stöd för de nya taggarna för att det inte ska bli så många <div>-taggar. I exemplet nedan använder vi de nya taggarna för att skapa en html-sida. <!DOCTYPE html> <html> <head <title> ny sida </title> <meta charset= utf-8 > <link rel= stylesheet href= forum.css /> </head> <body> <header> <h1> Forum för färgblinda</h1> </header> <p> Här ska själva innehållet vara. </p> <footer> <p> Copyright Yvonne 2014</p> </footer> </body> </html>

2 Mall dokumentet innehåller två rader som kan formateras med CSS. <style> header{ background-color: silver; } footer{ background-color: #ddd; } </style> <nav> Taggen <nav> används för att märka ut navigeringsdelen på webbsidor, alltså delar av sidan som innehåller länkar till andra delar av sajten. <header> <h1>forum för färgblinda</h1> <nav> <p><a href= / >Hem</a> * <a href= /groups >Grupper </a>* <a href= /about >Om oss </a> </nav> </header>

3 <address> Den här taggen har funnits med i HTML ända sedan version 2, så när man införde de olika dokumentdelarna i HTML5 var det logiskt att låta <address> bli en av dem. <footer> <address> <a href=mailto:info@example.org > Kontakta oss </a> </address> <p> Copyright Yvonne 2014</p> </footer> Innehållet i taggen <address> visas kursivt om du vill ha det på annat sätt måste du använda CSS.

4 <section> Mer om TEXT Taggen <section> används, precis som <div> för att märka ut delar av webbsidor. Med sektion menar man dock en lite mer avgränsad allmängiltig del av sidan, oftast med rubrik och ett eget tema. <section id= post > <p> Här ska själva innehållet vara. </p> </section> <article> Taggen <article> används för att märka ut artiklar på en nyhetssida. En artikel är alltså en fristående text som ingår i en webbsida. <section> <article> <h2> Vadå färgblind</h2> <p> Lite text här som utfyllnad. </p> </article> </section>

5 <aside> Den här taggen använder man till faktarutor och andra texter som är relaterade till en artikel men som inte ingår i huvudtexten. Man kan till exempel använda det för att förstora citat som vissa tidningar gör för att locka läsare till artiklar. Exempel: <article> <aside> <img src= avatar.jpg /> <p>författare: Yvonne </p> <p> :45 </p> </aside> </article>

6 <hgroup> Taggen <hgroup> används om man vill gruppera flera rubriker. Exempel: <article> <hgroup> <h2>ytterligare en rubrik </h2> <h4> Ett besök hos skolsyster</h4> </hgroup> <aside> <img src= avatar.jpg /> <p> Författare: Yvonne </p> <p> :45 </p> </aside> </article>

7 <time> Används för att märka ut tidpunkten i text, <time> är nytt i HTML5. Tanken är att webbläsaren ska kunna visa klockslag i det lokala formatet. Man kan ge en tidpunkt med attributet datetime: <time datetime= >Nästa torsdag</time> Tidpunkten ska anges i följande form: ÅÅÅÅ-MM-DDTtt:mm:ssZON ÅÅÅÅ MM DD tt hh ss ZON = årtalet = månaden i två siffror =dagen i två siffror =timmen i två siffror =minuter med två siffror =sekunder med två siffror = tidszonen.

8 <sub> och <sup> Taggarna <sub> från engelskan subscript och <sup> från superscript gör at den markerade texten skrivs med mindre teckengrad och nedsänkt respektive upphöjd i förhållande till den andra texten på samma rad som exempel: H 2 O <ins> och <del> Dessa taggar används för att markera att man lagt till eller tagit bort text i ett HTML-dokument. Det kan vara bra i långa viktiga dokument, till exempel kontrakts-text och liknande. Det är som vanligt upp till webbläsaren att presentera insatt och borttagen text på ett meningsfullt sätt, men många webbläsare stryker under insatt text och stryker över borttagen text. Man kan använda attributet cite för att ange en URL till ett dokument. <ins cite= kommentarer.html >nyinsatt text </ins>

9 <pre> Denna tagg används till text som ska visas precis som den är skriven, med radbrott, mellanslag och allt. Taggen är en förkortning för engelskans preformatted. Exempel: <pre><code> Int n= (count +7) /8; /*count &nt; */ </code></pre> Fysiska formattaggar <i> kursiv text <b> fetstil <u> understrykning <s> genomstrykning <small> mindre text <abbr> <mark> <br /> <wbr /> förkortningar markerad text radbrytning potentiell radbrytning

10 <bdo> och <bdi> Mer om TEXT <bdo> används för att tvinga webbläsaren att skriva text på ett visst sätt. Denna tagg används med attributet <dir> <p> Baklänges blir <bdo dir= rtl > baklänges </bdo> baklänges</p> <bdi> Ny i HTML5, taggen används när man vill att en del av texten ska vara oberoende av textriktningen utanför. Exempel: <ul> </ul> <li>användare <bdi>cecilia </bdi> : 2 inlägg </li> <li> Användare <bdi>axel </bdi> : 3 inlägg </li>

Relevanta dokument

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

HTML5 Semantic. Informationen kommer från w3schools.com. En semantisk elementet beskriver tydligt dess betydelse för både webbläsaren och utvecklaren. 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