Първи стъпки в HTML — някои основни тагове

В този втори урок ще представим някои основни HTML тагове, и атрибути.

Заглавия (heading и title)

Да започнем с няколко тага, които се използват за заглавия. Това са от h1 до h6. h1 е най-голямо заглавие, а h6 — най-малко. “H” идва от heading — заглавие.

Тези тагове са важни за създаване на йерархичност в сайтовете.

На една страница не трябва да има повече от един h1 таг.

Това е може би второто най-важно нещо за SEO след <title> тага.

В предния урок споменах за <p> тага, който се използва за параграфи/абзаци.

Линкове

Използвайте <a> (anchor — котва), за да вмъкване линкове.

Този таг поддържа href атрибут, който оказва накъде да води линка.

Адресите, които въвеждате в него могат да бъдат абсолютни или относителни (relative).

Абсолютни линкове

Абсолютни линкове са тези, които съдържат пълен URL, започващ с http:// (или https://).

Относителни / релативни линкове

Относителните съдържат само част от адреса и могат да отведат до различно място. Това зависи от контекста, в който се ползват.

Пример на относителен линк е about.html. Ако сме на index.html на сайта си и там имаме такъв линк, той ще отвори “About” страницата от сайта.

Ако сайтът ни има следната структура:

• index.html
• about.html
  • history.html (подстраница в папка /about/)

и искаме от index.html да идем на history.html връзката ще трябва да въведем като <a href="about/history.html">История</a>.

Обратното обаче би изискало първо да се върнем една директория нагоре. Това се прави като добавим ../ към адреса:

<a href="../index.html">Начало</a>

В случай, че често променяме структурата на сайта си и местим history.html страницата от папка /about/ обратно в основната папка, ще трябва постоянно да променяме и този относителен адрес.

Тогава можем да ползваме относителни линкове спрямо началото на сайта (root relative). Те се познават по това, че започват с наклонена черта: /. Така ако имаме линк <a href="/index.html">Начало</a> той винаги ще води до тази страница (без значение дали е в основната папка или в подпапка).

Ако използваме наученото в предния урок можем да зададем връзката като:

<a href="/">Начало</a>

Тъй като index.html е специално име, ако просто насочим връзката към папката, браузърът ще отвори този файл.

Отваряне на линкове в нов прозорец

<a> тагът също поддържа и target атрибут. Той указва дали връзката да се отвори в същия прозорец или в нов. Отваряне в същия прозорец е стойността по подразбиране, така че може просто да го пропуснете. Ако искате да се отвори в нов — добавете target="_blank".

Стандартът xHTML Strict счита този атрибут за невалиден. Ако ще ползвате target за линковете и искате да използвате xHTML стандарт, то той трябва да е Transitional, а не Strict. В противен случай кодът ви няма да се валидира. Не че няма да върви в браузърите, ама няма да можете да се хвалите със “100% valid xHTML”.

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

Отново относно стандарти — xHTML Strict и Transitional дори не поддържат frame-ове, така че за да бъде валиден кодът ви трябва да използвате xHTML Frameset.

Изображения

<img /> (image — изображение) таговете се използват да добавяне на картинки.

Адрес до картинката, която да се зареди се задава чрез src атрибута. Адресът отново може да е относителен или абсолютен (да започва с http://). Този таг има и един друг задължителен атрибут — alt (alternative — алтернативен).

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

Добре е да се задават и размери на <img /> тага използвайки width и height атрибутите. В крайна сметка един цялостен таг за картинка би изглеждал така: <img src="image.jpg" width="640" height="360" alt="Синьо Небе" />.

Други мултимедийни тагове

Подобно на <img /> можем да използваме <video></video> и <audio></audio> тагове. Те са налични от HTML5 и някои стари браузъри (Internet Explorer 7 и 8) не поддържат тези тагове.

Освен това има и други ограничения от кодеци и т.н. За повече информация вижте поста ми Вмъкване на видео в сайт. Той представя доста информация по въпроса относно <video> тага и алтернативните му методи.

Контейнери

Важен таг е <div>, който всъщност няма някакво предварително форматиране. Няма и някакви специални изисквания за използването си. Този таг просто огражда част от съдържанието и създава едва своеобразна група.

Подобни групи по принцип нямат значение за търсачките, освен ако нямат специални класове или id-та като header, footer, nav, navigation и други подобни. Тези тагове могат в последствие да се стилизират по подходящ начин с CSS, който ще обособи определена част от сайта.

Списъци

Съществуват два тага, които се използват за създаване на списъци. Това са <ul> (unordered list — неподреден списък) и <ol> (ordered list — подреден списък).

Разликата между тези два тага е, че <ul> показва точка или квадратче или нещо подобно пред елементите, които списъка съдържа, а <ol> ги номерира. Ето пример за двата:

OL

1. Първи
2. Втори
3. Трети

UL

• яйца
• мляко
• хляб

И двата тага имат изискване да съдържат тагове от само един строго определен тип — <li> (list item — елемент от списък).

Използването на всякакви други тагове директно в <ol> и <ul> е забранено. За сметка на това в <li> таг можете да имате всичко, което си поискате.

Цитати

<blockquote> (цитатен блок) е таг, който се използва за представяне на нечии думи — само по себе си прилича много на div. Разлика прави форматирането, което браузърите имат към този таг да добавят допълнително отстояние към тага, както и самата идея зад тага.

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

Даже в HTML5 има множество нови тагове, които не се различават по почти нищо от div. Самата идея от използването им е с цел изясняване на съдържанието на елементите, за да се улесни работата на търсачки и на други интернет ботове.

Такива нови HTML5 тагове са <header>, <footer>, <nav>, <section>, <article> и други. Предполагам, че сами се досещате кое къде би било уместно да се използва.

Освен тези тагове има и много други. В най-скоро време ще напиша още един урок, в който ще представя още няколко основни тага и атрибути.