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

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

Адам Фриман

Как выбирать элементы

Даже если оставить в стороне вопросы презентации, в спецификации HTML5 есть некоторые неясности. Некоторые элементы являются очень общими, и поначалу вас это может оттолкнуть.

Элементы являются общими, но это потому, что элементы HTML используются для обозначения самых различных видов содержания. Большая часть моего времени идет на написание таких книг, как эта, поэтому, когда я слышу такие термины, как section, article, heading и figure (раздел, статья, заголовок и рисунок), я думаю о структуре и стилях, которые Apress требует от авторов. Те же термины имеют различные значения применительно к другим видам контента. Например, у спецификации, правового договора и сообщения в блоге также могут быть разделы, но смысл этого термина для каждого из них радикально отличается. Вместо того чтобы определять раздел книги, раздел спецификации, раздел договора и раздел блога, у нас есть просто общий термин и для него требуется некоторая интерпретация. Есть несколько основных правил, которым я рекомендую следовать при выборе элементов, которые можно применить к вашему содержанию. Они описаны в следующих разделах.

Меньше может быть больше

Очень легко увлечься и, в конечном итоге, получить большое количество разметки в документе. Вам просто нужно добавить разметку, чтобы дать семантическое значение вашему содержанию. Если вам не нужно задавать сложные названия, вам не нужно использовать элемент hgroup (описан в главе 10), а подробное цитирование с элементом cite (глава 8) необходимо только в документах, где цитаты важны (например, в журнальных статьях).

Понимание того, сколько разметки необходимо применить, приходит с опытом; но вот негласное правило: спросите себя, как будет использоваться семантика элемента. Я не применяю элемент, если у меня нет немедленного ответа.

Не злоупотребляйте элементами

Каждый элемент обозначает определенный тип контента, даже такие только презентационные элементы, как b. При разметке содержания используйте элементы только для их определенных целей и избегайте создания частной семантики. Если вы не можете найти элемент, который имеет требуемое вами значение, следует использовать один из общих элементов (таких как span или div) и с помощью глобального атрибута class определить значение в документе. Классы не обязательно должны быть использованы только для стилей CSS.

Будьте конкретны и последовательны

Вы должны выбрать наиболее подходящий элемент для представления вашего контента. Это обозначает, что вы не должны поддаваться искушению построить вашу страницу с помощью универсальных (общих) элементов, когда есть элементы, которые четко определяют соответствующий тип содержимого. В HTML4 была тенденция полагаться на элементы div (описанные в главе 9), чтобы построить структуру страницы, но проблема состоит в том, что семантика не сразу очевидна для тех, кто пытается обработать ваш контент. Возможно, вы решите создать класс с именем article и применить стиль с помощью этого класса, но это не будет иметь такое же значение для других, как использование элемента article.

Еще один не менее важный момент: когда вы используете элемент, убедитесь, что вы применяете его последовательно по всей вашей странице, сайту или веб приложению. Таким образом, вам будет проще поддерживать вашу HTML разметку, а другим обработать ваш HTML.

Не делайте предположений об аудитории

Можно, конечно, предположить, что потребители вашего HTML заботятся только о том, как страница отображается в браузере и, как следствие этого, вам не придется беспокоиться о семантической точности разметки. Весь смысл семантико-презентационного деления состоит в том, чтобы HTML было легче обрабатывать программным образом, и, следовательно, можно ожидать, что этот стиль HTML потребления постепенно будет распространяться по мере того, как HTML5 будет развиваться и реализовываться. Если вы предполагаете, что вам не придется беспокоиться о точности и согласованности вашей разметки, то в итоге ваш HTML будет тяжелее обрабатывать, а это ограничит диапазон целей и возможностей, которые пользователь может найти в вашем контенте.

или RSS канал: Что новенького на smarly.net