Контентні теги

Заголовки: h1 — h6

Заголовки — головний спосіб структурування інформації на сторінці. HTML надає шість рівнів заголовків: від <h1> до <h6>. На практиці зазвичай вистачає 3–4 рівнів навіть для складних сторінок.

Правила використання

• <h1> — головний заголовок сторінки, має бути лише один на сторінку. Він інтенсивно індексується пошуковими системами.
• Рівні йдуть послідовно: h1 → h2 → h3 → h4. Не можна пропускати рівні (наприклад, одразу після h1 ставити h4).
• Заголовки одного рівня можуть повторюватися скільки завгодно разів.
• Навіть якщо дизайнер не намалював головний заголовок — все одно зверстайте <h1> і сховайте його візуально через CSS.

Абзаци: <p>

Тег <p> (paragraph) розмічає фрагмент тексту, об'єднаний спільним змістом. Назви розділів або рубрик абзацом верстати не слід — для них є заголовки.

Важливі нюанси

• Тег <p> сам по собі не додає відступу — відступи створюються стилями браузера за замовчуванням. У реальному макеті між абзацами може взагалі не бути відстані.
• Якщо абзац цільний, залишайте його в одному рядку коду (переноси стосуються лише ширини вікна редактора).
• Оформлення відкриваючого і закриваючого тегів має бути однотипним: або обидва на окремих рядках, або обидва на одному рядку з текстом.

Міжрядковий інтервал: line-height

CSS-властивість line-height задає відстань між рядками тексту.

Абсолютне значення (у пікселях)

p {
  line-height: 24px;
}

Міжрядковий інтервал фіксується жорстко. Якщо розмір шрифту зміниться — інтервал залишиться тим самим, і текст може виглядати «злиплим» або занадто розрідженим.

Відносне значення (без одиниць виміру)

Відносна одиниця — це частка від розміру шрифту. Записується без одиниць виміру:

p {
  line-height: 1.5;
}

Якщо font-size: 16px, то line-height: 1.5 = 16 × 1.5 = 24px.

Перевага відносних одиниць: при будь-якій зміні розміру шрифту line-height перераховується автоматично, і візуально кількість «повітря» між рядками залишається пропорційною.

Побачити, у що браузер перерахував значення, можна на вкладці Computed у DevTools.

Списки: <ol>, <ul>, <li>

Для розмітки переліків використовуються теги списків. Кожен елемент списку обгортається тегом <li> (list item).

Два типи списків

Правила вкладеності

• Усередині <ol> або <ul> можуть бути лише теги <li> — жодних інших тегів безпосередньо всередині списку.
• Усередині <li> можна використовувати будь-які теги: абзаци, зображення, таблиці, інші списки тощо.
• Вкладений список розміщується всередині тегу <li> батьківського списку.

Стилізація маркерів: list-style-type

CSS-властивість list-style-type змінює тип маркера або нумерації:

ol {
  list-style-type: disc;  /* чорний кружечок замість цифр */
}

Популярні значення: disc, circle, square, decimal, lower-alpha, none. Повний перелік — у довіднику MDN: list-style-type.

Для чого потрібна семантика списків

Скрін-рідери (програми для незрячих) озвучують тип списку: «упорядкований список, 5 пунктів» або «неупорядкований список». Коректна розмітка робить сайт доступним для всіх користувачів і підвищує позицію в пошуковій видачі.

Зображення: <img>

Тег <img> — одиночний (без закриваючої частини), вставляє зображення на сторінку. Має два обов'язкові атрибути.

Атрибут src

src (source) — шлях до зображення. Може бути абсолютним (URL з інтернету) або відносним (шлях до локального файлу).

<img src="images/photo.jpg" alt="Опис зображення">

Атрибут alt

alt (alternative text) — альтернативний текст. Він потрібен для трьох цілей:

1. Якщо зображення не завантажиться — браузер покаже текст з alt замість картинки.
2. Для пошукових систем — пошуковики не «бачать» зображення, вони індексують значення alt і використовують його у пошуку по зображеннях.
3. Для скрін-рідерів — незрячі користувачі чують опис зображення, коли фокус потрапляє на нього.

Атрибут title

Універсальний атрибут для будь-якого тегу. При наведенні курсора з'являється спливаюча підказка. Корисно для іконкових інтерфейсів, де не завжди зрозуміло, що робить кнопка.

Зображення з підписом: <figure> і <figcaption>

Якщо зображення має пояснювальний підпис — використовуйте обгортку <figure> та тег підпису <figcaption>.

<figure>
  <img src="photo.jpg" alt="Опис">
  <figcaption>Підпис до зображення</figcaption>
</figure>

Особливості

