HTML речник

Забравили сте някой от таговете в 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

 


4 Responses to “HTML речник”

  1. bo says:

    Статията е супер! Би било добре да се добави кои тагове са самозатварящи.

  2. […] Научете всички HTML таговете – http://html5doctor.com, http://pavelkolev.com/html-rechnik […]

  3. Много полезна статия :)

Leave a Reply to bo Cancel reply

Your email address will not be published. Required fields are marked *