Использование элементов

В листинге 3-1 показан простой пример HTML элемента, примененного к тексту.

Листинг 3-1: Пример HTML элемента

I like <code>apples</code> and oranges.

Я выделил элемент жирным шрифтом, он состоит из трех частей. Первые две называются тегами. Открывающий тег — это <code>, закрывающий тег — </code>. Между тегами находится содержание элемента (в данном случае apples). Вместе теги и содержание формируют элемент code, как показано на рисунке 3-1.

Рисунок 3-1: Строение HTML элемента

При помощи элементов вы рассказываете браузеру о содержании. Значение элемента применяется к содержанию элемента. Каждый из HTML элементов имеет собственное довольно конкретное значение: элемент code, например, представляет фрагмент компьютерного кода.

Совет
Имена элементов не чувствительны к регистру. Браузер распознает <CODE> и <code>, и даже <CoDe> в качестве начальных тегов для элемента code. Но, в общем, лучше придерживаться единого формата. В последние годы наиболее распространенным стилем стало использование строчных букв. Этим форматом я и буду пользоваться в данной книге.

HTML определяет различные типы элементов, которые выполняют различные роли в HTML документе. Элемент code является примером семантического элемента. Семантические элементы позволяют определять значение содержания и связь между различными частями содержания. Об этом я более подробно расскажу в главе 8. Результат использования элемента code можно увидеть на рисунке 3-2.

Рисунок 3-2: Результат использования элемента code, отображенный в браузере

Обратите внимание, что браузер не отображает теги элемента — его работа заключается в интерпретации вашего HTML и представления его в удобном для пользователя виде.

Разделение представления и содержания
Некоторые HTML элементы влияют на представление: это означает, что когда браузер встречает один из этих элементов, он будет менять способ отображения содержимого для пользователя. Элемент code является хорошим примером этого. Как показано на рисунке 3-1, когда браузер встречает элемент code, он отображает включенный в него контент, используя шрифт фиксированной ширины.

Использование HTML элементов для управления представлением содержания настоятельно не рекомендуется. Идея состоит в том, что вы используете HTML элементы, чтобы определить структуру и смысл содержания, и каскадные таблицы стилей (CSS), чтобы управлять тем, как контент будет представлен пользователю. В главе 4 мы поговорим о CSS

Элементы, которые влияют на представление содержания, как правило, возникли еще в ранних версиях HTML, когда идея разделения оформления и содержания не так настойчиво внедрялась. Браузер будет применять для представления этих элементов стиль по умолчанию, например, шрифт фиксированной ширины, который обычно используется для элемента code. Как я объясню в главе 4, вы можете использовать CSS, чтобы переопределить эти стили по умолчанию.

Элементы, используемые в этой главе

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

Таблица 3-2: Краткое описание элементов

Элемент	Описание	Глава
`a`	Создает гиперссылку	8
`body`	Обозначает содержание HTML документа	7
`button`	Создает кнопку для отправки форм	12
`code`	Обозначает фрагмент компьютерного кода	8
`DOCTYPE`	Обозначает начало HTML документа	7
`head`	Обозначает раздел заголовка HTML документа	7
`hr`	Обозначает тематический разрыв	9
`html`	Обозначает HTML раздел документа	7
`input`	Обозначает поле для ввода данных пользователем	8
`label`	Создать ярлык для другого элемента	12
`p`	Обозначает абзац	9
`style`	Обозначает CSS стиль	7
`table`	Обозначает табличные данные	11
`td`	Обозначает ячейку таблицы	11
`textarea`	Создает многострочное текстовое поле для сбора информации от пользователя	14
`th`	Создает ячейку заголовка таблицы	11
`title`	Определяет название HTML документа	7
`tr`	Обозначает строку таблицы	11

Использование незаполненных элементов

Не обязательно нужно размещать какое-либо содержание между открывающим и закрывающим тегами. Если вы так делаете, вы создаете незаполненный элемент, например, как показано в листинге 3-2.

Листинг 3-2: Пустой HTML элемент

I like <code></code> apples and oranges.

Не все элементы стоит оставлять незаполненными (и элемент code — один из них), но все же это все равно валидный HTML.

Использование самозакрывающихся тегов

Незаполненные элементы можно выразить более сжато, если использовать один тег, как показано в листинге 3-3.

Листинг 3-3: Выражение незаполненного элемента с помощью одного тега

I like <code/> apples and oranges.

Вы объединяете открывающий и закрывающий тег в один при помощи слеша (/), который обычно используется для обозначения начала закрывающего тега, и он помещается в конец одного тега. Элемент в листинге 3-2 и элемент в листинге 3-3 эквивалентны: один тег является более кратким способом выражения незаполненного элемента.

Использование пустых элементов

Есть некоторые элементы, которые должны быть выражены при помощи одного тега, и по спецификации HTML незаконно размещать в них любой контент. Они известны как пустые элементы (void). Одним из таких элементов является hr, который представляет собой группирующий элемент и используется для обозначения разрыва содержания на уровне абзаца. (Вы увидите другие группирующие элементы в главе 9). Вы можете использовать пустые элементы одним из двух способов: во-первых, указать только открывающий тег, как показано в листинге 3-4.

Листинг 3-4: Указание пустого элемента с использованием только начального тега

I like apples and oranges. 
<hr> 
Today was warm and sunny.

Браузер знает, что hr — это пустой элемент, и не ожидает увидеть закрывающий тег. Вы можете также включить слеш, чтобы элемент соответствовал пустому элементу, как показано в листинге 3-5.

Листинг 3-5: Выражение пустого элемента с помощью структуры незаполненного элемента

I like apples and oranges.
<hr />
Today was warm and sunny.

Этот формат мне нравится, и я буду использовать его в данной книге. Кстати, элемент hr — еще один пример элемента, который имеет презентационный смысл: в данном случае для отображения горизонтальной линии (отсюда и название). Вы можете увидеть представление по умолчанию элемента hr на рисунке 3-3.

Рисунок 3-3: Так по умолчанию представлен элемент hr

Использование (неиспользование) дополнительных открывающих и закрывающих тегов
Для многих элементов HTML5 существуют специальные правила, по которым вы можете опустить один из тегов. Вот пример: для элемента html (который я описал в главе 7) может быть опущен закрывающий тег, если "за элементом сразу не следует комментарий и элемент содержит элемент body, который не является незаполненным и в нем не пропущен открывающий тег". Текст курсивом взят из одного из официальных документов спецификации HTML5. Я рекомендую вам читать эти спецификации (которые вы можете получить на w3c.org), но имейте в виду: все они написаны в таком живом стиле.
Я думаю, это здорово, что есть такая гибкость в разметке, но я также считаю, что это сбивает с толку и приводит к проблемам. Элементы, которые применяются к HTML, не просто обрабатываются браузерами, они должны быть читабельны для ваших коллег и в дальнейшем и для вас, когда вы будете поддерживать и обновлять приложение. Браузер в состоянии определить, почему был опущен данный тег, но это не будет очевидным для ваших коллег или для вас, когда вы вернетесь к HTML для внесения изменений. В связи с этим, я не разбираю эти специальные правила в данной книге, и я использую открывающий и закрывающий теги элемента, если нет веских причин делать обратное (тогда я объясняю, почему я так поступил).

3.2. Использование атрибутов элементов

или RSS канал: