Каква е разликата между таг и елемент? Кога трябва да използваме strong и кога bold? Какво е това DOM?

Ако сте нов в web design-a, едно от първите неща, с които по всяка вероятност ще се сблъскате е жаргона (терминологията). Има толкова много определения за различни неща, които толкова много си приличат, че е изключително лесно човек да се обърка.

В тази серия от постове ще се опитам да обесня някои от основните термини, с които всеки нов човек в web design-a би трябвало да е запознат и да влязат в речника му. Няма да описвам абсолютно всички термини, а ще се съсредоточа върху тези, които считам трудни за освояване при начинаещите. (Всъщност много от хората с опит не правят също разлика между някои от термините, което считам за грешка. Смятам, че нещата трябва да бъдат назовавани с правилните им имена.)

HTML & HTML5

HTML

HTML е съкращение на HyperText Markup Language.  За да разберем какво по – точно е това, нека го разбием на части.

Hypertext

Hypertext чисто и просто е текст, които се визуализира на дигитално устройство и при който потребителя използва активни линкове, за да улесни навигацията. Например, по всяка вероятност за да стигнете до тази статия, вие сте кликнали на част от текст, който ви е довел до тук.

Markup Language

Markup Language е начин за представяне на съдържанието на документ. С такъв език ние можем да трансформираме чист текст в богат текст (не намерих по –точен превод; всъщност се има предвид Richly formatted), използвайки специален синтаксис, който казва на рендиращото устройство как да визуализира информацията и елементите които се подават. Такова устройство е например вашият browser. Чрез тези езици се описва най – вече структурата на документа и това е тяхната главна цел.

Накратко казано – HTML е начин да презентираме, форматираме, структурираме документи,  които разчитат основно на система, която позволява свързаност на страниците, за да могат да бъдат използвани правилно. Това е най – ниското стъпало на което мрежата (web) работи.

HTML5

HTML5 е точно това, което можете да предположите, че е – 5тата главна „версия” на HTML. HTML служи като заместител както на HTML 4.01, така и на XHTML 1.1, така че всеки път когато видите обръщение към тези 2 синтаксиса, които са най – масово използвани през последните години, имайте предвид, че HTML5 е по – новият спрямо тях.

HTML5 ни предлага огромно количество нови шукарийки, елементи и синтактични промени спрямо HTML. Тук няма да се спираме подробно на всички тях и какво правят. По всяка вероятност ще има специални теми за случая. Важното да се отбележе, че голяма част от хората си мислят HTML5 е нов HTML, който няма нищо общо със досегашния. Всъщност не е така. Запомнете, че когато се казва HTML5 се има предвид не само новите HTML елементи, но и CSS3 и новите javascript api-та. Съвкупността от тези 3 компонента правят HTML5.

Семантика

Семантичен HTML

Преди години когато правех първите си стъпки в web development-а чувах тази фраза постоянно и направо ме побъркваше. Всички говореха за семантика и кое е семантично правилно и кое не. Причината за това е изключително просто – семантичните страници са по – добри.

Простичко казано – изначалната концепция тук е, че вашите тагове трябва да дават колкото се може повече смисъл на съдържанието в тях. За да постигнете това, трябва да използвате елементите така, както са били замислени да се използват и по начин, който комуникира по възможно най – прост начин със този или това, което комуникира с тях.

Например преди време (не толкова далечно всъщност) беше изключително често срещано сайтаджиите да изграждат цели сайтове само с помощта на HTML таблици (за да постигнат желания layout(външност) на страницата). Проблема тук е, че елементът таблица (table) има чиста и ясна цел – да изобразява таблична информация или по друг начин казано – информация която бихте сложили в таблица. Когато видите таблица би следвало да си помислите, че информацията в нея е чисто и просто таблична информация. И именно затова ако целият ви сайт е в таблица, тогава елементът губи смисъла си на такъв или още по – точно казано – губи семантичния си смисъл. Другият проблем е, че все още има сайтаджии които използват таблиците за layout, но това е друга тема.

