darganov.com

Много от новобранците в уеб стандартите мислят, че минавайки успешно валидацията на кода е достатъчно, за да наричат продукта си съвместим с уеб стандартите. Тези, които се занимават по-сериозно с уеб стандарти, знаят че това не е така. Използването на заглавия е добър пример. Валидаторът няма да покаже предупреждения или грешки за заглавията, но не можете да кажете, че страницата Ви е валидна, ако структурата на заглавията е грешна.

Значение на заглавията

Някои твърдят, че най-голямата роля на заглавията е тяхното SEO значение. Няма да задълбавам в това твърдение. Може и да са прави, но според мен (тъй като не съм SEO експерт, а ентусиаст на тема уеб стандарти) тяхното значение е в семантиката.

Какво всъщност представляват заглавията? Заглавията са елементи, които описват съдържанието, което следва и определят структурата на документа. Подобно на големите заглавия и подзаглавия в печатните издания, html заглавията трябва накратко да описват страницата или раздела, за който се отнасят, за да бъде ясно на читателя какво да очаква, ако продължи да чете.

За целта се използват заглавни етикети от <h1> до <h6>. Номерът в етикета определя „тежестта“ му. <h1> е „най-тежкият“, а <h6> е „най-лекият“. Йерархията е правилото, което трябва да следваме, когато структурираме нашия документ.

Структура на документа

И така, как да структурираме правилно един документ? Нека да сравним структурата на заглавията в документ с добре форматиран XML файл.

<h1>
 	<h2>
 	 	<h3></h3>
 	 	<h3>
 		 	<h4></h4>
 	 	</h3>
 	</h2>
 	<h2>
 	 	<h3></h3>
 	 	<h3></h3>
 	</h2>
 	<h2>
 	 	<h3></h3>
 	</h2>
</h1>

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

Ето визуално как изглежда тази структура:

H1, H2, H3 и H4 представляват заглавни етикети, а кутиите представят съдържание като най-тъмната кутия има най-голяма „тежест“ на значение спрямо по-светлите кутии.

Първото заглавие <h1> очертава голяма част, обикновено целия документ. Според мен трябва да бъде използвано еднократно на страница като най-важно заглавие описващо съдържанието на цялата страница. Като изключение, ако имате отделни големи части на една страница, можете да използвате две или повече h1 заглавия.

Изборът кой заглавен етикет да се използва не би трябвало да е труден. Просто използвайте следващия наличен. Ако съдържанието, което описвате може да се третира като „наследник“ на предишното съдържание, тогава използвайте заглавие, което е една степен по-ниско в йерархията. Ако става въпрос за съдържание със същата важност, тогава използвайте същия заглавен етикет. По този начин се създава определена логическа плавност, която не трябва да бъде разваляна, иначе документа ще загуби част от смисъла си.

Какво да НЕ правим със заглавните етикети

Както една част от Вас знаят, а други се досещат, мощта на CSS е доста голяма. Няма нужда от компромис, когато става дума за заглавия. Едно от нещата, които виждам често е използването на заглавни етикети стилизирани според настройките по подразбиране на браузъра. Примерно използване на h4 вместо h2, заради нуждата от по-малък размер на заглавието, тъй като размерът на заглавния таг h4 по подразбиране е по-малък от този на h2. Правилният подход е да се използва h2 и чрез CSS да се намали неговия размер. Просто, нали?

Още повече, не цялото съдържание принадлежи към заглавието. Примерно, ако решите да сложите заглавията на публикациите във вашия дневник в етикет h2 или h3, не се притеснявайте какви заглавни етикети да използвате за дата и името на автора. Недейте използва заглавни етикети за тази цел. Дори във вестниците няма да видите голям и удебелен текст „Написано от Иван, 22 Септември“.

Най-голямата грешка, която виждам често е отделянето на заглавието от прилежащото му съдържание заради компромис в дизайна. Примерно вмъкването на плаваща навигация между заглавието и абзаците. Не трябва да правите компромис в тази област. Нека структурата на документа бъде приоритет за Вас и не я нарушавайте заради сложния дизайн. В повечето (бих казал във всички) случаи CSS може да Ви помогне. Постарайте се и скоро всичко ще бъде наред.

Източник: How to use headings in HTML, Автор: Alen Grakalic

Тази статия е публикувана на 1 февруари 2008г. в 0:01 и е записана в Статии. Можете да следите коментарите чрез RSS 2.0 хранилка. Можете и да оставите коментар или trackback от вашия сайт.