7 Глобальна структура документа в форматі HTML

зміст

  1. Введення в структуру документа HTML
  2. Інформація про версію HTML
  3. елемент HTML
  4. заголовок документа
    1. елемент HEAD
    2. елемент TITLE
    3. Атрибут title
    4. метадані
  5. тіло документа
    1. елемент BODY
    2. Ідентифікатори елементів: атрибути id і class
    3. Елементи рівня блоку і вбудовані елементи
    4. Угруповання елементів: елементи DIV і SPAN
    5. Заголовки: Елементи H1, H2, H3, H4, H5, H6
    6. елемент ADDRESS

7.1 Введення в структуру документа HTML

Документ в форматі HTML 4.0 складається з трьох частин:

  1. рядки, що містить інформацію про версії HTML ,
  2. розділу заголовків (визначається елементом HEAD ),
  3. тіла, яке включає власне вміст документа. Тіло може вводитися елементом BODY або елементом FRAMESET .

Перед кожним елементом або після кожного елемента може перебувати порожній простір (прогалини, перехід на новий рядок, табуляції і коментарі). Розділи 2 і 3 повинні відділятися елементом HTML .

Ось приклад простого документа HTML: 

  <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.0 // EN"
  "Http://www.w3.org/TR/REC-html40/strict.dtd">
 <HTML>
  <HEAD>
  <TITLE> Мій перший документ HTML </ TITLE>
  </ HEAD>
  <BODY>
  <P> Всім привіт!
  </ BODY>
 </ HTML>

7.2 Інформація про версію HTML

У документі HTML повинна бути оголошена використовувана в ньому версія мови HTML. Оголошення типу документа вказує визначення типу документа (DTD), що використовується в цьому документі (див. [ISO8879] ).

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

  • HTML 4.0 Strict DTD (суворе визначення) включає всі елементи і атрибути, які не є небажаними і не використовуються в документах з кадрами. Для документів, що використовують це DTD, використовуйте таке оголошення типу документа: 
     <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.0 // EN"
  "Http://www.w3.org/TR/REC-html40/strict.dtd">
  • HTML 4.0 Transitional DTD (перехідний визначення) включає все, що включено в суворе DTD, а також небажані елементи і атрибути (більшість з яких відноситься до візуального уявлення). Для документів, що використовують це DTD, використовуйте таке оголошення типу документа: 
     <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.0 Transitional // EN"
  "Http://www.w3.org/TR/REC-html40/loose.dtd">
  • HTML 4.0 Frameset DTD (визначення для кадрів) включає все, що включено в перехідний DTD, а також кадри. Для документів, що використовують це DTD, використовуйте таке оголошення типу: 
     <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.0 Frameset // EN"
  "Http://www.w3.org/TR/REC-html40/frameset.dtd">

URI в кожному оголошенні типу документа дозволяє агентам користувачів завантажити DTD і всі необхідні entity sets . Наступні URI вказують на DTD і набори комбінацій для HTML 4.0, підтримуваного W3C:

Зв'язок між загальними ідентифікаторами і файлами можна вказати з використанням файлу каталогу, за яким слід формат, рекомендований Відкритим консорціумом SGML (див. [SGMLOPEN] ). Приблизний файл каталогу для HTML 4.0 включений до початку розділу про довідкової інформації про SGML для HTML. Дві останні літери декларації вказують мову DTD. Для HTML це завжди англійська ( "EN").

7.3 Елемент HTML 

  <! ENTITY% html.content "HEAD, BODY">
 <! ELEMENT HTML OO ( % html.content; ) - кореневий елемент документа ->
 <! ATTLIST HTML
  % i18n;
  - Lang , dir -
  >

Початковий тег: необов'язковий, Кінцевий тег: необов'язковий

визначення атрибутів

версія = cdata [CN]
Небажаний. Значення цього атрибута вказує версію HTML DTD, якій підпорядковується цей документ. Цей атрибут є небажаним, оскільки він є надлишковим при наявності інформації про версії, про яку йдеться в оголошенні типу документа.

Атрибути, обумовлені в будь-якому іншому місці

