Част от новите свойства на HTML 5
15-08-2010
HTML 5 функции, които можем да ползваме в сайтовете си без притеснение за съвместимостта между браузърите

1. По-кратък DOCTYPE. Досега беше трудно да се напише DOCTYPE ръчно и всеки го копираше от файл с доктайпове, от реализирани проекти или откъдето му е най-удобно. С HTML 5 DOCTYPE е съкратен до неузнаваемост.

<!DOCTYPE html>


2. По-кратък charset. Вместо използвания досега дълъг meta таг вече може да се използва това:

<meta charset="utf-8" />

<meta charset="windows-1251" />


или какъвто друг charset искате

3. Без използване на type атрибута за стилове и javascript. Докато преди беше задължително да се пише type="text/css" или type="text/javascript", вече не е неубходимо.

<style>
някакъв css
</style>
<script>
някакъв javascript
</script>


Това важи и за външните файлове

4. Без използване на кавички за атрибутите (въпреки че това изглежда примамливо, аз не бих го използвал, защото при повече от една дума в атрибута пак се налага да се използва, а и не е пригледно без кавичките).


<form action=http://example.com/form_validation.php method=post>
<input type=text name=username value="Някакво съдържание на полето" />
<input type=submit value=Register />
</form>


5. article, aside, dialog, figure, footer, header, hgroup, nav, section. Това са един вид заместители на div. За да се използват под IE трябва да се направят няколко неща.
Първото е да се добави този код в head
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

и този стил в css файла
article, aside, dialog, figure, footer, header, hgroup, nav, section { display: block; }

Сега вече може да ги използваме без притеснение, че в някой браузър няма да се визуализират точно както трябва.

Ето един пример. Вместо да използваме:

<div id="header"></div>
<div id="nav"></div>
<div id="main"></div>
<div id="footer"></div>


може да използваме:

<header></header>
<nav></nav>
<section></section>
<footer></footer>


И ето една примерна страница:

<!DOCTYPE html>
<html>
<head>
<title>Някакво заглавие</title>
<meta charset="utf-8" />
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<header>
<hgroup>
<h1>Голямо заглавие</h1>
<h2>малко заглавие</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</nav>
<section id="main">
<article>
<h3>Заглавие на новина 1</h3>
<p>Lorem Ipsum е елементарен примерен текст, използван в печатарската и типографската индустрия. Lorem Ipsum е индустриален
стандарт от около 1500 година, когато неизвестен печатар взема няколко печатарски букви и ги разбърква, за да напечата с тях
книга с примерни шрифтове. Този начин не само е оцелял повече от 5 века, но е навлязъл и в публикуването на електронни издания
като е запазен почти без промяна. Популяризиран е през 60те години на 20ти век със издаването на Letraset листи, съдържащи Lorem
Ipsum пасажи, популярен е и в наши дни във софтуер за печатни издания като Aldus PageMaker, който включва различни версии на Lorem Ipsum.
</p>
</article>
<article>
<h3>Заглавие на новина 2</h3>
<p>Lorem Ipsum е елементарен примерен текст, използван в печатарската и типографската индустрия. Lorem Ipsum е индустриален
стандарт от около 1500 година, когато неизвестен печатар взема няколко печатарски букви и ги разбърква, за да напечата с тях
книга с примерни шрифтове. Този начин не само е оцелял повече от 5 века, но е навлязъл и в публикуването на електронни издания
като е запазен почти без промяна. Популяризиран е през 60те години на 20ти век със издаването на Letraset листи, съдържащи Lorem
Ipsum пасажи, популярен е и в наши дни във софтуер за печатни издания като Aldus PageMaker, който включва различни версии на Lorem Ipsum.
</p>
</article>
<article>
<h3>Заглавие на новина 3</h3>
<p>Lorem Ipsum е елементарен примерен текст, използван в печатарската и типографската индустрия. Lorem Ipsum е индустриален
стандарт от около 1500 година, когато неизвестен печатар взема няколко печатарски букви и ги разбърква, за да напечата с тях
книга с примерни шрифтове. Този начин не само е оцелял повече от 5 века, но е навлязъл и в публикуването на електронни издания
като е запазен почти без промяна. Популяризиран е през 60те години на 20ти век със издаването на Letraset листи, съдържащи Lorem
Ipsum пасажи, популярен е и в наши дни във софтуер за печатни издания като Aldus PageMaker, който включва различни версии на Lorem Ipsum.
</p>
</article>
</section>
<footer>Футър на страницата</footer>
</body>
</html>


style.css

html, body, h1, h2, h3 { margin: 0; padding: 0; }

article, aside, dialog, figure, footer, header, hgroup, nav, section { display: block; }

footer, header, nav, #main { margin: 0 auto; width: 900px; }

footer, header { background: #cccccc; border: 1px solid #858585; margin: 0 auto; width: 898px; }

nav { overflow: hidden; }

nav ul { list-style-type: none; margin: 0; padding: 0;}

nav li { float: left; text-align: center; }

nav li a { background: #dddddd; border: 1px solid #858585; border-width: 0 1px 1px; color: #555555; display: block; padding: 1em 0; text-decoration: none; width: 178px; }

nav li a:hover { background: #efefef; border-color: #dddddd }


резултат:



6. Използване на figure и figcaption. Много пригледно поставяне на заглавия около снимките:

<figure>
<img src="image.jpg" width="50px" height="50px" alt="Some image" />
<figcaption>Някакво заглавие на снимката</figcaption>
</figure>







/ Трябва да сте регистриран за да напишете коментар /
От: king6666
20:18 09-12-2010
Браво урока е чудесен !
От: botevis2
19:32 02-01-2013
Много полезно
1