Fridaycode.net

С пускането си Firefox 4 и Internet Explorer 9 определено раздвижиха пазара и вече няма оправдание да не се използват активно HTML5 и CSS3, като, разбира се не забравяме съвсем и потребителите с по-стари браузъри. За това реших в този урок да поговорим предимно за section-елементите (някой да се сеща за по-добро име?), които ни предоставя новият стандарт.

Преди време бяхме пуснали статия за основите на HTML5, която няма да е зле да прочетете преди тази. Някои от нещата ще ги повторя и тук, но все пак е хубаво да се запознаете малко повече.

Сигурен съм, че в даден етап на кодене сте се чудили какъв елемент да използвате, за да опишете дадено нещо. Реално до момента структурата зависеше почти изцяло от div-овете, но сега нещата малко се попромениха, защото HTML5 въведе доста елементи, с които кодът ни изглежда по-чист, по-подреден, по-правилен, по-логичен. Но дори сега има хора, на които им е трудно да преценят кое е правилно и кое не, защото това би повлияло на SEO оптимизацията на сайта. Днес ще ви запозная с една част от тези елементи, като ще се стремя максимално опростено да обясня всеки един от тях и разбира се да дам конкретни примери. Искам да започна с двата елемента, които предизвикват най-много въпроси у начинаещите.

<section> и <article>

Много хора се вайкат кое е "по-главно" от двете, кое в кое стои и т.н., но всъщност двете имат различно предназначение. Елементът <article> презентира част от кода, която има някакво собствено значение. Идеята е съдържанието в него да има смисъл дори когато съществува самостоятелно. Всъщност по този начин от W3 описват горе-долу 99% от съдържанието в сайта, но вие не трябва да го приемате толкова буквално, а по-скоро да разчитате на логиката и името, което носи елементът. Къде се ползва? Ако имате форум, блог и пр., може да обградите постовете с <article>. Същото важи за страници, коментари и статии естествено, независимо къде са. Обикновено, когато имаме <article>, в него слагаме <header> или <footer> (за които ще стане дума по-надолу), но не е задължително. Много е важно да знаете, че в <article> може да имаме <section>. Представете си, че имате статия за кино и в нея имате различни секции (<section>), презентиращи различните жанрове. Съответно в тези секции може отново да имате <article>. Ето един комбиниран пример, в който имаме <article> с <header>:

<article>
	<header>
		<h1>Заглавие</h1>
		<p>Някакъв случаен и безмислен текст.</p>
	</header>
	<section>
		<article>Коментар номер 1!</article>
		<article>Коментар номер 2!</article>
	</section>
</article>

Както разбрахте по-горе, article може да стои в section и обратното. Но за какво точно се ползва section? Всъщност на този въпрос мога да дам доста абстрактен отговор, тъй като времето ще покаже кога е най-добре да се ползва. В доста материали за него, всички общо взето казват едно и също - <section> е най-основният от всички секционни елементи (article, nav, header и т.н.) и трябва да се ползва само когато няма заместител. Това ще рече, че обикновено се изключват да кажем article и div и тогава опираме до section. Като се замислите секция може да бъде почти всяка една част от сайта ви. Наистина вариантите са много и само опитът ще помогне. Важно е да се знаят две неща. Първо, че в повечето случаи е препоръчително да имате хединг в секцията и то като първи елемент. Второ - не използвайте елемента за чиста пробра стилизация, защото за това си има div.

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

<footer>
	<section>
		<h4>Тагове</h4>
		<p><a href="#">HTML5</a>, <a href="#">CSS3</a></p>
	</section>
	<section>
		<h4>Линкове</h4>
		<ul>
			<li><a href="#">Приятели</a></li>
			<li><a href="#">Гаджета</a></li>
		</ul>
	</section>
</footer>

Като цяло това са едни от най-трудните за разбиране елементи, така че е нормално да не схванете всичко от първия път.

<nav>

Елементът се използва за групиране на линкове с голям приоритет. Тук вероятно много хора ще си зададат въпроса кои линкове могат да бъдат определени с голям приоритет. Естествено за всеки сайт е строго индивидуално, но това могат да бъдат главното меню, категориите, пейджингът и др. За момента се ползва предимно за главните навигации по сайта.

<nav>
	<ul>
		<li><a href="#">Начало</a></li>
		<li><a href="#">Продукти</a></li>
		<li><a href="#">Контакти</a></li>
	</ul>
</nav>

<header>

Това е един от най-използваните нови елементи в HTML5, но много хора не се възползват изцяло от предназначението му. В момента той замества добрия стар div, който ползвахме за дефиниране на хедър.
Готиното е, че можем да създадем колко си пожелаем <header> елементи, стига те да са разпределени в отделни секции. Отдолу ще ви дам един пример какво имам предвид и същевременно ще ви покажа какви елементи може да съдържа <header>:

