Front-end fejlesztés

Böngészőfüggetlen HTML5 sablon

A magyar weben körbe-körbe tekintve sajnos még mindig találkozunk nem, hogy valid XHTML oldalakkal, hanem táblázatos megoldásokkal is. Kevés az olyan honlapkészítéssel foglalkozó vállalkozás, akik megfelelő áron valid HTML5 weboldalakat készítenek. Pedig manapság már SEO szempontból is egy nagyon fontos dolog. Éppen ezért mi is már csak HTML5 weboldalakat készítünk egy ideje. Egy teljesen lecsupaszított HTML5 sablonnal indulnak nálunk a front-end fejlesztések az Efrud laborban. Az alapunk az alábbi kis sablon:


<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="utf-8" />
<title>HTML5 Template</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="style.css" type="text/css" />
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>

</body>
</html>

Nem kell aggódnia amiatt, hogy problémánk lesz IE-vel sem, mert benne van a javascript, amivel meghatározzuk az elemeket. Így a böngésző képes lesz feldolgozni. Ezzel azonban még nem végeztünk. A CSS reset mellé még az alábbi kódot használjuk, hogy blokk szintű elemként jelöljük meg a HTML5 elemeinket.


article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
display:block;
}

És már indulhat is a HTML5 weboldalak gyártása. Minden elemet ugyan nem fogunk ismertetni a blogban, mert akkor csak a html5doctor.com-ot ismételnénk, de fogunk sok olyan cikket írni, melyek segítségével megérhetitek, mikor használjuk például a section vagy aside elemet, vagy éppen egy adott cikken belül, hogyan kell alkalmazunk a bekezdéseket.