Після оголошення типу документа решта документа HTML міститься в елементі HTML . Таким чином, типовий документ HTML має таку структуру: 

  <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.0 // EN"
 "Http://www.w3.org/TR/REC-html40/strict.dtd">
 <HTML>
 ... Тут йдуть заголовок, тіло і т.д ...

 </ HTML>

7.4 Тема документа

7.4.1 Елемент HEAD 

  <! - % Head.misc;
  , Визначений раніше як "SCRIPT | STYLE | META | LINK | OBJECT" ->
 <! ENTITY% head.content "TITLE & BASE?">
 <! ELEMENT HEAD OO ( % head.content; ) + ( % head.misc; ) - заголовок документа ->
 <! ATTLIST HEAD
  % i18n;
  - Lang , dir -
  profile % URI;
  #IMPLIED - Каталог метаінформації -
  >

Початковий тег: не обов'язково, Кінцевий тег: не обов'язково

визначення атрибутів

profile = uri [CT]
Цей атрибут вказує місце розташування одного або декількох профілів метаданих, відокремлюваних пробілами. Для розширення в майбутньому агенти користувачів повинні припускати, що значення є списком, хоча в даній специфікації значущим вважається тільки перший URI. Профілі обговорюються нижче в розділі про метаданих .

Атрибути, обумовлені в будь-якому іншому місці

Елемент HEAD містить інформацію про поточний документ, таку як заголовок, ключові слова, які можуть використовуватися пошуковими машинами, і інші дані, які не зважають на вмістом документа. Агенти користувачів зазвичай не використовують при генерації елементи з розділу HEAD . Однак вони можуть надавати користувачам інформацію з розділу HEAD за допомогою своїх власних механізмів.

