1. Знайомство з тегами

В основі розмітки HTML-документів лежать теги. Що ж таке тег?

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

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

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

Приклад тексту з тегом:


 <a href="http://javarush.com/about">
    Посилання на щось цікаве
</a>

У цьому прикладі бачимо текст, тег «a» і навіть службову інформацію – атрибути тега. Нижче ви дізнаєтесь про них докладніше.

Вебінар JavaRush

2. Види тегів: відкриваючий, закриваючий, порожній тег

Теги бувають різних типів. По-перше, одинарні та парні. Найчастіше зустрічаються парні теги. І як ти, певно, вже здогадуєшся, вони завжди йдуть у парі. Їх ще називають відкриваючими і закриваючими.

Відкриваючий тег – це просто ключове слово у трикутних дужках. Приклад:


<h1>

Закриваючий тег схожий на відкриваючий, але перед ключовим словом стоїть коса риса. Приклад:


</h1>

Відкриваючий тег може містити службову інформацію – атрибути, закриваючий – ні. Відкриваючий тег завжди перший у парі. НЕ може спочатку в тексті йти закриваючий тег, а потім – відкриваючий. Такий HTML-документ буде не валідний.

Одинарні теги не мають закриваючого тега. Список таких тегів визначається HTML-стандартом. Приклади:

  • <br> – перенесення рядка;
  • <img> – картинка.

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


<h1/>

Це не одинарний тег, а порожній парний тег. Це одночасно і закритий, і відкритий тег. Від закритого тега він відрізняється тим, що коса риса стоїть наприкінці (перед другою трикутною дужкою).

3. Дерево тегів

Ось іще деяка важлива інформація про парні теги. У документі їх може бути багато, і вони можуть бути вкладеними. Що це означає? Будь-який текст HTML-документі можна взяти (огорнути) тегами, навіть якщо він містить інші теги. Приклад:


<html>
    Звичайний текст
        <a href="http://javarush.com/about">
            Посилання на щось цікаве
          </a>
     ще якийсь текст
</html>

Іншими словами, в html-тексті може зустрітися послідовність тегів:


        <h1> <h2> </h2> </h1>

Але не може бути:


        <h1> <h2> </h1> </h2>

Якщо відкриваючий тег, <h2> знаходиться всередині пари <h1>-тегів, то і його парний закриваючий тег </h2> теж повинен знаходитися всередині пари <h1>-тегів.

Таким чином, усі теги документа утворюють якесь дерево тегів. Спочатку йде тег верхнього рівня, який огортає весь документ: зазвичай він називається <html>. У нього є дочірні пари тегів, у них – свої, тощо.

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

4. Атрибути

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

Тег може містити кілька атрибутів, і їх загальний вигляд є таким:


        <tag name1="value1" name2="value2">

Кожен атрибут вказано як пару ім'я та значення. Атрибутів може бути скільки завгодно.

Але досвідчений програміст одразу поставить питання: що робити, якщо як значення атрибута потрібно використовувати текст, що містить символи «<», «>» або лапки?

Назва символу Символ HTML-запис
Подвійні лапки " "
Амперсанд & &
Символ менше < &lt;
Символ більше > &gt;
Пробіл &nbsp;
Одинарні лапки ' &#39;