Мова HTML: що це таке і як вона працює

HTML (від англійської HyperText Markup Language) – це мова гіпертекстової розмітки тексту. Він потрібен, щоб розміщувати на веб-сторінці елементи: текст, зображення, таблиці та відео.

Коли ви заходите на сайт, браузер підвантажує HTML-файл з інформацією про структуру та контент веб-сторінки. HTML хіба що вибудовує візуальний фундамент сайту, але з «запускає» сайт самостійно. Він лише вказує, де розташовуються елементи, який у них буде базовий дизайн, звідки брати стилі для елементів та скрипти (зазвичай їх пишуть на  JavaScript ).

Приклад простого HTML сайту в блокноті.

З чого складається HTML-код

HTML складається з тегів – команд, які вказують браузеру, як відображати вміщений у них текст. Це елементи веб-сторінки. Кожен тег має ім’я, яке полягає в кутові дужки < і  > .

Наприклад, у тег зазвичай розміщують текст:<p>Привет, мир!</p>

Теги бувають парні та непарні. Парні складаються з двох тегів – відкриває та закриває, а непарні – з одного. При цьому непарний тег також можна закривати, але це необов’язково.

Наприклад, тег <img> , який дозволяє розмістити картинку на сайті, непарний:<img scr='bird.jpg' alt='photo of bird'>

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

Елемент <img> включає два основних атрибути — src і  alt . Перший додає посилання на файл, а другий – підпис до картинки, яка з’явиться, якщо файл не завантажиться:

Тег <p>  є парним, він завжди повинен закриватися тегом </p> . Парні теги використовуються для розмітки блоків – елементів, в які можна вкладати інші елементи (у тому числі блоки). До них відносяться:

• контейнери ( div );
• абзаци;
• заголовки;
• списки;
• таблиці.

Так виглядає код веб-сторінки з тегами <p> та  <img> :<p> Какой-нибудь сопроводительный текст. Обычно в примерах используют lorem ipsum, но мы пишем всё сами -- хардкор! </p> <img src='image.png'> <p>А тут ещё один абзац, чтобы заполнить пустоту.</p>

А ось як його відображає браузер:

Тепер додамо ще один тег – <center> . Він центрує елементи на екрані. Потім покладемо в нього теги <p> і  <img> :<center> <p> Какой-нибудь сопроводительный текст. Обычно в примерах используют lorem ipsum, но мы пишем всё сами -- хардкор! </p> <img src='image.png'> <p>А тут ещё один абзац, чтобы заполнить пустоту.</p> </center>

Як HTML працює на сайтах

Давайте розберемо, як браузери малюють веб-сторінки за допомогою HTML-файлів.

Принцип роботи розмітки наступний:

• Ви вводите адресний сайт або сторінки в адресний рядок.
• Браузер надсилає запит на цю адресу і отримує файл у форматі HTML.
• Код отриманого файлу послідовно перетворюється на візуальні об’єкти.

При цьому кожен браузер керується своїми правилами відображення елементів. Раніше розробникам доводилося створювати окремі версії веб-сайтів для Internet Explorer, Firefox, Opera та інших браузерів. Варто було не врахувати якусь особливість браузера, і сайт падав на очах розчарованих користувачів. На щастя, організація W3C розробила веб-стандарти  — щоб сайти відображалися більш-менш однаково у всіх браузерах.

Але й від звичайних помилок ніхто не застрахований. Якщо розробник неуважно не закриє тег або додасть вміст кудись не туди, на сторінці вилізе щось несподіване. Допустимо, ми написали таблицю:<table border='1'> <tr> <th>№</th> <th>Позиция</th> <th>Цена за единицу (руб.)</th> </tr> <tr> <td>1</td> <td>Ручка синяя</td> <td>8</td> </tr> <tr> <td>2</td> <td>Карандаш с ластиком</td> <td>10</td> </tr> <tr> <td>3</td> <td>Линейка (30 см)</td> <td>30</td> </tr> <tr> <td>4</td> <td>Галстук</td> <td></td>250 </tr> <tr> <td>5</td> <td>Дырокол</td> <td>100</td> </tr> </table>

<table>  – це таблиця, <tr>  – це ряд, а  <th> і  <td>  – комірки. Якби ми все зробили правильно, у браузері відобразилася б звичайна таблиця. Але зверніть увагу, що в четвертому ряду ціна краватки знаходиться не в осередку, а прямо в ряді. Ось як це виглядатиме:

Що можна і не можна зробити на HTML

HTML – це каркас сайту. По ньому браузер малює веб-сторінку, наводить красу за допомогою CSS і додає логіку через JavaScript. Наприклад, у HTML-файлі можна прописати:

• гіперпосилання;
• таблиці;
• зображення;
• блоки;
• абзаци;
• форми;
• заголовки.

Можна навіть задавати простий дизайн безпосередньо в HTML – наприклад, встановлювати колір і шрифт тексту або колір блоку фону. Однак професіонали не рекомендують так робити – краще вказувати стилі у файлі CSS. Там ваша фантазія нічим не буде обмежена: задавайте будь-які відступи, розміщуйте елементи нестандартними способами, грайтеся з прозорістю, тінями і анімацією. Все, що завгодно — але в CSS. Домовились? 🙂

Дії користувачів поки що обробляють в основному за допомогою JavaScript та його фреймворків. Але деякі функції поступово надходять до HTML. Наприклад, перетягування об’єктів, або Drag & Drop, раніше було доступне лише у JavaScript.

HTML – мова програмування?

Ні. Мовами програмування пишуть … програми та веб-додатки 🙂 Для цього в них є умови, функції, змінні, оператори, класи і багато чого ще. У HTML є лише теги, які допомагають браузеру правильно відобразити вміст сайту.

Багато джерелах HTML все-таки називають мовою програмування. Не вірте! HTML — це лише формат тексту. По суті, HTML-файл нічим не відрізняється від “вордовського” файлу.

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

Основи, яких вистачить створення примітивних сторінок, можна вивчити протягом години. Тобто швидше, ніж було написано цю статтю. Але майстерність приходить із практикою. Мало просто створити каркас – треба переконатися, що він скрізь правильно відображається.

Фахівці, які можуть написати не кривий адаптивний сайт, цінуються у роботодавців. Але бути просто HTML-верстальником невигідно. Сьогодні це досить рідкісна та низькооплачувана професія. Краще відразу вивчати фронтенд-або бекенд-розробку, а HTML обов’язково стане в нагоді в процесі.