Именно от тази семантична нужда се появяват и голяма част от новите тагове в HTML5. Просто съществуващите тагове издъхваха при опитите си да наложат семантична стойност над дадена част от страницата.

Една супер проста страничка може да изглежда по следния начин. И вие дори да не разбирате от HTML бихте разбрали от какво е съставена тя.

<header>
   <nav></nav>
</header>
<section>
   <article>       
     <h1></h1>
   </article>
   <article>
     <h1></h1>
   </article>
</section>
<footer>
</footer>

DIV

Докато сме на темата за семантичния web, нека обърнем внимание и на може би най – обсъжданият елемент след таблицата – div-a. Ако някога сте виждали кодът на дадена HTML страница, то шансовете да сте видяли div елемент са огромни. Та – What the… is div?

Терминът “div” идва като съкращение от “division”. Ако смятате това за неясно – еми неясно си е. Всъщност цялата идея покрай div елементите е да бъдат неясни (epic?). Div-овете напрактика се явяват генерален контейнер за блокове съдържание, което не може да бъде описано на семантично ниво по друг начин. (или поне не можеше преди HTML5)

Това естествено води до мисълта, че div-овете са несемантични елементи, дадени ни от дявола, което ще рече – div-овете всъщност не внасят никакъв смисъл. И ако следваме логиката на всичко написано до тук – би трябвало почти да не използваме div-ове поне на теория. На практика обаче, много сайтаджии ги шляпат където им дойде.

След като са толкова универсални и използваеми за създаването на структура, която е лесно достъпна с CSS, повечето хора инстинктивно мажат с div-ове навсякъде. Но, вие не сте повечето хора и трябва да се стремите да използвате елементи със конкретно семантично значение, където това е възможно. Например нека вземем следната част от страница, масово използвана преди появата на HTML5.

<div id="header">some content</div>

Чрез атрибута id, по някакъв начин придаваме смисъл на div, но той като такъв си остава без семантично значение. С HTML5 обаче, можем да забравим за div-а (поне в тази ситуация), и да използваме доста по семантичния елемент header.

<header>some content</header>

Em vs. italic и strong vs. bold

Тук може да има доста подведени, особенно след като HTML5 предлага малко по – различна семантика за тези елементи. Нека първо разгледаме em и italic.

Спецификацията (на w3c) за използването на italic елемента дефинира следното – „offset from its surrounding content without conveying any extra emphasis or importance, and for which the conventional typographic presentation is italic text.”

Ключовото в случая е, че italic елемента не придава никаква тежест на съдържанието си, за разлика от em елемента. Няколко пъти вече споменавам тази тежест – за нея може просто да си мислите като нещо казано супер сериозно, със супер сериозен глас (голяма тежест) и нещо казано ей така – между другото.

Или с други думи казано – italic само придава „красота” в страницата – нещо което се отдалечава от семантичността и замисъла за структуриране чрез HTML.

Ако сега обърнем внимание на bold и strong. Както може би вече сами се досещате разликата тук е идентична. И все пак нека се обърнем към дефиницията от w3c за italic – „offset from its surrounding content without conveying any extra emphasis or importance, and for which the conventional typographic presentation is bold text.”

Отново сами виждате, че не придаваме никаква тежест ако се оповаваме на типографската конвенция.

Атрибути

Class vs. ID

Може би една най – голямите разлики, която трябва да разберете като сайтаджия е именно между тези два атрибута. Погледнете следните снипети(парчета код). Разбирате ли разликата между тях?

<div id="featured"></div>
<div class="featured"></div>

За щастие, разликата е наистина проста за разбиране. ID-то е уникално а класовете могат да се призползват. Например следната употреба на ID е грешна защото го използваме за 2 елемента.

<div id="featured">

Lorem ipsum…

</div>
<div id="featured">

Lorem ipsum…

</div>

