НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ

HTML5 Підручник

HTML СТАРТ HTML Вступ HTML Редактори HTML Основні приклади HTML Елементи HTML Атрибути HTML Заголовки HTML Параграфи HTML Стилі HTML Форматування HTML Цитати HTML Коментарі HTML Кольори HTML CSS HTML Посилання HTML Зображення HTML Таблиці HTML Списки HTML Блоки HTML Класи HTML Ідентифікатори HTML Фрейми HTML JavaScript HTML Шляхи файлів HTML Голова веб-сторінки HTML Макети HTML Адаптивність HTML Комп'ютерний код HTML Символьні об'єкти HTML Символи HTML Кодування HTML URL кодування HTML XHTML

HTML Форми

HTML Форми HTML Елементи форми HTML Типи вводу HTML Атрибути вводу

HTML5

HTML5 Вступ HTML5 Підтримка HTML5 Нові елементи HTML5 Семантичні елементи HTML5 Перехід з HTML4 HTML5 Гід по стилю

HTML Графіка

HTML Canvas HTML SVG

HTML Медіа

HTML Медіа HTML Відео HTML Аудіо HTML Плагіни HTML YouTube

HTML API

HTML Геолокація HTML Drag/Drop HTML Web сховище HTML Web робітники HTML SSE

HTML Приклади

HTML Приклади HTML Вікторина HTML Вправи HTML Сертифікат HTML Резюме HTML Доступність

HTML Довідники

HTML Список тегів HTML Атрибути HTML Глобальні атрибути HTML Події HTML Кольори HTML Canvas HTML Аудіо/Відео HTML Діючі Doctype HTML Набори символів HTML URL кодування HTML Кодування мови HTTP Повідомлення HTTP Методи PX в EM Конвертер Гарячі клавіши

HTML5. Уроки для початківців

HTML Вступ



Що таке HTML?

HTML є стандартною мовою розмітки для створення веб-сторінок.

  • HTML означає Hyper Text Markup Language (мова гіпертекстової розмітки)
  • HTML описує структуру веб-сторінок за допомогою розмітки
  • HTML-елементи є будівельними блоками сторінок HTML
  • Елементи HTML представлені тегами
  • Теги HTML позначають фрагменти змісту, такі як header (заголовок), paragraph (параграф), table (таблиця) та ін.
  • Браузери не відображають HTML теги, але використовують їх для відображення змісту web-сторінки

Простий HTML документ

Приклад

<!DOCTYPE html>
<html>
<head>
<title>Назва сторінки</title>
</head>
<body>

<h1>Мій перший заголовок</h1>
<p>Мій перший параграф.</p>

</body>
</html>
Спробуйте самі »

Пояснення прикладу

  • Оголошення <!DOCTYPE html> визначає цей документ як HTML5
  • Елемент <html> є кореневим елементом HTML сторінки
  • Елемент <head> містить мета-інформацію про HTML документ
  • Елемент <title> визначає назву HTML документу
  • Елемент <body> відображає видимий зміст HTML сторінки
  • Елемент <h1> визначає великий заголовок на HTML сторінці
  • Елемент <p> визначає абзац (параграф) в HTML документі

HTML Теги

HTML-теги - це назви елементів, оточені кутовими дужками:

<назва тегу>Тут йде зміст...</назва тегу>

  • Теги HTML зазвичай ідуть парами, наприклад, <p> і </p>
  • Першим тегом в парі є початковий тег, інший - кінцевий тег
  • Кінцевий тег записується як початковий тег, але перед назвою тега вставляється коса риска ( / слеш)

Примітка: Початковий тег також називається - відкриваючим тегом, а кінцевий тег - закриваючим тегом.


Web Браузери

Метою веб-браузера (Chrome, Firefox, Opera, Internet Explorer, Safari) є читання HTML документів та їх відображення. Браузер не відображає самі теги HTML, але використовує їх, щоб визначити, як відобразити веб-сторінку:

Вигляд HTML-сторінки в браузері


Структура HTML сторінки

Нижче наведена візуалізація структури HTML-сторінки:

<html>
<head>
<title>Назва сторінки</title>
</head>
<body>
<h1>Це заголовок</h1>
<p>Це параграф.</p>
<p>Це інший параграф.</p>
</body>
</html>

Примітка: В браузері відображається тільки зміст розділу <body> (тіло веб-сторінки).


Оголошення <!DOCTYPE>

Оголошення <!DOCTYPE> - є визначення типу документа, яке допомагає браузерам правильно відображати веб-сторінки. Воно повинно з'являтися тільки один раз у верхній частині веб-сторінки (перед будь-якими тегами HTML).

Оголошення <!DOCTYPE> не чутливе до регістру. Можна писати як великими літерами, так і маленькими.

Оголошення <!DOCTYPE> для HTML5 має такий вигляд:

<!DOCTYPE html>

HTML Версії

З перших днів існування Інтернету було багато версій HTML:

Версія Рік
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
HTML5.1 2015
HTML5.2 2016
HTML5.3 2017