Що таке HTML і як він задає структуру сторінки
Автор: Редакція Domeny.ForSale Опубліковано
Коротко: HTML — це мова розмітки, яка описує структуру та значення вмісту вебсторінки. Вона повідомляє браузеру, які фрагменти є заголовками, абзацами, посиланнями, зображеннями чи формами. Це не мова програмування: для оформлення сторінки насамперед слугує CSS, а для додавання поведінки та взаємодії часто використовують JavaScriptu.
Для чого потрібен HTML на вебсторінці?
Скорочення HTML походить від англійського HyperText Markup Language, тобто «мова гіпертекстової розмітки». «Гіпертекст» — це текст, пов’язаний посиланнями з іншими документами або фрагментами вмісту. «Теги» — це позначення в коді, які надають окремим частинам документа певну роль.
Коли ви відкриваєте сторінку, браузер читає HTML і на його основі створює структуру документа. Потім він показує вміст на екрані, враховуючи також стилі та роботу скриптів, якщо їх підключено. Зазвичай користувач бачить результат цього процесу, а не сам код.
Наприклад, на сторінці кав’ярні назва закладу може бути головним заголовком, опис — абзацом, меню — списком, а посилання вести до бронювання. HTML визначає, чим є ці елементи, але не обов’язково задає їхній колір чи місце, яке вони займають на екрані.
Теги, елементи й атрибути — як читати HTML?
Тег — це позначення в кутових дужках, наприклад <p>. Багато елементів мають початковий і кінцевий теги: у записі <p>Години роботи</p> вони оточують текст абзацу. Усе разом, тобто теги та їхній вміст, утворює елемент HTML.
Не кожен елемент оточує текст. Елемент img, який слугує для вставлення зображення, не має кінцевого тега. Потрібні відомості, як-от адресу файлу, передають у його атрибутах.
Атрибут — це додаткова інформація в початковому тегу. Атрибут href задає ціль посилання, src вказує джерело зображення, а lang дає змогу зазначити мову документа або його фрагмента. Атрибут alt у зображенні містить альтернативний текст; його вміст залежить від ролі зображення, а для суто декоративного зображення він зазвичай залишається порожнім.
Для початку корисно знати кілька елементів:
h1–h6— заголовки різних рівнів;p— абзац тексту;a— посилання, якщо має атрибутhref;ulіli— невпорядкований список та його пункти;img— зображення;button— кнопка.
Елементи можна вкладати в інші елементи, але при цьому потрібно дотримуватися правил. Список містить пункти списку, а посилання може бути частиною абзацу. Браузери намагаються виправляти помилки в розмітці, тому правильне відображення сторінки саме по собі не доводить, що її HTML коректний.
Чим HTML відрізняється від CSS і JavaScriptu?
Ці три технології часто працюють разом, але виконують різні завдання. CSS, тобто каскадні таблиці стилів, описує оформлення документа. JavaScript — це мова програмування, яка дає змогу, зокрема, реагувати на дії користувача та змінювати вміст сторінки.
| Технологія | Основна роль | Приклад у формі |
|---|---|---|
| HTML | Структура та значення | Поле адреси електронної пошти, підпис і кнопка |
| CSS | Вигляд і розташування | Кольори, відступи та ширина полів |
| JavaScript | Логіка та поведінка | Оновлення повідомлення без перезавантаження сторінки |
HTML не призначений для запису алгоритмів, циклів чи власних обчислень, тому його не зараховують до мов програмування. Однак це не означає, що сторінка без JavaScriptu обов’язково буде неінтерактивною. Посилання працюють самостійно, а завдяки можливостям HTML браузер може обробити надсилання форми чи виконати базову перевірку обов’язкового поля.
Простий сайт-візитівку можна створити лише за допомогою HTML. CSS дасть змогу вдосконалити його оформлення, а JavaScript знадобиться лише тоді, коли запланована поведінка виходитиме за межі можливостей самого документа та браузера.
Чому значення елементів важливіше за їхній вигляд?
Семантичний HTML означає вибір елементів відповідно до їхнього значення. Заголовок має бути заголовком у коді, а не просто текстом, збільшеним за допомогою стилів. Так само для переходу на іншу сторінку слугує посилання, а для виконання дії — зазвичай кнопка.
Це розрізнення допомагає допоміжним технологіям, як-от програмам читання з екрана, правильно представляти вміст. Людина, яка користується таким інструментом, може, наприклад, переходити між заголовками. Якщо автор лише збільшить звичайні абзаци, така навігація не відповідатиме видимій структурі сторінки.
Кнопка, створена відповідним елементом, також має вбудовану підтримку керування з клавіатури. Щоб відтворити цю саму функцію на довільному фрагменті тексту, потрібна додаткова робота. Коректний HTML — основа доступності, хоча сам по собі він не гарантує доступності всього сайту.
Як почати вивчати HTML на практиці?
Для перших спроб достатньо текстового редактора та браузера. Документ HTML зазвичай містить оголошення типу документа, головний елемент html, частину head з метаданими та body із вмістом сторінки. Метадані описують документ: до них належать, зокрема, кодування символів і назва, видима на вкладці браузера.
Найпростіша вправа — локальна сторінка з короткою візитівкою:
- Створіть у редакторі текстовий файл і збережіть його як
index.html, стежачи, щоб він не отримав додаткового розширення.txt. - Побудуйте базову структуру документа, а в частині
bodyдодайте заголовок, абзац і список послуг. - Відкрийте файл у браузері. Після кожної зміни зберігайте його й оновлюйте сторінку.
- Скористайтеся командою «Перевірити» або «Перевірити елемент», щоб побачити, як браузер інтерпретує структуру.
Локальний файл не потрібно публікувати чи купувати для нього домен. Почніть з упорядкування вмісту без кольорів і прикрас — так буде легше перевірити, чи розумієте ви ролі елементів, перш ніж переходити до оформлення стилями.
Читайте також: Що таке 2FA?
Читайте також
