17 простих прикладів HTML-коду, які ви можете вивчити за 10 хвилин

Діджитал 26 вересня 2025

Незважаючи на те, що сучасні веб-сайти, як правило, створюються з дружніми інтерфейсами, корисно знати деякий базовий HTML. Якщо ви знаєте наступні 17 прикладів HTML-тегів (і деякі додаткові), ви можете створити базову веб-сторінку з нуля або налаштувати код, створений такою програмою, як WordPress.

Ми надали приклади коду HTML з виводом для більшості тегів. Якщо ви бажаєте побачити їх у дії, завантажте зразок файлу HTML наприкінці статті. Ви можете пограти з ним у текстовому редакторі і завантажити його в браузері, щоб побачити, що роблять ваші зміни.

1. <! DOCTYPE html>

Цей тег вам знадобиться на початку кожного HTML-документа, який ви створюєте. Це гарантує, що браузер знає, що він читає HTML, і що він очікує HTML5, останню версію.

Незважаючи на те, що це насправді не тег HTML, його все ж варто знати.

2. <html>

Це ще один тег, який повідомляє браузеру, що він читає HTML. Тег < html > йде відразу після теґу DOCTYPE, і ви закриваєте його тегом </html > у кінці вашого файла. Все інше у вашому документі йде між цими тегами.

3. < Голова >

Тег < head > починає заголовок вашого файла. Матеріал, який йде сюди, не відображається на вашій веб-сторінці. Замість цього він містить метадані для пошукових систем та інформацію для вашого браузера.

Для основних сторінок тег < head > буде містити ваш заголовок, і це все. Але є кілька інших речей, які ви можете включити, про які ми поговоримо трохи пізніше.

4. <title>

Цей тег встановлює заголовок вашої сторінки. Все, що вам потрібно зробити, це помістити свій заголовок в тег і закрити його наступним чином (я також включив теги заголовка):

<head> <title>My Website</title> </head>

Це назва, яку буде показано як заголовок вкладки під час відкриття у переглядачі.

5. < мета >

Як і тег заголовка, метадані розміщуються в області заголовка вашої сторінки. Метадані в основному використовуються пошуковими системами і являють собою інформацію про те, що знаходиться на вашій сторінці. Існує кілька різних метаполів, але деякі з них найбільш часто використовуються:

опис - основний опис вашої сторінки.
ключові слова - вибір ключових слів, застосовних до вашої сторінки.
автор - автор вашої сторінки.
viewport - тег, який гарантує, що ваша сторінка добре виглядає на всіх пристроях.

Ось приклад, який може відноситися до цієї сторінки:

Тег «viewport» завжди повинен мати як вміст «width = device-width, initial-scale = 1.0», щоб ваша сторінка добре відображалася на мобільних і настільних пристроях.

6. < тіло >

Після закриття розділу заголовка ви потрапляєте в тіло. Ви відкриєте його за допомогою теґу < body > і закриваєте його за допомогою теґу </body >. Це відбувається прямо в кінці вашого файла, прямо перед тегом </html >.

Весь вміст вашої веб-сторінки знаходиться між цими тегами. Це так просто, як здається:

<body> Everything you want displayed on your page. </body>

7. <h1>

Тег < h1 > визначає заголовок першого рівня на вашій сторінці. Зазвичай це заголовок, і в ідеалі він повинен бути тільки один на кожній сторінці.

< h2 > визначає заголовки другого рівня, такі як заголовки розділів, < h3 > підзаголовки третього рівня тощо, аж до < h6 >. Наприклад, імена тегів у цій статті є заголовками другого рівня.

<h1>Big and Important Header</h1> <h2>Slightly Less Big Header</h2> <h3>Sub-Header</h3>

Результат:

Як ви можете бачити, вони стають менше на кожному рівні.

8. <p>

Тег абзацу починає новий абзац. Зазвичай це вставляє два перенесення рядка.

Подивіться, наприклад, на розрив між попереднім рядком і цим. Це тег < p >.

<p>Your first paragraph.</p> <p>Your second paragraph.</p>

Результат:

Ваш перший абзац.

Ваш другий абзац.

Ви також можете використовувати стилі CSS у своїх тегах абзацу, як цей, що змінює розмір тексту:

<p style=""font-size: 120%;"">20% larger text</p>

Результат:

20% більше тексту

Щоб дізнатися, як використовувати CSS для оформлення тексту, ознайомтеся з цими підручниками з HTML і CSS.

9. <br>

Тег розриву рядка вставляє один розрив рядка:

<p>The first line.<br> The second line (close to the first one).</p>

Результат:

Перший рядок рядка
(поряд з першим).

Так само працює тег < hr >. Це малює горизонтальну лінію на вашій сторінці і добре підходить для поділу розділів тексту.

10. <strong>

Цей тег визначає важливий текст. Загалом, це означає, що це буде сміливим. Однак можна використовувати CSS для відображення тексту < strong > по-іншому.

Проте ви можете сміливо використовувати < strong > для жирного тексту.

<strong>Very important things you want to say.</strong>

Результат:

Дуже важливі речі, які ви хочете сказати.

Якщо ви знайомі з тегом < b > для жирного тексту, ви все одно можете його використовувати. Немає ніяких гарантій, що він продовжить працювати в майбутніх версіях HTML, але зараз він працює.

11. <em>

