Fridaycode.net

На всички хора, които са решили да се занимават с HTML горещо им препоръчвам да сядат и четат всякакви документации, до които се докопат. Тези от вас, които вече са поели по този път, вероятно са обърнали внимание, че доста се говори за въпросните блокови (Block-level) и инлайн (Inline/Text-level) елементи.

От голямо значение е да имаме правилно структуриран HTML код, защото това помага при SEO, при възпроизвеждането на сайта под различни браузъри, при работата с CSS впоследствие и много други. Казвам го, защото въпросните блокови и инлайн елементи лежат в основата на HTML структурата, а както знаем усъвършенстването в каквото и да е, преминава през стабилно изучаване на основите.

Всъщност какво представляват блоковите и инлайн елементите? Реално това са всички HTML елементи (body, p, span, div и т.н.), разделени в две групи.

Блокови елементи

Най-важното, което трябва да знаете за тях е, че те винаги започват на нов ред и тяхната ширина е 100% (или по-философски казано - 100% от дължината на parent елемента). Освен това те са форматирани визуално като блокове и един блоков елемент създава нещо като контейнер за останалите блокови елементи в него. Те ще приемат неговите размери и ще се водят по неговите правила. Такива елементи са <p>, <div>, <h1>, <ul> и др. Като се замислите дори има логика - параграфите са предназначени да разделят подобаващо текста, ето защо всеки следващ е на нов ред (и представлява сам по себе си един блок). При списъците положението е същото - когато искате да направите списък, взимате химикала и започвате да изреждате желанията си на отделен ред, за да бъде по прегледно. Като погледнете всеки един от блоковите елементи, ще видите, че наистина има логика те да бъдат господари на своя ред.

При някои блокови елементи имаме и предефинирани CSS стойности, именно с цел яснота, естетика и т.н. За пример отново ще дам параграфа и списъците - те имат зададени margin и padding, които обаче различните браузъри интерпретират различно. Ето защо по принцип се препоръчва първоначалното им зануляване в CSS (посредством така наречените CSS Resets), а след това манипулация от ваша страна.

Инлайн елементи

Инлайн елементите започват и свършват на един и същи ред, като по този начин не променят "потока" от съдържание. Тяхната ширина е равна на съдържанието, което ги изпълва. Инлайн елементи са <a>, <span>, <input>, <strong> и др. Да вземем за пример ситуацията, в която ограждате един текст в <strong></strong>. Той става удебелен, но съдържанието продължава веднага след него.

За разлика от блоковите елементи, манипулацията на инлайн елементите е малко по-ограничена. Например, един инлайн елемент може да има margin отляво и отдясно, но не и отгоре и отдолу. Т.е. вие може да му зададете, но нищо няма да се случи.

Употреба

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

Блоковите елементи могат да съдържат в себе си, както други блокови, така и инлайн елементи. Инлайн елементите от своя страна могат да съдържат само други инлайн елементи. Така е правилно и така няма да имате главоболия. Разбира се, нищо не ви спира да вземете един инлайн елемент и да поставите в него блоков. Тогава инлайн елемента приема размерите на блоковия (разпъва се на 100%). Ситуацията не е пагубна, но така имаме един напълно излишен инлайн елемент, а и няма много логика в цялото упражнение. Това е все едно да се опитате да напъхате принтер в острилка.

Анонимни боксове

Анонимните боксове са често срещано явление и точно за това реших да им обърна подобаващо внимание. Те биват два типа - анонимни блокови боксове и анонимни инлайн боксове.

Анонимни блокови боксове

Нека разгледаме следния пример.

<div>
	Някакъв текст, който стои в нищото
	<p>Текст, ограден с блоков елемент</p>
</div>

В случая имаме блоков елемент (div), в който имаме инлайн съдържание и още един блоков елемент (p). Тъй като останалата разлика от двата блокови елемента също се явява блок (бокс), ние приемаме визуално, че инлайн съдържанието само по себе си стои във въпросния анонимен бокс.

Анонимни инлайн боксове

Сега нека разгледаме този случай.

<div>
	Някакъв текст, който стои в нищото
	<b>Текст, ограден с инлайн елемент</b>
</div>

Тук имаме блоков елемент (div), в който имаме инлайн съдържание и един инлайн елемент (b). Инлайн елементът си генерира собствен блок (бокс), но инлайн съдържанието се влияе от блоковия елемент "над" него, който както и в горния пример е div. Тогава картинката би изглеждала по следния начин.

Сигурно се питате защо след като този анонимен инлайн бокс приема дължината на своя parent (блоков елемент), текстът в елементът <b> остава на същия ред. Отговорът е прост - защото анонимният бокс е просто измислен ориентир и е там за наша помощ, но по никакъв начин не влияе на елементите около него.

Ако картинките ви се сторят леко объркващи ви препоръчвам да нахвърляте набързо няколко реда HTML и да експериментирате с Firebug.

Трансформация

Имайте предвид, че благодарение на CSS можем да превърнем блоковите елементи в инлайн и обратно. Това става чрез декларациите display: block и display: inline. По-честа е конверсията inline > block, като веднага ще ви дам пример с навигацията в един сайт. В голям процент от случаите въпросните главни менюта или навигации са изградени от бутони, представляващи линкове (<a>). За да е по-голяма зоната за кликане обаче, <a> се трансформира от инлайн в блоков елемент със зададени ширина и височина.

Пример за block > inline конверсия може да бъде заглавие (<h3>), до което искаме да има бутончета за редактиране и изтриване. Така удряме един display: inline на заглавието и получаваме три инлайн елемента, които застават един до друг.

Въпреки, че тези трансформации понякога спасяват животи, от W3 препоръчват да се избягват. Честно казано аз не съм съгласен с тях!

Заключение

Има още доста информация, която може и трябва да бъде изчетена, за да сте напълно наясно с всичко около тези елементи, но статията нагоре предлага основите и мисля, че ако вникнете в тях, ще разполагате със сериозна база за развитие. Така например, ако пред вас изникне казус за разрешаване, ще изключвате варианти още в главата си, а така пестите време. Разбира се не казвам, че не трябва да експериментирате, просто ще се чувствате много по-сигурен в знанията си. Успех!