Теги та атрибути HTML

Будь-який код містить команди управління, з яких виконуються певні завдання. У кожній мові вони називаються по-різному, але суть у них та сама. Щоб не заплутатися в термінах і говорити однією мовою, розберемося як називаються і як використовуються команди HTML.

У поясненнях я наводитиму посилання на специфікацію, а також на її переклад, про який згадував на сторінці HTML це.. . Згадка про переклад А. Пірамідіна є в офіційній специфікації HTML, тому переклад можна вважати якісним.

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

У середовищі HTML ланцюжок виконання команд наступний:

  1. Джерелами команд є теги – спеціальні конструкції мови HTML. За допомогою них програміст повідомляє програму, яка оброблятиме документ, всю необхідну інформацію, потрібну для правильного відображення документа.
  2. Команди виконуються програмою – браузером. Оглядачі різних розробників обробляють документи з деякими відмінностями, але загалом результат приблизно однаковий.
  3. Команди оглядач застосовує до тексту та іншої інформації, що міститься в документі, що обробляється.

Теги виглядають так:

Щоб побачити (якщо цікаво) нутрощі html-сторінки, в браузері клацніть правою клавішею миші і натисніть пункт Виконавчий код або Код сторінки (скрізь по-різному).

атрибути

Нижче наведено фрагмент коду головної сторінки порталу mail.ru з 2530 по 2547 рядок:

атрибути

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

Повний список тегів можна знайти у специфікації HTML. Їх там трохи менше ста. Кожен відповідає за конкретні функції. Тому в деяких може виникнути резонне питання – невже цього вистачає для отримання того різноманіття оформлення, яке на сьогоднішній день є у мережі інтернет?

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

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

Тепер змінимо значення ширини, щоб отримати прямокутник:

Кожному атрибуту (за рідкісним винятком) необхідно надавати значення, як у прикладі вище висота картинки мала значення сто. При цьому слід зберігати синтаксис, тобто ставити знак рівності, лапки та інші символи, як того вимагає специфікація!

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

Отже, атрибути бувають:

  1. Обов'язкові для деяких тегів.
  2. Необов'язкові.

Знову про теги

Йдемо далі. Потрібно дещо додати і про теги - в мові HTML їх два види:

  1. Рядкові (inline). Їх ще називають інлайнові.
  2. Блокові (Block).

Якщо ми заключимо гіпертекст у тег

, то на сторінці він сформується в окремий блок (оскільки це блоковий тег) і утворює абзац тексту. Абзаци на цій сторінці сформовані саме таким чином. Приклад нижче:

Усі помиляються в міру своїх можливостей.

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

Усі помиляються в міру своїх можливостей.

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

Ці два елементи є незвичайними для HTML тим, що можуть обробляти елементи рівня блоку або інлайн-елементи (але не ті й інші разом). Вони можуть містити одне або більше слів у параграфі або один або більше елементів рівня блоку, такий як параграфи, списки або таблиці. Специфікація HTML 4.01 у перекладі Пірамідіна А.

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

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

  1. Закриваючий тег ( ) є обов'язковим.
  2. Закриваючий тег ( ) не є обов'язковим.
  3. Закриваючий тег ( ) заборонено.

Вказуємо посилання на інший документ

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

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

Забороняється закривати теги, які не роблять дій над гіпертекстом - , , та інші. Вимоги для кожного тегу вказані у специфікації. Нижче ми розглянемо де саме що вказано. Повторимо. У мові HTML існує два види тегів:

  1. Рядкові (inline). Їх ще називають інлайнові.
  2. Блокові (Block).

Кінцевий (/закриває) тег може бути:

  1. Закриваючий тег ( ) є обов'язковим.
  2. Закриваючий тег ( ) не є обов'язковим.
  3. Закриваючий тег ( ) заборонено.

атрибути у тегів можуть бути:

Цю інформацію щодо кожного конкретного тегу можна отримати у специфікації. Як ним користуватися написано нижче. І ще один важливий момент щодо використання різних символів у HTML.

При html-верстці іноді доводиться використовувати символи, які можуть трактуватися подвійно. Наприклад, вживання символів '' буде розцінено браузерами як частина тега, тобто як службовий символ, а це не завжди так. Тому проблемні символи кодуються. Називаються такізакодовані символи мнемоніки. Список мнемонік можна переглянути у специфікації.

Вкладеність тегів

Теги можуть бути вкладеними один в одного як матрьошки. При цьому вони поділяються на батьківські та дочірні елементи. Поясню на прикладі:

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

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

Використання специфікації

Переклад Пірамідіна А.

Відкриваємо специфікацію, меню розділів:

специфікації

Відкриється меню TABLE. Можна прочитати введення та загальну інформацію по таблицях (зайвої не буде). Далі слідує саме опис тега

.

специфікації

Переходимо за посиланням до докладного опису – синтаксису та списку атрибутів.

атрибути

Тут можна отримати інформацію щодо кожного атрибуту.

html

  1. Вимоги закриває тега ( ). У разі початковий і кінцевий теги обов'язкові.
  2. Назви атрибутів даного тега.
  3. Список значень кожного атрибуту.
  4. Статус атрибуту (Актуальний/Застарілий/Заборонений).
  5. Тип даних (значень) атрибуту.
  6. Список загальних атрибутів, які використовуються будь-якими тегами.

Важливе зауваження. На скріншоті вище атрибут align має статус Deprecated (не рекомендовано). Такий атрибут не буде працювати (і буде помилкою) уDOCTYPE Strict. Тому використовувати deprecated-елементи я вкрай не рекомендую. Статус будь-якого елемента можна переглянути у загальному списку.

Уточнення за тегами:

атрибути

  1. Назва тега.
  2. Статус тега, що відкриваєдокумент html:
  3. O - optional (не обов'язковий)
  4. Статус тега, що закриває, в документі html:
  5. O - optional (не обов'язковий)
  6. F - forbidden (заборонено)
  7. Чи передбачається вміст (гіпертекст):
  8. E - Empty (без вмісту)
  9. Статус тега (D, L та F):
  10. D - deprecated (не рекомендовано).
  11. L - loose (допускається у перехідній специфікації Transitional).
  12. F – Frameset (допускається у специфікації Frameset).
  13. Коментар, призначення тега.

Уточнення щодо атрибутів:

  1. Назва атрибуту.
  2. Приналежність до тега (групи тегів).
  3. Варіанти значень атрибуту.
  4. Обов'язковий/необов'язковий для вказаного тега (групи тегів).
  5. Статус атрибуту (D, L та F)
  6. D - deprecated (не рекомендовано).
  7. L - loose (допускається у перехідній специфікації Transitional).
  8. F - forbiden (заборонено).

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

Окрім іншого раджу ознайомитися з наступними розділами: