Меню

Първи стъпки в правене на сайтове

Влез Излез

Първи стъпки в HTML – атрибути

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

Да започнем със списък на параметрите, които всеки таг може да има. Те се делят на три групи – основни, езикови и клавишни. Основните включват id, class, style и title.

ID е атрибут, чиято стойност (ако е зададена – никой не ви задължава да задавате ID на всеки елемент) трябва да бъде уникална на дадената страница. Този атрибут се използва за да определим точно даден елемент, на който в поселедствие чрез CSS бихме могли да зададем определен стил, или пък който да селектираме посредством JavaScript.

CLASS е атрибут, който отново можем да използваме, за да определим елементи, на които лесно да добавим стил през CSS, или които бихме могли лесно да селектираме с JS в HTML5 (или пък в по-стари версии на HTML, но ако използваме някаква JS библиотека, като например jQuery, която да свърши трудната работа вместо нас). Класовете, за разлика от ID-тата, позволяват да се използват много пъти на една страница.

Title атрибута се използва предимно за достъпност на елементите (използва се от роботи или програми, които четат HTML кода), като единственото, което ще забалежите на екрана е, че ако задържите мишката над елемент с title атрибут, то след една-две секунди ще се появи еднин tooltip, съдържащ текста на title атрибута.

Style е атрибут, който аз лично ви окуражавам да НЕ използвате. Сам по себе си този атрибут позволява да декларирате CSS стилове за даден елемент в HTML-а. Най-доброто, което обаче можем да направим в реален проект е, да отделяме структурата и информацияна на страницата ни в HTML-а, а външният вид да е деклариран чрез CSS в отделен файл. Това позволява много по-лесно поддържане.

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

Езиковите атрибути са dir и lang (в xHTML lang е xml:lang).

DIR определя посоката на четене на текста – от ляво-надясно или от дясно-наляво (примерно в арабския език).

Пиша HTML странички от 6 години и едва преди месец ми се наложи да направя една страница, в която имаше и арабски, че ми се наложи да използвам този атрибут. Честно казано до тогава дори не бях убеден дали е от тези атрибути, които могат да се задават на всички тагове или е само за html елемента.

Този атрибут е особен с това, че има само две валидни стойности – ltr (left-to-right – от ляво-надясно) и rtl (right-to-left – от дясно-наляво). Всяка друга стойност просто ще се игнорира от браузъра и ще направи кода ви невалиден.

Другият езиков атрибут – lang – също има няколко (но повече) предопределени стойности. Той трябва да бъде зададен като кода на езика, който се съдържа в елемента. За български това е bg, за английски е en и т.н. Смисълът от този таг е подпомагане на търсачки, роботи и програми, които четат кода, биха могли да се използват за по-специални стилове, някои JS функционалности.

Най-общо казано е добре да зададете двата езикови атрибута още на <html> тага, с което те автоматично се унаследяват от всички вътрешни елементи.

Стойността на dir по подразбиране е посоката, в която четем ние, така това е почти излишно да се задава, но lang е добър параметър, който показва, че страницата ни е предназначена за определен географски регион, пък и на Google Chrome (примерно) ще му е по-лесно да определи страницата на какъв език е и ако е на различен от основния, на който сме задали да работи браузъра, да ни предложи да я преведе автоматично (мисля, че останалите браузъри за момента нямат вградена подобна функционалност, затова давам пример с Chrome, а не че само искам да му направя реклама, но все пак си е най-добрият браузър 😛 ).

Остават клавишните атрибути, които отново са два – accesskey и tabindex. Тези атрибути се използват за достъпност.

Tabindex ни позволява да зададем реда по който елементите ще получават фокус, когато потребителите натискат клавиша tab на клавиатурата. По принцип не всички елементи могат да получават фокус. Даже, ако не сте правили промени фокус ще имат линковете (<a>) и елементите за формуляри (<input>, <select>, <button>, за които не сме говорили, но които няма и да ви трябват, ако не знаете server-side програмиране, до което може и да стигнем един слънчев ден). Ако обаче зададем tabindex на друг елемент, той автоматично получава възможност за фокусиране.

Ако зададем стойност 0 за tabindex, тогава елементът получава стойност по подразбиране, която е просто поредния номер на елемента, който може да има фокус. Tabindex=0 се използва, за да дадем възможност за фокус на определен елемент, без да разбъркваме реда на останалите елементи, които имат подобна възможност по подразбиране. По този въпрос съм говорил и в първа и втора част на урока си за достъпен слайдер.

Accesskey се използва за да даде възможност на потребителите да фокусират определен елемент натискайки Alt+ клавиша, чиято стойност е зададена с accesskey атрибута. Този атрибут обаче е частично безсмислен, тъй като:

  1. потребителите няма как да знаят, че изобщо могат да фокусират този елемент, освен ако не им кажем

  2. при някои браузъри това презаписва функционалността на самия браузър, само за да работи сайта ни

  3. при други браузъри пък Alt+ACCESSKEY не работи, защото браузъра има друга функционалност при някоя клавишна комбинация И така излиза, че използването на accesskey не винаги е най-уместното нещо, което можем да правим.

За урока съм използвал информация от w3schools.com. Отново там можете да видите и списък от всички HTML тагове, както и за всеки един от тях можете да видите какви атрибути поддържа ( http://www.w3schools.com/tags/tag_blockquote.asp ).

  • Виктор Василев каза:

    ааа DIR атрибута няма да ти кажа колко го обичам като правя арабски сайтове 🙂 чак ми се приплаква под IE 🙂

    • magadanski_uchen каза:

      Както съм споменал в статията – моят опит там е оскъден. Все пак за кое IE става въпрос? На 6 не съм тествал, ама на 7 и нагоре нямах проблеми (не че се наложи да правя нещо особено де).

      • Виктор Василев каза:

        флоат,релативната позиция без ширина просто нямат оправяне и доста бъгове още съм срещал за който в момента не се сещам. 🙂

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax