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

Hyper Text Markup Language (мова розмітки гіпертексту) — мова розмітки веб-документів. Набір правил структурування (розмітки) текстової інформації, додавання зображень, створення таблиць, форм, списків тощо.

HTML-документ — текстовий файл з розширенням .html.

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

Популярність HTML та використання її як основи веб-сторінок призвело до необхідності створення, підтримки та розвитку відповідних стандартів. Зараз цим займається Web Hypertext Application Technology Working Group (WHATWG), яка працює над специфікацією HTML Living Standard.

Тег <p> — універсальний контейнер для групування дрібних фразових елементів, відокремлення їх один від одного й подальшої стилізації. За замовчуванням тег абзацу <p> — це блоковий елемент, який починається з нового рядка і має вертикальні відступи, які можна буде змінити за допомогою CSS.

Часто буває необхідно заповнити тег текстом, але самого тексту, який розміщуватиметься на сайті, ще немає. Для цього використовують спеціальний заповнювач (текст-риба).

  У редакторі VSCode, в HTML-документі можна набрати код lorem10, після чого натиснути клавішу Tab. Це створить масив тексту із 10 слів. Замість 10 можна встановити будь-яке число.

Заголовок є інструментом структурування текстового вмісту сторінки. Для того, щоб додати найважливіший заголовок, що описує весь вміст сторінки, використовується тег <h1> — заголовок першого рівня. На практиці тег <h1> використовується лише один раз як основний заголовок сторінки.

Оформлення коду 
          Запам’ятай основне:
          — кожен тег починається з нового рядка; 
          — якщо контент займає кілька рядків, відкриваючий та закриваючий теги розташовані один під одним (див. абзац); 
          — якщо контент займає один рядок, відкриваючий та закриваючий теги розташовані безпосередньо до та після контенту (див. заголовок). 
          Це забезпечує кращу візулізацію початку та кінця тегу.

Коментарі використовуються для того, щоб:

• залишити у вихідному коді пояснення, нотатку;
• візуально розділити код, позначивши, де починається і закінчується розмітка шапки сайту, підвала, окремої секції тощо;
• закоментувати ділянку коду, тобто тимчасово приховати частину HTML-коду, щоб вона не відображалася на сторінці в браузері.

Атрибути — це додаткові налаштування тегів, за допомогою яких можна змінювати властивості та поведінку елементу. Теги можуть мати обов'язкові та необов'язкові атрибути. Їх може бути декілька або зовсім не бути.

Атрибути записуються всередині відкриваючого тегу, а їх значення вказуються всередині подвійних лапок. Декілька атрибутів розділяються пробілом.

Корисно! 
  Для того, щоб дізнатися які атрибути доступні для тегу та призначення атрибутів, можна зайти в документацію або довідник, наприклад htmlreference.io

Давай розглянемо структуру тегу з атрибутами на прикладі тегу <a>. Він призначений для створення посилань або тексту. Клікаючи по ньому, ми переходимо на іншу сторінку, завантажуємо файл тощо. Текст посилання відображається в браузері з підкресленням синім шрифтом. При наведенні на посилання курсор миші змінює вигляд.

Адреса посилання задається в обов'язковому атрибуті href="адреса", де адреса — це URL, що вказує на сторінку, файл або будь-який ресурс. 

Запам’ятай основні характеристики атрибутів: 
        — Атрибути змінюють або надають додаткові властивості тегам. 
        — Кілька атрибутів у тегу відокремлюються за допомогою пробілу. 
        — Атрибути та їх значення містяться всередені відкриваючого тегу. 
        — Знак “=” ставиться між атрибутом та його значенням.

Якщо ми хочемо, щоб веб-сторінка, до якої веде посилання, відкривалася в новій вкладці браузера, необхідно додати тегу <a> атрибут target="_blank".

За замовчуванням посилання відкриваються у поточній вкладці браузера, а значення атрибуту target за замовчуванням є target="_self".

Розмітка веб-сторінки підпорядковується певним правилам, так само як сторінка газети чи журналу, де на першій полосі завжди найважливіші теми.

Веб-сторінки також містять різні типи контенту: заголовки, списки, зображення, абзаци тексту тощо. Для опису цієї різноманітності існують відповідні теги: для розмітки абзацу тексту використовується тег <p>, для розмітки посилань — тег <a>, тощо. Отже, семантика (тобто призначення тегів) є невід’ємною частиною HTML вже з базового рівня.

Семантична розмітка

Семантична розмітка — підхід до створення HTML-розмітки, у якому вибір тегу залежить від:

• призначення тегу, вказаного в специфікації;
• типу контенту.

В чому переваги семантичної розмітки?

Семантична розмітка надважлива при створенні сайту.

• Для просування сайту у пошукових системах.

Наявність семантичної розмітки сторінок допомагає пошуковим роботам краще розуміти, що знаходиться на сторінці, і в залежності від цього ранжувати сайти в пошуковій видачі.

• Для коректної роботи асистивних технологій

Для користувачів з вадами зору основним інструментом знайомства з контентом є скрінрідер, що зачитує вміст сторінки. Семантична розмітка допомагає скрінрідеру коректно визначати який блок треба озвучити, а користувачу краще розуміти вміст.

• Для кращої читабельності коду

Для інших розробників в команді та для тебе самого через декілька місяців чи літ важливо швидко розуміти структуру коду. Семантична розмітка — один із шляхів цього досягти.

У процесі створення веб-сайтів завжди необхідно повертатися до вже написаного коду для внесення змін. Зазвичай над проєктом працюють кілька розробників, а не один. Якщо код не оформлений відповідно до стандартів, він втрачає читабельність і, як наслідок, швидкість розробки падає.

• Розміщуй кожен новий тег з нового рядка.
• Якщо контент займає менше одного рядка, відкриваючий та закриваючий теги мають бути розташовані у тому ж рядку безпосередньо до та після контенту.
• Якщо контент тегу займає кілька рядків, відкриваючий та закриваючий теги мають бути розташовані один під одним.
• Декілька атрибутів розділяються пробілом. Між атрибутом та його значенням є тільки знак =, а значення атрибута міститься у подвійних лапках.
• Вкладені елементи <li> розташовуються не прямо під тегом <ul>, а з відступом, що дорівнює 2 або 4 пробілам. Відступ має бути однаковий для всього проєкта.

Потік документа — це вертикальний та горизонтальний порядок відображення елементів на веб-сторінці.

• Вертикально потік іде зверху вниз, і за замовчуванням елементи відображаються на сторінці в тому порядку, в якому вони вказані в HTML-документі.
• Горизонтально потік йде зліва направо (або справа наліво для східних країн).

Всі HTML елементи — це прямокутні області, що певним чином відображаються браузером на веб-сторінці. Є два основних типи елементів: блокові елементи (займають всю доступну ширину, як назва твору в зошиті) та рядкові (групуються один за одним, як слова в реченні).

Блоковий елемент (block-level element) — займає весь рядок цілком незалежно від обсягу його контенту, тому кілька блокових елементів візуально йдуть один за одним зверху вниз.

Рядковий елемент — займає те саме місце, що займає його контент. Отже, кілька рядкових елементів можуть розташовуватися в одному рядку. Коли в рядку не вистачає місця для вміщення такого елементу, він переноситься на новий рядок.