Меню

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

Влез Излез

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

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

Да започнем с няколко тага, които се използват за заглавия – от

h1 до h6, като 1 е най-голямо заглавие, а 6 – най-малко („H“ идва от heading – заглаивие). Тези тагове са важни за създаване на йерархичност в сайтовете.

Не съм SEO специалист, но това, което съм чувал на много места е, че на една страница не трябва да има повече от един h1 таг и най-добрата му употреба е просто да се сложи около логото на сайта и вътре да се впише заглавието. Това в комбинация с <title> тага на страницата са може би двете най-важни неща за SEO. Освен това, ако правите блог като мене, за заглвията на статиите може да използвате h2 тагове, а за заглавия на widget-ите в страничната лента – <h3>. Не е задължително да ги ползвате от по-голям към по-малък. Да речем, ако искате да поставите по-малък приоритет на widget-ите, можете за техните заглавия за сложите <h4> и изобщо да нямате <h3> тагове, но в крайна сметка тези приоритети са само относителни, а и само от Google и другите търсачки си знаят точно как се изчисляват, така че това са бели кахъри.

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

Използвайте <a> (anchor – котва), за да вмъкване линкове. Този таг поддържа href атрибут, който оказва накъде да води линка. Ако адресът в href атрибута не започва с http://, тогава адресът се счита за относителен. Това означава, че ако правите сайт с две страници – да речем home.html и about.html – в кода на home.html можете да сложите <a href="about.html"> като този линк ще води до about страницата, тъй като тя е в същата директория. Ако беше в директория about, тогава линкът щеше да стане <a href="about/about.html">.

<a> тагът също поддържа и target атрибут.

ЗАБЕЛЕЖКА: стандартът xHTML Strict счита този атрибут за невалиден, така че ако ще ползвате target за линковете и искате да използвате xHTML стандарт, то той трябва да е Transitional, а не Strict. В противен случай кодът ви няма да се валидира. Не че няма да върви в браузърите, ама няма да можете да се хвалите със „100% valid xHTML“. Този атрибут позволява да оказвате дали линкът не трябва да се отвори в нов прозорец. Това се извършва, когато зададете target="_blank".

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

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

<img /> (image – изображение) таговете се използват да добавяне на картинки. Адрес до картинката, която да се зареди се задава чрез src атрибута, като адресът отново може да е относителен или абсолютен (да започва с http://). Този таг има и един друг задължителен атрибут – alt (alternative – алтернативен). В този таг се задава някакъв текст, който да може да замени картинкава в случай, че хора с увреждания разглеждат сайта и нямат възможност да видят самата картинка (или каквото и да е друго) и използват специален софтуер, който да им чете от сайта, който няма как да разбере какво представя изображението, освен да прочете какво пише в 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, който ще обособи определена част от сайта.

В този сайт примерно има div за header-а, за навигацията, цялостно за съдържанието, който сам в себе си съдържа основно съдържание и странична лента. Основното съдържание има div-ове за отделните постове, а страничната лента има div-ове за отделните widget-и. Надявам се, че добивате представа.

Съществуват два тага, които се използват за създаване на списъци. Това са <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> и други. Предполагам, че сами се досещате кое къде би било уместно да се използва.

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

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

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

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