1. Заголовки
HTML надає багато тегів для форматування і структурування текстового контенту, зображень, посилань та списків. Основні HTML-теги дозволяють створити легко читабельну та логічно організовану сторінку, яка виглядає привабливо і зручна для сприйняття. Розглянемо найбільш популярні базові теги та їх призначення.
Заголовки (або header) використовуються для позначення різних рівнів заголовків на сторінці. HTML надає шість рівнів заголовків — від <h1> до <h6>, де <h1> — це найкрупніший і важливий заголовок, а <h6> — найменший.
<h1>Основний заголовок сторінки</h1>
<h2>Підзаголовок першого рівня</h2>
<h3>Підзаголовок другого рівня</h3>
...
<h6>Найменший заголовок</h6>
Використання заголовків допомагає структурувати текстову інформацію, а також покращує SEO (пошукову оптимізацію), оскільки пошукові системи враховують заголовки під час аналізу змісту сторінки.
2. Оформлення тексту
Для оформлення тексту HTML пропонує кілька простих, але потужних тегів.
Параграфи/Абзаци
Тепер, коли ми познайомилися із заголовками, час звернути увагу на текст. Параграфи в HTML створюються з використанням тега <p>. Це як у ваших улюблених текстових редакторах, де ви тиснете "Enter", щоб почати новий абзац. Ось приклад:
<p>Це перший параграф на нашій сторінці, і він розповість вам трохи більше про нашу тему.</p>
<p>А це вже другий параграф, бо «першого» інколи недостатньо для передачі всіх думок!</p>
Текстові блоки
Не забуваємо і про <span> та <div>. <span> — це ваші скромні помічники для стилізації текстових фрагментів в ході HTML-коду, а ось <div> — справжній чемпіон для створення блоків і контейнерів.
<div>Цей блок може містити багато чого цікавого!</div>
<span>А цей текст може бути виділений за кольором або шрифтом.</span>
Жирний текст
Жирний текст — <b>: Тег <b> виділяє текст жирним шрифтом. Цей тег часто використовується для підкреслення важливості окремих слів або фраз.
<p>Це <b>важливий текст</b>, який привертає увагу.</p>
Курсивний текст
Курсив — <i>: Тег <i> робить текст курсивом. Він підходить для виділення цитат, іноземних слів чи інших елементів, які потребують акценту.
<p>Це текст з курсивом: <i>приклад курсивного тексту</i>.</p>
3. Зображення
Для додавання зображень на сторінку використовується тег <img>. Цей тег є одиночним, і для його роботи необхідно вказати шлях до зображення за допомогою атрибута src. Також важливо додати опис зображення за допомогою атрибута alt (альтернативний текст), щоб користувачі з обмеженими можливостями чи при проблемах із завантаженням зображення могли зрозуміти, що мало бути на картинці.
<img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e"
src="https://cdn.javarush.com/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg"" alt="Опис зображення">
<img src="image.jpg" alt="Опис зображення">
Інші корисні атрибути <img>:
width— ширина зображення (наприклад,width="200").height— висота зображення (наприклад,height="150").
Приклад з атрибутами width і height:
<img data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e"
src="https://cdn.javarush.com/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="Опис зображення" width="200" height="150">
<img src="http://google.com/image.jpg" alt="Опис зображення" width="200" height="150">
4. Гіперпосилання
Посилання — важливий елемент HTML, який дозволяє користувачам переходити на інші сторінки чи ресурси. Посилання створюються за допомогою тега <a>, де ключовим атрибутом є href, який вказує URL призначення. 'A' тут означає 'anchor' (якір), адже посиланню потрібно закріпитися в певній точці в ієрархії документа:
<a href="https://example.com">Перейти на приклад сайту</a>
Корисні атрибути посилання:
target="_blank"— відкриває посилання в новій вкладці.title="Підказка"— додає спливаючу підказку при наведенні на посилання.
Приклад посилання з додатковими атрибутами:
<a href="https://example.com" target="_blank" title="Відкриється в новій вкладці">Відвідайте наш сайт</a>
5. Списки
Списки допомагають організувати інформацію в зручні для сприйняття блоки. HTML підтримує два типи списків:
Список з крапками
Маркірований список (невпорядкований) — <ul>: Елементи в такому списку позначені маркерами (крапками).
<ul>
<li>Перший елемент списку</li>
<li>Другий елемент списку</li>
<li>Третій елемент списку</li>
</ul>
Список з числами
Нумерований список (впорядкований) — <ol>: Елементи цього списку автоматично нумеруються.
<ol>
<li>Перший елемент списку</li>
<li>Другий елемент списку</li>
<li>Третій елемент списку</li>
</ol>
Елементи у списках створюються за допомогою тега <li>, що розміщується всередині <ul> або <ol>. Списки широко застосовуються для оформлення меню, послідовностей дій, переліків та інших структурованих даних.
6. Приклад використання всіх базових тегів
Тепер зберемо всі описані теги в один HTML-фрагмент:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Приклад сторінки з базовими HTML-тегами</title>
</head>
<body>
<h1>Заголовок сторінки</h1>
<h2>Підзаголовок</h2>
<p>Це приклад абзацу тексту, в якому є <b>жирний текст</b> і <i>курсивний текст</i>.</p>
<h3>Картинка</h3>
<img data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e"
src="https://cdn.javarush.com/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="Опис зображення" width="200" height="150">
<h3>Посилання</h3>
<p>Ось <a href="https://example.com" target="_blank" title="Приклад сайту">посилання на зовнішній сайт</a>.</p>
<h3>Приклад маркованого списку</h3>
<ul>
<li>Перший елемент</li>
<li>Другий елемент</li>
<li>Третій елемент</li>
</ul>
<h3>Приклад нумерованого списку</h3>
<ol>
<li>Перший елемент</li>
<li>Другий елемент</li>
<li>Третій елемент</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Приклад сторінки з базовими HTML-тегами</title>
</head>
<body>
<h1>Заголовок сторінки</h1>
<h2>Підзаголовок</h2>
<p>Це приклад абзацу тексту, в якому є <b>жирний текст</b> і <i>курсивний текст</i>.</p>
<h3>Картинка</h3>
<img src="image.jpg" alt="Приклад зображення" width="200" height="150">
<h3>Посилання</h3>
<p>Ось <a href="https://example.com" target="_blank" title="Приклад сайту">посилання на зовнішній сайт</a>.</p>
<h3>Приклад маркованого списку</h3>
<ul>
<li>Перший елемент</li>
<li>Другий елемент</li>
<li>Третій елемент</li>
</ul>
<h3>Приклад нумерованого списку</h3>
<ol>
<li>Перший елемент</li>
<li>Другий елемент</li>
<li>Третій елемент</li>
</ol>
</body>
</html>
Висновок
Тепер, коли у вас є уявлення про те, як використовувати основні HTML-теги, ви можете почати експериментувати з їхньою комбінацією для створення більш складних сторінок. Спробуйте створити свою власну HTML-сторінку із заголовком, кількома параграфами та зображенням, яке буде слугувати посиланням на інший ресурс.
У світі HTML знання тегів — це лише початок. Це як знати, де на клавіатурі знаходяться улюблені клавіші. У наступних лекціях ми розглянемо CSS, який допоможе нам стилізувати ці елементи й надати їм форми, що відповідає нашій задумці. А поки продовжуйте експериментувати й запамʼятайте, що вислів «зазирни під капот» — чудовий спосіб описати роботу з HTML.
На цьому опустимо завісу нашої невеликої, але насиченої лекції. Сподіваюся, ви зрозуміли, що HTML — це серце ваших веб-сторінок. Тепер ви знаєте, як зробити перші кроки в веб-розробці: написати код, який зрозуміє браузер!
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