Забравили сте някой от таговете в html? Искате да намерите точния таг, който да отговаря на това което искате да постигнете? Тук е мястото, където можете да намерите това, което търсите, заедно със допълнителни съвети, SEO съвети, както и списък със поддържаните атрибути за всеки елемент.
NOTE: Речникът се ограничава от А до F за момента, но статията ще бъде допълвана периодично
<!–…–>
Огражда коментар. Често може да се види и използва при зареждане на допълнителни файлове само за IE.
<!DOCTYPE >
Дефинира doctype на документа. Той служи за посочване на използваната html версия. При html5 дефиницията е просто <!doctype html> . Не е case – sensitive (т.е. <!DocTyPe html> също е валиден синтаксис)
<а>
Дефинира хиперлинк. Той може да бъде както към други страници, към място на текущата страница или към определени места на други страници.
Атрибути:
href – посочва мястото към което води линка. При необходимост за връзка към текущата страница се използва #idOfTheElement
target – посочва къде да бъде отворен линка. Възможности – “_blank”, “_parent” , “ _self”, “ _top”
rel – Посочва връзката между текущия документ и свързания.
SEO tips:
Използвайте title атрибута, за описание на линка. Чрез атрибута rel=”nofollow” можете да не отдавате ранг към свързания сайт.
<abbr>
Дефинира абривиатура. Например ЕС (Европейски съюз), ООН (Организация на обединените нации)
<acronym>
DEPRECATED. Използва се <abbr> вместо <acronym>. Дефинира акроним.
<address>
Дефинира контактна информация за собственика на страницата/сайта.
Tips:
Когато се използва в <article> дава контактна информация за самата статия. Най – добре е да се използва във <footer>.
<applet>
DEPRECATED. Използва се <object> вместо <applet>. Дефинира вложен аплет.
<area>
Дефинира област от map-нато изображение (изображение, чиито области са разделени и могат да бъдат кликани).
Атрибути:
coords – дефинира координатите на областта.
target – посочва къде да бъде отворен линка. Възможности – “_blank”, “_parent” , “ _self”, “ _top”
rel – Посочва връзката между текущия документ и свързания.
<article>
Дефинира съдържание, можещо да съществува независимо от останалата част на страницата. Може да си го представяте като изрезка от вестник – изрязвате я и тя продължава да има смисъл и без останалта част от вестника.
Tips:
Може да съдържа собствена структура – <header><footer> и т.н. За по – подробно описание на структурата прочети тук
<aside>
Дефинира информация, която е свързана с обкражяващото я съдържание, но също съществува самостоятелно(например sidebar, poll-quote и т.н.)
<audio>
Дефинира звук – музика, аудио стрийм и т.н.
Атрибути:
autoplay – Аудиото ще стартира веднага след неговото зареждане (autoplay=”autoplay”)
controls – Посочва дали допълнителни контроли за работа с аудиото ще бъдат визуализирани – пусни, пауза бутони и т.н. (controls=”controls”)
loop – Посочва дали аудиото да започне отначало след неговият край (loop=”loop”)
preload – Посочва как да се зареди аудиото. “auto” – браузърът трябва да зареди целия аудио файл след като се зареди страницата. “metadata” – браузърът трябва да зареди само мета информацията за аудиото. “none” – браузърът не трябва да зарежда аудиото по време на зареждане на страницата
src- посочва мястото на файла
Tips:
Ако browser-a не поддържа този таг, ще покаже текста между отварящия и затварящия таг.
Вместо атрибута src е добра идея да се ползва вложения таг <source>, понеже различните браузъри поддържат различни формати и по този начин можете да посочите няколко различни формата и след това ще бъде избран поддържания от браузъра.
<b>
DEPRECATED. Одебелява текта. За подобни стилизирания използвайте css.
<base>
Посочва главния път до всички релативни URL-и на страницата. Например вместо да се изписва винаги целия път/линк до всички ресурси използвани на страницата, главната позиция може да се посочо в този таг. Например <base href=”http://pavelkolev.com/images/” > ми дава възможност да вкарвам картинки след това директно с <img src=”myImage.jpg” /> вместо <img src=http://pavelkolev.com/images/myImage.jpg />
Атрибути:
href – посочва позицията за всички URL-и на страницата.
target – посочва как да се отварят всички линкове на страницата.
Tips:
На страницата можете да имате само 1 <base> елемент.
Добре е <base> елемента да е позициониран в <head> елемента, ведната след него, за да могат всички последвали елементи да го използват.
<basefont>
DEPRECATED. Посочва основен шрифт за страницата (цвят, размер, тип). За подобни стилизирания използвайте css.
<bdi>
Дефинира текст, с различна насоченост или форматиране от заобикалящия го. Съкращение на Bi-Directional Isolation.
<bdo>
Дефинира обръщане на текста – изписва текста от дясно на ляво („Павел Колев” затворено в този таг ще доведе до резултат „велоК левеП”). Съкращение на Bi-Directional Override
<big>
DEPRECATED. Дефинира по – голям текст. За подобни стилизирания използвайте css.
<blockquote>
Дефинира цитат от друг източник. При HTML 4.01 дефинираше дълъг цитат, докато сега дефинира специфичен параграф, който е копиран от друг източник.
Атрибути:
cite – източникът на цитата.
SEO tips:
Използвайте задължително, когато имате повторение на текст, който сте взели директно от друг сайт. Това е един от начините, по който часттично можете да избегнете наказание от Google ако копирате чуждо съдържание.
<body>
Дефинира тялото на html документа. Контейнер за всички елементи дефиниращи съдържание – текстове, хиперлинкове, картинки, таблици, списъци и т.н.
<br>
Дефинира преминаване на нов ред/прекъсване на текущия ред. Самозатварящ се таг.
<button>
Дефинира цъкабъл бутон. В този таг могат да се поставят както текст, така и картинки. Това е основната разлика между button и input таговете, при създаването на бутони.
Атрибути:
autofocus – елементът ще получи автоматично фокус при зареждане на страницата
disabled – бутонът няма да може да бъде кликан
form – посочва формата, към която бутонът принадлежи (за стойност се използва id-to формата)
formation – посочва линка, към който да бъде изпратена информацията от формата (url)
formenctype – посочва как да бъде кодирана информацията от формата, преди да бъде изпратена
formvalidate – посочва дали информацията от формата трябва да бъде валидирана, преди да бъде изпратена. Използва се само когато атрибутът type е зададен със стойност submit
formtarget – посочва как да бъде визуализиран резултата, който ще се получи от сървъра след изпращане на информацията. Възможности – “_blank”, “_parent” , “ _self”, “ _top”
type – посочва вида на бутона. Възможности – button, reset, submit
TIP:
Винаги дефинирайте type атрибута на тага button, защото различните браузъри го интерпретират по различен начин.
<canvas>
Дефинира графики и анимация посредством javascript. Всъщност е само контейнер и е безполезен без javascript.
Атрибути:
height – дефинира височината на елемента
width – дефинира широчината на елемента
TIP:
Текста между отварящия и затварящия таг, ще бъде визуализиран, ако браузъра не поддържа canvas елемента.
<caption>
Дефинира заглавие на таблица. Винаги трябва да бъде първия елемент след отварящия table таг. Имате възможност за само едно заглавие на таблица.
<center>
DEPRECATED. Центрира текст. За подобни стилизирания използвайте css.
<cite>
Дефинира заглавие на работа – песен, филм, книга, склуптура и т.н. При html 4.01 дефинира цитат.
<code>
Дефинира парче компютърен код.
<col>
Дефинира пропъртитата на колона от таблицата. Задълцително е вложен на colgroup елемента.
Атрибути:
span – дефинира броя на колоните, които ще обхванат настройките.
<colgroup>
Дефинира форматирането на една или няколко колони в таблица. Трябва да бъде втори вложен елемент в таблицата веднага след caption и преди thead, tbody и tfoot.
<command>
Дефинира действие/команда, която може да бъде предизвикана от потребителя. Може да се използва за създаване на групи от чекбоксове, радиобутони и т.н. Отново само Майкрософт си знаят за какво им е(опитали са се да си направят някакъв вид абстракция чрез него) (Работи само в IE9).
<datalist>
Дефинира списък от предефинирани опции за input елемента. На практика чрез него се декларира drop-down предложенията за автоматично доизписване на текста. За връзка междъ input и <datalist> се използва атрибута <list> на <input> и id на <datalist>. Различните предложения за допълване на текста се дефинират чрез влагане на <option> елементи.
<dd>
Дефинира описание на точка от описателен списък (<dl>). Влага се задължително в <dl> и винаги е предхождан от <dt> елемент.
<del>
Дефинира текст, който е бил изтрит от документа. Може да послужи за посочване на част от текст, която е съществувала във стара версия на документа, но е била заменена. Използва се в комбинация с <ins> елемента, който показва какъв текст е бил вкаран.
Атрибути:
cite – url към място, обесняващо защо текстът е бил изтрит
datetime – посочва датата, на която е бил изтрит текста
<details>
Посочва допълнителни детайли, които потребителя може да покаже или скрие. Автоматично конструира така наречения акордеон, който може да се разширява, показвайки допълнителна информация. Най – често се използва в комбинация с <summary> елемента, който се влага в него и при клик показва допълнителната информация.
Атрибути:
open – посочва дали по подразбиране детайлите трябва да са видими за потребителя
<dfn>
Дефинира дефиниция на термин (научен, жаргон и т.н.).
<dir>
DEPRECATED. Дефинира списък от директории.
<div>
Дефинира област от документа (division). Служи за групиране на елементи и по – лесното им стилизиране. Блоков елемент – т.е. браузърите по подразбиране винаги ще преминат на нов ред преди неговата визуализация.
TIPS:
<div> елемента не е заменен от <section> тага. Можете да си представяте, че <div> елемента се използва за по – големи области от документа (например wrapper) или на няколко отделни section-a.
SEO tips:
Използвайте новите HTML5 тагове за по – семантично разделение на страницата си.
<dl>
Дефинира описателен списък (definition list). Като вложени елементи се използват последователност от двойки – <dt> и <dd> елементи. Тези двойки се използват за дефиниране на заглавието и описанието към него. Можете да си го представяте като речник, където имаме термин и описание към него.
<dt>
Дефинира термин от описателен списък (definition term). Винаги се използва вложен във <dl> елемента и винаги е последван от <dd> елемент, даващ описание на термина. Заедно дефинират двойка – термин – описание.
<em>
Дефинира подчертан текст или текст на който искате да наблегнете. Можете да си го представяте като фраза, която бихте казали с различен тон на гласа.
SEO tips:
Използвайте го, когато искате да придадете тежест към фраза, която е важна за вас и съдържанието на сайта ви. Това е един от начините да покажете на търсачките, кои са ключовите думи във вашият текст, и за какво конкретно се отнася той.
<embed>
Дефинира контейнер за външно (не HTML) приложение.
Атрибути:
height – дефинира височина на контейнера
src – дефинира мястото на файла, който да бъде вкаран
type – дефинира MIME типа
width – дефинира широчината на котейнера
<fieldset>
Дефинира група от общи елементи (общи по смисъл – информация за имената на даден човек, неговият пол и дата на раждане могат да бъдат една група, а информация за неговото образование, оценки и период на обучение, може да бъде друга група)в една форма. Като вложен елемент може да се използва <legend>, дефиниращ заглавието на тази група елементи.
<figcaption>
Дефинира заглавие на <figure> елемент. Може да бъде поставен като първи вложен елемент на <figure> или като последен такъв.
<figure>
Дефинира съдържание, като например илюстрации, диаграми, снимки код и т.н. Използвайте вложен елементът <figcaption> за заглавие на контейнера, като го вложите като първи или последен елемент.
TIPS:
Елементът може да се използва като контейнер за няколко <img> елемента. Когато съдържанието е просто свързано, но не е от значителна важност, спрямо останалото съдържание, използвайте <aside>. Когато съдържанието е важно, но позицията му спрямо останалата част от съдържанието, не е толкова важна, използвайте <figure>
<font>
DEPRECATED. Дефинира размер, цвят, тип на шрифта. За подобни стилизации използвайте css.
<footer>
Дефинира долната част на документ или област. Трябва да съдържа информация за областта, в която е вложен. Най – често съдържа информация за автора, връзки, контакти, авторски права.
TIPS:
Нов елемент, чрез който можете да придадете допълнителна семантика към съдърцанието си.
<form>
Дефинира форма за попълване от потребителя. Може да съдържа един или повече от елементите – <input>, <textarea>, <button>, <select>, <option>, <optgroup>, <fieldset>, <label>.
Атрибути:
accept-charset – дефинира енкодинга на символите, който да се използва при изпращане на формата
action – дефинира къде да бъде изпратена попълнената информация
autocomplete – дефинира дали автоматичното дописване на текст да бъде разрешено за цялата форма
enctype – дефинира как да бъде енкодната информацията при изпращане към сървъра.
method – методът, който да се използва при изпращане на информацията от формата
novalidate – посочва дали формата да бъде валидирана преди информацията от нея да бъде изпратена
target – посочва как да бъде отворен резултата, който ще се получи от изпращането на формата. Възможности – “_blank”, “_parent” , “ _self”, “ _top”
TIPS:
Никога не използвайте изброените елементи без те да са вложени във <form> елемент.
<frame>
DEPRECATED. Дефинира „прозорче” от <frameset>
<frameset>
DEPRECATED. Дефинира поредица от вмъкнати външни документи/страници.
ПОСЛЕДНО ОБНОВЯВАНЕ 08.11.2012
Loading ...
Статията е супер! Би било добре да се добави кои тагове са самозатварящи.
[…] HTML речник […]
[…] Научете всички HTML таговете – http://html5doctor.com, http://pavelkolev.com/html-rechnik […]
Много полезна статия :)