Блокова верстка тегів div HTML

Ще якихось десять років тому в рунеті найбільш часто використовувалася так звана табличная верстка. Зважаючи на те що стандарти деяких браузерів значно відрізнялися один від одного, доводилося шукати рішення, яке б дозволило правильно відобразити інтернет-документ у всіх додатках. Але час минав, розвивалися стандарти, і на зміну досить жорсткою і негнучкою табличній прийшла добре змінна і чуйна блокова верстка. На чолі кута такої технології лежить принцип використання елементів

. HTML-документи в більшості своїй почали будуватися на основі окремих блоків, які, на відміну від табличної верстки, можуть бути незалежними один від одного.

Виникнення

Ускладнення веб-сторінок і розвиток комп`ютерної техніки призвело до того, що веб-документ був розділений на дві частини - каркас (HTML-код) та оформлення (таблиці стилів). Завдяки цьому вдалося досягти небувалого розвитку веба, результати якого ми зараз можемо споглядати на більшості сучасних сайтів. Крім поліпшення процесу розробки

HTML дозволив визначити для кожного окремого елемента свої правила оформлення. Це сприяло поліпшенню читання коду веб-сторінки та зменшення часу завантаження документа. Тепер пошукові машини набагато швидше і краще обробляють інформацію, доступну на сайті.

Стандарти та перевірка

Тег

в HTML використовується в суворій відповідності зі стандартами W3C (Консорціуму всесвітньої павутини). Перевірка коду сторінки проводиться спеціальним інструментом - валідатором, який парсит (сканує і шукає) всілякі помилки на сторінці. Валідна сторінка означає, що всі теги були використані правильно і повністю відповідають вимогам стандартів.

Теги

дозволяють створювати блоки або, як їх ще називають, контейнери. При цьому окремі елементи можуть вкладати один в одного, створюючи при цьому структури необхідної конфігурації і складності. Використання тега

без супроводу класом або ідентифікатором практично не зустрічається. Це обумовлено «безликістю» елемента. Якщо йому не привласнити клас, то в підсумку всі контейнери будуть мати ідентичну конфігурацію.

Для того щоб створити дійсно правильний документ, необхідно використовувати наступну структуру тега

class = «якесь то_імя». Звертаючись по імені класу, в таблицях стилю можна визначити положення, розмір, підведення і інші параметри окремого блоку в документі.

Використання класів і ідентифікаторів

Блок

HTML може визначатися як ідентифікатором id, так і класом class. Відмінність першого від другого в тому, що id використовується на сторінці документа тільки один раз. Тобто його використовують для визначення унікальних елементів, які більш ніде не повторюються в коді сторінки. Атрибут класу дозволяє застосовувати ті ж правила стилів до кількох елементів. Такий підхід значно спрощує розробку і підтримку коду. Крім того, один об`єкт може мати одночасно кілька класів. Для правильного розпізнання їх просто поділяють пробілами.

Природно, блокова структура документа зовсім не передбачає використання тільки лише одних тегів

. У структурі будь-який інтернет-сторінки завжди будуть і інші елементи. Крім того, сам по собі блоковий елемент

може мати зовсім інший вид відображення. Робиться це за допомогою властивості display. Елемент може мати рядкове або навіть табличное відображення, що дозволяє значно збільшити гнучкість використання блоку і створити сайт будь-якої конфігурації.

Тег

. HTML-властивості

Як вже було сказано вище, даний тег не змінює оформлення фрагмента сторінки, а використовується для створення семантичної структури з наступним оформленням допомогою таблиць стилів. Використання закриває тега для цього елемента є обов`язковим.

Незважаючи на те що багато сучасні браузери зможуть розпізнати таку помилку, в деяких випадках незакритий тег може стати причиною «розвалювання» структури документа і його невірного відображення.

Так як даний елемент є блоковим, то вміщений у нього контент буде починатися з нового рядка. Для зміни такої поведінки необхідно змінити параметри відображення блоку властивістю display. Крім групування вкладених елементів, тег

дозволяє форматувати розташування контенту всередині нього. Для цього використовується атрибут align, завдяки якому можна розмістити текст або зображення по лівому краю, по правому краю або по центру батьківського елементу.

Позиціонування блоків

Використання атрибуту position дозволяє змінити метод позиціонування обраного елемента. Так, існує три типи позиціонування:

• Статичне (static) - використовується за умовчанням. У цьому випадку елемент розташовується відповідно до позиції в HTML-коді.
• Відносне (relative). В даному випадку розташування об`єкта розраховується так само, як і у випадку зі статичним позиціонуванням, але дана властивість дозволяє змінювати позицію для дочірніх елементів.
• Абсолютне (absolute). Положення його розраховується відносно елемента з відносним позиціонуванням.

Інші атрибути

Для зміни позиції щодо точки початку координат використовуються атрибути top і left. Значення можуть бути як позитивними, так і негативними. Ширина і висота блочного елемента задається атрибутами width і height відповідно. Якщо вони не були зазначені в таблицях стилів, то блок буде займати всю ширину батьківського елементу. Якщо контент блоку не поміщається по всій ширині «батька», то тоді поведінка елемента визначається атрибутом overflow.

Сподіваємося, дана стати допомогла розібратися з питанням про те, що таке

в HTML.