Важливо!!! Стаття про HTML теги оновлюватиметься! Ця версія статті створена чи оновлена 06.03.2025
HTML (HyperText Markup Language) є основою більшості сайтів. Він використовується для структурування та представлення змісту в Інтернеті. Кожен веб-розробник, від початківця до професіонала, має розуміти основи HTML, адже саме з них починається створення будь-якої веб-сторінки. В цій статті ми детально розглянемо HTML теги та атрибути — від базових до більш складних.
Основна задача статті — надати вам комплексний довідник, до якого ви зможете звертатися знову та знову, щоб згадати структуру та функціональні можливості HTML елементів та правильно використати їх в роботі. Тому продивляйтесь, зберігайте посилання та діліться ним з тими, кому може бути корисно.
Основи HTML
HTML документ складається з ряду тегів, які вказують браузеру, як відображати вміст. Кожен тег має своє специфічне призначення - від визначення заголовків сторінки до вставки зображень або створення посилань.
Що таке теги та атрибути?
Теги - це основні будівельні блоки HTML, які використовуються для створення елементів на сторінці. Вони оточують вміст і вказують на його тип або структуру. Кожен HTML тег міститься у кутових дужках, наприклад, <p> для абзаців або <img> для зображень.
Атрибути використовуються всередині тегів для надання додаткової інформації про елемент. Вони можуть вказувати на стиль, локацію файлу, розміри та інші дані, що впливають на відображення або поведінку елемента. Наприклад, атрибут src у тегу <img> вказує шлях до зображення, яке потрібно відобразити.
Базова структура HTML-документа
Кожен HTML-документ починається з декларації типу документа <!DOCTYPE html>, яка вказує версію HTML. Основний контент розміщується між тегами <html>, які визначають початок і кінець веб-сторінки. Всередині <html>, документ поділяється на дві основні частини: <head>, де міститься метаінформація та посилання на зовнішні ресурси, та <body>, який містить власне вміст сторінки, який відображається користувачам.
Також варто прочитати: Як кастомізувати контакт форми в WordPress із CSS
Зручний хостинг для ваших сайтів на WordPress
Так, це хвилинка реклами в тексті. Але корисної! Ну і мені хотілось би, щоб ви побачили :)
Шукаєте хороший хостинг для ваших сайтів на WordPress? Зверніть увагу на Host4Biz. Це надійний хостинг з сучасними серверами в Європі та українською командою.
А за промокодом MYHOST10 ви отримаєте знижку в 10% на першу оплату. Для цього реєструйтесь за посиланням та введіть код перед оплатою.
Огляд основних HTML тегів
HTML теги є фундаментом для створення структури веб-сторінок. Вони дозволяють браузерам інтерпретувати та відображати контент сторінки відповідно до його призначення: від заголовків та абзаців до зображень та посилань. У цьому розділі ми детально розглянемо ключові HTML теги, які використовуються для формування основ веб-дизайну. Для кожного тега ми надамо короткий опис, розберемо основні атрибути та продемонструємо приклади їх використання. Цей огляд допоможе вам з легкістю навігувати серед різноманіття HTML елементів та ефективно застосовувати їх у ваших проєктах.
Також читайте: Що таке ROI: формули, приклади та практичне застосування https://digitalowl.top/uk/scho-take-roi/
HTML теги для структури документа
<!DOCTYPE>
<!DOCTYPE> не є HTML тегом у звичайному розумінні; це декларація, яка повідомляє веб-браузеру версію HTML документа, що використовується. Ця декларація стоїть на самому початку HTML-документа, перед тегом <html>, і є важливою для забезпечення коректного відображення сторінки у різних браузерах.
Атрибути
<!DOCTYPE> не має атрибутів, оскільки це декларація, а не звичайний тег. Вона використовується без будь-яких додаткових параметрів.
Приклади використання
Для HTML5 декларація <!DOCTYPE> виглядає як:
<!DOCTYPE html>Ця декларація повинна бути першим рядком у будь-якому HTML-документі, щоб вказати, що документ використовує HTML5.
Особливості оформлення
Оскільки <!DOCTYPE> є декларацією, а не тегом, вона не впливає на оформлення сторінки і не має стилів. Її основна функція — забезпечити сумісність документа зі стандартами вебу, гарантуючи, що браузер інтерпретуватиме вміст сторінки правильно.
Також корисно прочитати: Паралакс-ефекти у WordPress: Як створити їх з CSS
Тег <a>
Тег <a>, відомий як якірний тег, використовується для створення посилань у документі HTML. Це один з найважливіших елементів вебу, який дозволяє користувачам переходити від одного ресурсу до іншого, відкривати документи або запускати веб-аплікації. За допомогою атрибутів можна налаштувати адресу посилання, відкриття посилання в новому вікні браузера та інші параметри.
Атрибути
href - вказує URL-адресу, на яку веде посилання.
target - визначає, де буде відкрито посилання (наприклад, в новій вкладці за допомогою _blank).
rel - визначає відносини між поточним і цільовим документами.
title - надає додаткову інформацію, яка відображається як підказка при наведенні курсору на посилання.
download - пропонує завантажити цільовий ресурс замість переходу за посиланням.
Приклади використання
<a href="https://example.com">Відвідайте наш сайт</a>
Створює посилання на сайт example.com.
<a href="document.pdf" download>Завантажити документ</a>
Пропонує завантажити файл document.pdf.
<a href="#section1">Перейти до розділу 1</a>
Створює посилання, яке прокручує сторінку до елемента з ідентифікатором section1.
Особливості оформлення
Тег <a> може бути стилізований за допомогою CSS. Можливе налаштування кольору тексту, підкреслення, поведінки при наведенні курсору та інших візуальних ефектів, які допомагають виділити посилання серед іншого тексту та забезпечити зручний інтерфейс користувача.
Тег <abbr>
Короткий опис
Тег <abbr> призначений для позначення абревіатур або скорочень, дозволяючи вказати повну форму або пояснення скорочення. Це поліпшує доступність та розуміння контенту, особливо коли сторінка містить велику кількість фахових термінів, абревіатур або скорочень.
Атрибути
title- основний атрибут, який використовується з цим тегом. Він містить повне значення абревіатури або скорочення. Цей атрибут важливий для забезпечення доступності, оскільки дозволяє користувачам зрозуміти значення скорочень.
Приклади використання
<abbr title="Hypertext Markup Language">HTML</abbr>При наведенні курсору миші на абревіатуру "HTML" відображається пояснення "Hypertext Markup Language".
Особливості оформлення
За замовчуванням, браузери можуть відображати абревіатури, оформлені за допомогою тега <abbr>, з підкресленням крапками, щоб візуально відрізняти їх від звичайного тексту. Однак за допомогою CSS можна змінити цю поведінку, наприклад, налаштувавши стиль підкреслення, колір або додавши інші візуальні ефекти для підвищення зрозумілості або візуальної привабливості абревіатур.
Тег <address>
Тег <address> використовується для вказівки контактної інформації автора/власника документа або статті, включаючи електронні адреси, посилання на соціальні мережі, фізичні адреси, або телефонні номери. Він допомагає візуально відокремити контактну інформацію від іншого тексту на сторінці, зазвичай відображаючись курсивом.
Атрибути:
Тег <address> не має спеціальних атрибутів, які були б унікальними саме для нього. Він підтримує загальні атрибути HTML.
Приклади використання:
<address> Зв'яжіться з нами по електронній пошті на <a href="mailto:[email protected]">[email protected]</a> або за телефоном <a href="tel:+380123456789">+380123456789</a>. </address>Особливості оформлення:
За замовчуванням, текст в <address> відображається курсивом. Однак за допомогою CSS можна адаптувати його відображення, змінивши шрифт, колір, або інші стилістичні характеристики для кращої інтеграції в дизайн веб-сторінки.
Тег <area>
Тег <area> визначає область всередині зображення-карти (карти зі зв'язками), яка є клікабельною. Це дозволяє створювати різні клікабельні області на одному зображенні, які можуть вести до різних цільових адрес.
Атрибути
Тег <area> підтримує декілька специфічних атрибутів:
shapeвизначає форму області (наприклад,rectдля прямокутника,circleдля кола,polyдля многоугольника).coordsвказує координати області відповідно до вибраної форми.hrefзадає URL, на який буде здійснено перехід при кліку на область.altвизначає альтернативний текст для області, що є важливим для доступності.targetвказує, де відкривати посилання (наприклад, в новій вкладці за допомогою_blank).
Приклади використання
<img src="planeta.png" usemap="#planetmap" alt="Планети"> <map name="planetmap"> <area shape="rect" coords="34,44,270,350" href="mercury.html" alt="Меркурій"> <area shape="circle" coords="288,180,60" href="venus.html" alt="Венера"> </map>Цей приклад демонструє створення карти зі зв'язками на зображенні, де визначено дві клікабельні області: прямокутник, який веде на сторінку про Меркурій, і коло, що веде на сторінку про Венеру.
Особливості оформлення
Тег <area> не впливає на візуальне оформлення документа, оскільки він використовується виключно для визначення клікабельних областей всередині зображення. Все візуальне оформлення здійснюється через зображення, до якого застосовано ці області.
Тег <article>
Тег <article> використовується для вміщення незалежного контенту, який має сенс окремо від решти веб-сторінки. Це може бути стаття в блозі, форумний пост, користувацький коментар або будь-який інший самостійний блок інформації. Використання <article> допомагає покращити структуру документа та його семантику, що сприятливо впливає на SEO.
Атрибути
Атрибути для <article> збігаються зі стандартними атрибутами HTML, такими як id, class, style та інші глобальні атрибути, які дозволяють налаштувати стилізацію та ідентифікацію елементів.
Приклади використання
<article> <h2>Заголовок статті</h2> <p>Текст статті...</p> <footer>Автор: <a href="profile.html">Ім'я Автора</a></footer> </article>Цей приклад показує структуру статті з заголовком, текстом та інформацією про автора внизу.
Особливості оформлення
Тег <article> сам по собі не вносить жодних візуальних змін в документ і слугує лише для семантичної організації контенту. Стилізація <article> та вміщених в нього елементів здійснюється через CSS.
Тег <aside>
Тег <aside> використовується для вміщення контенту, який є відокремленим від основного контенту сторінки, але при цьому має певне відношення до нього. Це може бути бічна панель, блок з посиланнями на схожі статті, реклама, віджети або інші елементи, які доповнюють головний контент.
Атрибути
<aside> підтримує стандартні глобальні атрибути HTML, такі як id, class, style, які дозволяють налаштовувати ідентифікацію та стилізацію елемента.
Приклади використання
<aside> <h3>Пов'язані статті</h3> <ul> <li><a href="article1.html">Стаття 1</a></li> <li><a href="article2.html">Стаття 2</a></li> <li><a href="article3.html">Стаття 3</a></li> </ul> </aside>Цей приклад демонструє використання <aside> для розміщення списку посилань на пов'язані статті.
Особливості оформлення
Як і <article>, тег <aside> сам по собі не впливає на візуальне оформлення сторінки і використовується переважно для семантичної структуризації контенту. Візуальне оформлення <aside> та його вмісту повністю залежить від CSS.
Тег <head>
Тег <head> містить метадані документа, такі як заголовок сторінки, посилання на CSS файли, JavaScript скрипти, мета-теги для SEO, і інші важливі елементи, що не відображаються безпосередньо на веб-сторінці, але впливають на її обробку веб-браузером або пошуковими системами.
Атрибути
<head> не використовує специфічних атрибутів і слугує контейнером для вкладення інших тегів.
Приклади використання
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Назва вашої веб-сторінки</title> <link rel="stylesheet" href="styles.css"> <script src="script.js"></script> </head> <body> Вміст вашої сторінки тут. </body> </html>Особливості оформлення
Тег <head> не має візуального відображення в браузері і використовується виключно для організації метаданих документа.
Тег <body>
Тег <body> визначає тіло веб-сторінки і містить увесь відображуваний контент, такий як текст, зображення, відео, ігри, аудіоплеєри, інтерактивні елементи тощо. Це основна частина документа, яку бачать користувачі при відвідуванні веб-сторінки.
Атрибути
onloadвикористовується для виконання JavaScript коду, коли сторінка повністю завантажена.onunloadвикористовується для виконання коду, коли користувач залишає сторінку.
Приклади використання
<!DOCTYPE html> <html> <head> <title>Приклад сторінки</title> </head> <body onload="alert('Ласкаво просимо!')"> <h1>Це заголовок сторінки</h1> <p>Це абзац на сторінці.</p> </body> </html>Особливості оформлення
Тег <body> може бути стилізований за допомогою CSS. Можна встановлювати кольори фону, вибирати типи шрифтів, розмір тексту, керувати відступами та іншими параметрами оформлення сторінки.
Тег <title>
Тег <title> визначає заголовок документа, який відображається у вкладці браузера або у заголовку вікна. Заголовок сторінки є важливим елементом для SEO, оскільки він дає коротку інформацію про вміст сторінки як пошуковим системам, так і користувачам.
Атрибути
Тег <title> не має специфічних атрибутів і використовується без них.
Приклади використання
<!DOCTYPE html> <html> <head> <title>Назва вашої веб-сторінки</title> </head> <body> Вміст вашої сторінки тут. </body> </html>Особливості оформлення
Тег <title> не впливає на візуальне оформлення вмісту сторінки і використовується виключно для визначення тексту заголовка вкладки браузера.
Розділи та структура контенту
Тег <header>
Тег <header> використовується для визначення заголовку або вступної частини веб-сторінки або розділу. Це може включати заголовки, логотипи, навігаційні елементи тощо. <header> зазвичай містить один або декілька елементів <h1>-<h6>, які представляють основний заголовок сторінки або розділу, а також може містити інші елементи, такі як форми пошуку, вступний текст, логотипи.
Атрибути
<header> не має специфічних атрибутів і використовує загальні атрибути HTML, такі як class, id, style.
Приклади використання
<!DOCTYPE html> <html> <head> <title>Приклад веб-сторінки</title> </head> <body> <header> <h1>Назва сайту</h1> <nav> <ul> <li><a href="#">Головна</a></li> <li><a href="#">Про нас</a></li> <li><a href="#">Контакти</a></li> </ul> </nav> </header> <!-- Основний контент сторінки --> </body> </html>Особливості оформлення
Тег <header> сам по собі не накладає специфічного стилізації на вміст, але його можна стилізувати за допомогою CSS для створення візуально привабливого заголовку сторінки або розділу.
Тег <footer>
Тег <footer> використовується для визначення нижньої частини веб-сторінки або розділу, що може включати авторські права, посилання на політику конфіденційності, контактну інформацію, навігаційні елементи тощо. <footer> часто використовується для дублювання важливої інформації, доступної на сторінці, у зручному для користувача форматі.
Атрибути
<footer> підтримує загальні атрибути HTML, такі як class, id, style, які дозволяють налаштовувати візуальне оформлення та ідентифікацію елемента.
Приклади використання
<!DOCTYPE html> <html> <head> <title>Приклад веб-сторінки</title> </head> <body> <!-- Основний контент сторінки --> <footer> <p>© 2024 Назва компанії. Всі права захищені.</p> <nav> <ul> <li><a href="#">Політика конфіденційності</a></li> <li><a href="#">Умови користування</a></li> <li><a href="#">Контакти</a></li> </ul> </nav> </footer> </body> </html>Особливості оформлення
Так само, як і <header>, тег <footer> не має власного візуального оформлення за замовчуванням, але його можна стилізувати за допомогою CSS. Використання стилів дозволяє інтегрувати <footer> в загальний дизайн сайту, забезпечуючи єдність візуального сприйняття веб-сторінки.
Тег <nav>
Тег <nav> призначений для розміщення навігаційного меню веб-сторінки, що включає посилання на інші сторінки сайту або на розділи всередині сторінки. Цей елемент допомагає користувачам легше орієнтуватися по сайту, а також сприяє кращому розумінню структури сайту пошуковими системами.
Атрибути
<nav> підтримує загальні атрибути HTML, такі як class, id, style, які дозволяють налаштовувати візуальне оформлення та ідентифікацію елемента.
Приклади використання
<!DOCTYPE html> <html> <head> <title>Приклад веб-сторінки</title> </head> <body> <nav> <ul> <li><a href="#home">Головна</a></li> <li><a href="#news">Новини</a></li> <li><a href="#contact">Контакти</a></li> <li><a href="#about">Про нас</a></li> </ul> </nav> <!-- Основний контент сторінки --> </body> </html>Особливості оформлення
Тег <nav> сам по собі не має візуального відображення за замовчуванням і слугує лише для семантичного виділення навігаційної частини веб-документа. Однак за допомогою CSS можна стилізувати навігаційне меню, використовуючи різноманітні стилі для посилань, списків, кнопок тощо, забезпечуючи тим самим зручність і привабливість інтерфейсу користувача.
Тег <section>
Тег <section> використовується для групування тематично пов'язаного контенту на веб-сторінці, створюючи секції або розділи в межах документа. Це допомагає організувати сторінку на логічні блоки, кожен з яких представляє окрему тему або групу інформації. Використання <section> сприяє кращій семантичній структурі документа та полегшує навігацію.
Атрибути
<section> підтримує загальні атрибути HTML, такі як class, id, style, що дозволяють налаштувати візуальне оформлення та ідентифікацію елемента.
Приклади використання
<!DOCTYPE html> <html> <head> <title>Приклад веб-сторінки</title> </head> <body> <section> <h2>Заголовок секції</h2> <p>Текст, що описує зміст цієї секції...</p> <!-- Інший відповідний контент --> </section> <!-- Інші секції або елементи контенту --> </body> </html>Особливості оформлення
Як і інші семантичні елементи, тег <section> не має специфічного візуального стилю за замовчуванням. Однак його можна стилізувати за допомогою CSS, використовуючи різноманітні стилі для рамок, фону, відступів та інших візуальних характеристик для відокремлення та виділення різних розділів сторінки.
Тег <main>
Тег <main> призначений для вміщення основного унікального контенту веб-сторінки. Він виключає повторювані блоки, такі як заголовки, навігаційні панелі, підвали, бічні панелі, які не є безпосередньо пов'язані з центральним повідомленням або темою документа. Використання <main> поліпшує доступність веб-сторінок, дозволяючи користувачам та асистивним технологіям швидко знаходити основний контент.
Атрибути
<main> підтримує загальні атрибути HTML, такі як class, id, style, які дозволяють налаштовувати візуальне оформлення та ідентифікацію елемента.
Приклади використання
<!DOCTYPE html> <html> <head> <title>Приклад веб-сторінки</title> </head> <body> <header>...</header> <nav>...</nav> <main> <article> <h1>Заголовок статті</h1> <p>Основний текст статті...</p> </article> <section> <h2>Підрозділ статті</h2> <p>Текст підрозділу...</p> </section> </main> <footer>...</footer> </body> </html>Особливості оформлення
Тег <main> не має власного візуального стилю за замовчуванням і слугує для семантичної організації контенту. Візуальне оформлення <main> та його вмісту здійснюється за допомогою CSS, що дозволяє розробникам створювати унікальний і зручний для користувача інтерфейс.
HTML теги для форматування тексту
Тег <h1> до <h6>
Теги <h1> до <h6> використовуються для визначення заголовків у веб-документах. <h1> представляє найважливіший заголовок, тоді як <h6> використовується для найменш значущих. Правильне використання цих тегів сприяє кращій організації контенту та його доступності, а також поліпшує SEO.
Атрибути
Теги заголовків не мають специфічних атрибутів і використовують загальні атрибути HTML, такі як class, id, style.
Приклади використання
<h1>Головний заголовок сторінки</h1> <h2>Підзаголовок розділу</h2> <h3>Заголовок підрозділу</h3> <h4>Мінорний заголовок</h4> <h5>Ще менший заголовок</h5> <h6>Найменший заголовок</h6>Особливості оформлення
За замовчуванням, веб-браузери відображають заголовки з різною величиною шрифту, де <h1> має найбільший розмір, а <h6> - найменший. Використання CSS дозволяє налаштувати стиль заголовків, змінюючи їх розмір, шрифт, колір, відступи та інші візуальні характеристики для відповідності загальному дизайну веб-сторінки.
Тег <p>
Тег <p> використовується для визначення абзаців у веб-документах. Це один з найбільш використовуваних тегів, що дозволяє організувати текст у логічні блоки, полегшуючи читання та сприйняття інформації.
Атрибути
<p> підтримує загальні атрибути HTML, такі як class, id, style, які дозволяють налаштовувати візуальне оформлення та ідентифікацію елемента.
Приклади використання
<p>Це приклад абзацу тексту, який демонструє, як використовувати тег <p> у вашому HTML-документі.</p>Особливості оформлення
Тег <p> за замовчуванням відображає текст у вигляді блоку з вертикальними відступами до і після абзацу, що відділяє його від іншого тексту або елементів на сторінці. За допомогою CSS можна змінити ці відступи, а також налаштувати шрифт, колір тексту, міжрядковий інтервал та інші стилістичні параметри абзацу.
Тег <br>
Тег <br> використовується для вставки примусового переносу рядка в тексті, не починаючи новий абзац. Це дозволяє контролювати місце розриву лінії в місцях, де це необхідно з естетичних або організаційних причин.
Атрибути
Тег <br> не має атрибутів і використовується як самозакривний тег без закриваючого тега.
Приклади використання
<p>Це приклад тексту з примусовим<br>переносом рядка.</p>Особливості оформлення
Тег <br> впливає тільки на розміщення тексту, забезпечуючи перенос рядка, але не вносить змін у візуальне оформлення тексту, таких як колір, шрифт або розмір. Його використання рекомендується мінімізувати, де це можливо, на користь стилізації за допомогою CSS для кращого контролю над відображенням контенту.
Тег <hr>
Тег <hr> використовується для вставки горизонтальної лінії, що служить візуальним розділювачем між розділами контенту на веб-сторінці. Це може бути корисно для розділення різних тем або секцій в межах одного документа, поліпшення структури контенту та його сприйняття користувачами.
Атрибути
alignвизначає вирівнювання лінії на сторінці (застарілий, не рекомендується до використання).widthзадає ширину лінії (може використовуватись у пікселях або відсотках, але краще контролювати через CSS).sizeвказує на висоту лінії (застарілий, використання через CSS є більш сучасним підходом).colorзадає колір лінії (також застарілий, рекомендується використовувати CSS).
Приклади використання
<p>Текст перед розділювачем.</p> <hr> <p>Текст після розділювача.</p>Особливості оформлення
За замовчуванням, <hr> відображається як горизонтальна лінія, що простягається на всю ширину контейнера. Однак за допомогою CSS можна значно модифікувати її вигляд, включаючи колір, ширину, висоту, стиль межі та інші візуальні характеристики, щоб краще інтегрувати лінію в загальний дизайн веб-сторінки.
Тег <b>
Тег <b> використовується для відображення тексту жирним шрифтом. Важливо відмітити, що цей тег не додає семантичного значення тексту, як це робить тег <strong>, а лише змінює візуальне представлення тексту на сторінці.
Атрибути
<b> не має специфічних атрибутів і використовує загальні атрибути HTML, такі як class, id, style.
Приклади використання
<p>Це <b>важливий</b> текст.</p>Цей приклад демонструє використання <b> для виділення слова "важливий" жирним шрифтом в абзаці тексту.
Особливості оформлення
Тег <b> за замовчуванням відображає вміст жирним шрифтом, але його візуальний аспект може бути налаштований за допомогою CSS. Наприклад, можна змінити розмір, колір або тип шрифту для тексту, виділеного тегом <b>, адаптувавши його під загальний дизайн веб-сторінки.
Тег <strong>
Тег <strong> використовується для виділення важливого тексту, надаючи йому більшу семантичну вагу та відображаючи жирним шрифтом. Відмінно від тега <b>, <strong> не тільки змінює візуальне представлення тексту, але й підкреслює його значущість для читачів, а також для пошукових систем і асистивних технологій.
Атрибути
<strong> не має специфічних атрибутів і використовує загальні атрибути HTML, такі як class, id, style.
Приклади використання
<p>Для кращого розуміння <strong>важливості</strong> цього питання, прочитайте наступний абзац.</p>Цей приклад демонструє використання <strong> для підкреслення важливості слова в контексті речення.
Особливості оформлення
Тег <strong> за замовчуванням відображає текст жирним шрифтом, але подальше оформлення може бути налаштоване за допомогою CSS. Незважаючи на візуальну схожість з <b>, використання <strong> рекомендується для семантичного виділення тексту, що має особливе значення.
Тег <i>
Тег <i> використовується для відображення тексту курсивом. Це може бути корисно для виділення фраз, технічних термінів, іноземних слів, назв книг або як стилістичний елемент. Важливо зауважити, що як і <b>, тег <i> не надає тексту додаткового семантичного значення, на відміну від тегів, як <em>.
Атрибути
<i> не має специфічних атрибутів і використовує загальні атрибути HTML, такі як class, id, style.
Приклади використання
<p>Прочитайте книгу <i>Великий Гетсбі</i> цього літа.</p>Цей приклад демонструє використання <i> для виділення назви книги курсивом.
Особливості оформлення
Тег <i> за замовчуванням відображає вміст курсивом, але візуальний аспект може бути налаштований за допомогою CSS. Наприклад, можна змінити розмір, колір або тип шрифту для тексту, виділеного тегом <i>, адаптувавши його під загальний дизайн веб-сторінки.
Тег <em>
Тег <em> використовується для надання тексту емфатичного наголосу, що зазвичай відображається курсивом. На відміну від тега <i>, <em> має семантичне значення, підкреслюючи важливість чи зміну інтонації в тексті, що може бути корисним для асистивних технологій, таких як читачі екрану.
Атрибути
<em> не має специфічних атрибутів і використовує загальні атрибути HTML, такі як class, id, style.
Приклади використання
<p>Вона сказала: <em>абсолютно ні</em>, не звертаючи уваги на його аргументи.</p>Цей приклад демонструє використання <em> для емфатичного виділення фрази в реченні.
Особливості оформлення
Хоча за замовчуванням тег <em> відображає текст курсивом, подібно до <i>, його основна функція — надати тексту семантичного значення. Стилізація <em> може бути налаштована за допомогою CSS для адаптації до загального дизайну веб-сторінки, включаючи зміну шрифту, розміру, кольору та інших візуальних характеристик.
Тег <mark>
Тег <mark> використовується для виділення частин тексту, які мають особливе значення або які є важливими для користувача. Вміст, обрамлений тегом <mark>, зазвичай відображається з жовтим маркеруванням, нагадуючи виділення тексту маркером на папері. Це може бути корисним для підкреслення пошукових термінів, важливих висновків у тексті та іншої інформації, яку необхідно візуально виділити.
Атрибути
<mark> не має специфічних атрибутів і використовує загальні атрибути HTML, такі як class, id, style.
Приклади використання
htmlCopy code<p>Під час пошуку слова <mark>виділення</mark> у тексті, цей фрагмент буде легко помітним.</p>
Цей приклад демонструє використання <mark> для виділення слова "виділення" у реченні.
Особливості оформлення
За замовчуванням, текст в <mark> відображається з жовтим фоном, що робить його схожим на текст, виділений маркером. Однак за допомогою CSS можна змінити колір фону, тексту та інші стилістичні параметри для кращої інтеграції в дизайн веб-сторінки або для досягнення певного візуального ефекту.
Тег <small>
Тег <small> використовується для зменшення розміру шрифту тексту, до якого він застосований. Цей тег може бути корисним для відображення дрібного друку або для зменшення менш важливих елементів тексту, таких як авторські права, дисклеймери або примітки.
Атрибути
<small> не має специфічних атрибутів і використовує загальні атрибути HTML, такі як class, id, style.
Приклади використання
<p>Це основний текст сторінки. <small>Цей текст є дрібним друком.</small></p>Цей приклад демонструє використання <small> для відображення частини тексту меншим розміром шрифту.
Особливості оформлення
Тег <small> зменшує розмір шрифту для свого вмісту відносно оточуючого тексту. Візуальне представлення може бути додатково налаштоване за допомогою CSS, наприклад, можна змінити розмір шрифту, колір, стиль шрифту та інші візуальні характеристики для досягнення бажаного ефекту оформлення.
Тег <del>
Тег <del> використовується для відображення тексту, який був вилучений з документа. Вміст, помічений цим тегом, зазвичай відображається як перекреслений, що візуально індикує його видалення або заміну на інший текст.
Атрибути
citeвказує URL джерела, що пояснює причину вилучення тексту.datetimeвизначає дату та час вилучення тексту.
Приклади використання
<p>Це приклад речення з <del cite="example.html" datetime="2023-01-01T15:00:00">вилученим текстом</del>, який більше не актуальний.</p>Цей приклад демонструє використання <del> для позначення частини тексту, яка була вилучена з документа, з посиланням на пояснення причини вилучення та датою видалення.
Особливості оформлення
За замовчуванням, текст у <del> відображається як перекреслений, підкреслюючи його вилучення з документа. Стиль перекреслення можна налаштувати за допомогою CSS, змінивши колір тексту, тип лінії перекреслення або використовуючи інші візуальні ефекти для адаптації до дизайну веб-сторінки.
Тег <ins>
Тег <ins> використовується для відображення тексту, який був доданий до документа. Цей тег слугує візуальним індикатором змін, зазвичай відображаючи текст підкресленим, що підкреслює його вставку або додавання після редагування документа.
Атрибути
citeвказує URL джерела, що пояснює причину додавання тексту.datetimeвизначає дату та час додавання тексту.
Приклади використання
<p>В цьому реченні <ins cite="example.html" datetime="2023-02-01T12:00:00">доданий текст</ins>, який уточнює інформацію.</p>Цей приклад демонструє використання <ins> для позначення частини тексту, яка була додана до документа, з вказівкою на джерело та дату додавання.
Особливості оформлення
За замовчуванням, текст у <ins> відображається підкресленим, виділяючи його як доданий або вставлений. Стиль підкреслення може бути модифікований за допомогою CSS, дозволяючи змінити колір тексту, стиль підкреслення або інші візуальні атрибути для кращої інтеграції в дизайн веб-сторінки.
Тег <sub>
Тег <sub> використовується для відображення тексту у нижньому індексі. Це може бути корисним для наукових записів, хімічних формул, математичних виразів, або для вказівки на примітки. Текст, обрамлений тегом <sub>, зазвичай відображається дещо нижче від базової лінії тексту та має менший розмір.
Атрибути
<sub> не має специфічних атрибутів і використовує загальні атрибути HTML, такі як class, id, style.
Приклади використання
<p>Це приклад формули води: H<sub>2</sub>O.</p>Цей приклад демонструє використання <sub> для позначення молекулярної формули води з двома атомами водню у нижньому індексі.
Особливості оформлення
Тег <sub> за замовчуванням відображає текст меншим розміром та зсуває його нижче базової лінії основного тексту. Візуальний аспект можна налаштувати за допомогою CSS, змінивши розмір шрифту, колір або відступи, адаптувавши виділений текст до загального стилю веб-сторінки.
Тег <sup>
Тег <sup> використовується для відображення тексту у верхньому індексі. Це особливо корисно для математичних виразів, наукових абревіатур, позначення степенів або для створення посилань на примітки. Текст, обрамлений тегом <sup>, зазвичай відображається дещо вище від базової лінії основного тексту та має менший розмір.
Атрибути
<sup> не має специфічних атрибутів і використовує загальні атрибути HTML, такі як class, id, style.
Приклади використання
<p>Це приклад використання верхнього індексу для позначення степеня: E=mc<sup>2</sup>.</p>Цей приклад демонструє використання <sup> для позначення знаменитої формули Ейнштейна, де квадрат швидкості світла відображається у верхньому індексі.
Особливості оформлення
Тег <sup> за замовчуванням зменшує розмір тексту та відображає його вище базової лінії основного тексту. Стилізація <sup> може бути адаптована через CSS, дозволяючи змінити розмір шрифту, колір, відступи та інші візуальні параметри, аби краще інтегрувати текст у верхньому індексі в загальний дизайн веб-сторінки.
Тег <ul>
Тег <ul> використовується для створення невпорядкованого списку, де кожен пункт списку позначається маркером замість чисел або літер. Цей елемент є ідеальним для структурування інформації у вигляді списків без конкретної послідовності.
Атрибути
<ul> підтримує загальні атрибути HTML, такі як class, id, style, що дозволяють налаштовувати візуальне оформлення списку.
Приклади використання
<ul> <li>Перший пункт списку</li> <li>Другий пункт списку</li> <li>Третій пункт списку</li> </ul>Цей приклад демонструє створення простого невпорядкованого списку з трьома пунктами.
Особливості оформлення
За замовчуванням, браузери відображають <ul> із маркерами у вигляді кружечків для кожного пункту <li>. Використання CSS дозволяє змінити тип маркера, відступи, стиль тексту та інші параметри, адаптувавши список до загального дизайну веб-сторінки. Можна вибрати різні стилі маркерів (крапки, квадратики, диски тощо) або навіть використати власні зображення як маркери.
Тег <blockquote>
Тег <blockquote> в HTML використовується для вставки довгих цитат зовнішніх джерел у тіло документа. Він дозволяє виділити вказані цитати візуально, забезпечуючи їм відступи з обох боків та, за замовчуванням, курсивне форматування тексту. Це допомагає читачам розрізняти цитований контент від основного тексту статті або блогу.
Приклади використання
Основний спосіб використання <blockquote> полягає в оформленні цитат. Наприклад, якщо ви хочете процитувати відомого автора або важливий фрагмент з іншої статті, ви можете зробити це так:
<blockquote cite="http://example.com/source-of-the-quote">
<p>Це дуже важливо – знайти баланс між вашим робочим та особистим життям.</p>
</blockquote>
Атрибут cite тут використовується для вказівки URL-адреси джерела цитати, підвищуючи таким чином достовірність та відповідальність переданої інформації.
Атрибути
cite: Вказує URL-адресу веб-документа, з якого було взято цитату. Ця інформація може використовуватися пошуковими системами для формування зв'язків між цитованим та цитуючим документом, але не відображається візуально в браузері.
Особливості оформлення
За замовчуванням, браузери встановлюють відступи для <blockquote> з обох боків, допомагаючи візуально відокремити цитату від основного тексту. Однак, за допомогою CSS, можливості оформлення значно розширюються. Наприклад, ви можете змінити колір фону, рамку або тип шрифту, щоб адаптувати вигляд цитати під загальний дизайн вашого сайту.
blockquote {
background-color: #f9f9f9;
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: 0.5em 10px;
quotes: "\201C""\201D""\2018""\2019";
}
blockquote p {
display: inline;
}
Цей CSS-приклад додає сірий фон до цитати, виділяє її ліву границю яскравою лінією для кращого візуального розмежування, і застосовує відступи для поліпшення читабельності.
Тег <ol>
Тег <ol> використовується для створення впорядкованого списку, де кожен пункт списку автоматично нумерується. Це ідеальний спосіб представлення інформації, що вимагає послідовності або ранжування, наприклад, кроків інструкції або рейтингових списків.
Атрибути
typeвказує тип нумерації для пунктів списку (наприклад, латинські літери, арабські цифри, римські числа).startзадає число, з якого починається нумерація списку.reversedвказує, що список має бути виведений у зворотньому порядку.
Приклади використання
<ol type="I" start="3"> <li>Третій крок</li> <li>Четвертий крок</li> <li>П'ятий крок</li> </ol>Цей приклад демонструє створення впорядкованого списку з нумерацією римськими числами, що починається з третього пункту.
Особливості оформлення
За замовчуванням, <ol> відображає пункти списку з арабськими цифрами як маркери. За допомогою атрибутів та CSS можна змінити стиль нумерації, відступи, стиль тексту та інші візуальні параметри списку, щоб він гармонійно вписувався в дизайн веб-сторінки.
Тег <li>
Тег <li> використовується для позначення окремого пункту в межах списків <ul> (невпорядкований список) або <ol> (впорядкований список). Кожен елемент <li> представляє одиницю інформації або один пункт списку.
Атрибути
valueзадає значення для пункту впорядкованого списку<ol>, що впливає на нумерацію наступних пунктів.
Приклади використання
Для невпорядкованого списку:
<ul> <li>Перший пункт</li> <li>Другий пункт</li> <li>Третій пункт</li> </ul>Для впорядкованого списку:
<ol> <li>Перший крок</li> <li>Другий крок</li> <li value="10">Десятий крок</li> </ol>У цьому прикладі пункт з value="10" змінює нумерацію наступних пунктів, продовжуючи її з 10.
Особливості оформлення
Тег <li> сам по собі не визначає стиль оформлення, але його візуальне представлення може бути налаштоване через CSS. Можна змінити тип маркерів для <ul>, стиль нумерації для <ol>, а також відступи, колір та розмір шрифту для пунктів списку, щоб адаптувати їх до дизайну веб-сторінки.
Тег <dl>
Тег <dl> використовується для створення списку описів, де кожен термін може мати один або більше описів. Цей елемент часто використовується для створення словників, глосаріїв або для представлення метаданих (наприклад, список властивостей та їх значень).
Атрибути
<dl> не має специфічних атрибутів і використовує загальні атрибути HTML, такі як class, id, style.
Приклади використання
<dl> <dt>HTML</dt> <dd>Мова гіпертекстової розмітки документів вебу.</dd> <dt>CSS</dt> <dd>Каскадні таблиці стилів для опису зовнішнього вигляду документів.</dd> </dl>Цей приклад демонструє створення списку описів з двома термінами (HTML та CSS) та їх визначеннями.
Особливості оформлення
Тег <dl> за замовчуванням не має специфічного візуального стилю, але його вміст (<dt> для термінів та <dd> для описів) може бути стилізований за допомогою CSS. Можна налаштувати відступи, шрифти, кольори та інші параметри для кращої візуальної інтеграції в загальний дизайн веб-сторінки.
Тег <dt>
Тег <dt> (визначення терміну) використовується всередині списку описів <dl> для вказівки терміна, який буде описано або визначено. Це частина комбінації тегів <dl>, <dt>, і <dd>, де <dl> вказує на початок списку описів, <dt> використовується для позначення самого терміна, а <dd> - для його опису або визначення.
Атрибути
<dt> не має специфічних атрибутів і використовує загальні атрибути HTML, такі як class, id, style.
Приклади використання
У контексті списку описів:
<dl> <dt>HTML</dt> <dd>Мова гіпертекстової розмітки, використовувана для створення веб-сторінок.</dd> <dt>CSS</dt> <dd>Мова стилів, яка дозволяє оформляти веб-сторінки.</dd> </dl>Особливості оформлення
За замовчуванням, <dt> відображається як звичайний текст без візуального відміння від іншого тексту на сторінці. Однак за допомогою CSS можна налаштувати відображення термінів, наприклад, зробити їх жирним шрифтом, змінити розмір або колір, щоб візуально виділити їх у контексті визначень.
Тег <dd>
Тег <dd> використовується всередині списку описів <dl> для надання опису або визначення до терміну, позначеного тегом <dt>. Це ключовий елемент для створення структурованих визначень термінів, який допомагає організувати контент у читабельній і логічній формі.
Атрибути
<dd> не має специфічних атрибутів і використовує загальні атрибути HTML, такі як class, id, style.
Приклади використання
<dl> <dt>HTML</dt> <dd>Мова гіпертекстової розмітки, що використовується для створення і форматування сторінок у Всесвітній павутині.</dd> <dt>CSS</dt> <dd>Мова каскадних таблиць стилів, яка використовується для визначення візуального стилю веб-документів.</dd> </dl>Особливості оформлення
За замовчуванням, <dd> відображається як блок тексту, що індентується від лівого краю, відокремлюючи опис від терміну, заданого у <dt>. Візуальне оформлення тега <dd> може бути налаштоване через CSS, дозволяючи змінити відступи, шрифт, колір тексту та інші параметри стилю, щоб покращити загальну читабельність та естетику веб-сторінки.
Тег <img>
Тег <img> використовується для вбудовування зображень у веб-сторінки. Це дозволяє додавати до контенту ілюстрації, фотографії, діаграми та інші графічні елементи, що покращують зрозумілість та візуальну привабливість інформації.
Атрибути
src(обов'язковий) вказує шлях до зображення, яке має бути відображено.altнадає альтернативний текст для зображення, що відображається у випадку, коли зображення не може бути завантажено. Це також важливо для доступності, дозволяючи користувачам екранних читалок отримувати інформацію про зображення.widthтаheightвказують ширину та висоту зображення відповідно.titleвикористовується для надання додаткової інформації, яка з'являється у вигляді вспливаючої підказки при наведенні курсору на зображення.
Приклади використання
<img src="image.jpg" alt="Опис зображення" width="500" height="600">Цей приклад демонструє вбудовування зображення на веб-сторінку з вказанням його розмірів та альтернативного тексту.
Особливості оформлення
Тег <img> сам по собі не визначає стиль оформлення, але його відображення можна налаштувати за допомогою CSS. Можливості включають зміну розміру, застосування рамок, тіней, обертання та інші ефекти, що дозволяють інтегрувати зображення в дизайн веб-сторінки з урахуванням загального стилістичного рішення.
Тег <area>
Тег <area> використовується у комбінації з тегом <map> для створення інтерактивних зображень, званих картами-зображеннями. Ці карти дозволяють визначити клікабельні області на зображенні, кожна з яких може вести до різних документів або виконувати різні дії. Тег <area> визначає кожну з цих областей і її поведінку.
Атрибути
shapeвказує форму області (наприклад, "rect" для прямокутника, "circle" для кола, "poly" для многоугольника).coordsвизначає координати області відповідно до її форми.hrefзадає URL, на який буде здійснено перехід після кліку на область.altнадає альтернативний текст для області, що є важливим для доступності.targetвизначає, як буде відкрито посилання (наприклад, у новій вкладці за допомогою_blank).
Приклади використання
<img src="planets.gif" width="145" height="126" alt="Планети" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Сонце" target="_blank"> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Меркурій" target="_blank"> </map>Цей приклад демонструє створення карти-зображення з двома областями: прямокутником, що веде на сторінку про Сонце, і колом, що веде на сторінку про Меркурій.
Особливості оформлення
Тег <area> не має візуального представлення сам по собі і використовується виключно для визначення інтерактивних областей на карті-зображенні. Візуальні аспекти карти, такі як підсвічування активних областей або курсори, можуть бути налаштовані за допомогою CSS та JavaScript для покращення інтерактивності та користувацького досвіду.
Тег <map>
Тег <map> використовується для створення інтерактивних карт-зображень, дозволяючи визначити клікабельні області на зображенні. Ці області задаються за допомогою тега <area>, кожен з яких може містити власний набір атрибутів, таких як href, alt, shape, та coords, що вказують на різні дії або посилання.
Атрибути
name(обов'язковий) визначає унікальне ім'я карти-зображення, яке використовується у відповідному атрибутіusemapтега<img>для зв'язування зображення з мапою.
Приклади використання
<img src="workplace.jpg" usemap="#workmap" alt="Схема робочого місця"> <map name="workmap"> <area shape="rect" coords="34,44,270,350" href="desk.html" alt="Стіл"> <area shape="circle" coords="130,105,60" href="computer.html" alt="Комп'ютер"> </map>Цей приклад демонструє створення карти-зображення для схеми робочого місця, де окремі області, такі як "Стіл" та "Комп'ютер", є клікабельними та ведуть до відповідних сторінок.
Особливості оформлення
Тег <map> сам по собі не має візуального представлення і використовується лише для визначення логіки інтерактивних областей на зображенні. Візуальні аспекти інтерактивності, такі як зміна курсору при наведенні або підсвічування активних областей, можуть бути реалізовані за допомогою додаткового коду на CSS та JavaScript.
Тег <table>
Тег <table> використовується для створення таблиць на веб-сторінці. З його допомогою можна представити дані у вигляді сітки, складеної з рядків і стовпців, що є корисним для відображення статистики, списків, порівняльних характеристик і так далі.
Атрибути
borderвказує на товщину рамки таблиці (застарілий, краще використовувати CSS).widthзадає ширину таблиці (також застарілий, рекомендується CSS).cellpaddingвстановлює відступи всередині комірок (застарілий).cellspacingвизначає відстань між комірками (застарілий).
Для сучасного веб-дизайну рекомендується використовувати CSS для стилізації таблиць замість застарілих атрибутів.
Приклади використання
<table border="1"> <tr> <th>Місяць</th> <th>Витрати</th> </tr> <tr> <td>Січень</td> <td>$100</td> </tr> <tr> <td>Лютий</td> <td>$150</td> </tr> </table>Цей приклад демонструє створення простої таблиці з двома стовпцями і трьома рядками, де використовуються теги <tr>, <th>, і <td> для визначення рядків, заголовків стовпців та комірок відповідно.
Особливості оформлення
Таблиці можуть бути стилізовані за допомогою CSS для керування відступами, рамками, кольорами фону та тексту, а також іншими візуальними аспектами. CSS дозволяє забезпечити таблицям сучасний вигляд, зробити їх адаптивними та інтегрованими в дизайн веб-сторінки.
Тег <caption>
Тег <caption> використовується для додавання заголовка до таблиці, створеної за допомогою тега <table>. Заголовок розміщується зазвичай над таблицею і слугує для опису її змісту або надання додаткової інформації про дані, представлені в таблиці.
Атрибути
<caption> не має специфічних атрибутів і використовує загальні атрибути HTML, такі як class, id, style, що дозволяють налаштовувати візуальне оформлення заголовка таблиці.
Приклади використання
<table> <caption>Місячні витрати</caption> <tr> <th>Місяць</th> <th>Витрати</th> </tr> <tr> <td>Січень</td> <td>$100</td> </tr> <tr> <td>Лютий</td> <td>$150</td> </tr> </table>Цей приклад демонструє використання <caption> для надання заголовка "Місячні витрати" таблиці, що містить дані про витрати за різні місяці.
Особливості оформлення
Тег <caption> за замовчуванням відображає текст заголовка над таблицею. Візуальне оформлення заголовка може бути налаштоване за допомогою CSS, що дозволяє змінити шрифт, розмір тексту, кольори, відступи та інші параметри, забезпечуючи інтеграцію заголовка в загальний дизайн веб-сторінки.Тег <caption>
Тег <caption> використовується для додавання заголовка до таблиці, створеної за допомогою тега <table>. Заголовок розміщується зазвичай над таблицею і слугує для опису її змісту або надання додаткової інформації про дані, представлені в таблиці.
Атрибути
<caption> не має специфічних атрибутів і використовує загальні атрибути HTML, такі як class, id, style, що дозволяють налаштовувати візуальне оформлення заголовка таблиці.
Приклади використання
<table>
<caption>Місячні витрати</caption>
<tr>
<th>Місяць</th>
<th>Витрати</th>
</tr>
<tr>
<td>Січень</td>
<td>$100</td>
</tr>
<tr>
<td>Лютий</td>
<td>$150</td>
</tr>
</table>
Цей приклад демонструє використання <caption> для надання заголовка "Місячні витрати" таблиці, що містить дані про витрати за різні місяці.
Особливості оформлення
Тег <caption> за замовчуванням відображає текст заголовка над таблицею. Візуальне оформлення заголовка може бути налаштоване за допомогою CSS, що дозволяє змінити шрифт, розмір тексту, кольори, відступи та інші параметри, забезпечуючи інтеграцію заголовка в загальний дизайн веб-сторінки.
Тег <th>
Тег <th> використовується для визначення заголовкових комірок у таблиці, створеній за допомогою тега <table>. Комірки, позначені як <th>, зазвичай використовуються в першому рядку або першому стовпці таблиці для опису змісту стовпців або рядків. Текст в заголовкових комірках відображається жирним шрифтом і по центру комірки за замовчуванням, що допомагає користувачам краще орієнтуватися в даних таблиці.
Атрибути
scopeвказує на область дії заголовка:colдля стовпців,rowдля рядків,colgroupдля групи стовпців, іrowgroupдля групи рядків.colspanдозволяє заголовковій комірці охоплювати кілька стовпців.rowspanдозволяє заголовковій комірці охоплювати кілька рядків.
Приклади використання
<table>
<tr>
<th scope="col">Місяць</th>
<th scope="col">Витрати</th>
</tr>
<tr>
<td>Січень</td>
<td>$100</td>
</tr>
<tr>
<td>Лютий</td>
<td>$150</td>
</tr>
</table>
Цей приклад демонструє використання <th> для створення заголовків "Місяць" та "Витрати" в таблиці, що полегшує розуміння змісту даних у кожному стовпці.
Особливості оформлення
Хоча <th> за замовчуванням має власний стиль (жирний шрифт і вирівнювання по центру), візуальне оформлення заголовкових комірок можна налаштовувати за допомогою CSS. Можливості включають зміну шрифту, розміру тексту, кольорів, відступів, рамок та інших стилістичних характеристик, щоб відповідати загальному дизайну веб-сторінки.
Тег <tr>
Тег <tr> використовується для визначення рядка в таблиці, створеній за допомогою тега <table>. В межах кожного <tr> можуть розміщуватися теги <td> (комірка таблиці) та <th> (комірка заголовка таблиці), що дозволяє структурувати дані у вигляді сітки з рядків та стовпців.
Атрибути
<tr> не має специфічних атрибутів і використовує загальні атрибути HTML, такі як class, id, style, що дозволяють налаштовувати візуальне оформлення рядків таблиці.
Приклади використання
<table> <tr> <th>Місяць</th> <th>Витрати</th> </tr> <tr> <td>Січень</td> <td>$100</td> </tr> <tr> <td>Лютий</td> <td>$200</td> </tr> </table>Цей приклад демонструє використання <tr> для створення трьох рядків у таблиці: одного з заголовками стовпців та двох з даними про витрати за різні місяці.
Особливості оформлення
За замовчуванням, <tr> не має власного стилю оформлення, але використання CSS дозволяє змінити відступи, кольори фону, рамки та інші параметри для кожного рядка, забезпечуючи візуальне розмежування даних та покращення загальної читабельності таблиці.
Тег <td>
Тег <td> використовується для створення комірки в рядку таблиці, оформленої за допомогою тегів <table> і <tr>. Комірки <td> містять основний контент таблиці, включаючи текст, зображення, списки, інші таблиці та різноманітні елементи веб-сторінки.
Атрибути
colspanдозволяє комірці охоплювати кілька стовпців.rowspanдозволяє комірці охоплювати кілька рядків.alignвстановлює вирівнювання контенту всередині комірки по горизонталі (застарілий, краще використовувати CSS).valignвстановлює вирівнювання контенту всередині комірки по вертикалі (також застарілий).
Приклади використання
<table> <tr> <td>Січень</td> <td>$100</td> </tr> <tr> <td>Лютий</td> <td>$200</td> </tr> </table>Цей приклад демонструє використання <td> для створення комірок з інформацією про витрати за різні місяці.
Особливості оформлення
Хоча <td> за замовчуванням не має специфічного стилю оформлення, використання CSS дозволяє детально налаштувати візуальне представлення комірок. Можна змінити фон, рамки, відступи, шрифт і кольори, щоб краще інтегрувати таблицю в загальний дизайн веб-сторінки та покращити її читабельність та візуальну привабливість.
Тег <thead>
Тег <thead> використовується для групування одного або кількох рядків, що слугують заголовками таблиці. Вміст <thead> зазвичай містить один або декілька тегів <tr>, у яких розміщені теги <th> для визначення заголовкових комірок. Використання <thead> допомагає покращити семантику та доступність таблиць, а також надає більше можливостей для стилізації і управління таблицями за допомогою CSS і JavaScript.
Атрибути
<thead> не має специфічних атрибутів і використовує загальні атрибути HTML, такі як class, id, style.
Приклади використання
<table> <thead> <tr> <th>#</th> <th>Ім'я</th> <th>Вік</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Джон</td> <td>30</td> </tr> <tr> <td>2</td> <td>Анна</td> <td>25</td> </tr> </tbody> </table>Цей приклад демонструє використання <thead> для визначення заголовків таблиці, яка містить дані про номер, ім'я та вік осіб.
Особливості оформлення
За замовчуванням, стиль оформлення для <thead> визначається браузером, але його можна налаштувати за допомогою CSS. Наприклад, можна змінити фон, колір тексту, шрифт і відступи заголовків для покращення візуальної відмінності заголовкової частини таблиці від основного вмісту. Також <thead> дозволяє застосувати різні стилі для поліпшення читабельності та організації даних у таблиці.
Тег <tbody>
Тег <tbody> використовується для групування основного вмісту таблиці, який складається з одного або декількох рядків (<tr>), що містять дані таблиці. Використання <tbody> дозволяє розділити таблицю на логічні частини, спрощуючи її стилізацію та управління, особливо в великих таблицях з багатьма даними. Крім того, <tbody> може використовуватися разом із <thead> і <tfoot> для визначення заголовків, основного вмісту та підсумків таблиці відповідно.
Атрибути
<tbody> не має специфічних атрибутів і використовує загальні атрибути HTML, такі як class, id, style.
Приклади використання
<table> <thead> <tr> <th>#</th> <th>Ім'я</th> <th>Вік</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Олексій</td> <td>28</td> </tr> <tr> <td>2</td> <td>Марія</td> <td>25</td> </tr> </tbody> </table>Цей приклад демонструє використання <tbody> для визначення основного вмісту таблиці, що містить інформацію про людей, включаючи їх порядковий номер, ім'я та вік.
Особливості оформлення
Оформлення <tbody> може бути налаштовано за допомогою CSS, що дозволяє змінювати візуальні характеристики рядків і комірок в межах основної частини таблиці. Можливі налаштування включають зміну кольору фону, стилів рамок, відступів між комірками, стилів тексту та інше. Використання <tbody> також полегшує застосування різноманітних стилів до різних частин таблиці для покращення читабельності та загального вигляду.
Тег <tfoot>
Тег <tfoot> використовується для групування одного або кількох рядків таблиці, які містять підсумкові дані або підзаголовки. Розміщення <tfoot> перед <tbody> у коді HTML дозволяє браузерам швидше обробляти та відображати підсумкові дані, навіть якщо таблиця велика і її основний вміст завантажується або генерується динамічно.
Атрибути
<tfoot> не має специфічних атрибутів і використовує загальні атрибути HTML, такі як class, id, style, що дозволяють налаштовувати візуальне оформлення підсумкової частини таблиці.
Приклади використання
<table> <thead> <tr> <th>#</th> <th>Ім'я</th> <th>Вік</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Олексій</td> <td>28</td> </tr> <tr> <td>2</td> <td>Марія</td> <td>25</td> </tr> </tbody> <tfoot> <tr> <td colspan="2">Середній вік</td> <td>26.5</td> </tr> </tfoot> </table>Цей приклад демонструє використання <tfoot> для відображення підсумкової інформації у таблиці, а саме середнього віку осіб, представлених у таблиці.
Особливості оформлення
За замовчуванням, <tfoot> не має власного стилю оформлення, але його вміст може бути стилізовано за допомогою CSS. Це дозволяє візуально відокремити підсумкові дані від основного вмісту таблиці, використовуючи для цього зміну кольорів фону, шрифтів, рамок та інших візуальних параметрів, щоб покращити сприйняття інформації користувачем.
Тег <col>
Тег <col> використовується для задання стилів для одного або кількох стовпців таблиці одночасно. Це дозволяє встановити ширину, стиль рамки, колір фону та інші візуальні характеристики для групи стовпців, не дублюючи стилі для кожної комірки чи заголовка стовпця окремо. Тег <col> має бути розміщений всередині контейнера <colgroup> і використовується до вмісту таблиці (<thead>, <tbody>, <tfoot>).
Атрибути
spanвказує кількість стовпців, на які поширюються стилі, задані в<col>.styleдозволяє визначати інлайнові CSS стилі безпосередньо для стовпців.
Приклади використання
<table> <colgroup> <col span="2" style="background-color:yellow"> <col style="background-color:green"> </colgroup> <tr> <th>Ім'я</th> <th>Прізвище</th> <th>Вік</th> </tr> <tr> <td>Петро</td> <td>Іванов</td> <td>25</td> </tr> </table>Цей приклад демонструє використання <col> для застосування різного фонового кольору до стовпців таблиці. Перші два стовпці матимуть жовтий колір фону, а третій — зелений.
Особливості оформлення
Застосування <col> та <colgroup> дозволяє ефективно управляти стилем стовпців таблиці, полегшуючи їх візуальне розмежування та загальне оформлення таблиці. Використання цих тегів забезпечує більшу гнучкість у дизайні таблиць без необхідності застосування стилів до кожної комірки або рядка окремо, що спрощує код і покращує його читабельність.
Тег <colgroup>
Тег <colgroup> використовується для групування одного або декількох сусідніх стовпців у таблиці з метою застосування спільних стилів за допомогою тега <col>. Це дозволяє легко керувати візуальним представленням групи стовпців, наприклад, задавати ширину або фоновий колір для всієї групи стовпців одночасно.
Атрибути
spanвказує на кількість стовпців у групі.Загальні атрибути, такі як
class,id,style, що дозволяють застосувати CSS стилі до групи стовпців.
Приклади використання
<table> <colgroup span="2" style="background-color: #ffdead;"></colgroup> <colgroup style="background-color: #add8e6;"></colgroup> <tr> <th>Ім'я</th> <th>Прізвище</th> <th>Вік</th> </tr> <tr> <td>Андрій</td> <td>Коваленко</td> <td>30</td> </tr> </table>У цьому прикладі, перші два стовпці таблиці групуються за допомогою <colgroup> з фоновим кольором #ffdead, а наступний стовпець має фоновий колір #add8e6.
Особливості оформлення
Використання <colgroup> разом з <col> спрощує управління стилем стовпців таблиці, дозволяючи веб-розробникам легко задавати ширину, вирівнювання, фон, рамки та інші стилі для цілого ряду стовпців. Це особливо корисно у великих таблицях, де потрібно забезпечити однорідний вигляд або виділити певні секції таблиці за допомогою візуальних ефектів.
Форми
Тег <form>
Тег <form> використовується для створення HTML-форми для збору даних від користувача. Форми можуть містити різноманітні елементи введення, такі як текстові поля, радіокнопки, прапорці, кнопки тощо, які дозволяють користувачам вводити інформацію та надсилати її на сервер для обробки.
Атрибути
actionвказує URL, на який будуть надіслані дані форми після її відправлення.methodвизначає метод HTTP-запиту, що використовується для відправлення даних форми, зазвичай"get"або"post".enctypeвказує на тип кодування даних форми, який використовується при відправленні методом"post".
Приклади використання
<form action="/submit_form" method="post"> <label for="name">Ім'я:</label> <input type="text" id="name" name="user_name"> <input type="submit" value="Надіслати"> </form>Цей приклад демонструє створення простої форми з текстовим полем для введення імені користувача та кнопкою для надсилання форми на сервер.
Особливості оформлення
Форми і їх елементи можуть бути стилізовані за допомогою CSS, що дозволяє налаштувати візуальний вигляд, розмір, кольори, рамки, відступи та інші властивості для кращої інтеграції форми у загальний дизайн веб-сторінки. Використання додаткових технологій, таких як JavaScript, може забезпечити валідацію даних на стороні клієнта перед відправленням форми, покращуючи загальний досвід користувача.
Тег <input>
Тег <input> використовується для створення різних елементів форми, що дозволяють користувачу вводити дані. Залежно від атрибута type, <input> може бути текстовим полем, паролем, радіокнопкою, прапорцем, кнопкою для подання форми та іншими типами введення.
Атрибути
typeвизначає тип поля введення (наприклад,text,password,submit).nameвказує ім'я елемента, яке використовується для ідентифікації даних у формі.valueзадає початкове значення поля, яке буде відправлено з формою.placeholderвизначає текст підказки, що відображається в полі введення до того, як користувач введе туди дані.requiredвказує, що поле необхідно заповнити перед відправленням форми.
Приклади використання
<form action="/submit_form" method="post"> <label for="name">Ім'я:</label> <input type="text" id="name" name="user_name" required> <input type="submit" value="Надіслати"> </form>Цей приклад демонструє форму з текстовим полем для введення імені, яке є обов'язковим для заповнення, та кнопкою відправлення форми.
Особливості оформлення
Елементи <input> можуть бути стилізовані за допомогою CSS, що дозволяє змінювати їх розмір, колір, фон, рамки та інші візуальні характеристики. Для поліпшення користувацького досвіду можна також використовувати JavaScript для додавання інтерактивної поведінки, наприклад, для валідації введених даних на стороні клієнта перед відправленням форми.
Тег <textarea>
Тег <textarea> використовується для створення багаторядкового поля введення тексту в формі, що дозволяє користувачам вводити текстові дані, які можуть займати більше одного рядка. Це особливо корисно для введення великих обсягів тексту, наприклад, коментарів або описів.
Атрибути
nameвказує ім'я елемента, яке використовується для ідентифікації даних у формі.rowsвизначає кількість рядків у полі введення.colsвизначає кількість символів у ширину, яку займає поле введення.placeholderвизначає текст підказки, що відображається в полі введення до того, як користувач введе туди дані.requiredвказує, що поле необхідно заповнити перед відправленням форми.
Приклади використання
<form action="/submit_form" method="post"> <label for="comment">Коментар:</label> <textarea id="comment" name="user_comment" rows="4" cols="50" required></textarea> <input type="submit" value="Надіслати"> </form>Цей приклад демонструє форму з багаторядковим полем для введення коментаря та кнопкою відправлення форми.
Особливості оформлення
Елемент <textarea> може бути стилізований за допомогою CSS, що дозволяє змінювати його розмір, колір, фон, рамки, відступи та інші візуальні характеристики. Також за допомогою JavaScript можна додати додаткову функціональність, наприклад, автоматичне збільшення розміру поля введення в залежності від обсягу введеного тексту.
Тег <label>
Тег <label> використовується для вказівки мітки для елемента форми. Він пов'язує текст мітки з певним елементом форми, що покращує доступність форми, оскільки користувачі можуть вибирати елемент форми, клікнувши по відповідній мітці. Це особливо корисно для радіокнопок і прапорців.
Атрибути
forвказує ідентифікатор (id) елемента форми, з яким асоціюється мітка. Це забезпечує зв'язок між міткою і контрольним елементом.
Приклади використання
<label for="name">Ім'я:</label> <input type="text" id="name" name="user_name"><label> <input type="checkbox" name="subscribe" value="newsletter"> Підписатися на розсилку </label>Перший приклад демонструє використання <label> з атрибутом for, що вказує на текстове поле, де користувачі можуть ввести своє ім'я. Другий приклад показує мітку, що безпосередньо обгортає прапорець, що також створює асоціацію між міткою та контрольним елементом.
Особливості оформлення
Мітки можуть бути стилізовані за допомогою CSS для покращення візуального представлення форми. Це може включати зміни шрифту, кольору, розмірів, відступів та інших параметрів, що дозволяє міткам ефективно інтегруватися в дизайн веб-сторінки.
Тег <fieldset>
Тег <fieldset> використовується для групування пов'язаних елементів у формі. Цей тег створює візуальну рамку навколо групи контролів, надаючи можливість організовано представити секції форми. Часто <fieldset> використовується разом із тегом <legend>, який дозволяє задати заголовок для групи елементів.
Атрибути
<fieldset> не має специфічних атрибутів і використовує загальні атрибути HTML, такі як class, id, style.
Приклади використання
<form> <fieldset> <legend>Особиста інформація</legend> <label for="name">Ім'я:</label> <input type="text" id="name" name="user_name"> <label for="email">Електронна пошта:</label> <input type="email" id="email" name="user_email"> </fieldset> </form>Цей приклад демонструє використання <fieldset> для групування елементів форми, пов'язаних з особистою інформацією користувача, та використання <legend> для надання групі заголовка "Особиста інформація".
Особливості оформлення
<fieldset> може бути стилізований за допомогою CSS, що дозволяє налаштувати рамку, відступи, фон та інші стилістичні параметри групи елементів форми. Використання <fieldset> і <legend> підвищує зручність використання форм, роблячи їх більш зрозумілими та доступними для користувачів.
Тег <legend>
Тег <legend> використовується в межах тега <fieldset> для надання заголовка групі пов'язаних елементів у формі. Заголовок, створений за допомогою <legend>, відображається у верхній частині рамки, яку формує <fieldset>, що допомагає користувачам зрозуміти контекст введення даних.
Атрибути
<legend> не має специфічних атрибутів і використовує загальні атрибути HTML, такі як class, id, style.
Приклади використання
<fieldset> <legend>Контактна інформація</legend> <label for="phone">Телефон:</label> <input type="tel" id="phone" name="user_phone"> <label for="email">Електронна пошта:</label> <input type="email" id="email" name="user_email"> </fieldset>Цей приклад показує, як <legend> використовується для надання заголовка "Контактна інформація" групі елементів форми, що дозволяє користувачам краще зрозуміти, які дані від них запитуються.
Особливості оформлення
Хоча <legend> за замовчуванням має простий вигляд, його можна стилізувати за допомогою CSS для поліпшення візуальної привабливості та інтеграції в загальний дизайн форми. Можливості включають зміну кольору тексту, шрифту, розміру, фону та інші стилістичні налаштування, що дозволяє зробити заголовок більш помітним і читабельним.
Тег <select>
Тег <select> використовується для створення випадаючого списку (також відомого як "розкривний список"), що дозволяє користувачам вибрати один або декілька варіантів з набору. Цей елемент форми часто використовується для збору користувацьких переваг, вибору дат, часу, країн тощо.
Атрибути
nameвказує ім'я елемента, яке використовується для ідентифікації даних форми.multipleдозволяє користувачам вибирати більше одного варіанту.sizeвизначає кількість варіантів, які відображаються одночасно без необхідності прокручування.
Приклади використання
<label for="country">Країна:</label> <select id="country" name="country"> <option value="ua">Україна</option> <option value="pl">Польща</option> <option value="us">Сполучені Штати</option> </select>Цей приклад демонструє використання <select> для створення випадаючого списку з варіантами вибору країни.
Особливості оформлення
Випадаючий список може бути стилізований за допомогою CSS, хоча можливості для налаштування візуального вигляду <select> обмежені порівняно з іншими елементами форми через різницю в рендерингу елементів форми в різних браузерах та операційних системах. Тим не менш, можна налаштовувати ширину, висоту, колір фону, колір тексту та рамки, щоб покращити інтеграцію випадаючого списку в загальний дизайн форми.
Тег <option>
Опис:
Тег <option> використовується для створення окремих елементів (варіантів) у випадаючому списку, створеному за допомогою тега <select>.
Атрибути:
value: Визначає значення, яке буде передано на сервер, коли користувач вибирає цей варіант.
selected: Задає, чи буде цей варіант вибраний за замовчуванням.
disabled: Задає, чи буде цей варіант доступний для вибору користувачем.
label: Додає текстову мітку для цього варіанта.
Приклад використання:
HTML
<select name="country">
<option value="ua" selected>Україна</option>
<option value="pl">Польща</option>
<option value="us">Сполучені Штати</option>
</select>
content_copy
Особливості оформлення
Візуальне оформлення тега <option> залежить від стилю, застосованого до тега <select>. Ви можете використовувати CSS, щоб налаштувати шрифт, колір, розмір та інші візуальні атрибути елементів списку.
Порада:
Для кращої доступності рекомендується використовувати атрибут
labelдля опису кожного варіанту.Ви можете використовувати атрибут
disabled, щоб зробити деякі варіанти недоступними для вибору користувачем.
Тег <optgroup>
Тег <optgroup> використовується всередині елемента <select> для групування пов'язаних опцій у випадаючому списку. Це дозволяє користувачам краще навігувати по великих списках варіантів, забезпечуючи логічне розділення на підгрупи.
Атрибути
label(обов'язковий) визначає назву групи опцій, яка відображається в списку.disabledдозволяє вимкнути всю групу опцій, роблячи їх недоступними для вибору.
Приклади використання
<label for="car">Марка автомобіля:</label> <select id="car" name="car"> <optgroup label="Німецькі"> <option value="vw">Volkswagen</option> <option value="audi">Audi</option> </optgroup> <optgroup label="Японські"> <option value="toyota">Toyota</option> <option value="nissan">Nissan</option> </optgroup> </select>Цей приклад демонструє використання <optgroup> для створення двох груп опцій в межах випадаючого списку, що дозволяє користувачам вибирати марку автомобіля з упорядкованих за країною-виробником підгруп.
Особливості оформлення
Тег <optgroup> не має власного стилю оформлення, який можна було б змінити за допомогою CSS. Він використовується виключно для семантичного розділення груп опцій всередині <select>, полегшуючи користувачам процес вибору. Однак, атрибут label групи відображається стандартним шрифтом і стилем випадаючого списку, що встановлено браузером або операційною системою.
Тег <button>
Тег <button> використовується для створення кнопки на веб-сторінці. Кнопки можуть виконувати різні функції, залежно від контексту використання, наприклад, відправлення форми, обробку користувацьких дій через JavaScript тощо.
Атрибути
typeвизначає тип кнопки:submitдля відправлення форми,resetдля очищення форми,buttonдля інших дій, що не вимагають відправлення форми.nameзадає ім'я кнопки, яке може використовуватися при обробці даних форми.valueвказує значення кнопки, яке буде надіслано разом із формою при її відправленні.disabledвимикає кнопку, роблячи її недоступною для взаємодії.
Приклади використання
<button type="submit">Надіслати</button> <button type="button" onclick="alert('Привіт!')">Натисни мене</button>Перший приклад демонструє кнопку для відправлення форми, а другий — кнопку, яка викликає JavaScript-функцію, відображаючи повідомлення при натисканні.
Особливості оформлення
Кнопки можуть бути налаштовані з використанням CSS, щоб змінити їх вигляд, включно з кольором фону, кольором тексту, рамками, тінями та іншими ефектами. Також можливе налаштування візуальних станів кнопки, таких як :hover або :active, для покращення взаємодії з користувачем.
Використання CSS дає змогу створювати кнопки, які не тільки візуально привабливі, але й інтуїтивно зрозумілі для користувачів. Наприклад, можна застосувати стилі для зміни візуального представлення кнопки при наведенні курсора миші (:hover) або при натисканні (:active), що робить інтерфейс більш динамічним та взаємодійним.
Додаткові можливості стилізації кнопок включають:
Зміна форми кнопки: за допомогою властивостей
border-radiusможна створити кнопки з закругленими краями або навіть цілком круглі кнопки.Текстура та градієнти: використання градієнтів (
background-image: linear-gradient(...)) дозволяє створювати складніші та більш привабливі фони для кнопок.Тіні та ефекти:
box-shadowтаtext-shadowможуть додати кнопкам глибину та виразність, роблячи їх більш "тривимірними".Анімація: за допомогою CSS анімацій (
transitionтаanimation) можна додати ефекти плавності при зміні станів кнопок або додаткові візуальні ефекти, що активуються при взаємодії.
Приклад стилізації кнопки:
.button { background-color: #4CAF50; /* Зелений */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 8px; transition: background-color 0.3s ease; } .button:hover { background-color: #45a049; }<button class="button">Натисни мене</button>Цей CSS приклад демонструє створення кнопки зі зміною кольору фону при наведенні курсора. Завдяки таким технікам, кнопки на веб-сторінці можуть бути не лише функціональними, але й стильними елементами дизайну, що підвищує загальну привабливість і зручність взаємодії з інтерфейсом.
Тег <datalist>
Тег <datalist> використовується разом із тегом <input> для надання користувачу випадного списку з можливими (предзаданими) варіантами введення. Коли користувач починає вводити текст у поле <input>, яке асоційоване з <datalist>, він бачить список, що містить варіанти, схожі на введений текст. Це може бути корисно для форм, де очікується введення конкретних значень, наприклад, імені користувача, країни, міста тощо.
Атрибути
id(обов'язковий) використовується для ідентифікації<datalist>та асоціації його з відповідним полем введення через атрибутlistтега<input>.
Приклади використання
<label for="browser">Виберіть ваш браузер зі списку:</label> <input list="browsers" id="browser" name="browser"> <datalist id="browsers"> <option value="Google Chrome"> <option value="Firefox"> <option value="Microsoft Edge"> <option value="Opera"> <option value="Safari"> </datalist>У цьому прикладі, користувачам поля введення з ідентифікатором "browser" пропонується вибрати один з браузерів із предзаданого списку значень у <datalist>.
Особливості оформлення
Візуальне представлення <datalist> безпосередньо контролюється браузером користувача і не піддається повному кастомізуванню через CSS. Втім, стилізувати можна пов'язане поле <input>, адаптувавши його вигляд до загального дизайну форми або веб-сторінки.
Тег <canvas>
Тег <canvas> використовується для малювання графіки на сторінці веб-сайту за допомогою JavaScript. Це дає змогу динамічно створювати графічні елементи, такі як діаграми, ігри або інші візуальні ефекти, прямо у браузері користувача.
Атрибути
widthтаheightвизначають ширину та висоту області малювання в пікселях. Якщо не вказані, за замовчуванням встановлюються значення 300 на 150 пікселів.
Приклади використання
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 200, 100); </script>У цьому прикладі створюється область <canvas> з заданими розмірами та рамкою. За допомогою JavaScript малюється червоний прямокутник, що заповнює всю область канвасу.
Особливості оформлення
Хоча сам тег <canvas> можна стилізувати за допомогою CSS (наприклад, додавати рамки, задавати маржини), самі графічні елементи, які малюються на канвасі, стилізуються безпосередньо через JavaScript. За допомогою методів малювання API <canvas> можна створювати складні візуальні ефекти, враховуючи потреби вашого проекту.
Тег <embed>
Тег <embed> використовується для вбудовування зовнішнього контенту на веб-сторінку, такого як відео, аудіо, інтерактивні медіа, веб-додатки тощо. Він дозволяє інтегрувати вміст, який оброблюється плагінами або спеціальним програмним забезпеченням.
Атрибути
srcвказує URL зовнішнього ресурсу, який потрібно вбудувати.typeвизначає MIME-тип вмісту, допомагаючи браузеру вирішити, як правильно обробити вбудований ресурс.widthтаheightзадають розміри області вбудовування в пікселях.
Приклади використання
<embed src="movie.mp4" type="video/mp4" width="300" height="200">У цьому прикладі використання тега <embed> демонструє вбудовування відеофайлу на веб-сторінку з вказаними розмірами.
Особливості оформлення
Тег <embed> може бути стилізований за допомогою CSS, проте можливості стилізації обмежені основними параметрами, такими як відступи, рамки або розміри. Всерединішній вміст, вбудований через <embed>, стилізується незалежно і контролюється зовнішнім джерелом або плагіном.
Тег <object>
Тег <object> використовується для вбудовування різних видів медіа або даних на веб-сторінку, включаючи відео, аудіо, Flash-анімацію, PDF-документи та інші веб-додатки. Цей тег надає більшу гнучкість порівняно з <embed>, оскільки дозволяє вказати запасні варіанти контенту для відображення у випадку, якщо основний контент не може бути відтворений.
Атрибути
dataвказує URL ресурсу, який потрібно вбудувати.typeвизначає MIME-тип вмісту, що допомагає браузеру вирішити, як обробляти вбудований об'єкт.widthтаheightзадають розміри об'єкта на сторінці.nameвстановлює унікальне ім'я об'єкта, яке може використовуватися в скриптах.
Приклади використання
<object data="movie.swf" type="application/x-shockwave-flash" width="400" height="300"> <param name="movie" value="movie.swf"> <p>Ваш браузер не підтримує відображення Flash-контенту.</p> </object>У цьому прикладі <object> використовується для вбудовування Flash-анімації на сторінку. За допомогою елемента <param> задаються параметри для Flash-плеєра. Текст у тезі <p> відображається, якщо браузер користувача не підтримує відтворення Flash-контенту.
Особливості оформлення
Тег <object> можна стилізувати за допомогою CSS, встановлюючи розміри, рамки, відступи та інші візуальні параметри. Вміст, вбудований через <object>, стилізується відповідно до його внутрішніх налаштувань або за допомогою зовнішніх стилів, заданих у самому вбудованому контенті.
Тег <param>
Тег <param> використовується для визначення параметрів для об'єктів, вбудованих за допомогою тегу <object>. Цей тег дозволяє передавати необхідні дані або налаштування вбудованим об'єктам, таким як відеоплеєри, Flash-анімації, Java-аплети тощо, покращуючи їх інтеграцію та функціональність на веб-сторінці.
Атрибути
nameвказує назву параметра.valueзадає значення параметра.
Приклади використання
<object data="flash_movie.swf" type="application/x-shockwave-flash" width="400" height="300"> <param name="movie" value="flash_movie.swf"> <param name="quality" value="high"> Ваш браузер не підтримує Flash. </object>У цьому прикладі використовуються теги <param> для задання параметрів Flash-анімації, вбудованої за допомогою тегу <object>. Параметри включають шлях до файлу анімації та якість відображення.
Особливості оформлення
Тег <param> не має візуального відображення та не призначений для стилізації за допомогою CSS. Його основна роль - передача даних та налаштувань вбудованим об'єктам, а не вплив на візуальний аспект веб-сторінки.
Тег <picture>
Тег <picture> використовується для вказівки декількох джерел зображень або інструкцій браузеру щодо вибору найбільш підходящого зображення для відображення, залежно від умов, таких як розмір вікна перегляду, тип пристрою або якість з'єднання. Це дозволяє розробникам краще адаптувати зображення до різних сценаріїв використання, покращуючи загальну продуктивність веб-сторінок та користувацький досвід.
Атрибути
Тег <picture> сам по собі не містить специфічних атрибутів, окрім загальних, але він використовує вкладені теги <source> для вказівки різних джерел або типів зображень і атрибутів, як-от srcset та media.
Приклади використання
<picture> <source media="(min-width: 800px)" srcset="large.jpg"> <source media="(min-width: 460px)" srcset="medium.jpg"> <img src="small.jpg" alt="Опис зображення"> </picture>У цьому прикладі тег <picture> використовується для визначення трьох версій зображення: "large.jpg" для екранів ширше 800 пікселів, "medium.jpg" для екранів ширше 460 пікселів, і "small.jpg" як запасний варіант для менших екранів. Тег <img> використовується для вказівки запасного зображення та обов'язкового атрибута alt.
Особливості оформлення
Хоча тег <picture> сам по собі не призначений для стилізації за допомогою CSS, його вкладені зображення можуть бути стилізовані. Тег <img> або зображення, вказані в атрибуті srcset в тегах <source>, можуть бути налаштовані за допомогою CSS для встановлення розмірів, рамок, відступів та інших візуальних параметрів.
Тег <svg>
Тег <svg> (Scalable Vector Graphics) використовується для вбудовування векторної графіки безпосередньо у HTML-документи. Векторна графіка, створена за допомогою SVG, добре масштабується на будь-якому розширенні екрану без втрати якості, що робить її ідеальною для логотипів, іконок, складних діаграм та інших графічних елементів.
Атрибути
widthтаheightзадають розміри SVG-елемента.viewBoxвизначає область перегляду всередині SVG, що дозволяє контролювати масштабування та позиціонування графіки.fillзадає колір заливки для елементів всередині SVG.strokeвизначає колір та параметри обводки елементів.
Приклади використання
<svg width="100" height="100" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg>У цьому прикладі за допомогою SVG створюється круг з жовтою заливкою та зеленою обводкою. Атрибути cx, cy та r визначають центр та радіус круга відповідно.
Особливості оформлення
SVG-елементи можуть бути стилізовані за допомогою CSS, що дозволяє налаштувати їх зовнішній вигляд, включаючи кольори, обводки, заливку, прозорість та інші візуальні ефекти. Також SVG підтримує інтерактивність та анімацію через CSS або JavaScript, роблячи можливим створення динамічних та інтерактивних веб-елементів.
Інтерактивні елементи
Тег <details>
Тег <details> використовується для створення випадкового контенту, який користувач може показати або сховати за бажанням. Цей елемент створює інтерактивний виджет на веб-сторінці, де деталі за замовчуванням приховані і можуть бути розкриті користувачем. Часто використовується для FAQ секцій, де питання є видимими, а відповіді приховані до моменту натискання.
Атрибути
open- цей булевий атрибут вказує, що вміст<details>має бути відкритий за замовчуванням.
Приклади використання
<details> <summary>Часто задавані питання (FAQ)</summary> <p>Тут ви знайдете відповіді на найпоширеніші питання.</p> </details>У цьому прикладі тег <summary> використовується для вказівки заголовка розкривного списку, а контент всередині <details> стає видимим тільки після того, як користувач натисне на заголовок.
Особливості оформлення
Тег <details> може бути стилізований за допомогою CSS, проте елементи за замовчуванням, як-от іконка розкривання, можуть відрізнятися в залежності від браузера. Ви можете налаштувати вигляд заголовка за допомогою тега <summary> і додати стилі до вмісту <details> для кращої інтеграції з дизайном вашого сайту.
Тег <dialog>
Тег <dialog> призначений для створення модальних вікон (діалогових вікон), які можуть використовуватися для сповіщень, підтверджень, форм введення даних та інших інтерактивних елементів інтерфейсу. Модальне вікно - це вікно, яке вимагає від користувача взаємодії перед поверненням до основного інтерфейсу.
Атрибути
open- булевий атрибут, який вказує, чи відображається діалогове вікно на сторінці. Якщо атрибут присутній, діалог вважається відкритим.
Приклади використання
<dialog id="myDialog" open>Це діалогове вікно</dialog> <button onclick="document.getElementById('myDialog').showModal();">Показати діалог</button>У цьому прикладі створюється діалогове вікно, яке може бути показано за допомогою методу showModal() після натискання на кнопку. Цей метод робить вікно модальним, тобто вимагає від користувача взаємодії з діалоговим вікном, перш ніж продовжити роботу з іншими частинами сторінки.
Особливості оформлення
Тег <dialog> може бути стилізований за допомогою CSS, що дозволяє змінювати його візуальні характеристики, такі як розмір, позиціонування, колір фону, стилі рамок та інше. Це дає можливість інтегрувати діалогове вікно в загальний дизайн сайту та забезпечити хороший користувацький досвід.
Метаінформація та програмування
Тег <meta>
Тег <meta> використовується для зазначення метаінформації про HTML-документ, яка не відображається на самій веб-сторінці, але використовується браузерами та пошуковими системами для обробки та класифікації сторінки. Метаінформація може включати дані про символьний набір сторінки, опис документа, ключові слова для пошукових систем, автора документа тощо.
Атрибути
nameвказує назву атрибута метаінформації.contentмістить значення атрибута метаінформації.charsetвизначає кодування символів документа.
Приклади використання
Встановлення кодування документа:
<meta charset="UTF-8">Вказівка ключових слів для пошукових систем:
<meta name="keywords" content="HTML, CSS, JavaScript">Вказівка автора документа:
<meta name="author" content="Іван Іваненко">Вказівка опису сторінки:
<meta name="description" content="Ця сторінка містить інформацію про HTML теги.">Особливості оформлення
Тег <meta> не впливає безпосередньо на візуальне представлення контенту веб-сторінки, тому не має стилів оформлення через CSS. Його основна роль - надання метаінформації для браузерів, пошукових систем та інших веб-сервісів.
Тег <base>
Тег <base> використовується в HTML для вказівки базової URL-адреси або цільового вікна/рамки для всіх відносних URL-адрес, що містяться в документі. Це дозволяє змінювати поведінку всіх відносних посилань у документі, встановивши одну базову адресу або ціль.
Атрибути
hrefвказує базову URL-адресу, відносно якої будуть розглядатися всі відносні URL-адреси в документі.targetзадає ім'я цільового вікна або рамки, де будуть відкриватися всі посилання, визначені в документі.
Приклади використання
<head> <base href="https://example.com/" target="_blank"> </head>У цьому прикладі базова URL-адреса для всіх відносних посилань у документі встановлена як https://example.com/, а атрибут target="_blank" вказує, що всі посилання повинні відкриватися в новому вікні або вкладці браузера.
Особливості оформлення
Тег <base> не має візуального представлення та не підлягає стилізації за допомогою CSS, оскільки його функція обмежена впливом на поведінку посилань та інших ресурсів у документі. Він повинен бути розміщений всередині секції <head> документа і, як правило, використовується один раз.
Тег <link>
Тег <link> використовується для встановлення зв'язку між поточним документом та зовнішнім ресурсом. Найчастіше це використовується для підключення стилів CSS, але також може застосовуватися для визначення іконки сайту (favicon), підключення шрифтів або інтеграції з іншими веб-документами.
Атрибути
rel(обов'язковий) вказує тип зв'язку між документами. Наприклад,stylesheetдля CSS-файлів.hrefвизначає шлях до зовнішнього ресурсу.typeвказує MIME-тип ресурсу, наприклад,text/cssдля стилів.mediaописує, для яких медіа або пристроїв буде застосовуватися зовнішній ресурс.
Приклади використання
Підключення зовнішнього CSS файлу:
<head> <link rel="stylesheet" href="styles.css" type="text/css" media="screen"> </head>Визначення іконки сайту (favicon):
<head> <link rel="icon" href="favicon.ico" type="image/x-icon"> </head>Підключення шрифтів:
<head> <link rel="stylesheet" href="https://example.com/fonts/font.css"> </head>Особливості оформлення
Тег <link> не впливає безпосередньо на візуальне представлення сторінки та не має властивостей для стилізації через CSS. Його основне призначення — вказати браузеру на необхідність завантажити та використати зовнішні ресурси, які можуть вплинути на візуальний аспект або функціональність веб-сторінки.
Тег <style>
Тег <style> використовується для включення стилів CSS безпосередньо у HTML-документ. Це дозволяє описувати візуальне форматування елементів веб-сторінки, таких як колір тексту, тип шрифту, відступи, рамки тощо, без необхідності використання зовнішнього файлу стилів.
Атрибути
typeвказує на тип вмісту, що міститься в елементі. Для CSS використовується значення "text/css" (за замовчуванням, тому зазвичай цей атрибут можна опустити).mediaвизначає, для яких типів пристроїв або медіа-запитів будуть застосовуватися стилі.
Приклади використання
<head> <style> body { background-color: lightblue; } h1 { color: navy; margin-left: 20px; } </style> </head>У цьому прикладі всередині секції <head> документа визначено два стилі: для елемента <body> задається колір фону, а для елементів <h1> — колір тексту та відступ зліва.
Особливості оформлення
Хоча тег <style> сам по собі не має візуального представлення на сторінці, він використовується для задання CSS-правил, які безпосередньо впливають на оформлення елементів HTML. Використання <style> усередині HTML-документа є зручним для невеликих сторінок або швидкого тестування стилів, але для більших проектів рекомендується використовувати зовнішні файли стилів для кращої організації коду та підтримки.
Тег <script>
Тег <script> використовується для вбудовування або посилання на виконуваний код JavaScript у HTML-документі. Це дозволяє додати інтерактивність на веб-сторінки, такі як анімації, обробку подій, перевірку форм на стороні клієнта, динамічне змінення вмісту тощо.
Атрибути
srcвказує шлях до зовнішнього файлу JavaScript, який потрібно включити.typeвизначає тип скрипта, зазвичай використовується "text/javascript". Хоча цей атрибут не є обов'язковим в HTML5, де "text/javascript" є значенням за замовчуванням.asyncвказує, що скрипт буде виконаний асинхронно, як тільки він буде доступний.deferвідкладає виконання скрипта до моменту, коли вся сторінка буде завантажена.
Приклади використання
Вбудовування JavaScript безпосередньо у HTML-документ:
<script> document.getElementById("demo").innerHTML = "Привіт, JavaScript!"; </script>Підключення зовнішнього файлу JavaScript:
<script src="script.js"></script>Особливості оформлення
Тег <script> не має візуального представлення і не призначений для стилізації за допомогою CSS. Його основна функція - включення або посилання на виконуваний код JavaScript, який може змінювати візуальне представлення сторінки або її поведінку за допомогою DOM-маніпуляцій або інших JavaScript-операцій.
Тег <noscript>
Тег <noscript> використовується для визначення вмісту, який буде відображений тільки в тому випадку, якщо в браузері користувача вимкнено виконання JavaScript або він не підтримується. Це дозволяє розробникам надавати альтернативний контент для користувачів, які не можуть використовувати JavaScript-залежні функції на сайті.
Атрибути
Тег <noscript> не має спеціальних атрибутів, які б відрізнялися від загальних атрибутів HTML.
Приклади використання
<noscript>Ваш браузер не підтримує JavaScript або виконання скриптів заблоковано. Будь ласка, оновіть браузер або включіть JavaScript для коректної роботи сайту.</noscript>У цьому прикладі всередині тега <noscript> розміщено повідомлення, яке буде відображено користувачам у випадку, якщо JavaScript вимкнено. Це може бути корисним для інформування користувачів про необхідність включення JavaScript для доступу до всіх функцій веб-сайту.
Особливості оформлення
Хоча тег <noscript> сам по собі не має візуального представлення, вміст, який він містить, може бути стилізований за допомогою CSS. Це дозволяє розробникам визначити стиль альтернативного контенту, наприклад, змінити розмір шрифту, колір тексту або додати рамку для виділення повідомлення про необхідність включення JavaScript.
Семантичні та форматувальні елементи
Тег <div>
Тег <div> є одним з найбільш універсальних контейнерів у HTML і використовується для групування блокових елементів для подальшої стилізації чи використання скриптів. <div> є блоковим елементом і часто слугує як контейнер для інших HTML-елементів.
Атрибути
Тег <div> не має спеціальних атрибутів, окрім загальних атрибутів HTML, таких як id, class, style тощо, які дозволяють визначити ідентифікатор блоку, його клас для застосування CSS-стилів або безпосередньо вказати стилі через атрибут style.
Приклади використання
<div class="header"> <h1>Заголовок сайту</h1> </div> <div class="content"> <p>Це головний вміст сайту.</p> </div> <div class="footer"> <p>Копірайт © 2024</p> </div>У цьому прикладі використовується кілька <div> елементів для структурування основних секцій веб-сторінки: заголовка, основного вмісту та підвалу. Застосування класів дозволяє легко стилізувати кожну з цих секцій за допомогою CSS.
Особливості оформлення
Тег <div> сам по собі не має візуального представлення і не впливає на вміст, який він містить, без застосування CSS-стилів. Використання CSS з <div> дозволяє розробникам визначати широкий спектр стилів, включаючи розміри, відступи, колір фону, рамки та багато іншого, для створення бажаної макету сторінки та її візуального оформлення.
Також раджу прочитати: Паралакс-ефекти у WordPress: Як створити їх з CSS
Тег <span>
Тег <span> є стрічковим контейнером, який використовується для групування або форматування частин тексту всередині інших блокових чи стрічкових елементів без зміни їх структури. <span> часто застосовується для застосування стилів, класів або для ідентифікації частини тексту за допомогою JavaScript.
Атрибути
Як і <div>, тег <span> не має спеціальних атрибутів і може включати загальні атрибути HTML, такі як id, class, style тощо, для встановлення ідентифікатора, класу для CSS-стилів або безпосередньо застосування стилів через атрибут style.
Приклади використання
<p>Це <span style="color: red;">червоний</span> текст.</p>У цьому прикладі за допомогою <span> вказано, що частина тексту має бути відображена червоним кольором. Це демонструє, як <span> може бути використаний для застосування стилів до окремих частин тексту без зміни їх структури.
Особливості оформлення
Тег <span> сам по собі не вносить жодних візуальних змін у документ і не має власного візуального представлення. Однак, використання CSS з <span> дозволяє детально налаштовувати візуальне представлення тексту, який він містить, включаючи колір тексту, розмір шрифту, фон, рамки та багато іншого, що робить його надзвичайно гнучким інструментом для веб-розробників.
Тег <blockquote>
Тег <blockquote> використовується для відображення цитат або витягів з тексту, які зазвичай відокремлені від основного потоку контенту. Він призначений для довгих цитат, що охоплюють кілька рядків, і часто має відступи з обох сторін у візуальному представленні.
Атрибути
citeвказує URL-адресу документу або ресурсу, з якого взято цитату. Цей атрибут призначений для вказівки на джерело цитати, але не відображається візуально.
Приклади використання
<blockquote cite="http://example.com"> <p>Це приклад цитати, взятої з зовнішнього ресурсу, яка використовується у контексті документу.</p> </blockquote>У цьому прикладі <blockquote> використовується для оформлення цитати, з посиланням на її джерело через атрибут cite.
Особливості оформлення
Хоча тег <blockquote> має стандартні стилі відображення у більшості браузерів, зокрема відступи з боків, його можна стилізувати за допомогою CSS для досягнення бажаного візуального ефекту. Це може включати зміну розміру шрифту, кольору тексту, відступів, стилю рамки та фону, щоб цитата гармонійно вписувалася в дизайн веб-сторінки.
blockquote { font-style: italic; margin: 20px; padding: 20px; background-color: #f9f9f9; border-left: 10px solid #ccc; }Цей CSS-код стилізує <blockquote>, надаючи йому італічний шрифт, відступи, фон та ліву межу для виділення.
Тег <q>
Тег <q> використовується для вставки коротких цитат в текст, які не вимагають відокремлення від основного потоку контенту, на відміну від <blockquote>, який призначений для довших цитат. Браузери зазвичай автоматично додають лапки до тексту, огорнутого в <q>.
Атрибути
cite- так само, як і у тега<blockquote>, атрибутciteвикористовується для вказівки на джерело цитати. Атрибутciteмістить URL документа або ресурсу, з якого було взято цитату.
Приклади використання
<p>Як сказав Оскар Уайльд: <q cite="https://example.com">Бути самим собою - це виглядати так, як іншим хочеться.</q></p>У цьому прикладі <q> використовується для вставки короткої цитати в абзац. Браузер автоматично додасть лапки до цитати.
Особливості оформлення
Тег <q> може бути стилізований за допомогою CSS, хоча більшість браузерів використовують свої власні стилі для відображення лапок. Ви можете змінити ці стилі, щоб краще вписати цитату в дизайн вашого сайту, наприклад, змінивши колір, шрифт або додавши відступи.
q { quotes: "“" "”" "‘" "’"; font-style: italic };Цей CSS-код змінює стандартні лапки, які браузер використовує для цитат в <q>, та застосовує курсивне написання тексту цитати.
Тег <code>
Тег <code> використовується для відображення фрагмента комп'ютерного коду всередині HTML-документа. Текст, оформлений цим тегом, зазвичай відображається шрифтом з фіксованою шириною символів, що допомагає виділити його серед іншого тексту та зберегти форматування коду.
Атрибути
Тег <code> не має спеціальних атрибутів і використовує загальні атрибути HTML.
Приклади використання
<p>Для виведення тексту в консоль використовуйте команду <code>console.log("Привіт, світ!");</code> у JavaScript.</p>У цьому прикладі <code> використовується для відображення рядка коду JavaScript, який виводить повідомлення "Привіт, світ!" у консоль браузера. Використання <code> дозволяє чітко відокремити код від іншого тексту на сторінці.
Особливості оформлення
За замовчуванням, браузери відображають текст у <code> з використанням шрифту з фіксованою шириною символів. Однак, ви можете використовувати CSS для подальшої стилізації тега <code>, наприклад, змінюючи колір тексту, фон, додаваючи рамки або відступи для кращої видимості та читабельності коду.
code { background-color: #f4f4f4; border: 1px solid #ddd; padding: 2px 4px; color: #666; border-radius: 3px; }Цей CSS-код додає легкий фоновий колір для елементів <code>, а також рамку, відступи та закруглені кути для покращення візуальної привабливості відображення коду.
Тег <pre>
Тег <pre> використовується для відображення предформатованого тексту. Вміст всередині тега <pre> зберігає всі пробіли, табуляції та переноси рядків, які були в оригінальному тексті. Це робить його ідеальним для відображення коду або розмітки, де форматування є ключовим.
Атрибути
Тег <pre> не має спеціальних атрибутів, окрім загальних атрибутів HTML.
Приклади використання
<pre> function sayHello() { console.log("Привіт, світ!"); } </pre>У цьому прикладі <pre> використовується для відображення блоку коду JavaScript. Завдяки використанню <pre>, всі відступи та переноси рядків у коді зберігаються, що полегшує його читання та розуміння.
Особливості оформлення
Тег <pre> за замовчуванням відображає текст шрифтом з фіксованою шириною символів, що допомагає виділити структуру коду або предформатованого тексту. Ви можете використовувати CSS для налаштування візуального стилю елемента <pre>, наприклад, змінивши колір фону, колір тексту або додавши рамки.
pre { background-color: #f4f4f4; border: 1px solid #ddd; padding: 10px; border-radius: 5px; overflow: auto; }Цей CSS-код додає світлий фон, рамку, відступи та закруглені краї для блоків <pre>, а також задає автоматичне прокручування, якщо вміст перевищує розміри блоку.
Семантичні HTML теги
Тег <code>
Тег <code> використовується для відображення фрагмента комп'ютерного коду всередині HTML-документа. Текст, оформлений цим тегом, зазвичай відображається шрифтом з фіксованою шириною символів, що допомагає виділити його серед іншого тексту та зберегти форматування коду.
Атрибути
Тег <code> не має спеціальних атрибутів і використовує загальні атрибути HTML.
Приклади використання
<p>Для виведення тексту в консоль використовуйте команду <code>console.log("Привіт, світ!");</code> у JavaScript.</p>У цьому прикладі <code> використовується для відображення рядка коду JavaScript, який виводить повідомлення "Привіт, світ!" у консоль браузера. Використання <code> дозволяє чітко відокремити код від іншого тексту на сторінці.
Особливості оформлення
За замовчуванням, браузери відображають текст у <code> з використанням шрифту з фіксованою шириною символів. Однак, ви можете використовувати CSS для подальшої стилізації тега <code>, наприклад, змінюючи колір тексту, фон, додаваючи рамки або відступи для кращої видимості та читабельності коду.
code { background-color: #f4f4f4; border: 1px solid #ddd; padding: 2px 4px; color: #666; border-radius: 3px; }Цей CSS-код додає легкий фоновий колір для елементів <code>, а також рамку, відступи та закруглені кути для покращення візуальної привабливості відображення коду.
Огляд інструментів розробника
При розробці веб-сайтів важливо використовувати інструменти розробника, які є вбудованими в сучасні веб-браузери. Ці інструменти надають можливість переглядати, редагувати HTML елементи та CSS стилі в реальному часі, а також діагностувати проблеми з JavaScript і мережеві запити. Оглянемо основні інструменти, доступні в найпопулярніших браузерах: Google Chrome, Mozilla Firefox, та Safari.
Google Chrome DevTools
Google Chrome пропонує одні з найпотужніших інструментів для веб-розробників. З їх допомогою можна легко інспектувати елементи сторінки, змінювати їх властивості на льоту, перевіряти відповідність стилів, відслідковувати проблеми з продуктивністю та аналізувати мережеву активність. Щоб відкрити DevTools у Chrome, можна скористатися контекстним меню, вибравши "Огляд" (Inspect), або натиснути F12/ Ctrl+Shift+I.
Firefox Developer Tools
Mozilla Firefox має набір інструментів для розробників, схожих на Chrome, але з деякими унікальними функціями, такими як відображення сітки CSS Grid, інструменти для аналізу продуктивності та більш детальні можливості для роботи з SVG і анімацією. Відкрити Developer Tools у Firefox можна через контекстне меню, вибравши "Огляд елемента" (Inspect Element), або за допомогою клавіш F12/ Ctrl+Shift+I.
Safari Web Inspector
Safari пропонує Web Inspector для користувачів Mac і iOS, що є потужним інструментом для веб-розробки. Хоча він має багато спільного з інструментами в інших браузерах, Safari надає додаткові функції для розробки та відлагодження веб-сайтів, специфічних для екосистеми Apple. Для доступу до Web Inspector в Safari, спочатку потрібно увімкнути меню розробника у налаштуваннях Safari, а потім вибрати "Огляд елемента" у контекстному меню або використати комбінацію клавіш Cmd+Option+I.
Корисні поради для використання інструментів розробника:
Експериментуйте з CSS: Використовуйте інструменти розробника, щоб експериментувати з CSS стилями в реальному часі, перевіряючи, як зміни впливають на вигляд вашої сторінки.
Мобільна адаптація: Сучасні інструменти дозволяють емулювати різні мобільні пристрої та розміри екрану, що є незамінним при розробці адаптивних веб-сайтів.
Відлагодження JavaScript: Використовуйте консоль та інші інструменти для відлагодження JavaScript коду, що дозволить виявляти та усувати помилки швидше.
Оптимізація продуктивності: Аналізуйте час завантаження сторінок і використання ресурсів за допомогою інструментів розробника, щоб оптимізувати продуктивність вашого сайту.
Освоєння цих інструментів є ключовим аспектом для будь-якого веб-розробника, адже вони значно спрощують процес розробки та відлагодження веб-сайтів.
Підсумки
Ця стаття слугує цінним довідковим матеріалом з HTML, який може доповнити або навіть замінити стандартні курси з HTML та CSS. Вона покликана стати надійним помічником у вивченні основ та тонкощів використання HTML тегів, надаючи читачам глибоке розуміння як базових, так і більш складних аспектів мови розмітки.
Завдяки структурованому огляду та детальному аналізу кожного тегу, ця стаття може стати ефективним доповненням до будь-яких курсів з HTML. Вона забезпечує практичні приклади використання, які сприяють кращому засвоєнню матеріалу, та рекомендації щодо оформлення, що дозволяють глибше зрозуміти стилізацію веб-сторінок.
Оскільки технології постійно розвиваються, стаття буде регулярно оновлюватися з урахуванням нових стандартів та практик у веб-розробці. Тому є сенс зберегти її у закладках, щоб завжди мати під рукою актуальну та вичерпну інформацію, яка може виявитися корисною як для новачків, так і для досвідчених розробників.
У поєднанні з курсами з HTML та CSS, ця стаття стане незамінним ресурсом у вашій бібліотеці довідкових матеріалів з HTML, сприяючи якісному та швидкому навчанню веб-розробки.
Тег: <meta property="og:*">
Атрибути
property: Визначає тип відкритої графіки (Open Graph) для контенту, наприклад,og:title,og:description,og:image.content: Вказує значення властивості Open Graph.
Приклади використання
<meta property="og:title" content="Example Title">
<meta property="og:description" content="This is an example description for Open Graph protocol.">
<meta property="og:image" content="https://example.com/image.jpg">
Особливості оформлення
Тег <meta property="og:*"> використовується для покращення вигляду сторінок при поширенні в соціальних мережах. Важливо враховувати, що Open Graph теги повинні бути розміщені в голові документа (<head>). Вони не візуалізуються на самому сайті, але впливають на те, як сайт виглядає у вигляді попереднього перегляду в соцмережах.
Тег: itemprop
Атрибути
itemprop: Визначає властивість елемента в рамках схеми мікроданих (microdata), наприклад,name,description,image.itemscope: Визначає, що елемент є контейнером для мікроданих.itemtype: Визначає тип елемента за допомогою URL схеми, наприклад,http://schema.org/Article.
Приклади використання
<div itemscope itemtype="http://schema.org/Article">
<span itemprop="name">Example Article Title</span>
<span itemprop="description">This is an example description for the article.</span>
<img itemprop="image" src="https://example.com/image.jpg" alt="Example Image">
</div>
Особливості оформлення
Тег itemprop використовується для додавання структурованих даних до елементів HTML. Це допомагає пошуковим системам краще розуміти вміст сторінки та покращувати її індексацію. Схеми мікроданих часто використовуються для покращення вигляду сторінок у результатах пошуку (Rich Snippets).
FAQ про HTML теги
1. Що таке HTML теги?
HTML теги - це спеціальні кодові конструкції, що використовуються у мові гіпертекстової розмітки (HTML) для структурування та форматування контенту на веб-сторінках. Теги огортають контент, вказуючи браузеру, як його слід відображати.
2. Які існують основні типи HTML тегів?
Існують два основні типи HTML тегів: блокові та стрічкові. Блокові теги (наприклад, <div>, <p>, <h1>-<h6>) використовуються для структурування основних частин сторінки, тоді як стрічкові теги (наприклад, <span>, <a>, <img>) призначені для форматування окремих частин тексту або вставки зображень.
3. Чи обов'язково закривати HTML теги?
Так, більшість HTML тегів потребують закриття. Відкриваючий тег (<tag>) вводить елемент, а закриваючий тег (</tag>) вказує на його кінець. Втім, існують самозакривні теги (наприклад, <img>, <br>, <input>), які не потребують закриття.
4. Як створити гіперпосилання за допомогою HTML?
Для створення гіперпосилання використовується тег <a> з атрибутом href, де вказується URL адреса посилання. Наприклад: <a href="http://example.com">Відвідайте наш сайт</a>.
5. Як вставити зображення на веб-сторінку?
Для вставки зображення використовується тег <img> з обов'язковим атрибутом src, що вказує шлях до зображення, та alt, який надає альтернативний текст: <img src="image.jpg" alt="Опис зображення">.
6. Як використовувати таблиці в HTML?
Для створення таблиць використовується тег <table>, в межах якого рядки означаються через <tr>, заголовки стовпців - через <th>, а комірки даних - через <td>. Наприклад:
<table> <tr> <th>Ім'я</th> <th>Вік</th> </tr> <tr> <td>Петро</td> <td>30</td> </tr> </table>7. Чи можна використовувати коментарі в HTML?
Так, коментарі в HTML додаються за допомогою конструкції <!-- коментар --> і не відображаються на веб-сторінці. Коментарі можуть бути корисними для пояснення коду або тимчасового видалення елементів без їх фактичного видалення.
