HTML5 Семантични елементи

Семантичните елементи ясно описват своето съдържание за разработчика и за браузера.
Например елементът <table> означава ,че на страницата ще се изобрази таблица. Това е семантичен елемент.
Пример за несемантичен елемент е елемента <div>, който не дава никаква представа за това ,което съдържа.

Нови семантични елементи в HTML5.

new_elements
и още:
<figure> , <figcaption> , <mark> , <time>.

Таг Описание
<section > Тематично групирано съдържание с заглавие.
<article > Има независимо, автономно съдържание. Може да се използва за нов блог пост, форум пост, коментар,когато се разказва нова история.
<nav > Съдържа навигационни линкове. Този таг е предназначен за големи блокове от навигационни връзки.
<aside > Определя част от съдържанието да бъде настрана в място подобно на лента. Трябва да има връзка с околното съдържание.
<header > Заглавна част на документ или секция. Съдържа уводна информация. В един документ може да има няколко елемента <header>
<footer > Оформя край на документ или раздел. В един документ може да има няколко елемента <footer>
<figure > Този таг е предназначен за илюстрации, схеми, снимки и други подобни. Позицията на елемента е независима от основния поток и ако елементът се премести, това няма да окаже влияние на останалата част на документа.
<figcaption > Заглавие на картинката. Може да се намира над нея или под нея. Не е блоков елемент.
<mark > Оцветява текст различно , с цел да наблегне върху съдържанието му..
<time > Определя време и ден по грегорианския календар.

Поддръжка от браузърите

Internet ExplorerFirefoxChromeOperaSafari

Internet Explorer 9+, Firefox, Chrome, Safari и Opera поддържат новите семантични елементи. За по-старите браузъри има решение, което е описано по-долу на страницата.

Новите елементи са блок-елементи (изключваме само figcaption). За да се показват правилно във всички браузъри (и по-старите) трябва да се добави към style:

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

Проблем при по-старите версии на IE

IE8 и по-старите версии не могат да стилизират непознати елементи т.е. нови HTML елементи. За да се избегне това трябва да се свали и постави в директорията на сайта HTML5 Shiv файл, с помощта на който елементите се стилизират.
Може да се изтегли от този адрес:


http://code.google.com/p/html5shiv/

В <head> на документа, който използва новите елементи трябва да добавим:

< ! – – [if lt IE9] >
< script src=”html5shiv.js” >< /script >
< ! [endif]  – – >

Добре е да започнете да използвате новите семантични елементи на HTML5, защото те се налагат като стандарт в Интернет пространството.

Advertisements
This entry was posted in HTML5. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s