<article>
	<header>
		<hgroup>
	   		<h1>Основно заглавие</h1>
			<h2>Подзаглавие</h2>
		</hgroup>
		<nav>
			<ul>
				<li><a href="#">Начало</a></li>
				<li><a href="#">Категории</a></li>
			</ul>
		</nav>
	</header>
        <p>Някакъв случаен и безмислен текст.</p>
</article>

С една дума - можем да ползваме <header>, както за хедър елемент на сайта, така и за хедър в <section> или <article>. Статията може да има хедър, който съдържа заглавие, дата и автор например. Това наистина е огромен плюс и ще го разберете почти веднага, след като започнете да го използвате.

<footer>

Елементът работи на принципа на <header>, но съдържа в себе си нещата, които обикновено бихме сложили във футър. И тук важи правилото, че може да имаме колкото си полжелаем футъри, стига те да се отнасят за конкретен <section>, <article> или като цяло за сайта. Примерът, който ще дам е продължение на този от <header>, но с лека добавка:

<article>
	<header>
		<hgroup>
	   		<h1>Основно заглавие</h1>
			<h2>Подзаглавие</h2>
		</hgroup>
		<nav>
			<ul>
				<li><a href="#">Начало</a></li>
				<li><a href="#">Категории</a></li>
			</ul>
		</nav>
	</header>
    	<p>Някакъв случаен и безмислен текст.</p>
	<footer>
		<p>Тагове <a href="#">HTML5</a>, <a href="#">CSS3</a></p>
	</footer>
</article>

<hgroup>

Това е един доста интересен елемент, който според мен е изключително полезен от всякаква гледна точка.
Неговото основно предназначение е да групира заглавията (h1-h6), но по-интересната му функция е, че той изолира всички заглавия в него, освен това с най-висок приоритет. Какво щe рече това? Ако имате следния код:

<hgroup>
	<h1>Основно заглавие</h1>
	<h2>Подзаглавие</h2>
</hgroup>

то hgroup ще "ви върне" само h1, a h2 ще важи само и единствено в рамките на дадения hgroup, в случая като подзаглавие. Семантика, семантика... По този начин не е нужно да се чудим какви елементи да слагаме за подзаглавия, за да не си "горим" h‑овете.
Разбира се, добре е да позлвате hgroup само когато наистина има нужда, т.е. когато има повече от едно заглавие.

<figure> & <figcaption>

Вероятно си мислите, че този елемент служи за изобразяване на фигури, графики и т.н.? Ами почти сте прави. Всъщност елментът figure ще съдържа в себе си не само фигури, но и диаграми, схеми, снимки, илюстрации, код и др. Това, разбира се не означава, че <img> си отива. Просто отсега нататък ако имаме нужда от елемент, който да държи въпросното img, няма да пишем div (с изключения, разбира се), а figure. А какво представлява figcaption, предполагам вече сте се досетили - caption за въпросния figure. Много е важно да запомните следните три неща. Първо, figcaption се намира във figure елемента. Второ, figure елементът може да съдържа само един figcaption. И трето - figcaption може да бъде преди или след съдържанието на figure. Веднага давам примери:

<figure>
	<img src="/stuff.jpg" alt="">
	<figcaption>Кепшън за картинката отгоре!</figcaption>
</figure>

<figure>
	<figcaption>Кепшън за картинката отдолу!</figcaption>
	<img src="/stuff.jpg" alt="">
</figure>

<aside>

Един доста полезен елемент, поредният, който премахва нуждата на div в доста ситуации. Използва се когато искаме да представим вторично съдържание или иначе казано - съдържание, което не е на главен фокус, но все пак има връзка с основното. Така например вашият sidebar може спокойно да бъде написан с <aside>. Същото важи за банер, който може да бъде сложен в този елемент, разни екстри тип списък с приятели, twitter фийд, допълнителни навигации и т.н. и т.н.
Има една особеност, която не трябва да забравяте - когато <aside> бъде сложен в <article>, то тогава съдържанието му трябва да е свързано с въпросната статия. Разбира се, това важи само ако искате сайтът ви да бъде изряден от СЕО гледна точка.

<aside>
	<h2>Blogroll</h2>
    <ul>
      <li><a href="#">Приятел 1</a></li>
      <li><a href="#">Майката на Приятел 1</a></li>
      <li><a href="#">Неприятел 1</a></li>
    </ul>
</aside>

Заключение

Не исках статията да става прекалено дълга и за това подбрах само основните елементи, които трябва да започнете да ползвате. Сигурен съм, че някои от тях сте разбрали, а други не, но не се притеснявайте, защото това е напълно нормално. Нещата са нови, W3 драфтовете постоянно се обновяват и правилата се променят. От нас се иска да практикуваме и експериментираме, за да подобрим работата си.
Между другото, ако чувствате, че има какво да кажете по темата, не се притеснявайте и използвайте коментарите. Сигурен съм, че някои от SEO спецовете, които ни следят, има какво да кажат и дори поправят. Освен това знаете, че вече публикуваме и потребителски статии, нали? Ако имате нещо на ум, пишете ни предварително!
Надявам се статията да ви е полезна и успех!