7.4.2 Елемент TITLE 

  <! - Елемент TITLE не рахується частиною тексту.
  Він повинен відображатися, наприклад, в якості заголовка сторінки
  або вікна.  У документі повинен бути рівно один заголовок.
  ->
 <! ELEMENT TITLE - - (#PCDATA) - ( % head.misc; ) - заголовок документа ->
 <! ATTLIST TITLE % i18n >

Початковий тег: обов'язковий, Кінцевий тег: обов'язковий

Атрибути, обумовлені в будь-якому іншому місці

Кожен документ HTML повинен мати елемент TITLE в розділі HEAD .

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

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

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

  <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.0 // EN"
  "Http://www.w3.org/TR/REC-html40/strict.dtd">
 <HTML>
 <HEAD>
 <TITLE> Дослідження динаміки популяції </ TITLE>
 ... Інші елементи заголовка ... </ HEAD>
 <BODY>
 ... Тіло документа ...

 </ BODY>
 </ HTML>

7.4.3 Атрибут title

визначення атрибутів

title = text [CS]
Цей атрибут пропонує інформацію про елемент, для якого він встановлюється.

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

Значення атрибута title можуть використовуватися агентами користувача в генерації зображення по-різному. Наприклад, візуальні браузери часто відображають заголовок як підказку (коротке повідомлення, яке з'являється, якщо Ви вказуєте на об'єкт). Аудіоагенти користувача можуть промовляти інформацію заголовка. Наприклад, установка цього атрибута для посилання дозволяє агентам користувачів (візуальним і незриме) повідомити користувачам про природу пов'язаного ресурсу: 

  ... текст ... Ось фотографія
 <A Href="http://someplace.com/neatstuff.gif" title="Me scuba diving">
  як я пірнав у минулому році
 </A>
 ... ще текст ...

Атрибут title грає додаткову роль при використанні з елементом LINK для призначення зовнішньої таблиці стилів. Детальніше див. У розділі про посиланнях і таблицях стилів .

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

7.4.4 Метадані

Під час написання цієї специфікації проводилися роботи з надання авторам можливості завдання більшої кількості машинно-читаних інформації про документи HTML і інших мережевих ресурсах. Для метаданих W3C розроблений Мова опису ресурсів (див. [RDF] ).

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

Наприклад, щоб вказати автора документа, можна використовувати елемент META наступним чином: 

 <META name = "Author" content = "Дейв Реггетт">

Елемент META задає властивість (тут "Author (Автор)") і призначає йому значення (тут - "Дейв Реггетт").

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

вказівка ​​метаданих  

У загальному випадку завдання метаданих складається з двох кроків:

  1. Оголошення властивості і його значення. Це можна зробити двома способами:
    1. З документа за допомогою елемента META .
    2. Чи не з документа за допомогою посилання на метадані через елемент LINK (див. Розділ про типах посилань ).
  2. Пославшись на профіль, в якому визначаються властивості і їх допустимі значення. Для призначення профілю використовуйте атрибут profile елемента HEAD .

Пам'ятайте, що оскільки профіль визначається для елемента HEAD , цей профіль застосовується до всіх елементів META і LINK в заголовку документа.

Агенти користувачів не обов'язково повинні підтримувати механізми метаданих. У цій специфікації не визначається інтерпретація метаданих.

елемент META   

  <! ELEMENT META - O EMPTY - загальна метаінформація ->
 <! ATTLIST META
  % i18n;
  - Lang , dir , для використання з вмістом -
  http-equiv NAME #IMPLIED - ім'я заголовка відповіді HTTP -
  name NAME #IMPLIED - ім'я метаінформації -
  content CDATA #REQUIRED - пов'язана інформація -
  scheme CDATA #IMPLIED - вибір форми вмісту -
  >

Початковий тег: обов'язковий, Кінцевий тег: заборонений

визначення атрибутів

Для наступних атрибутів допустимі значення і їх інтерпретація залежать від профілю :

name = name [CS]
Цей атрибут визначає ім'я властивості. В даній специфікації не перераховує допустимі значення цього атрибута.
content = cdata [CS]
Цей атрибут визначає значення властивості. В даній специфікації не перераховує допустимі значення цього атрибута.
scheme = cdata [CS]
Цей атрибут дає ім'я схемою, що використовується для інтерпретації значення властивості (докладніше див. Розділ про профілях ).
http-equiv = name [CI]
Цей атрибут може використовуватися замість атрибута name. Сервери HTTP використовують цей атрибут для збору інформації для заголовків повідомлень відповідей HTTP.

Атрибути, обумовлені в любо іншому місці

Елемент META може використовуватися для ідентифікації властивостей документа (наприклад, автора, термін закінчення, список ключових слів і т.д.) і призначення їм значень. У цій специфікації не визначається нормативний набір значень.

Кожен елемент META задає пару властивість / значення. Атрибут name визначає властивості, а атрибут content - значення.

Наприклад, в наступному оголошенні встановлюється значення властивості Author: 

  <META name = "Author" content = "Дейв Реггетт">

Атрибут lang може використовуватися з елементом META для вказівки мови значення атрибута content . Це дозволяє синтезаторів мови використовувати правила вимови для різних мов.

У цьому прикладі ім'я автора оголошується французькою мовою: 

 <META name = "Author" lang = "fr" content = "Arnaud Le Hors">

Примітка. Елемент META - це загальний механізм завдання метаданих. Однак деякі елементи і атрибути HTML вже обробляють деякі частини метаданих і можуть використовуватися авторами замість елементів META для вказівки цих частин: елементи TITLE , ADDRESS , INS і DEL , атрибут title і атрибут cite .

Примітка. Якщо властивість, задана за допомогою елемента META , приймає значення URI , деякі автори вважають за краще вказувати метадані за допомогою елемента LINK . Таким чином, наступне оголошення: 

  <META name = "DC.identifier"
  content = "ftp://ds.internic.net/rfc/rfc1866.txt">

можна також записати в такий спосіб: 

  <LINK rel = "DC.identifier"
  type = "text / plain"
  href = "ftp://ds.internic.net/rfc/rfc1866.txt">
META і заголовки HTTP

Атрибут http-equiv може використовуватися замість атрибута name; він особливо важливий, якщо документи завантажуються по протоколу передачі гіпертексту (HTTP). Сервери HTTP можуть використовувати ім'я властивості, вказане в атрибуті http-equiv для створення заголовка у відповіді HTTP в стилі [RFC822] . Детальніше про допустимих заголовках HTTP см. В специфікації HTTP ( [RFC2068] ).

У наступному прикладі оголошення META : 

 <META http-equiv = "Expires" content = "Tue, 20 Aug 1996 14:25:27 GMT">

поверне наступний заголовок HTTP: 

  Expires: Tue, 20 Aug один тисяча дев'ятсот дев'яносто шість 14:25:27 GMT

Це може використовуватися кеш-пам'яттю для визначення того, коли слід завантажити нову копію пов'язаного документа.

Деякі агенти користувачів підтримують використання елемента META для поновлення поточної сторінки після закінчення зазначеного числа секунд з можливістю заміни на інший URI. 

 <META http-equiv = "refresh" content = "3, http: //www.acme.com/intro.shtml">

content - це число, яке вказує затримку в секундах, за яким слід URI, який потрібно завантажити по закінченні цього часу. Цей механізм широко використовується для створення короткочасних заставок. Однак оскільки деякі агенти користувачів не підтримують цей механізм, авторам слід включити в заставку можливість перейти на наступну сторінку (щоб вони на "зависли" на заставці).

META і пошукові машини

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

 <- Для говорять на американському англійською ->
 <META name = "keywords" lang = "en-us" 
  content = "vacation, Greece, sunshine">
 <- Для говорять на британському англійською ->
 <META name = "keywords" lang = "en" 
  content = "holiday, Greece, sunshine">
 <- Для російськомовних користувачів ->
 <META name = "keywords" lang = "fr" 
  content = "відпустку, Греція, сонце">

Ефективність пошукових машин можна також підвищити з використанням елементу the LINK для завдання посилань на переклади документа на інші мови, посилання на версії документа для іншого носія (наприклад, PDF), і, якщо документ є частиною набору, посилання на відповідну початкову точку для перегляду набору .

Подальша інформація знаходиться в розділі Як допомогти пошуковим машинам проіндексувати Ваш Web-сервер .

META і PICS
Platform for Internet Content Selection (Платформа для вибору вмісту Інтернет) (PICS, specified in [PICS] ) - це інфраструктура для зв'язування міток (метаданих) з вмістом Інтернет. Створена для допомоги батькам та вчителям в управлінні доступом дітей до Інтернет, вона також спрощує інше використання міток, включаючи управління підписом кодів, секретністю і правами інтелектуальної власності.

Цей приклад ілюструє використання оголошення META для включення мітки PICS 1.1: 

  <HEAD>
  <META http-equiv = "PICS-Label" content = '
  (PICS-1.1 "http://www.gcf.org/v2.5"
  labels on "1994.11.05T08: 15-0500"
  until "1995.12.31T23: 59-0000"
  for "http://w3.org/PICS/Overview.shtml"
  ratings (suds 0.5 density 0 color / hue 1))
  '>
  <TITLE> ... назва документа ... </ TITLE>
 </ HEAD>
META і інформація за замовчуванням

Елемент META може використовуватися для вказівки інформації за замовчуванням для документа в наступних випадках:

У наступному прикладі для документа вказується кодування символів ISO-8859-5 

 <META http-equiv = "Content-Type" content = "text / html; charset = ISO-8859-5">

профілі метаданих  

Атрибут profile елемента HEAD вказує місце розташування профілю метаданих. Значенням атрибута profile є URI. Агенти користувачів можуть використовувати цей URI двома способами:
  • Як глобальне унікальне ім'я. Агенти користувача можуть розпізнавати ім'я (не завантажуючи насправді профіль) і виконувати деякі дії на базі відомих угод для цього профілю. Наприклад, пошукові машини можуть забезпечувати інтерфейс для пошуку в каталогах документів HTML, де всі ці документи використовують один і той же профіль для подання записів каталогу.
  • Як посилання. Агенти користувачів можуть разименовивать URI і виконувати деякі дії на базі визначень з профілю (наприклад, авторизувати використання профілю в поточному документі HTML). У цій специфікації не визначаються формати профілів.

У цьому прикладі використовується гіпотетичний профіль, який визначає корисні властивості для індексування документів. Для властивостей, які визначаються цим профілем - включаючи "author", "copyright", "keywords" і "date" - значення встановлюються за допомогою послідовних оголошень META . 

  <HEAD profile = "http://www.acme.com/profiles/core">
  <TITLE> How to complete Memorandum cover sheets </ TITLE>
  <META name = "author" content = "John Doe">
  <META name = "copyright" content = "& copy; 1997 Acme Corp.">
  <META name = "keywords" content = "corporate, guidelines, cataloging">
  <META name = "date" content = "1994-11-06T08: 49: 37 + 00: 00">
  </ HEAD>

Під час написання цієї специфікації поширеною стала практика використання форматів дат, описаних в [RFC2068] , розділ 3.3. Оскільки обробка цих форматів щодо складна, ми рекомендуємо авторам використовувати формат дати [ISO8601] . Детальніше див. Розділи про елементи INS і DEL .

Атрибут scheme дозволяє авторам надавати агентам користувачів додатковий контекст для коректної інтерпретації метаданих. Іноді така додаткова інформація може мати важливе значення, наприклад, якщо метадані вказані в іншому форматі. Наприклад, автор може вказати дату в форматі "10-9-97" (неоднозначно); чи означає це 9 жовтня 1997 р або 10 вересня 1997 г.? Значення атрибута scheme "Month-Date-Year" усуне неоднозначність.

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

Наприклад, таке оголошення scheme допоможе агентам користувачів визначити, що значення властивості "identifier" - номер коду ISBN: 

 <META scheme = "ISBN" name = "identifier" content = "0-8230-2355-9">

Значення атрибута scheme залежать від властивості name і пов'язаного профілю .

Примітка. Прикладом профілю є Dublin Core (див. [DCORE] ). Профіль цього визначає набір рекомендованих властивостей для електронних бібліографічних описів і призначений для забезпечення інтероперабельності в непорівнянних моделях описів.

7.5 Тіло документа

7.5.1 Елемент BODY 

  <! ELEMENT BODY OO ( % block; | SCRIPT) + + (INS | DEL) - тіло документа ->
 <! ATTLIST BODY
  % attrs;
  - % Coreattrs , % i18n , % events -
  onload % Script;
  #IMPLIED - Документ завантажений -
  onunload % Script;
  #IMPLIED - Документ видалений -
  >

Початковий тег: не обов'язково, Кінцевий тег: не обов'язково

визначення атрибутів

background = uri [CT]
Небажаний. Значення цього атрибута - URI, який вказує на зображення. Це зображення є фоном (для візуальних браузерів).
text = color [CI]
Небажаний. Цей атрибут встановлює колір тексту (для візуальних браузерів).
link = color [CI]
Небажаний. Цей атрибут встановлює колір тексту гіпертекстових посилань, за якими Ви не переходили (для візуальних браузерів).
vlink = color [CI]
Небажаний. Цей атрибут встановлює колір тексту посилань, за якими Ви переходили (для візуальних браузерів).
alink = color [CI]
Небажаний. Цей атрибут встановлює колір тексту посилань, коли вони обрані користувачем (для візуальних браузерів).

Атрибути, обумовлені в будь-якому іншому місці

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

ПРИКЛАД небажане використання:
У наступному фрагменті коду HTML показано використання небажаного атрибута. Він встановлює білий колір фону, чорний колір тексту і червоний колір гіперпосилань спочатку, колір фуксії при активізації посилань і коричневий для посилань, за якими Ви переходили. 

  <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.0 Transitional // EN"
  "Http://www.w3.org/TR/REC-html40/loose.dtd">
 <HTML>
 <HEAD>
  <TITLE> Динаміка популяції </ TITLE>
 </ HEAD>
 <BODY bgcolor = "white" text = "black"
  link = "red" alink = "fuchsia" vlink = "maroon">
  ... Тіло документа ...

 </ BODY>
 </ HTML>

Використовуючи таблиці стилів , того ж ефекту можна досягти наступним чином: 

  <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.0 // EN"
  "Http://www.w3.org/TR/REC-html40/strict.dtd">
 <HTML>
 <HEAD>
  <TITLE> Динаміка популяції </ TITLE>
  <STYLE type = "text / css">
  BODY {background: white;  color: black}
  A: link {color: red}
  A: visited {color: maroon}
  A: active {color: fuchsia}
  </ STYLE>
 </ HEAD>
 <BODY>
  ... Тіло документа ...

 </ BODY>
 </ HTML>

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

 <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.0 // EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <HTML> <HEAD> <TITLE> динаміка популяції </ TITLE> <LINK rel = "stylesheet" type = "text / css" href = "smartstyle.css"> </ HEAD> <BODY> ... тіло документа ... </ BODY> </ HTML >

Кадри і тіла документів HTML. У документах, що містять кадри, елемент BODY замінюється елементом FRAMESET . Детальніше див. У розділі про кадрах .

7.5.2 Ідентифікатори елементів: атрибути id and class

визначення атрибутів

id = name [CS]
Цей атрибут призначає елементу ім'я. Ім'я в межах документа повинно бути унікальним.
class = cdata-list [CS]
Цей атрибут призначає елементу ім'я класу або набір імен класів. Одне і те ж ім'я або імена класів можуть бути призначені будь-якого числа елементів. Кілька імен класів повинні бути розділені пробілами.
Атрибут id призначає елементу унікальний ідентифікатор (який може перевірятися синтаксичним аналізатором SGML). Наприклад, такі абзаци розпізнаються за значеннями їх атрибутів id : 

 <P id = "myparagraph"> Цей абзац має унікальне ім'я. </ P>
 <P id = "yourparagraph"> Цей абзац теж має унікальне ім'я. </ P>

Атрибут id має в HTML кілька ролей :

  • Спосіб вибору таблиці стилю .
  • Призначення цілі (якір) для гіпертекстових посилань.
  • Засіб посилання на певний елемент сценарію .
  • Ім'я оголошеного об'єкта OBJECT .
  • З метою обробки агентами користувачів (наприклад. Для полів ідентифікації при отриманні даних з сторінок HTML в базу даних, перетворенні документів HTML в інші формати і т.д.).

Атрибут class , з іншого боку, призначає одне або кілька імен класів елементу; при цьому елемент може називатися належить до цих класів. Ім'я класу може використовуватися декількома екземплярами елемента. Атрибут class має в HTML кілька ролей :

  • Спосіб вибору таблиці стилю (коли автор хоче призначити інформацію про стилі набору елементів).
  • Для загальної обробки агентами користувачів.

Далі елемент example SPAN використовується разом з атрибутами id і class для позначки повідомлень документа. Повідомлення відображаються в англійській і російській версіях. 

  <! - Англійські повідомлення ->
 <P> <SPAN id = "msg1" class = "info" lang = "en"> Variable declared twice </ SPAN>
 <P> <SPAN id = "msg2" class = "warning" lang = "en"> Undeclared variable </ SPAN>
 <P> <SPAN id = "msg3" class = "error" lang = "en"> Bad syntax for variable name </ SPAN>

  <! - Російські повідомлень ->
 <P> <SPAN id = "msg1" class = "info" lang = "fr"> Змінна оголошена двічі </ SPAN>
 <P> <SPAN id = "msg2" class = "warning" lang = "fr"> Змінна не оголошена </ SPAN>
 <P> <SPAN id = "msg3" class = "error" lang = "fr"> Синтаксична помилка в імені змінної </ SPAN>

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

  SPAN.info {color: green}
 SPAN.warning {color: yellow}
 SPAN.error {color: red}

Пам'ятайте, що російської "msg1" і англійське "msg1" не можуть відображатися в одному документі, оскільки вони використовують один і той же значення атрибута id . Автори можуть отримати подальшу користь, використовуючи атрибут id для удосконалення уявлення окремих повідомлень, зазначення їх в якості цілей (якорів) і т.д.

Майже кожному елементу HTML може бути призначений ідентифікатор і інформація про клас.

Припустимо, ми пишемо документ про мову програмування. Цей документ повинен включати ряд відформатованих прикладів. Для форматування прикладів ми використовуємо елемент PRE . Ми також призначаємо колір фону (зелений) всіх примірників елемента PRE , що належить класу "example". 

  <HEAD>
 <TITLE> ... назва документа ... </ TITLE>
 <STYLE type = "text / css">
 PRE.example {background: green}
 </ STYLE>
 </ HEAD>
 <BODY>
 <PRE class = "example" id = "example-1">
 ... код прикладу ...

 </ PRE>
 </ BODY>

Встановивши атрибут id для цього прикладу, ми можемо (1) створити на нього гіперпосилання і (2) використовувати інформацію про стилі, відмінну від певної в таблиці, для одного примірника інформації про стилі.

Примітка. Атрибут id використовує один простір імен з атрибутом name, якщо він використовується для імен якорів. Детальніше див. У розділі про якорях з id .

7.5.3 Елементи рівня блоку і вбудовані елементи

Деякі елементи HTML, які можуть бути присутніми всередині тега BODY, називаються елементами "рівня блоку" , в той час як інші - "вбудованими" (також званими елементами "рівня тексту"). Різниця між ними описана нижче:

модель вмісту
Зазвичай елементи рівня блоку можуть містити вбудовані елементи та інші елементи рівня блоку. Зазвичай вбудовані елементи можуть містити тільки дані та інші вбудовані елементи. Цьому структурному відмінності властива ідея про те, що елементи блоку створюють "великі" структури, ніж вбудовані елементи.
форматування
За умочланію елементи рівня блоку форматируются інакше, ніж вбудовані елементи. Зазвичай елементи рівня блоку починаються з нового рядка, а вбудовані елементи - немає. Інформацію про прогалини, перенесення рядка і форматуванні блоків см. В розділі про тексті .
напрямок
З технічних причин, які зачіпають алгоритм двунаправленного тексту [UNICODE] , елементи рівня блоку і вбудовані елементи розрізняються способами успадкування інформації про направлення. Детальніше див. У розділі про спадкування напрямку тексту .

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

Зміна традиційних виражень подання для елементів рівня блоку і вбудованих елементів впливає на алгоритм двунаправленного тексту. Детальніше див. Розділ про вплив таблиць стилів на двунаправленность .

7.5.4 Угруповання елементів: елементи DIV і SPAN 

  <! ELEMENT DIV - - ( % flow; ) * - загальний контейнер мови / стилю ->
 <! ATTLIST DIV
  % attrs;
  - % Coreattrs , % i18n , % events -
  >
 <! ELEMENT SPAN - - ( % inline; ) * - загальний контейнер мови / стилю ->
 <! ATTLIST SPAN
  % attrs;
  - % Coreattrs , % i18n , % events -
  >

Початковий тег: обов'язковий, Кінцевий тег: обов'язковий

визначення атрибутів

href = uri [CT]
Цей атрибут вказує ресурс, що надає додаткову інформацію про вміст елемента DIV або SPAN .

Атрибути, обумовлені в будь-якому іншому місці

Елементи DIV і SPAN разом з атрибутами id і class забезпечують загальний механізм додавання в документи структури. Ці елементи визначають вбудовується інформацію ( SPAN ) або інформацію рівня блоку ( DIV ), але не накладають жодних інших виразів для подання контексту. Таким чином, автори можуть використовувати ці елементи з таблицями стилів , атрибутами lang і т.д ..

Припустимо, Ви хочете згенерувати документ у форматі HTML на основі бази даних інформації про клієнтів. Оскільки HTML не включає елементів для ідентифікації таких об'єктів як "клієнт", "номер телефону", "адреса електронної пошти" і т.д., ми використовуємо елементи DIV і SPAN для досягнення потрібних ефектів структури та подання. Для структурування інформації ми могли використовувати елемент TABLE наступним чином: 

 <! - Приклад даних з бази даних про клієнтів: ->
 <! - Ім'я: Stephane Boyera, Тел .: (212) 555-1212, Email: [email protected] ->

 <DIV id = "client-boyera" class = "client">
 <P> <SPAN class = "client-title"> Інформація про клієнта: </ SPAN>
 <TABLE class = "client-data">
 <TR> <TH> Прізвище: <TD> Boyera </ TR>
 <TR> <TH> Ім'я: <TD> Stephane </ TR>
 <TR> <TH> Тел: <TD> (212) 555-1212 </ TR>
 <TR> <TH> Email: <TD> [email protected] </ TR>
 </ TABLE>
 </ DIV>

 <DIV id = "client-lafon" class = "client">
 <P> <SPAN class = "client-title"> Інформація про клієнта: </ SPAN>
 <TABLE class = "client-data">
 <TR> <TH> Прізвище: <TD> Lafon </ TR>
 <TR> <TH> Ім'я: <TD> Yves </ TR>
 <TR> <TH> Тел: <TD> (617) 555-1212 </ TR>
 <TR> <TH> Email: <TD> [email protected] </ TR>
 </ TABLE>
 </ DIV>

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

Інший приклад див. Розділ про атрибути class і id .

Візуальні агенти користувачів зазвичай поміщають символ перекладу рядка перед і після елементів DIV , наприклад: 

 <P> ааааааааа <DIV> БББББББББ </ DIV> <DIV> ввввв <P> ввввв </ DIV>

що зазвичай генерується як: 

 ааааааааа
 БББББББББ
 ввввв

 ввввв

7.5.5 Заголовки: Елементи H1 , H2 , H3 , H4 , H5 , H6 

  <! ENTITY% heading " H1 | H2 | H3 | H4 | H5 | H6 ">
 <! -
  Існує шість рівнів заголовків - з H1 (найбільш важливий) до H6 (найменш важливий).
 ->
 <! ELEMENT ( % heading; ) - - ( % inline; ) * - заголовки ->
 <! ATTLIST ( % heading; )
  % attrs;
  - % Coreattrs , % i18n , % events -
  >

Початковий тег: обов'язковий, Кінцевий тег: обов'язковий

Атрибути, обумовлені в будь-якому іншому місці

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

У мові HTML існує шість рівнів заголовків: H1 - найбільш важливий - і H6 - найменш важливий. Візуальні браузери зазвичай відображають більш важливі заголовки більшим шрифтом.

У наступному прикладі показано, як використовувати елемент DIV для того, щоб зв'язати заголовок з наступним розділом документа. Це дозволить Вам визначити стиль для розділу (колір фону, шрифт і т.д.) з використанням таблиць стилів. 

 <DIV class = "section" id = "forest-elephants"> <H1> Лісові слони </ H1> <P> У цьому розділі ми обговорюємо менш відомих лісових слонів.  ... продовження розділу ... <DIV class = "subsection" id = "forest-habitat"> <H2> Ариал </ H2> <P> Лісові слони не живуть в деревах, а серед них.  ... продовження розділу ... </ DIV> </ DIV>

Цю структуру можна уявити з використанням інформації про стилі, наприклад: 

  <HEAD>
 <TITLE> ... назва документа ... </ TITLE>
 <STYLE type = "text / css">
 DIV.section {text-align: justify;  font-size: 12pt}
 DIV.subsection {text-indent: 2em}
 H1 {font-style: italic;  color: green}
 H2 {color: green}
 </ STYLE>
 </ HEAD>

Пронумеровані розділи та посилання
Мова HTML не генерує номера розділів із заголовків. Це може виконуватися агентами користувачів. Незабаром мови опису таблиць стилів, такі як CSS, нададуть авторам можливість управління генерацією номерів розділів (для зручності в посиланнях в друкованій документації, наприклад "Див. Розділ 7.2").

Деякі люди вважають пропуск рівнів заголовків поганим тоном. Вони приймають порядок заголовків H1 H2 H1, але не приймають порядок H1 H3 H1, оскільки пропущений рівень H2.

7.5.6 Елемент ADDRESS 

  <! ELEMENT ADDRESS - - ( % inline; ) * - інформація про автора ->
 <! ATTLIST ADDRESS
  % attrs;
  - % Coreattrs , % i18n , % events -
  >

Початковий тег: обов'язковий, Кінцевий тег: обов'язковий

Атрибути, обумовлені в будь-якому іншому місці

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

Наприклад, сторінка на сервері W3C, що відноситься до мови HTML, може включати наступну контактну інформацію: 

 <ADDRESS>
 <P> <A href="../People/Raggett/"> Dave Raggett </A>, 
  <A Href="../People/Arnaud/"> Arnaud Le Hors </A>, 
 contact persons for the <A href="Activity"> W3C HTML Activity </A> <BR> 
 $ Date: 1997/12/16 5:38:14 $
 </ ADDRESS>
назад далі зміст елементи атрибути покажчик