Главная страница   /   3.1. Использование элементов (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

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

В листинге 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 для внесения изменений. В связи с этим, я не разбираю эти специальные правила в данной книге, и я использую открывающий и закрывающий теги элемента, если нет веских причин делать обратное (тогда я объясняю, почему я так поступил).