Якщо ви прагнете стати веб-розробником, то навчання HTML є першим і необхідним кроком. HTML (HyperText Markup Language) – це основа, на якій будується більшість веб-сторінок.
HTML включає в себе різні складові, такі як теги, атрибути та елементи. Тут ми зосередимося на тегах HTML. Ці теги, подібно до команд, вказують браузеру, як відображати контент, визначаючи заголовки, абзаци, зображення та інші елементи. Іншими словами, теги HTML – це своєрідні ключові слова, що визначають структуру та вигляд вмісту.
Браузери обробляють HTML теги зверху вниз. Кількість тегів на веб-сторінці не обмежена.
- Теги HTML завжди поміщаються в кутові дужки < >.
- Кожен тег має своє призначення.
- Більшість тегів складаються з відкриваючого <tag> та закриваючого </tag> тегів.
Розрізнення між тегами, елементами та атрибутами HTML
Часто терміни “тег” та “елемент” HTML використовуються як синоніми, але технічно вони відрізняються. Теги визначають елементи, обгортаючи вміст відповідними відкриваючими та закриваючими тегами.
Приклад елемента HTML:
<p>Це приклад абзацу</p>
<p> – це приклад тегу HTML.
Атрибути HTML надають додаткову інформацію про елементи. Вони завжди розміщуються всередині відкриваючих тегів.
Приклад атрибута HTML:
<button id="submitBtn" class="main-button">Натисніть</button>
Найважливіші HTML теги, які потрібно знати
HTML як мова розмітки постійно розвивається з моменту її створення Тімом Бернерсом-Лі в 1993 році. Перша версія включала лише 18 тегів. З кожним оновленням, зокрема з HTML5 у 2014 році, додаються нові теги. HTML5, наприклад, ввів семантичні теги, такі як <article>, <header> та <footer>, які чітко описують структуру контенту. На сьогодні існує понад 100 HTML тегів. Розглянемо деякі з найпоширеніших:
<!DOCTYPE>
Технічно, <!DOCTYPE> – це не тег, а декларація, яка вказує браузеру на тип документу. В HTML5 це оголошується наступним чином:
<!DOCTYPE html>
Або:
<!doctype html>
Примітка: Оголошення не має закриваючого тега і не чутливе до регістру.
<html> </html>
Тег <html> </html> розташовується після <!DOCTYPE> і визначає корінь HTML-документа. Всі інші елементи мають бути вкладені всередину нього.
Приклад:
<html>Вміст</html>
<head> </head>
Розділ <head> містить метадані про веб-сторінку. Він вкладений в тег <html> та не відображається безпосередньо на сторінці. Сюди входять такі теги, як <title>, що визначає заголовок сторінки, інформацію про автора та інші.
Синтаксис тегу <head>:
<head>...</head>
<title> </title>
Тег <title> визначає назву веб-сторінки, яка з’являється на вкладці браузера або в заголовку вікна. Він завжди розміщується всередині <head>.
Приклад:
<title>HTML Теги для початківців</title>
В контексті <head> це виглядає так:
<head> <title>HTML Теги для початківців</title> </head>
<body> </body>
Тег <body> </body> містить весь видимий вміст веб-сторінки: текст, зображення, відео, посилання та інше. В межах тегу <body> розташовуються такі теги, як <p> (абзац), <a> (посилання), <strong> (жирний текст) та <ol> (впорядкований список).
Синтаксис тегу <body>:
<body>Вміст</body>
Теги <h1> – <h6>
В HTML доступно 6 рівнів заголовків, від <h1> (найбільший) до <h6> (найменший). Вони використовуються для структурування тексту на сторінці.
Приклад використання:
<h1>Заголовок 1</h1> <h2>Заголовок 2</h2> <h3>Заголовок 3</h3> <h4>Заголовок 4</h4> <h5>Заголовок 5</h5> <h6>Заголовок 6</h6>
Заголовки <h1> – <h6> розташовані всередині тегу <body>.
Приклад <h1>:
<body> <h1>Заголовок першого рівня</h1> </body>
<p> </p>
Тег <p> (абзац) використовується для структурування тексту в окремі абзаци. Натискання “Enter” в редакторі коду не створить новий абзац, для цього потрібно використовувати кілька тегів <p>. Теги <p> повинні бути вкладені в <body>.
Синтаксис тегу абзацу:
<p>...Вміст абзацу...</p>
Приклад чотирьох абзаців:
<body> <p>Вміст першого абзацу.</p> <p>Вміст другого абзацу.</p> <p>Вміст третього абзацу.</p> <p>Вміст четвертого абзацу.</p> </body>
<b> </b>
Тег <b> (жирний) виділяє текст жирним шрифтом. Він може використовуватись всередині заголовків або абзаців.
Приклад:
<b>Жирний текст</b>
Приклад з заголовком:
<h1>Звичайний текст, <b>жирний текст</b> і звичайний текст </h1>
<i> </i>
Тег <i> (курсив) виділяє текст курсивом.
Приклад:
<i>Текст курсивом</i>
<u> </u>
Тег <u> (підкреслення) підкреслює текст.
Приклад:
<u>Підкреслений текст</u>
<center> </center>
Тег <center> використовується для вирівнювання вмісту по центру. Зараз він вважається застарілим, тому варто користуватися CSS для стилізації елементів.
Приклад:
<center> <h2>Вирівняний по центру заголовок</h2> </center>
<span> </span>
Тег <span> – це вбудований контейнер, який не має стилю за замовчуванням. Його використовують для групування та стилізації текстових елементів.
Приклад використання в заголовку:
<h2>Вивчай HTML <span>з професіоналами</span> та будь готовий до ринку праці</h2>
Приклад використання в абзаці:
<p>Вивчай HTML <span>з професіоналами</span> та будь готовий до ринку праці</p>
<div> </div>
Тег <div> (роздільник) дозволяє групувати інші HTML теги. Йому можна задати клас для стилізації за допомогою CSS.
Приклад:
<div> <h1>Вивчай HTML</h1> <h2>HTML Теги</h2> <p>HTML є мовою розмітки...</p> </div>
<em> </em>
Тег <em> (наголос) виділяє текст курсивом. Він використовується для підкреслення певних слів у тексті.
Приклад:
<p>Зустріч розпочнеться о <em>08:00</em>, будь ласка, не запізнюйтесь</p>
<sup> </sup>
Тег <sup> (верхній індекс) дозволяє розміщувати текст над іншими елементами, наприклад, для представлення математичних формул.
Приклад:
<H1>Компанія <sup>TM</sup> Харвіс </H1>
<sub> </sub>
Тег <sub> (нижній індекс) протилежний до <sup> і відображає текст під рядком. Наприклад, для хімічних формул.
Приклад:
Пам'ятайте, що H <sub>2</sub> O є хімічною формулою води
<br/>
Тег <br/> створює розрив рядка. Весь текст після нього починається з нового рядка. Це самозакриваючий тег.
Приклад:
<p>HTML – це скорочення від Hypertext Markup Language <br> Точиться дискусія, чи є це мовою програмування, чи ні <br> Проте не можна недооцінювати її значення <br> HTML використовується у понад 95% сучасних вебсайтів </p>
<ol> </ol> та <li> </li>
Тег <ol> (впорядкований список) використовується разом з тегом <li> (елемент списку) для створення нумерованих списків.
Приклад:
<ol> <li>Азія</li> <li>Африка</li> <li>Європа</li> </ol>
У браузері цей код відобразиться як нумерований список.
<img src=””/>
Тег <img src=””/> використовується для вставки зображень. Це самозакриваючий тег.
Приклад:
<img src="https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png"/>
Вміст в лапках представляє URL-адресу зображення.
Підсумок
Існує понад 100 HTML тегів, але наведені вище є основними для початківців. HTML підтримується більшістю редакторів коду, тому ви можете бути впевнені, що ніколи не помилитеся, починаючи навчання.