• <figure> — семантична обгортка, що вказує браузеру: тут пов'язаний з контентом медіаелемент (картинка, відео, код тощо).
• Усередині <figure> може бути лише один <figcaption>.
• <figcaption> є необов'язковим — його може не бути.
• <figure> — це не картинка. Контентне зображення — лише <img>.
• У тексті не слід посилатися на місцеположення figure («як показано на рисунку вище»). Натомість використовуйте номерні посилання («рисунок 1»), щоб при переміщенні блоку логіка не порушувалась.

Обтікання тексту: float

CSS-властивість float змушує елемент «плавати» до лівого або правого краю, а текст — обтікати його з протилежного боку.

figure {
  float: left;
}

Якщо картинка обгорнута в <figure> — обтікати потрібно саме figure (найзовнішній батьківський тег).

Внутрішні відступи: padding

Властивість padding задає відступи від меж елемента всередину, до його вмісту. Це аналог полів у документі — відстань від краю аркуша до тексту.

Підробні властивості

Скорочений запис

Рамка: border

Рамка (border) знаходиться зовні від padding. За замовчуванням вона невидима у всіх елементів, але доступна для стилізації.

Три складові рамки

Кожна з цих властивостей має 4 підвластивості для окремих сторін (наприклад, border-top-width, border-left-style тощо).

Скорочений запис

Якщо всі 4 сторони однакові, використовуйте:

figure {
  border: 2px solid #ddd;  /* товщина стиль колір */
  padding: 15px;
}

Зовнішні відступи: margin

Властивість margin задає відступи зовні від елемента. Синтаксис і скорочений запис — абсолютно такі самі, як у padding.

figure {
  margin: 0 30px 25px 0;  /* верх право низ лів */
}

Блочна модель: загальна картина

У DevTools: голубий — контент, зелений — padding, жовтий — border, оранжевий — margin.

Інлайнова розмітка: <span>

Тег <span> — універсальний інлайновий контейнер без власного семантичного значення. Використовується для стилізації окремих слів або словосполучень.

Нові типи селекторів

Селектор за тегом (вже відомий)

p { color: #333; }

Застосовується до всіх елементів з таким тегом.

Селектор за ідентифікатором: #id

<p id="intro">Текст</p>

#intro { color: blue; }

• Атрибут id — універсальний, можна задати будь-якому тегу.
• Значення id має бути унікальним на сторінці — два елементи з однаковим id це невалідний код.
• У CSS селектор починається з # (решітка).

Селектор за класом: .class

<span class="book-name">Кобзар</span>

.book-name { font-weight: bold; }

• Клас може повторюватись у необмеженій кількості елементів.
• У CSS селектор починається з . (крапка).
• Один елемент може мати кілька класів, перерахованих через пробіл: class="book-name primary".
• Називайте класи за призначенням елемента, а не за його виглядом.

Порівняння селекторів

Форматування коду

Дотримуйтесь однакового стилю оформлення:

• Вкладені теги мають мати відступ 2 пробіли відносно батьківського тегу.
• У редакторах коду та пісочницях (CodePen тощо) є функція автоформатування — використовуйте її перед перевіркою.
• Оформлення відкриваючого і закриваючого тегів має бути послідовним.

Мультирядкове редагування

Два способи одночасного редагування кількох рядків у редакторі:

• Cmd (Mac) / Ctrl (Windows) + клік — клікнути у потрібні рядки, курсор розширюється на кілька рядків одразу.
• Alt/Option + перетягування — «розтягнути» курсор вертикально на послідовні рядки (прямокутне виділення).

Поради початківцям

• Не бійтеся ставити запитання. Дурних запитань не існує. Будь-яке запитання веде до розуміння.
• Ставте конкретні запитання. Замість «нічого не зрозуміло» — «що означає ось ця властивість?».
• Не списуйте. Рішення, зроблене іншою людиною, не відкладається у вашій голові.
• Забудьте про оптимізацію на найближчі два роки. Не економте рядки коду. Якщо потрібно задати лише 2 відступи — пишіть 2 підробні властивості, а не скорочений запис.
• Звикайте до оформлення коду одразу. Вся розробка будується на дотриманні стайл-гайдів.
• Доходьте до рішення самостійно. Наставник лише м'яко спрямовує підказками — і це правильний підхід.

Підсумки

Що розібрали на цій лекції:

1. Заголовки <h1>–<h6> — рівні та правила використання
2. Абзаци <p> — розмітка текстових фрагментів
3. Списки <ol>, <ul>, <li> — упорядковані та неупорядковані
4. Зображення <img> — атрибути src, alt, title
5. Зображення з підписом <figure> + <figcaption>
6. CSS-властивості блочної моделі: padding, border, margin
7. line-height — абсолютні та відносні значення
8. list-style-type — стилізація маркерів списків
9. float — обтікання тексту (і лише обтікання!)
10. Селектор за id (#) та селектор за класом (.)
11. Тег <span> — інлайнова стилізація тексту без семантичного значення