Відразу зазначу, що всі елементи для форматування тексту розглянуті в даній статті (крім br) є парними. Тобто для обрамлення вмісту тегом повинен бути присутнім як відкриває тег. так і закриває. приклад:
Формування структури тексту (блокові елементи). Теги заголовків і абзаців.
Теги h1-h6 відповідають за виділення тексту у вигляді заголовків. Більш докладно про їх семантічеком вплив і важливість для побудови логічної структури сторінки для пошукових систем написано тут.
Якщо говорити про них коротко, то заголовки сторінки мають ключову роль у внутрішній оптимізації сторінки для пошукових систем. У зв'язку з цим формулювання заголовків на сторінці повинні бути максимально наближені до ключових запитах за якими Ви збираєтеся просувати статтю в пошуковій видачі.
Візуально заголовки виділяються жирним шрифтом і великим розміром шрифту щодо решти тексту.
Тегp відповідає за виділення абзаців. Разом з тегами заголовків тегp є блоковим елементом оформлення тексту. тому при його використанні кожний наступний абзац починається з нового рядка, чого не відбувається при використанні малих елементів.
HTML теги для розмітки тексту (рядкові елементи)
Використання декількох тегів одночасно
Ми ознайомилися з основними тегами для оформлення тексту. Їх можна застосовувати не тільки по-окремо а й один всередині іншого, головне при цьому пам'ятати основний принцип вкладеності тегів - тег, який був відкритий першим повинен бути закритий останнім. Тобто:
Теги знаходяться всередині інших тегів формують порядок вкладеності. Так, в розглянутому прикладі тег i має другий рівень вкладеності щодо тега p.
ЗВЕРНІТЬ УВАГУ! Використовувати рядкові елементи всередині блокового дозволено, в той час як блокові всередині строчних- немає. Хоч браузер і відобразить всі коректно, якщо Ви, наприклад, використовуєте тег p всередині тега b. Це буде не вірно з точки зору документації html. Тобишь такий код буде містити помилку і Ви це можете спокійно перевірити скориставшись будь-яким сервісом валідації html коду.
Питання для самоконтролю:
- Які теги форматування тексту є блоковими, а які малими? У чому між ними різниця?
- Які існують способи виділення тексту жирним шрифтом? У чому між ними різниця?
- Які існують способи виділення тексту курсивом? У чому між ними різниця?
- Як правильно переносити рядки в html?
- Як формується порядок вкладеності тегів?
Оцінок: 1 (середня 5 з 5)