Introduktion til HTML5

HTML5 opsætning
<!doctype html>
<head>
<meta charset="UTF-8">
<title> </title>
</head>
<body>
	 
</body>
</html>
meta charset UTF-8
Der kan være situationer, hvor meta-tag'et 'UTF-8' ikke vil gengive danske vokaler ved lokal browser-test.

Løs problemet ved at åbne siden med notepad, og gemme som 'UTF-8' i feltet til venstre for "gem". Husk at filen IKKE skal gemnmes som '.txt' !
HTML5 opsætning - udvidet
<!doctype html>
<head>
<meta charset="UTF-8" /> 
<meta name="robots" content="noindex,nofollow" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<title> </title>
<meta name="description" content=" ">
<meta name="viewport" content="width=device-width, initial-scale=1">  
	 
<!--[if lt IE 10]>
 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
	 
<link href="css/reset.css" rel="stylesheet">
	 
<style>
/*html {
	font-size: 62.5%;
}*/
</style>
</head>
<body>
<!--<?php
	include("menu.php");
?>-->
	 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="scripts/#.js"></script>
<script> 
$(document).ready(function(){							   
	 
$('h2, h3').prev().css( 'margin-bottom', '22px' ); // AFSTAND PÅ SIDSTE ELEMENT FØR HEADING
$(' main_content ').find('p:last').css('margin-bottom', '22px'); // AFSTAND EFTER SIDENS SIDSTE P
	 
}); // END OF DOC READY
</script>
</body>
</html>
Meta-tags
  • Her er de mest brugte meta-tags medtaget - listen kan udvides eller indskrænkes efter behov

Hvad er HTML5

Hyper Text Markup Languahe (HTML) er det mest benyttede sprog til at lave hjemmesider med. HTML5 er den seneste version af sproget, og det er vigtigt at huske, at HTML5 i skrivende stund stadig er under udvikling, og at der derfor løbende sker ændringer i sproget.

Bruger jeg HTML5, er det derfor nødvendigt at holde sig opdateret i forhold til udviklingen. Alle retningslinier og ændringer i sproget HTML kommer fra organisationen W3C (World Wide Web Consortium), men også WHATWG bidrager til udviklingen.

Herudover findes der mange hjemmesider, hvis primære formål er at informere om udviklingen indenfor HTML5 - et godt eksempel er HTML5doctor.

Hvorfor bruge HTML5

Nyt for HTML5 i forhold til tidligere versioner af HTML, er forsøget på at minimere koden så meget som muligt - dette gør koden mere overskuelig og lettere at huske, og på mobile enheder kan der spares lidt tid, når et stort website skal loades i browseren.

HTML5 i samarbejde med CSS3 og Javascript åbner op for nye måder at fremstille grafik og animation som loades og eksekveres i browseren langt hurtigere end tidligere. Adobe's Flash har været det foretrukne værktøj til fremstilling af animation, men implementeringen af Flash på hjemmesider er både langsom og kræver en installation af Adobe's Flashplayer, hvilket har været medvirkende til at Apple på nogle af deres enheder helt har fravalgt brugen af Flash.

Samtidig indføres der med HTML5 en række nye strukturelle elementer - ved hjælp af et HTML5-tag er det nu muligt at fortælle en søgemaskine hvilket indhold og betydning de forskellige dele på den enkelte side i mit website har. Men det kræver naturlligvis at brugen af HTML5 er korrekt.

Anvendes de strukturelle elementer korrekt, bør det have positiv indvirkning på søgemaskinerne indexering af indholdet på en side. Læs mere om de strukturelle HTML5-tags

SEO og HTML5

Med hensyn til SEO hersker der nogen uklarhed om, hvilken rolle og vægt de enkelte elementer har for søgemaskinerne – en udmærket artikel her på websitet sixrevisions beskriver emnet.

Desuden her en test fra Cbutterworth, som viser forholdet i Page Rank mellem <h1> og <p> henholdsvis med og uden inline styling.

HTML5 browsersupport

Som tommelfingerregel kan man sige, at ældre browserversioner ikke understøtter brugen af HTML5 - dette gælder både browsere på stationære og mobile enheder - se en oversigt over hvilke browsere der understøtter de enkelte HTML5-elementer på caniuse.com.

Internet Explorer

Især i forhold til Internet Explorer (IE) er dette et problem, da mange internetbrugere stadig benytter ældre versioner af IE som browser. Først fra og med IE9 supporteres dele af HTML5, så bruger jeg HTML5 i hjemmesidens opsætning, kan det være nødvendigt at tage hensyn til for eksempel IE8 ved at indsætte en "conditional comment" med et link til et eksternt javascript som support for brugere af IE8 og nedefter:

<!--[if lt IE 10]> 
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Indsat som en conditional comment ligger et link til javascriptet 'html5.js' som "oversætter" HTML5-tags, så de ældre versioner af IE kan forstå dem.

Selvom andelen af brugere af for eksempel IE8 stadig bliver mindre, er der i skrivende stund stadig så mange brugere, at det er nødvendigt at bruge 'html5.js', når jeg opsætter hjemmesider ved hjælp af HTML5. Se her en opdateret oversigt over hvilke browsere der bruges mest og mindst i Danmark.