Що таке HTML, особливості структури

HTML — це, без сумніву, головний мова інтернету, зародившись разом з ним. Так чи інакше, він причетний до створення і роботи кожної веб-сторінки у Всесвітній павутині. Без розуміння, що таке HTML і як він працює, неможливо перетворити суцільний потік тексту, яким є будь-який документ, структурований, гарний і зрозумілий користувачеві сайт.

HTML і Всесвітня павутина

Абревіатура утворена від англійського словосполучення HyperText Markup Language. Переклад повністю пояснює, що таке HTML — це мова гіпертекстової розмітки. Він з’явився на зорі розвитку інтернету і призначався для оформлення веб-сторінок, що містять документацію науково-технічного спрямування, яка особливо потребує правильному оформленні.

Тім Бернерс-Лі, творець мови, припускав, що з його допомогою можна буде легко створювати прості, але зрозумілі документи для обміну між вченими різних міст і країн. Він розробив набір дескрипторів — елементів, форматують текст. Зараз ми знаємо їх під назвою «теги».

Щоб HTML-текст правильно відображався, потрібно його обробка. Цим займаються спеціальні програми - браузери. Вони отримують розмічену сторінку, інтерпретують дескриптори-теги і виводять на екран текст у тому вигляді, в якому його повинен побачити користувач.

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

Розвиток мови

Минав час, простий набір тегів, яким був HTML на початку свого існування, розрісся і зміцнів. З’явилася можливість вбудовувати в сторінку мультимедійний контент, створювати таблиці, управляти розташуванням зображень.

Стихійне розширення мови слід приборкати і взяти під контроль, необхідні були певні стандарти.

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

На щастя, в даний час основні протиріччя між браузерами згладилися, економлячи фронтэнд-розробникам багато сил і нервів.

HTML5

Актуальним на 2018 рік є п’ятий стандарт HTML, чернетка якого з’явився в кінці 2007 року. Їм було введено багато нових елементів і атрибутів, зроблений особливий акцент на семантичность веб-сторінок та доступність для людей з обмеженими можливостями.

Мова продовжує активно розвиватися і поліпшуватися.

Основи HTML

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

Сутності (entities) мови гіпертекстової розмітки — це мнемонічні коди для спеціальних символів Юнікоду, відсутніх на звичайних клавіатурах.

Приклади сутностей:

< ліва кутова дужка
> закриває кутова дужка
тонка стрілка вліво
тонка стрілка вгору

HTML-сутності починаються з амперсанда, закінчується крапкою з комою і містить легку для запам’ятовування кодове позначення символу. Вони мають важливе значення, так як дозволяють відображати знаки, які не можуть бути прямо прописані в HTML-коді.

До таких знаків відносяться, наприклад, кутові дужки. У мові гіпертекстової розмітки вони служать ідентифікаторами тегів, оточуючи ім’я дескриптора з двох сторін.

HTML теги

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

Приклад тегу:

текст, який автоматично розташовується всередині тега

Це HTML-дескриптор i, визначає курсивне накреслення шрифту. Буква i — перша літера слова italic. У нього є:

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

Більшість дескрипторів має таку ж структуру, однак існує невелика група порожніх тегів.

Довгий текст, який слід
розбити на декілька рядків
для поліпшення читаності.

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

Порожніми також є наступні теги:

  • , що позначає тонку сіру лінію, яка відокремлює блоки тексту один від одного;
  • , що представляє ціле сімейство інтерактивних елементів форм;
  • , підключає файл зображення;
  • ряд службових позначок — , .

Дескриптори можуть бути вкладені один в одного на будь-кількість рівнів. Виняток становлять лише порожні теги, всередині яких не може міститися контент.

Атрибути тегів

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

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

Установка атрибута:

Вибрати колір:
Червоний
Жовтий
Зелений

Тут представлена група з трьох інтерактивних елементів . Атрибут type визначає їх відображення у вигляді чекбоксов, name містить ім’я конкретного поля, а властивість checked, не має значення, робить другий инпут обраним за замовчуванням.

Існують універсальні атрибути, які можуть бути визначені для кожного дескриптора, і специфічні, характерні для конкретних тегів.

До універсальних властивостей відносяться: id, class, title.

До специфічних — вищезгадані type, checked, а також src, href і ряд інших.

Особливості синтаксису

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

Наведені нижче два фрагмента коду повністю ідентичні для браузера, хоча один з них містить безліч поспіль йдуть прогалин і розбитий на рядки, а другий — ні.

Lorem ipsum dolor sit amet.

doloribus sunt,
ad provident.

Lorem ipsum dolor sit amet.

doloribus sunt, ad provident.

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

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

Познайомившись з тегами, їх властивостями та синтаксису, можна переходити від основ мови HTML до структури HTML-документа в цілому.

Побудова HTML-документа

Будь-яка веб-сторінка повинна мати певний каркас, щоб правильно відображатися браузером.

В обов’язкову структуру HTML-документа входять:

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

Стандарт HTML5 не вимагає обов’язкової наявності тега body в документі, проте рекомендується його все ж використовувати для позначення області вмісту.

Важливими, але необов’язковими службовими дескрипторами є:

  • title, що містить заголовок сторінки;
  • мета-теги, що визначають кодування, сео-інформацію, http-заголовки і інші важливі параметри.

Заголовок сторінки

В іншому структура HTML-сторінки може бути будь-якою. Її особливості залежать від конкретного проекту.

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

Текст абзацу

Семантична структура

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

З розвитком CSS від використання таблиць поступово відмовилися, адже стилі дозволяли оформити документ як завгодно.

Новий стандарт HTML вітає семантичность в структурі HTML-документа. Це досягається використанням таких смислових тегів, як header, footer, main, article, nav, section та інших.

Головний мова інтернету дуже простий. Будь-яка людина здатна розібратися, що таке HTML, і успішно застосовувати ці знання, створюючи власні веб-сторінки.