Първи стъпки в HTML – атрибути
В предните уроци стана дума за това, че таговете се характеризират с атрибути. Трябва обаче да се знае кой таг с какви атрибути разполага.
Както различните електроуреди имат марка, модел, енергиен клас и други общи характеристики, така съществуват няколко атрибута, които са валидни за всички HTML тагове. От друга страна, за климатиците не можем да кажем, че притежават вместимост, за разлика от хладилниците. По същата логика и някои HTML тагове се характеризират с индивидуални атрибути.
Да започнем със списък на параметрите, които всеки таг може да има. Те се делят на три групи – основни, езикови и клавишни.
Основни атрибути
Основните включват id, class, style и title.
id
ID е атрибут, чиято стойност (ако е зададена) трябва да бъде уникална на дадената страница. Този атрибут се използва за да определим точно даден елемент. След това можем да му зададем стилове чрез CSS или програмна логика посредством JavaScript.
class
CLASS е атрибут, който отново можем да използваме, за задаване на стил през CSS. Бихме могли да го ползваме и в JavaScript. Класовете, за разлика от ID-тата, позволяват да се използват много пъти на една страница.
title
TITLE атрибутът се използва предимно за достъпност на елементите. Използва се от роботи или програми, които четат HTML кода. Единственото, което ще забележите на екрана е, че ако задържите мишката над елемент с title атрибут, то след една-две секунди ще се появи еднин tooltip, съдържащ текста на title атрибута.
style
STYLE е атрибут, който аз лично ви окуражавам да НЕ използвате. Сам по себе си този атрибут позволява да декларирате CSS стилове за даден елемент в HTML-а. Най-доброто, което обаче можем да направим в реален проект е, да отделяме структурата и информацията на страницата ни в HTML-а, а външният вид да е деклариран чрез CSS в отделен файл. Това позволява много по-лесно поддържане.
STYLE атрибутът може да се използва само в някакви малки демо страници, където лесно да се вижда всичкия код.
Езикови атрибути
Езиковите атрибути са dir и lang (в xHTML lang е xml:lang).
dir
DIR определя посоката на четене на текста – от ляво-надясно или от дясно-наляво.
Този атрибут е особен с това, че има само две валидни стойности – ltr (left-to-right – от ляво-надясно) и rtl (right-to-left – от дясно-наляво). Всяка друга стойност просто ще се игнорира от браузъра и ще направи кода ви невалиден.
lang
Другият езиков атрибут – lang – също има няколко (но повече) предопределени стойности. Той трябва да бъде зададен като кода на езика, който се съдържа в елемента. За български това е bg, за английски е en и т.н. Смисълът от този таг е подпомагане на търсачки, роботи и програми, които четат кода, биха могли да се използват за по-специални стилове, някои JS функционалности.
Най-общо казано е добре да зададете двата езикови атрибута още на <html> тага, с което те автоматично се унаследяват от всички вътрешни елементи.
Стойността на dir по подразбиране е посоката, в която четем ние, така това е почти излишно да се задава. LANG обаче е добър параметър, който показва, че страницата ни е предназначена за определен географски регион. Пък и на Google Chrome (примерно) ще му е по-лесно да определи страницата на какъв език е и да ни предложи да я преведе автоматично при нужда.
Клавишни атрибути
Отново са два – accesskey и tabindex. Тези атрибути се използват за достъпност.
tabindex
TABINDEX ни позволява да зададем реда по който елементите ще получават фокус, когато потребителите натискат клавиша tab на клавиатурата. По принцип не всички елементи могат да получават фокус. Даже, ако не сте правили промени фокус ще имат линковете (<a>) и елементите за формуляри (<input>, <select>, <button>). Ако обаче зададем tabindex на друг елемент, той автоматично получава възможност за фокусиране.
Ако зададем стойност 0 за tabindex, тогава елементът получава стойност по подразбиране, която е просто поредния номер на елемента, който може да има фокус. TABINDEX=0 се използва, за да дадем възможност за фокус на определен елемент. По този въпрос съм говорил и в първа и втора част на урока си за достъпен слайдер.
accesskey
ACCESSKEY дава възможност за фокусиране на елемента с клавишна комбинация с ALT. Този атрибут обаче е частично безсмислен, тъй като:
- потребителите няма как да знаят, че изобщо могат да фокусират този елемент, освен ако не им кажем
- при някои браузъри това презаписва функционалността на самия браузър, само за да работи сайта ни
при други браузъри пък
Alt+ACCESSKEYне работи, защото браузъра има друга функционалност при някоя клавишна комбинация
Така излиза, че използването на accesskey не винаги е най-уместното нещо, което можем да правим.
За урока съм използвал информация от w3schools.com. Отново там можете да видите и списък от всички HTML тагове, както и за всеки един от тях можете да видите какви атрибути поддържа (http://www.w3schools.com/tags/tag_blockquote.asp).
ааа DIR атрибута няма да ти кажа колко го обичам като правя арабски сайтове 🙂 чак ми се приплаква под IE 🙂
Както съм споменал в статията – моят опит там е оскъден. Все пак за кое IE става въпрос? На 6 не съм тествал, ама на 7 и нагоре нямах проблеми (не че се наложи да правя нещо особено де).
флоат,релативната позиция без ширина просто нямат оправяне и доста бъгове още съм срещал за който в момента не се сещам. 🙂
Здравейте не ми е ясно как да направя текста да е на средата,с кой атрибут?
Здравейте,
Форматиране на текст се препоръчва да не се прави с HTML, а със CSS. Смятам, че би ви било полезно освен поредицата Първи стъпки в HTML да прегледате и Първи стъпки в CSS. Последният урок от поредицата: Стилови декларации в CSS — част 2 разглежда някои стилове за форматиране на шрифт и текст. Конкретно за подравняване (което включва и центриране) трябва да се ползва
text-align, което не е разгледано в урока, но има други концепции, които също за полезни.