Изучение HTML 3.2 на примерах

Организация содержания - заголовки (headings), абзацы (paragraphs), списки (lists) и т.п.

Как правило, Ваш документ состоит из частей, которые, в свою очередь, тоже делятся на части и т.д. В HTML такое разделение делается с использованием заголовков различного уровня. Части самого нижнего уровня в этой иерархии состоят из одного или нескольких абзацев. В дополнение к простым абзацам и некоторым специальным видам абзацев HTML 3.2 поддерживает списки и таблицы, которые можно представить, как подобные абзацам. Внутренняя структура абзацев и подобных им элементов состоит из тегов текстового уровня, которые мы приводим далее.

Теги для выражения главных структурных особенностей, так называемые теги блокового уровня, представляют собой следующее:

• заголовки различных уровней: H1, H2, H3, H4, H5, H6
• теги уровня абзаца:
  • простой абзац: P
  • цитирование, представляемое как отдельный абзац: BLOCKQUOTE
  • адрес автора информации - отдельный абзац: ADDRESS
  • элемент, сохраняющий компоновку строк и пробелов предварительно отформатированного текста, PRE
• списки:
  • простой неупорядоченный список: UL, LI
  • сжатый список, размещаемых одной строкой образов: MENU, LI
  • список малых образов: DIR, LI
  • упорядоченный список: OL, LI
  • дефинитивный список (список меток): DL, DT, DD
• таблицы: TABLE, CAPTION, TR, TH, TD
• разделители документа на части, которые могут иметь свойства своей собственной компоновки (например, центрирование): DIV, CENTER
• изменение темы: HR
• наполнение форм: FORM, ISINDEX.

Рекомендуемый подход для написания HTML документа:

1. Записать заголовок для всего документа и для него использовать H1 элемент с атрибутом ALIGN=CENTER.
2. Разделить документ на главные части, записать соответствующие названия для них, используя H1 с ALIGN=LEFT. При этом и в дальнейшем старайтесь избегать деления на более, чем семь частей.
3. Если необходимо, разделите главную часть на меньшие части с заголовками H2, и, если необходимо, разделите каждую из этих подчастей на части уровня ниже этого с заголовками H3. Избегайте использования заголовков H4 и, в особенности, заголовков H5 и H6, так как они выводятся на экран маленьким шрифтом, отчего документ становится трудночитаемым. (Если Вы все-таки хотите использовать H4, попробуйте разделить документ на еще меньшие части.)
4. Если у Вас есть раздел, скажем, с заголовком H2 включающий заголовки H3, избегайте вставки текста между заголовком H2 и первым заголовком H3. Вставка такого текста может быть допустима, если только он содержит очень короткие заметки, такие как: общая ориентировочная информация, некоторые пометки о разделе или девиз. Длинный "бездомный" текст создает неудобство для читателя, который не знаем Ваших намерений. Поэтому используйте подразделы с заголовками соответствующего уровня и с текстом типа "Вводные замечания", "Всеобщее" или "Итоги".
5. Разделите меньшие части вышеупомянутой структуры на абзацы или подобные абзацам блоки (именованные списки или таблицы), как описано ниже. Заметьте, что в HTML Вы должны точно обозначить разделение на абзацы элементами HTML; появление пустой строки не заставит параграф прерваться.
6. В пределах абзаца используйте элементы текстового уровня, нормальную разметку фраз, чтобы отличать специальные текстовые сегменты от обычного текста, например, поместите в кавычки выводимый компьютером текст или подчеркните ключевые слова.
7. Добавьте связи и, если это требуется, изображения или другой иллюстративный материал.

Что касается уровня абзацев, здесь есть много вариантов. Ниже приводим несколько практических советов для выбора подходящего варианта:

• Для абзацев обычного текста используйте элемент P.
• Если текст в абзаце взят из некоторого источника, как помещенная в кавычки цитата, используйте элемент BLOCKQUOTE или, если это программный код, компьютерный листинг (вывод) или некоторый другой текст, для которого не подходит простое отделение его пустыми строками, используйте элемент PRE. В последнем случае, если шрифт одного типа не подходит (например, для поэтического текста), используйте BLOCKQUOTE и добавьте элемент BR к каждой строке.
• В особом случае, когда абзац представляет информацию об авторе (т.е.- о Вас), используйте элемент ADDRESS.
• Для наполненной образами информации, которая логически состоит из отдельных видов образов, используйте различные элементы. Например,:
  • Для спиcковых образов, где порядок не важен, например, список ингредиентов в рецепте, используйте элемент UL, или элемент MENU (для списка малых образов), или элемент DIR (для большого списка малых образов, пригодного для представления в многостолбцовом формате). Для представления списка малых образов можно использовать также другие возможности.
  • Для списков образов, где важен порядок и его необходимо точно реализовать, и таких, как последовательность команд, которая должна строго соблюдаться, используйте элемент OL.
  • Для списка образов с короткими названиями или тегами, например, список определений терминов или сокращений, используйте элемент DL. Однако, в качестве варианта можно рассмотреть использование элемента TABLE для представления дефинитивных списков.

  Заметим, что обычно представление образов с использованием элементов MENU и DIR подобно представлению UL элементов. Также стоит учитывать, что представление с помощью элемента DL может быть слишком неудобным. Поэтому просмотрите, пожалуйста, отдельный файл Примеры различных списковых элементов в HTML, чтобы выбрать какое представление списков будет лучшим в Вашем приложении.

  Элементы UL, MENU, DIR, OL и DL - формируют простые списки и не имеют таких структурных особенностей, как CAPTION в элементе TABLE. Поэтому желательно иметь некоторый тип заголовка или пояснение перед списком, оформленное в виде отдельного абзаца.

• Для табулированной информации используйте обычный элемент TABLE, однако для отдельных случаев рассмотрите возможности, предоставляемые элементами PRE и DL.

Заметим, что элемент абзаца P не может быть вложенным, т.е. Вы не можете использовать элемент P для создания подабзаца. Но различные списковые элементы эффективно реализуют наполненную образами структуру, которая по существу соответствует подабзацному делению. Более того, списковые элементы могут быть вложенными.