Ако искаме да постигнем същото, просто трябва да използваме class вместо ID. Един и същи class може да бъде слаган на колкото си елементи поискате. След това чрез CSS можете да стилизирате всички елементи от този клас едновременно.

<div class="featured">

Lorem ipsum…

</div>
<div class="featured">

Lorem ipsum…

</div>

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

Дгуги жаргони

Елемент или таг

От една страна това да знаете разликата между елемент и таг, няма да ви направи най – добрите сайтаджии на света. Въпреки това много хора използват тези термини неправилно. Правилното разбиране на основите при структурирането на HTML е и основата на доброто web обучение. Може да не е толкова привидно, но тези 2 термина означават съвсем различни неща.

За да излюстрираме нека започнем малко по от далеч. Нека вземем например отварящия таг за параграф.

   <p>

Логично затварящия таг изглежда по този начин.

   </p>

Всеки от тези тагове си е сам за себе си. Но въпреки това, те не са елементи. Ето както представлява параграфния елемент.

   <p>some content</p>

Казано директно – HTML се състои от елементи, а елементите се състоят от тагове, които имат съдържание в тях. И ако въведем и самозатварящите се тагове и терминологията ни отива подяволите… (почти)

DOM

Това е от тези неща, които объркваха много мои познати при запознанството им с HTML. Много често се случва да чуеш някой да говори за DOM, а да има предвид съвсем различно нещо или просто го използват защото звучи някак си много терминологично и високо професионално – „Тука обхождам DOM-a”. Всъщност DOM е абривиатура идваща от Document Object Model. Това е. Сега ако спра до тук едва ли някой ще е разбрал нещо.

Всъщност DOM не е толкова страшно нещо и въобще не е толкова сложно колкото звучи. Най – просто казано DOM се отнася за структурата на страницата и ни дава изчистена конвенция за визуализиране и отнасяне към всяка една част от тази структура.

Казано по друг начин – DOM можете да си го представяте като родословното дърво на страницата. Най – отгоре имате документа, който се разширява надолу до корена или до html елемент и неговите роднини. Ако разгледаме някой елемент, то той може да си има свои деца, родители, братовчеди, братя и сестри(помислете за ситуацията с братовчедите).

Общо взето за отношенията между елементите в документа говорим както за отношенията в едно семейство – използвайки същата терминология. Ако един елемент има вложен елемент – то вложеният му е дете. Ако два елемента имат общ родител – то те са братя/сестри.

Всичко казано до тук наистина е опростен вариант на това което всъщност е DOM. Веднъж придобили ясното за това как DOM дефинира структурата на HTML документа, можете да преминете към по – сложната терминология, която използват w3c при дефинициите си. Ако ви е интересно разгледайте ги.

Блокови vs. Инлайн елементи

Въпреки, че задавате стила на елементите си чрез CSS, сигурно сте обърнали внимание, че browser-ите визуализират различните елементи по различен начин. Когато създавате блокови елементи(div,p…) виждате, че browser-а оставя нов ред веднага след края на елемента. Или с други думи казано – ако имаме дефинирани 3 параграфа, то всеки от тях ще започва на нов ред, а не един до друг. Докато инлайн елементите (strong, span) правят именно това – ако дефинирате 3 span-а един до друг, то те ще се визуализират един до друг. Друго изключително важно нещо за запомняне е, че блоковите елементи могат да имат височина и широчина.

Инлайн елементите от друга страна се отнасят към „на реда” със съдържание преди и след елемента. Тук височината и широчината се самоопределя от съдържанието на елемента. Тези стойности няма как да бъдат зададени или изразени.

Естествено както всяко правило така и това си има изключение. Чрез CSS пропъртито display можем да променяме поведението на дадени елементи. Например, ако вземем този линков елемент и кажем на browser-а да го визуализира като блоков елемент (а той е инлайн), тогава той ще започне да се държи именно като блоков елемент.

a {
   display: block;
   background: #eee;
   height: 50px;
   width: 200px;
}

С кои понятия имате проблем?

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