HTML (HyperText Markup Language) є основою вебу. Незалежно від того, чи ви створюєте особистий вебсайт, розробляєте професійне портфоліо або починаєте кар'єру в веб-розробці, освоєння HTML є необхідним.
Цей посібник проведе вас від основ до більш складних концепцій з практичними прикладами.
├── Структура HTML-документа
| ├── Оголошення DOCTYPE
| ├── HTML-теги
| ├── Атрибути
| └── Коментарі
|
|── Текстові елементи
| ├── Заголовки (h1-h6)
| ├── Параграфи (p)
| ├── Жирний та курсив (b, strong, i, em)
| ├── Переноси рядка (br)
| └── Попередньо відформатований текст (pre)
|
|── Посилання
| ├── Тег Anchor (a)
| ├── Абсолютні та відносні URL
| ├── Відкриття в новій вкладці (_blank)
| ├── Посилання на електронну пошту (mailto)
| └── Заголовки посилань
|
|── Зображення
| ├── Тег img
| ├── Атрибути src та alt
| ├── Адаптивні зображення
| └── Ліниве завантаження
|
|── Списки
| ├── Нумеровані списки (ol)
| ├── Ненумеровані списки (ul)
| ├── Елементи списку (li)
| └── Вкладені списки
|
|── Таблиці
| ├── table, tr, th, td
| ├── Заголовки таблиць
| ├── Об’єднання клітинок (colspan, rowspan)
| └── Стилізація таблиць
|
|── Форми
| ├── Тег form
| ├── Типи введення (text, email, password тощо)
| ├── Мітки та підказки
| ├── Кнопки (button, submit, reset)
| ├── Текстове поле
| ├── Прапорці та радіокнопки
| ├── Select та Option
| └── Валідація форм
|
|── Мультимедіа
| ├── Тег Video
| ├── Тег Audio
| ├── Елементи Source та Track
| ├── Автовідтворення та елементи керування
| └── Вбудовування відео з YouTube
|
|── Семантичний HTML
| ├── Header, Footer, Main
| ├── Section, Article, Aside
| ├── Nav
| ├── Figure та Figcaption
| └── Time та Mark
|
|── Мета-дані
| ├── Тег head
| ├── Тег title
| ├── Мета-теги
| ├── Налаштування перегляду
| └── Favicon
|
|── Вбудовані та блокові елементи
| ├── Відмінності
| ├── Приклади вбудованих елементів
| ├── Приклади блокових елементів
| └── Зміна властивості display
|
|── Iframes
| ├── Вбудовування веб-сторінок
| ├── Атрибут Sandbox
| └── Зміна розміру та межі
|
|── Доступність (a11y)
| ├── Ролі ARIA
| ├── alt текст для зображень
| ├── Семантичний HTML для екранних читалок
| └── Навігація з клавіатури
|
|── Розширені форми
| ├── Fieldset та Legend
| ├── DataList
| ├── Патерни валідації введення
| ├── Приховані поля
| └── Авдоповнення
|
|── Адаптивний дизайн
| ├── Мета-тег перегляду
| ├── Медіа-запити в HTML
| ├── Елемент Picture
| └── Адаптивні таблиці
|
|── HTML API
| ├── API геолокації
| ├── API перетягування та скидання
| ├── API Canvas
| └── API веб-даних
|
|── Депреціровані теги та атрибути
| ├── Тег font
| ├── Тег Center
| └── Альтернативи застарілих функцій
|
|── Основи SEO
| ├── Правильна структура заголовків
| ├── alt теги для зображень
| ├── Мета-опис
| ├── Мета-теги robots
| └── Канонічні посилання
|
|── Кращі практики
| ├── Чистий та організований код
| ├── Уникати inline CSS
| ├── Використовувати семантичні теги
| ├── Мінімізувати використання застарілих тегів
| └── Перевіряти HTML код
|
|── Розгортання
| ├── Платформи хостингу (Netlify, Vercel)
| ├── Завантаження через FTP
| └── Використання GitHub Pages
|
Структура HTML-документа
Кожен HTML-документ має стандартну структуру:
Welcome to My Website
This is a paragraph of text.
``` - ``: Оголошує тип документа. - ``: Корінь HTML-документа. - **Атрибути**: Додають додаткову інформацію до тегів, наприклад, `id="header"`. - **Коментарі**: Використовуйте `` для додавання приміток. ## Текстові елементи HTML надає теги для структурування тексту: ```
Main Heading
This is a paragraph.
Bold Text and Italic Text
Preformatted text keeps spacing.
- Заголовки варіюються від `
` до `
`. - Використовуйте `` для розривів рядка та `
` для збереження форматування тексту. ## Посилання Створюйте клікабельні посилання: ``` Перейти на приклад Напишіть мені ``` - `href`: Вказує на місце призначення посилання. - `target="_blank"`: Відкриває посилання в новій вкладці. ## Зображення Додавайте зображення з описовим текстом: ``` ``` - `alt`: Надає текст для екранних читалок і відображається, якщо зображення не завантажується. - Використовуйте адаптивні зображення за допомогою CSS або тегу ``. ## Списки Організуйте інформацію за допомогою списків: ```
Неупорядкований елемент
Упорядкований елемент
``` Списки можуть бути вкладеними для ієрархічних структур. ## Таблиці Структуруйте табличні дані: ```
Заголовок 1 Заголовок 2 Дані 1 Дані 2
``` - Використовуйте `colspan` і `rowspan` для об’єднання клітинок. ## Форми Збирайте дані від користувачів: ``` Ім’я: Відправити ``` Досліджуйте розширені елементи, такі як прапорці, радіокнопки та патерни валідації. ## Мультимедіа Вбудовуйте відео та аудіо: ``` ``` ## Семантичний HTML Покращуйте читабельність і доступність: ```
Заголовок сайту
Заголовок статті
Контент тут.
``` ## Адаптивний дизайн Переконайтесь, що ваш сайт працює на всіх пристроях: ``` ``` Використовуйте медіа-запити для CSS або елемент `` для зображень. ## Доступність (a11y) Зробіть ваш сайт доступним для всіх: - Додайте атрибути `alt` до зображень. - Використовуйте **семантичні теги** для кращої підтримки екранних читалок. - Увімкніть навігацію за допомогою клавіатури з ролями ARIA та мітками. ## HTML API Досліджуйте розширені функції: ``` Отримати місцезнаходження ``` ## Кращі практики - Пишіть **чистий, організований код**. - Використовуйте **семантичні теги** для структури. - Перевіряйте ваш HTML за допомогою інструментів, таких як W3C Validator. ## Розгортання Запустіть ваш проєкт: - Використовуйте платформи, такі як **GitHub Pages** або **Netlify**. - Розгорніть через **FTP** для традиційного хостингу. Опанування HTML відкриває двері у веб-розробку. Практикуйтесь регулярно, створюйте проєкти та досліджуйте розширені теми, щоб стати професіоналом. Щасливого кодування!
Перекладено з: [HTMLMastering HTML: Your Journey from Beginner to Advanced](https://medium.com/@sonuyadav1/mastering-html-your-journey-from-beginner-to-advanced-1c922c96eaf2)