HTML: мова розмітки гіпертексту

HTML (HyperText Markup Language – мова розмітки гіпертексту) – найголовніший наріжний камінь Всесвітнього павутиння. Інші технології переважно використовуються для опису зовнішнього вигляду та способу представлення вебсторінок (CSS) і їх функціональності та поведінки (JavaScript).

Слово "гіпертекст" вказує на посилання, що поєднує вебсторінки одна з одною, як всередині одного вебсайту, так між різними. Посилання – корінна особливість Вебу. Завантажуючи вміст до Інтернету та пов'язуючи його зі сторінками, створеними іншими людьми, можна стати дієвим учасником Всесвітнього павутиння.

HTML використовує "розмітку" для опису тексту, зображень та іншого вмісту для відображення у вебоглядачі. Розмітка HTML включає особливі "елементи", наприклад, <head> (голову), <title> (назву), <body> (тіло), <header> (заголовок), <footer>(нижній колонтитул), <article> (параграф), <section> (розділ), <p> (абзац), <div> (ділянка), <span> (відрізок), <img> (зображення), <aside> (боковий), <audio> (звук), <canvas> (полотно), <datalist> (список даних), <details> (подробиці), <embed> (вбудоване), <nav> (навігація), <search> (пошук), <output> (вивід), <progress> (поступ), <video> (відео), <ul> (невпорядкований список), <ol> (упорядкований список), <li> (елемент списку), та багато інших.

Елемент HTML відділяється від решти тексту в документі за допомогою "тегів", котрі складаються з імені елемента, оточеного символами "<" та ">". Ім'я елемента всередині тега є нечутливим до регістру. Таким чином, його можна писати у великому чи малому регістрі, або їх змішувати. Наприклад, тег <title> можна написати як <Title>, <TITLE> або будь-як іще. Втім, загальноприйнята і рекомендована практика – писати теги в малому регістрі.

Статті нижче допоміжні у вивченні HTML.

Ключові ресурси

Вступ до HTML: Початківцям веброзробки слід обов'язково прочитати нашу статтю Основи HTML, аби вивчити, що таке HTML і як її використовувати.
Настанови з HTML: Статті про використання HTML, а також настанови й повні приклади можна знайти у Просторі вивчення HTML.
Довідник з HTML: У нашому розлогому розділі Довідник з HTML є докладні дані про кожен елемент та атрибут HTML.

Настанови для початківців

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

Вступ до HTML: Цей модуль закладає підвалини, допомагає прийняти важливі концепції та синтаксис, наприклад, застосування HTML до тексту, як створювати гіперпосилання, а також як використовувати HTML для структурування вебсторінки.
Мультимедіа та вбудування: Цей модуль досліджує використання HTML для включення мультимедіа матеріалів у вебсторінки, включаючи різні способи вставити зображення, відео, аудіо і навіть цілі інші вебсторінки.
Таблиці HTML: Представлення табличних даних на вебсторінці у зрозумілий, доступний спосіб може бути викликом. Цей модуль покриває основну розмітку таблиці, а також складніші можливості, наприклад, реалізацію підписів та підсумків.
Форми HTML: Форми є дуже важливою частиною Всесвітньої павутини: вони надають функціональність, необхідну для взаємодії із вебсайтами, наприклад, реєстрації та автентифікації, надсилання зворотного зв'язку, купівлі товарів та багато іншого. Цей модуль робить вступ у створення клієнтських частин (фронтенду) форм.
Використання HTML для розв'язання поширених проблем: Містить посилання на розділи вмісту, що пояснює, як використовувати HTML для розв'язання дуже поширених проблем, що виринають при створенні вебсторінок: роботи з назвами, додавання зображень чи відео, надання виразності вмісту, створення простої форми тощо.

Передові теми

Зображення із CORS: Атрибут crossorigin, поєднаний із відповідним заголовком CORS, дає змогу зображенням, визначеним елементом <img>, бути завантаженими зі сторонніх джерел та використовуватись в елементі <canvas> так, ніби вони були завантажені з поточного джерела.
Атрибути налаштувань CORS: Деякі елементи HTML, що підтримують CORS, наприклад, <img> чи <video>, мають атрибут crossorigin (властивість crossOrigin), що дає змогу налаштовувати CORS-запити для стягуваних елементом даних.
Завантаження вмісту наперед за допомогою rel="preload": Значення preload атрибута rel елемента <link> дає змогу писати декларативні запити даних всередині тега HTML <head>, вказуючи ресурси, що будуть потрібні вебсторінці вельми скоро після завантаження, так, що варто почати завантаження їх наперед якомога раніше у життєвому циклі завантаження сторінки, до того, як почне діяти головний механізм візуалізації браузера. Це дає змогу пересвідчитись, що такі ресурси будуть доступними раніше, й зменшити ймовірність блокування ними першої візуалізації сторінки, що, як наслідок, призводить до покращення швидкодії. Ця стаття дає основні настанови щодо того, як працює preload.

Посилання

Довідник з HTML: HTML складається з елементів, кожен з яких може бути видозмінений певною низкою атрибутів. Документи HTML пов'язані одне з одним за допомогою посилань.
Довідник елементів HTML: Перегляд списку всіх елементів HTML.
Довідник атрибутів HTML: Елементи в HTML мають атрибути. Це додаткові значення, що налаштовують елементи або видозмінюють їх поведінку у різний спосіб.
Глобальні атрибути: Глобальні атрибути можуть бути вказані на всіх елементах HTML, навіть тих, що не описані стандартом. Це означає, що будь-які нестандартні елементи мусять приймати ці атрибути, навіть якщо ці елементи роблять документ невідповідним стандартові HTML5.
Елементи рядкового та блокового рівнів: Елементи HTML зазвичай належать до "рядкового рівня" чи "блокового рівня". Елемент рядкового рівня займає лише простір, що оточений тегами, котрі його визначають. Блоковий елемент займає увесь простір свого батьківського елемента (контейнера), чим утворює "блокову рамку".
Настанови з типів та форматів медіа у Вебі: Елементи <audio> та <video> дають змогу відтворювати аудіо та відео вміст у природний спосіб всередині вмісту, без потреби підтримки будь-якого зовнішнього програмного забезпечення.
Категорії вмісту HTML: HTML складається з декількох ґатунків вмісту, кожен з яких дозволений у певних контекстах, але заборонений в інших. Подібно до цього, кожен контекст має низку інших категорій вмісту, котрі він може містити, та елементів, що можуть або не можуть в них використовуватись. Це настанови щодо таких категорій.
Режим сумісності та режим стандартів: Історична інформація про режим сумісності та режим стандартів.

Пов'язані теми

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

Помітили помилку на цій сторінці?

Переглянути сирці на GitHub.

Редагувати вміст на GitHub.

Почати обговорення на GitHub стосовно вмісту цієї сторінки.