Як і < b > і < strong >, < em > і < i > пов'язані між собою. Тег < em > ідентифікує виділений текст, що зазвичай означає, що його буде виділено курсивом. Знову ж таки, є ймовірність, що CSS змусить виділений текст відображатися по-іншому.

<em>An emphasized line.</em>

Результат:

Вибрана лінія.

Тег < i > все ще працює, але, знову ж таки, цілком можливо, що він буде застарілим у майбутніх версіях HTML.

12. <a>

Тег < a > або якір дозволяє створювати посилання. Просте посилання виглядає так:

Результат:

Перейти до

Атрибут «href» визначає місце призначення посилання. У багатьох випадках це буде інший веб-сайт. Це також може бути файл, наприклад, зображення або PDF.

Інші корисні атрибути включають «target» і «title». Атрибут target майже виключно використовується для відкриття посилання в новій вкладці або вікні, наприклад:

Результат:

Перейти до нової вкладки

Атрибут title створює спливаючу підказку. Наведіть курсор на посилання нижче, щоб побачити, як це працює:

<a href="/"//www..com/"" title=""This is a tool tip"">Hover over this to see the tool tip</a>

Результат:

Наведіть курсор на це, щоб побачити підказку

13. <img>

Якщо ви бажаєте вбудувати зображення на свою сторінку, вам слід використовувати тег зображення. Зазвичай ви будете використовувати його разом з атрибутом «src». Це вказує на джерело зображення, наприклад:

Результат:

Доступні інші атрибути, такі як «висота», «ширина» та «alt». Ось як це може виглядати:

Як і слід було очікувати, атрибути «height» і «width» встановлюють висоту і ширину зображення. В цілому, рекомендується встановити тільки один з них, щоб зображення масштабувалося правильно. Якщо ви використовуєте обидва, ви можете отримати розтягнуте або стиснуте зображення.

Тег «alt» повідомляє переглядачеві, який текст відображати, якщо зображення не може бути показано, і це гарна ідея для включення в будь-яке зображення. Якщо у когось особливо повільне з'єднання або старий браузер, він все одно може зрозуміти, що повинно бути на вашій сторінці.

14. <ol>

Тег впорядкованого списку дозволяє створити впорядкований список. Загалом, це означає, що ви отримаєте нумерований список. Кожен елемент у списку потребує тегів елемента списку (< li >), тому список буде виглядати так:

<ol> <li>First thing</li> <li>Second thing</li> <li>Third thing</li> </ol>

Результат:

Насамперед
Друга річ
Третє

У HTML5 можна використовувати < ol reversed >, щоб змінити порядок чисел. І ви можете встановити початкове значення з атрибутом start.

Атрибут type дозволяє вказати переглядачу, який тип символу використовується для елементів списку. Це може бути встановлено в «1», «A», «a», «I» або «i», встановлюючи список для відображення з вказаним символом наступним чином:

15. <ul>

Неупорядкований список набагато простіше, ніж його впорядкований аналог. Це просто маркований список.

<ul> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul>

Результат:

Перший предмет
Другий предмет
Третій пункт

Неупорядковані списки також мають атрибути «type», і ви можете встановити для нього «disc», «circle» або «square».

16. < стіл >

Хоча використання таблиць для форматування не вітається, у багатьох випадках вам слід використовувати рядки та стовпчики для відображення інформації на вашій сторінці. Для роботи таблиці потрібно декілька тегів. Ось приклад коду HTML:

<table> <tbody> <tr> <th>1st column</th> <th>2nd column</th> </tr> <tr> <td>Row 1, column 1</td> <td>Row 1, column 2</td> </tr> <td>Row 2, column 1</td> <td>Row 2, column 2</td> </tbody> </table>

Теґи < table > і </table > визначають початок і кінець таблиці. Тег < tbody > містить весь вміст таблиці.

Кожен рядок таблиці укладено у тег < tr >. Кожна комірка в кожному рядку знаходиться в тегах < ^ > для заголовків стовпчиків або теги < td > для даних стовпчиків. Вам потрібен один з них для кожного стовпчика в кожному рядку.

Результат:

1-ша колона	2-я колона
Рядок 1, стовпчик 1	Рядок 1, стовпчик 2
Ряд 2, стовпчик 1	Ряд 2, стовпчик 2

17. <blockquote>

Коли ви цитуєте інший сайт або людину і хочете, щоб цитата відрізнялася від решти вашого документа, використовуйте тег blockquote. Все, що вам потрібно зробити, це укласти цитату у відкриваючий і закриваючий теги блочної цитати:

<blockquote>The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.</blockquote>

Результат:

Мережа, як я її уявляв, ми ще не бачили. Майбутнє все ще набагато більше, ніж минуле.

Точне форматування, яке ви використовуєте, може залежати від користуваного вами браузера або CSS вашого сайту. Але тег залишається колишнім.

Вперед і HTML

За допомогою цих 17 прикладів HTML (і їх кількості) ви зможете створити простий веб-сайт. простого Щоб побачити, як зібрати їх всі разом, ви можете завантажити наш приклад HTML-сторінки. Відкрийте його в переглядачі, щоб побачити, як все це відбувається разом, або в текстовому редакторі, щоб побачити, як саме працює код.

Щоб отримати додаткові уроки HTML, спробуйте ці програми для мікронавчання для кодування