HTML коди – це наріжний камінь, на якому будується інтернет-контент, і так було протягом десятиліть.
У статті приведені деякі основні HTML-коди, які може використовувати кожен користувач WordPress при вводі даних на сайт.
Що таке HTML
HTML – мова розмітки тексту, але це означає, що це не є мова програмування.
HTML не дає вашому комп’ютеру команду запускати щось через скрипт. Він бере текст, який є на сторінці, і розмічає його певним чином.
Для розмітки HTML використовує набір структурних та семантичних елементів: дескрипторів. Дескриптори також часто називають “тегами”. Курсив, жирний шрифт, вирівнювання, розмір та інші теги допомагають створити відносно простий, але красиво оформлений документ.
HTML також дає вам можливість включати зображення та посилання.
HTML код досить легко читається. Проста HTML-сторінка може виглядати приблизно так:
<html>
<head>
<title>Тут буде заголовок веб-сторінки.</title>
</head>
<body>
<h1>Це заголовок сторінки, який бачать люди</h1>
<p>Контент</p>
<p>Більше контента</p>
<p>Ще більше контента</p>
<h2>Новая секціяя </h2>
<p><img src="https://mysite.ua/wp-content/uploads/2024/11/tagline-featured-image.jpg"></p>
<p><a href="https://mysite.ua/"> Посилання на блог про тему Divi </a></p>
</body>
</html>
При відображенні у браузері цей код виглядатиме приблизно так:
Як бачите, HTML не такий і складний. Насправді, навіть якщо ви ніколи раніше не бачили HTML код, ви можете зрозуміти, що означає кожен з цих тегів просто по контексту.
Розглянемо найпоширеніші базові теги HTML, які ви можете використовувати під час роботи в Інтернеті.
Абзац
Коли ви укладаєте текст у теги <p> – то ви вказуєте браузеру виділити текст окремим абзацом. Наприклад:
<p> Цей текст в окремому абзаці </p>
<p> І цей текст в окремому абзаці </p>
Результат:
Цей текст в окремому абзаці
І цей текст в окремому абзаці
Напівжирний текст (bold)
Коли ви укладаєте текст у теги <strong> – то ви вказуєте браузеру виділити текст напівжирним шрифтом.
Ви також можете використовувати просто <b> , але оскільки Google та інші пошукові системи віддають перевагу семантичному кодуванню, краще використовувати <strong>:
Приклад:
ви можете зробити <strong> текст напівжирним </strong>.Результат:
ви можете зробити текст напівжирним.
Курсив (italic)
Коли ви укладаєте текст у теги <em> – то ви вказуєте браузеру зробити текст курсивом. Для курсиву ви також можете використовувати тег <i> :
Приклад:
ви можете зробити <em> текст курсивом </em>.Результат:
ви можете зробити текст курсивом .
Заголовки
Ймовірно, це теги, що найчастіше використовуються з усього HTML. Використання <h1>, <h2>, <h3>, <h4>, <h5>, <h6> розділяє вміст на розділи.
Обов’язково використовуйте в ієрархічному порядку. Пошукові системи хочуть, щоб заголовки були вкладені. Тому використовуйте <h2> тільки під <h1>, а не під <h3>
На сторінці використовуйте лише один <h1>, Майте на увазі, що використання <h1> скидає вкладеність сторінки (або принаймні цього розділу сторінки).
Приклад:
<h2> H2 - тег заголовка, що найчастіше використовується. </h2>
Результат:
H2 – тег заголовка, що найчастіше використовується.
Всі заголовки для HTML-елементів на цій сторінці розміщені між тегами <h2>.
Зображення
Вставка зображень – одна з найкорисніших речей, які робить HTML. Все, що потрібно зробити, це вказати URL-адресу потрібного зображення і помістити єдиний <img src> (що позначає тег джерела зображення). Приблизно так:
<img src="https://koval.in.ua/wp-content/uploads/2025/12/tagline-featured-image.jpg" alt="Це зображення" >
Результат:
Зверніть увагу, що вам не потрібно закривати тег зображення.
Атрибут <alt> – це текст, який відображається, якщо зображення недоступне з якихось причин. Також цей текст індексується пошуковими системами. Завжди краще додавати альт-текст для зображень.
Посилання
Ви можете зробити з посиланнями і текст, і зображення. Потрібний елемент обрамляйте тегом <a href>, де <a> вказує, що це гіпертекстове посилання (URL), на яке ви посилаєтеся.
Приклад:
<a href="https://koval.in.ua/"> Посилання на сайт Олександра Коваля</a>Результат:
Посилання на сайт Олександра Коваля
Коли ви закриваєте посилання тегом </a>, то будь-який текст, який є між тегами <a> та </a>, буде текстом посилання і буде клікабельним. Якщо розмістите між тегами зображення – воно теж стане клікабельним.
Ви можете включити в посилання ряд атрибутів, наприклад target = “_blank”, який повідомляє браузеру відкривати посилання в новій вкладці.
Списки
Є два типи списків: нумеровані та ненумеровані. У нумерованому списки елементи маркуються числами 1, 2, 3 і так далі.
Ви обертаєте кожен список за допомогою тегів для ненумерованих <ul>, а для нумерованих списків <ol> відповідно. І кожен елемент списку має бути укладений у тег <ul>.
<ul>
<li> елемент списку</li>
</ul>
Приклад:
<ul>
<li>Це частина ненумерованого списку.</li>
<li>Це ще одна частина.</li>
</ul>
<ol>
<li>Це частина нумерованого списку</li>
<li><a href="https://divitheme.space">Це посилання у списку</a></li>
<li><strong>Це напівжирний текст</strong>, а це нормальний текст у списку.</li>
</ol>Результат:
- Це частина ненумерованого списку.
- Це ще одна частина.
- Це частина нумерованого списку
- Це посилання у списку
- Це напівжирний текст, а це нормальний текст у списку.
Цитати
Якщо вам знадобиться процитувати текст – на допомогу приходить <blockquote> . Просто оточіть будь-який текст тегом і все готове:
<blockquote>Цей текст оточений тегами Цитата.</blockquote>Результат:
Цей текст оточений тегами Цитата.
Куди вставляти HTML теги на сторінці
Якщо використовуєте класичний редактор
HTML теги можна додавати до редактора на вкладку “Текст” (див. скрін):
Якщо використовуєте редактор Гуттенберг
Для редактора Гуттенберг HTML теги можна додавати на вкладку “Текст” вибравши блок Custom HTML (див. скрін):
Якщо використовуєте конструктор сторінок Divi
Під час введення або редагування контенту під час використання конструктора Divi Builder HTML теги можна додавати до редактора на вкладку “Текст” (див. скрін):
