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

{{HTMLSidebar}}

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, за допомогою яких це можливо. Включає приклади, посилання на інструменти створення палітр тощо.