EasyCode365EasyCode365

Що таке HTML?

Що саме таке HTML?

HTML — це скорочення від HyperText Markup Language (мова гіпертекстової розмітки). Це стандартна мова, яку використовують в усьому інтернеті, щоб будувати та визначати структуру вебсторінок.

Якщо уявити вебсайт як будинок, то HTML — це фундамент і стіни. Також HTML можна уявити як «скелет» сторінки. Перш ніж додавати кольори, макети чи інтерактивні елементи, ти маєш упорядкувати вміст у структурні частини: заголовки, абзаци, зображення, посилання.

Як браузери відображають HTML?

Коли ти вводиш URL у свій вебпереглядач (Chrome, Firefox, Safari тощо), браузер отримує HTML-документ. Його основна робота — прочитати цей файл і перетворити його на візуальну сторінку, яку ти бачиш на екрані.

HTML використовує «теги», щоб позначати частини вмісту. Браузер читає ці теги, щоб зрозуміти, як організувати й показати документ, але самі теги користувачу не показує.

Твій перший приклад HTML

Контент HTML будується з елементів, які зазвичай складаються з відкриваючого тега, вмісту та закриваючого тега.

Ось короткий фрагмент коду — базова структура HTML-документа:

Можна редагувати
<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок сторінки</title>
  </head>
  <body>
    <h1>Вітаємо на моєму сайті!</h1>
    <p>Це мій перший абзац.</p>
  </body>
</html>

Що тут відбувається?

  • <!DOCTYPE html> каже браузеру, що це документ HTML5.
  • <html> — кореневий контейнер для всієї сторінки.
  • <body> містить увесь видимий вміст, який побачить користувач.
  • <h1> — тег великого заголовка, а <p> створює звичайний абзац тексту.

Демонстрація: «Перегляд коду сторінки»

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

Спробуй сам:

  1. Відкрий будь-яку вебсторінку у своєму браузері.
  2. Клацни правою кнопкою миші на порожній ділянці сторінки.
  3. Обери «Переглянути код сторінки» (або «Переглянути джерело» — залежить від браузера).

У новій вкладці відкриється сирий HTML-«скелет», на основі якого браузер відрендерив цю конкретну сторінку.