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

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

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

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

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


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

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

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

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

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

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

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


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

HTML5

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

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

Основи HTML

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

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

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

<


відкриваюча кутова дужка

>

закриваюча кутова дужка

←

тонка стрілка, спрямована ліворуч


↑

тонка стрілка, спрямована вгору

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

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

Теги HTML

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


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

<i>текст, располагающийся внутри тега</i>

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

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

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

Длинный текст, который следует<br>разбить на несколько строчек<br>для улучшения читаемости.


Мітка <br> після розбору буде замінено перенесенням рядка. У нього немає ніякого вмісту, тому закриваюча частина не потрібна.

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

  • <hr>, що позначає тонку сіру лінію, що відокремлює блоки тексту один від одного;
  • <input>, що представляє ціле сімейство інтерактивних елементів форм;
  • <img>, що з 'єднує файл зображення;
  • низка службових тегів - <meta>, <link>.

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

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

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

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

Встановлення атрибута:

Выбрать цвет:
<input type=""checkbox"" name=""red""> Красный
<input type=""checkbox"" name=""yellow"" checked> Желтый
<input type=""checkbox"" name=""green""> Зеленый

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

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

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

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

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

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

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

<!-- первый фрагмент -->
<p>
  Lorem    ipsum <i>dolor sit </i>   amet.
</p>
<p>
  <b>doloribus    sunt,</b>
  ad provident.
</p>
<!-- второй фрагмент -->
<p>Lorem ipsum <i>dolor sit</i> amet.</p><p><b>doloribus sunt,</b> ad provident.</p>

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
  <head>
    <!-- служебная информация для браузера и поисковых роботов-->
  </head>
  <body>
  </body>
</html>

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

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

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

<head>
  <title>Заголовок страницы</title>
  <meta charset=""utf-8"">
  <meta name=""description"" content=""Описание страницы для поисковых роботов"">
</head>

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

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

<body>
  <main>
    <article>
      <p>
        Текст абзаца
      </p><!-- сначала закрывается абзац -->
    </article><!-- затем статья -->
  </main><!-- потом тег main -->
</body><!-- и наконец, тело документа -->

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

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

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

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

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