HTML Grunder

Grunder från Webbutveckling 1

Gå gärna tillbaks och repetera grunderna.

Dokumenttyp och grundmall

DOCTYPE är en deklaration som talar om för webbläsaren att här kommer ett HTML5-dokument.

Vårt startläge för grundsstrukturen kommer se ut på följande sätt :

<!DOCTYPE html>
<html lang="sv">
<head>
      <meta charset="utf-8" />
      <title>Grundkod för HTML5</title>
</head>
<body>
      
</body>
</html>

<html> är vårt "root"-element. Det rekommenderas att lägga till attributet lang och talar om på vilket språk texten på sidan är skriven.
<head> elementet innehåller lite instruktioner som är bra för webbläsaren att veta. Även för sökmotorer är det viktigt att sidan har en relevant och bra titel.
<meta> som i det här fallet säger att vi använder teckenkodning "utf-8". Meta-taggen är en av några få som inte innesluter något och därför är starttagg och sluttagg i samma tagg. I det här fallet så har taggen attributet "charset" som sätts till värdet "utf-8".
<title> är den text som visas i fliken eller fönstertiteln.
<body> innehåller det som ska visas i dokumentfönstret.
 är en kommentar som webbläsaren hoppar över och som därmed inte syns i dokumentfönstret.
Sen avslutas i logisk ordning body-elementet och html-elementet.

Som vi ser så har de flesta element en start och sluttagg, som talar om att viss inställning börjar och senare avslutas.

HTML5 syntax

Här är några riktlinjer för enklare läsbarhet:

Använd små bokstäver för all kod (även om det okej i HTML att blanda stora och små, t ex tolkas <a href="#">xxx</a> lika som <A HRef="#">xxx</a> lika i HTML5.

Använd sluttagg fär alla taggar som omsluter något, <p>Lite text</p>.

Även om det inte är nödvändigt med citattecken runt attributvärden så använd det för tydligheten (<p class="specialare">).

Använd en slut "slash" för taggar som inte innesluter något, <hr />, <img src="x.jpg" alt="xx" />, osv. För ökad tydlighet. Det är en kvarleva för att vara bakåtkompatibel med XHTML, HTML har inga krav på detta.

Fler taggar

De nya taggarna är för markera och förtydliga vissa delar i en webbsida. Det går ju att skapa detta på andra sätt men försök använda dessa i så hög utsträckning som möjligt. Kolla alltid i aktuella webbläsare att de fungerar. Just nu så fungerar progress och meter i Opera och Chrome men inte alls i IE medan progress fungerar i Firefox.

mark
Fungerar som en överstrykningspenna.(Tidigare använde vi en specialklass och span-tagg.)

Nedan vill man kapsla in något som det refereras till från övriga sidan som skulle kunna plockas bort utan att sidans funktion blir förstörd. Det skulle t ex kunna vara foton, illustrationer, en bit kod och liknande saker.

progress, meter
Progress för aktuella läget i en föränderlig process (t ex aktuellt läge i en nedladdningsprocess) och meter för ett läge där vi vet min och max (eventuellt acceptabla gränsvärden, innanför ger grön färg medan utanför ger gul) för bra status (t ex aktuellt diskyutrymme)

time
Med attributet datetime (som måste vara en giltig sträng)

På en del taggar har man ändrat betydelsen en aning, som t ex <dl> som tidigare var "definition list" heter nu "description list".

<article>
<section>
<h2>figure, figurecaption</h2>
<p>
<figure>
<img src="webbutveckling2/bilder/cirkel-orange-special.png" alt="xxx" /><br />
<figurecaption>PNG-bild</figurecaption>
</figure>
</p>
</section>
<section>
<h2>progress</h2>
<p>Status:
<progress min="0" max="100" value="33">33%</progress>
</p>
</section>
<section>
<h2>meter</h2>
<p>Aktuellt diskutnyttjande:
<meter value="225" min="0" max="250" low="30" high="220" title="GB">225 GB</meter>
</p>
</section>
<section>
<h2>time</h2>
<p>Kommande julafton: <time datetime="2012-12-24">24 Dec 2012</time></p>
</section>
</article>

Se hur det ser ut i din aktuella webbläsare:

figure, figurecaption

progress

Status: 33%

meter

Aktuellt diskutnyttjande: 225 GB

time

Kommande julafton: 24 december 2015

Kolla gärna hur det ser ut i en andra webbläsare.

Ytterliggare nya taggar och möjligheter i HTML5

Vi kommer återkomma till dessa taggar och möjligheter i kommande delar.

Nya taggar för video, ljud, "geolocation", canvas, SVG och "drag and drop".

En lista på alla HTML5 taggar (hos w3schools)

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