Веб-розробка

Що таке HTML?

HTML (HyperText Markup Language, мова гіпертекстової розмітки) — це мова, яка задає структуру вебсторінки: заголовки, абзаци, списки, посилання, зображення і форми. Браузер читає HTML і будує за ним сторінку, яку ви бачите на екрані.

HTML — не мова програмування: у ній немає змінних, умов і обчислень. Вона лише описує, з яких елементів складається сторінка і в якому порядку. Кожен елемент позначають тегом, наприклад <h1> для головного заголовка.

Правильна семантична розмітка важлива не лише для вигляду. Нею користуються пошукові системи та програми читання з екрана: якщо заголовок позначений саме як заголовок, а не як великий жирний текст, сторінка зрозуміліша і роботам, і людям.

Де застосовується

HTML вивчає першим кожен, хто йде у веб: фронтенд-розробник, верстальник, дизайнер, який сам робить лендинг, і навіть маркетолог, що редагує лист для розсилки. З HTML складається кожна сторінка, і будь-який конструктор сайтів зрештою створює саме HTML.

Є й менш очевидні сфери. Шаблони email-листів верстають на HTML з урахуванням старих поштових клієнтів. SEO-фахівець працює із заголовками, alt-текстами і мікророзміткою. А фахівці з доступності перевіряють, чи правильно розмічені форми та кнопки, бо від цього залежить, чи зможе людина користуватися сайтом через програму читання з екрана.

Приклад

Форма підписки — це лише кілька тегів: форма, поле для пошти з типом email і кнопка відправлення. Браузер сам перевірить формат адреси і покаже на телефоні клавіатуру із символом @ — просто тому, що тип поля вказано правильно.

<article>
  <h1>Курс Front-End Developer</h1>
  <p>Старт найближчої групи — 15 жовтня.</p>
  <form action="/subscribe" method="post">
    <label for="email">Ваш email</label>
    <input id="email" name="email" type="email" required>
    <button type="submit">Записатися</button>
  </form>
</article>

Семантична розмітка: заголовок позначений як заголовок, поле пов’язане з підписом, а тип поля вмикає вбудовану перевірку.

Часті запитання

Чи є HTML мовою програмування?

Ні. У ній немає змінних, умов, циклів і обчислень, вона лише описує структуру документа. Це мова розмітки. Логіку на сторінку додає JavaScript, зовнішній вигляд — CSS, і разом ці три технології становлять основу веброзробки.

Скільки часу потрібно, щоб вивчити HTML?

Основні теги можна вивчити за один-два тижні. Довше формується звичка до семантики — обирати тег за змістом, а не за виглядом. Ця навичка приходить із практикою разом із CSS, коли верстаєш реальні макети.

Що таке семантична верстка і навіщо вона?

Це використання тегів за призначенням: заголовок — тегом заголовка, навігація — тегом nav, основний текст — тегом article. Така розмітка допомагає пошуковим системам зрозуміти сторінку, а програмам читання з екрана — передати її структуру незрячим користувачам.

Чи треба вчити HTML, якщо є конструктори сайтів?

Для простої сторінки-візитки — не обов’язково. Але кожен конструктор має обмеження, і тоді доводиться правити код вручну: додати скрипт аналітики, змінити розмітку для пошуку, виправити верстку листа. Без знання HTML такі задачі доводиться замовляти в інших.

Навчання фронтенд-розробці в OWU

Опануйте HTML, CSS, JavaScript і React на практичних курсах із менторами та реальними проєктами.

Обрати курс