В цьому уроці ми розберемо основні елементи для форматування та групування тексту.
В HTML є два типи елементів: блокові та рядкові.
Блокові елементи використовуються для організації контенту на сторінці. Вони створюють прямокутні блоки, які займають всю доступну ширину на сторінці і починаються з нового рядка. Вони дозволяють створювати розділи та групи контенту, такі як заголовки, абзаци тощо. Блокові елементи можуть містити інші блокові, а також рядкові елементи.
Рядкові елементи, навпаки, використовуються для створення контенту всередині блокових елементів і не створюють новий рядок. Вони відображаються всередині блокових елементів і дозволяють додавати до тексту стилі та форматування, такі як жирний, курсивний шрифт тощо.
Нижче приведений приклад із використанням блокових (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>) та рядкових (<strong>, <em>, <br>) тегів.
А тепер детальніше про кожний елемент.
h1, h2, h3, h4, h5, h6 – це блочні елементи, які використовуються для створення заголовків на сторінці. h1 – це найбільший заголовок, а h6, відповідно, – найменший. Зазвичай на сторінці використовуються не всі заголовки, а лише кілька, щоб логічно розділити сторінку на секції та покращити її структуру.
p – це блочний елемент, який використовується для створення тексту, який відображатиметься у вигляді абзаців. Щоразу, коли ви бажаєте створити новий абзац, потрібно використовувати цей тег.
strong – це рядковий елемент, який використовується для виділення тексту, який має бути особливо важливим. Візуально цей текст зазвичай відображається жирним шрифтом.
em – це рядковий елемент, який використовується для виділення тексту, який має бути акцентованим. Візуально цей текст зазвичай відображається курсивом.
br – це рядковий елемент, який використовується для створення переносу рядку, тобто переходу тексту на новий рядок без створення нового абзацу. До речі, цей тег, на відміну від інших, не має тегу, що закривається.
Тепер розглянемо другу половину цих елементів: блокові теги <header>, <footer>, <nav>, <section>, <div> та рядковий тег <span>. Нижче приведене зображення веб-сторінки та теги, в які були заключені блоки сторінки.
Знову детальніше про кожний елемент.
Почнемо із семантичних елементів. Це елементи HTML, які використовуються для опису структури вмісту веб-сторінки, позначаючи значення та призначення кожного елемента для браузера та пошукових систем, тим самим відокремлюючи веб-сторінку на більш логічні блоки. Вони дозволяють розробникам створювати більш зрозумілий код, що легко читається, а також підвищують доступність і SEO-оптимізацію сайту. В прикладі використовуються чотири найпоширеніші семантичні елементи – <header>, <nav>, <section>, <footer>.
Елемент header використовується для визначення верхньої частини веб-сторінки, яка зазвичай містить заголовок, логотип, пошукову форму та інші важливі елементи.
Елемент nav використовується для визначення блоку навігації на веб-сторінці. Він містить посилання на інші сторінки сайту або на окремі розділи.
Елемент section використовується для групування пов'язаного контенту. Один з основних прикладів використання даного елементу полягає в тому, щоб розділити сторінку на розділи, наприклад: "Про нас", "Послуги", "Контакти".
Елемент footer використовується для визначення нижньої частини веб-сторінки, яка зазвичай містить інформацію про автора сторінки, посилання на соціальні мережі, копірайт та інші елементи.
Ще один елемент, зазначений в прикладі, це елемент div. Він не має семантичного значення. Елемент div є одним з найбільш поширених елементів в HTML, і він зазвичай використовується як блок контейнер для групування і оформлення інших елементів. Основне призначення елементу div полягає в тому, щоб допомогти в створенні логічних блоків вмісту із стилістичним оформленням. У вищезазначеному прикладі даний елемент групує елементи секції, де йде мова про послуги. Кожна послуга знаходиться в окремому контейнері, завдяки чому можна застосовувати різні стилі, або просто згрупувати для поліпшення читаності коду.
Щодо елементу span. В прикладі в секції з контактами можна побачити номер телефону, виділений іншим кольором. Для цього був застосований саме цей елемент: <span style=”color: brown”>095 95 171 08</span>. Таким чином, елемент span використовується для відображення, що важливо, невеликого фрагменту тексту або контенту в межах іншого елементу, зазвичай для зміни його стилю.
В прикладі використані усі елементи, які були розглянуті в блоці із теорією. За винятком елементів h4-h6, які, як було зазначено, зазвичай в повному складі на веб-сторінці не застосовуються.
В прикладі сайт розподілений на семантичні блоки — із навігацією, заголовком, основною секцією з контентом та підвалом. Основна секція з контентом містить блоки "Послуги", "Про нас" та "Зв'язок з нами". В блоці із переліком послуг для перенесення кожної послуги на новий рядок використовується елемент br. В наступному уроці він буде замінений на елементи списку.
В блоці із заголовком сайту продемонстроване використання елементів strong, em та span. До елементу span застосований певний стиль: в ньому присутній атрибут style із властивістю, яка зменшує жирність шрифту. Детальніше про застосування стилів на сайті буде розглянуто в одному з наступних уроців.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
Таким чином, ми розібралися із основами групування та форматування тексту на веб-сторінці.