Після того, як ми познайомилися з основною базовою структурою HTML документа, прийшла пора вже переходити до вивчення основних тегів HTML, і тут ми познайомимося з поняттям блочного і сатиричного елемента. Все, що я буду говорити далі - все це буде тілом документа, відповідно має входити в тег BODY. Коли ми будемо говорити про те, що повинно знаходитися в тезі HEAD, я буду позначати окремо.
Отже, в тезі BODY, тобто в тілі документа (у видимій частині) можуть перебувати елементи двох типів - блокові або рядкові. Блокові елементи як правило мають парний тег DIV, а малі - SPAN. Але це не обов'язково. Є деякі блокові і рядкові елементи, які мають інші теги, і я про це буду розповідати, але в більшості випадків саме DIV і SPAN є основними тегами.
Різниця між ними така: коли ми створюємо блоковий елемент (тобто блок), то він автоматично (якщо ми не вкажемо йому спеціально) підганяє свою ширину під ширину того елемента, в якому він знаходиться (тобто підлаштовується під ширину елемента-батька). Висота блоку буде підганяти під висоту вмісту блоку. Тобто якщо ми напишемо так:
То ми отримаємо 2 блоку з шириною у всю ширину документа і висотою в рядок, які розташовуються один під одним. Чому один під одним, а не один за одним, сподіваюся, зрозуміло? Тому що ширина кожного блоку займає всю ширину елемента, в якому знаходиться наш DIV, а оскільки наш DIV знаходиться в тілі BODY, то ширина його дорівнює ширині всього документа, і блоки змушені створюватися один під одним. Приклад такого блоку - звичайний абзац тексту. Ми, звичайно візуально самих блоків (кордонів блоків) не побачимо, ми будемо бачити лише вміст цих блоків, але саму структуру будемо розуміти чітко.
На відміну від блокового елемента є рядковий елемент - SPAN. З ним ситуація зворотна - ширина сатиричного елемента дорівнює вмісту. Тому якщо ми розмістимо кілька друг за другом наступних малих елементів. наприклад
елементи вишикуються один за одним по горизонталі. Тегом SPAN можна виділяти кілька букв в слові навіть, наприклад
Щоб було простіше зрозуміти, замініть слово "блок" словом "абзац", а слово "рядок" - поняттям "слово або відрізок рядка". Так стає зрозуміліше, так? Абзаци йдуть один під одним, якими б вони великими не були, а слова - один за одним зліва направо.
Ось ключові відмінності DIV і SPAN елементів. Приблизно зобразити всю різницю між ними можна таким чином:
Сподіваюся, більш-менш зрозуміла різниця, так?
Тепер далі: дуже важливе правило: Не можна розташовувати блокові елементи всередині малих. Тобто ніколи не робіть так:
Навпаки - будь ласка, в блоці може бути скільки завгодно рядків, але в рядку блоків бути не може. Це просто потрібно запам'ятати.
Далі, коли я буду вас знайомити з черговим тегом, я буду позначати - блоковий це елемент або рядковий. Це дуже важливе поняття, яке потрібно зрозуміти і запам'ятати, так як не всі малі на перший погляд елементи є рядками в дійсності. Яскравий приклад - заголовки виду H1, H2, H3 - це блокові елементи, а не малі (більш того - в них можна поміщати тільки рядкові елементи, і ні в якому разі не можна поміщати блоки), але про це ми докладніше поговоримо в наступній статті.
Якщо ми хочемо тимчасово приховати блоки з текстом "Привіт!" і "Поки!", можна зробити так:
І ще запам'ятайте одне золоте правило: в HTML будь-яке слово, або рядок повинен бути обов'язково позначена яким-небудь тегом. Це важливо!