Повечето елементи в HTML могат да бъдат определени като Блок елементи, или като Инлайн елементи. Елементите могат да се групират, чрез <div> и <span> тагове. Имайте предвид, че това са така наречените несемантични тагове. В някои от следващите уроци ще видим какво е семантиака при HTML.
Блок елементите в HTML
Повечето елементи в HTML могат да бъдат определени като Блок елементи, или като Инлайн елементи. Блок елементите започват и свършват с нов ред, когато се покажат в браузъра Елементите в HTML обикновено са или блокови елементи или инлайн елементи. Има и някои други, които ще също ще разгледаме но те са много малко и се запомнят много лесно. Елементът на ниво блок заема цялото пространство на основния си елемент (контейнер), като по този начин създава „блок“. Тази статия помага да се обясни какво означава това. Блок елементите започват и свършват с нов ред, когато се покажат в браузъра. Елементът на ниво блок винаги започва на нова линия и заема пълната широчина (излиза отляво и отдясно доколкото е възможно). Например: <h1>, <p>, <ul>, <table>.
Употреба на блок елементите в HTML страниците
Блок елементите могат да се показват само в <body> елемента. Има няколко ключови разлики между елементите на блок и инлайн елементи: Първата е форматирането – тези елементи по подразбиране започват на нов ред(или на „нова линия“ при визуализиране в браузър), но инлайн елементите могат да започнат навсякъде в даден ред. Втората ключова разлика е модела на съдържанието – обикновено елементите на ниво блок могат да съдържат вградени елементи и други блокови елементи. Всъщност в тази структурна разлика съществува идеята, че блоковите елементи създават „по-големи“ структури от инлайн елементите. В HTML5 това двоично разграничение се заменя с по-сложен набор от категории на съдържанието. Категорията „блок“ грубо съответства на категорията на съдържание на потока в HTML5, докато „inline“ съответства на съдаржанието на фразите, но има и други категории. Важно е да знаем, че на този тип елементи свойството block може да бъде променено с помощта на CSS.
Инлайн елементите в HTML
В HTML елементите са вградени елементи, които заемат само пространството, ограничено от етикетите, дефиниращи елемента, вместо да нарушават потока от съдържание. В тази статия ще разгледаме вградените в HTML елементи и как те се различават от елементите на ниво блок. Вграденият елемент не се стартира на нова линия и заема само толкова ширина, колкото е необходимо. Инлайн елементите се показват в браузъра без начален нов ред. Пример: <a><img><td>
Повече за <div> елемента
<div> е блоков елемент, който може да се използва като контейнер, за групиране на други елементи. Той няма някакво специално значение или предназначение. Единствено, заради това, че е блок – браузъра ще направи нов ред преди и след него. Използван заедно със CSS, <div> елемента може да се използва за стилизиране на големи блокове от съдържание. В HTML5 има нови тагове(<header>, <main>, <section>, <footer>), които помагат за валидното изграждане на сайта, но div-овете намират широко приложение.
Повече за <span> елемента
<span> е инлайн елемент, който се използва като „контейнер за текст“ Както горнопосоченият елемент, <span> няма специално значение или употреба. Браузъра не добавя нов ред преди или след него. Заедно със CSS, той може да се използва за стилизиране на част от текста.
Тагове за групиране на други HTML елементи
| Таг | Описание |
|---|---|
| <div> | Дефинира част от документа (блок елемент) |
| <span> | Дефинира част от документа (инлайн елемент) |
Концептуални различия
Накратко, тук са основните концептуални разлики между инлайн и блоковите елементи:
Модел на съдържанието
Обикновено инлайн елементи могат да съдържат само данни и други вградени елементи. Не можете да поставяте блокови елементи вътре в инлайн елементи.
Форматиране
По подразбиране вградените елементи не принуждават нова линия да започне в потока на документа. От друга страна, блоковите елементи обикновено причиняват прекъсване на линия (въпреки че, както обикновено, това може да се промени с помощта на CSS).
Промяна на нивата на елементите
Можете да промените нивото на даден елемент с помощта на свойството display с помощта на CSS. Вградени блокове, като промените стойността display от „inline“ към „block“, можете да кажете на браузъра да изобразява вградения елемент в квадратна кутия, а не във вградена кутийка. Това не означава непременно, че елементът се представя точно така, сякаш първоначално е бил вграден в блок елемента, така че не забравяйте да погледнете резултатите.