Разметка это основа представления сайта, в той или иной степени она взаимосвязана с дизайном, контентом, аксессибилити, CSS и JavaScript. Качество разметки влияет на качество связанного с ней кода, и издержки на его разработку и поддержку. Может быть, вы и так неплохо создаете разметку, но, следуя советам этой статьи, вы сможете подняться на новый уровень.

Качественная разработка разметки это хорошие инвестиции в программную часть сайта. Легко создавать и поддерживать код, который интегрируется с чистой и простой разметкой, CSS может быть изящным, JavaScript корректным. Вы сделаете существенный шаг в улучшении аксессибилити. Возможно, получите дополнительный трафик с поисковиков. Сейчас самое время понять, что разметка это искусство и уделять ей любовь и время, которые она заслуживает.

Упрощайте

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

Правило 1: Упрощайте, упрощайте, упрощайте.

Лучший способ упростить вашу разметку это убрать все лишнее и несущественное. Это включает множество элементов, таких как табличная разметка, встроенные стили или JavaScript. В современной разметке этим элементам нет места. Их должны заменить адаптивные методы и CSS.

Начнем с разметки таблицами, которая должна быть абсолютно исключена. Она сложна для чтения, увеличивает размер страницы, создает проблемы аксессибилити, не позволяет сделать разметку семантической.

Правило 2: Не используйте таблицы для разметки.

Мы избавились от таблиц, но еще остались элементы, которые нужно удалить это встроенные стили, теги font, strike, s и все другие теги которые отвечают за оформление, такие как чисто декоративные изображения или символы.

Стоит обратить внимание на декоративные изображения. Если вы используете изображения, которые важны только для оформления и не содержат смысловой нагрузки, они должны быть размещены с помощью CSS как фоновые изображения, это помогает убрать необязательные элементы и разделить представление и информацию. Конечно изображения содержащие информацию, такие как диаграммы, графики, фотографии товаров в интернет магазине должны быть включены в разметку.

Правило 3: Разметка должна быть семантической. Необходимо исключить все элементы, которые контролируют отображение.

Самый большой враг хорошей разметки это встроенный JavaScript. Он делает ее плохо читаемой, что создает множество темных уголков, где могут скрываться ошибки. Если этого аргумента вам недостаточно, тогда вспомните о том, что беспорядок, который вносят встроенные скрипты в разметку, может увеличить цену разработки и поддержки.

Правило 4: Исключите использование встроенных скриптов, в том числе обработчиков событий.

По началу это может показаться странным, но я вас уверяю, это лучший способ использования скриптов. Мы можем поместить все скрипты во внешние файлы и использовать функции getElementById и getElementsByTagName, чтобы работать с необходимыми нам элементами документа. Создание новых элементов, установка обработчиков событий, удаление существующих элементов и любые другие действия должны выполняться во внешних файлах скриптов, чтобы разметка была чистой и простой.

Зная немного о прогрессивном улучшении и имея хорошие знания DOM, мы можем до посинения добавлять скрипты без ущерба для разметки, потому что мы следуем хорошему правилу отделения структуры от поведения. Более глубокое раскрытие деталей прогрессивного улучшения находится за пределами этой статьи, но на эту тему есть достаточно много хороших статей. Кроме вынесения скриптов во внешние файлы столь же важно контролировать их качество и чистоту.

Теперь наша разметка относительно чиста. Мы удалили старинные таблицы, избавились от декораций и теперь можем перейти к более серьезным доработкам.

Будьте внимательны. Разметка должна быть на своем месте.

Если уж мы начали говорить о том, что не стоит помещать скрипты в разметку, не нужно забывать и о том, что обратное тоже верно. Поддержка может стать кошмаром, если, часть разметки скрыта в файлах скриптов. Это очень опасный способ разделения поведения и структуры, который создает много ловушек для разработчиков и поддержки.

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

Правило 5: Избегайте размещения разметки в скриптах.

Правило 6: Избегайте размещения контента в скриптах.

Размещение контента или разметки в скриптах это скелет в шкафу, нельзя гарантировать, что никто не откроет ваш шкаф с сюрпризом, дважды подумайте, прежде чем применять такие решения.

Давайте элементам обдуманные названия

Теперь мы знаем, что разметка не должна содержать элементов ответственных за оформление или поведение, и знаем, что их следует размещать в отдельных файлах. Разметка является своеобразным хабом для других технологий, и нужно подумать, как связать ее с JavaScript и CSS.

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

CSS предоставляет нам большие возможности в выборе селекторов, используя сложные селекторы, мы можем сократить количество идентификаторов и классов до минимума, например, можно использовать селектор #primary div h3 вместо присваивания идентификатора #testimonials элементу h3. Конечно, это несколько усложняет код CSS, но поскольку наш фундамент именно разметка то было бы логично вынести сложные элементы в более подходящие им места.

Правило 7: Старайтесь избегать использования лишних классов или идентификаторов.

Теперь, когда мы свели количество классов и идентификаторов к минимуму, необходимо сделать следующий шаг для улучшения качества разметки, это правильные имена. Мы должны исключить имена классов и идентификаторов, которые отражают оформление элементов, потому что если мы назовем элемент right-col, вполне возможно, что после изменения CSS он будет находиться с левой стороны и название потеряет свою актуальность, что может привести к затруднениям при поддержке в будущем.

Правило 8: Имена классов и идентификаторов, должны отражать содержание или назначение элементов, а не их оформление.

Отлично, мы значительно продвинулись в понимании разметки, но нужно учитывать еще один аспект при выборе классов и идентификаторов, необходимо, уделять некоторое время, чтобы дать им хорошие обдуманные имена. Если использовать имена x1 или a3, вполне возможно, наступит момент, когда об этом придется пожалеть. Следует потратить совсем немного времени и дать элементам имена вроде summary или code.

Правило 10: Имена классов и идентификаторов должны быть осмысленными.

Знайте язык разметки и его возможности

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

Правило 10: Используйте микроформаты

Вы должны знать все доступные элементы HTML, чтобы быть уверенными, что используете наиболее подходящий в каждом случае.

Правило 11: Изучите все элементы HTML.

Кроме того, что вы должны знать все доступные элементы вы должны, знать какие из них устарели и должны быть заменены другими. Например, элемент font устарел, а типографику теперь нужно настраивать с помощью CSS. Элемент strike, который придает тексту зачеркнутый вид, устарел и должен быть заменен элементами del и ins, которые имеют более строгое семантическое значение.

Правило 12: Не используйте устаревшие или неуместные элементы.

Правило 13: Используйте соответствующие семантические элементы, для каждого типа данных.

К несчастью знание всех возможных элементов и понимание их особенностей еще не значит, что они будут работать во всех браузерах. Так наш хороший друг IE6 не поддерживает элементы abbr или q, таким образом, эти элементы не лучший выбор, даже если они и подходят по смыслу.

Правило 14: Знайте особенности браузеров и нюансы их работы.

Пока мы говорили исключительно об элементах, но это только пол дела. Каждый элемент имеет множество атрибутов, которые придают дополнительную функциональность разметке. Очень распространена недооценка и непонимание атрибутов rel, rev, alt, и title, при правильном использовании эти они могут донести до посетителя важную информацию.

Правило 15: Знайте и понимайте все атрибуты HTML.

Мы определили основные правила, которые позволят вам создавать качественную разметку, теперь обратимся к некоторым специфическим вопросам, чтобы придать вашей разметке блеск.

Детали решают все

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

Правило 16: Элементы должны располагаться в логическом порядке.

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

Правило 17: Используйте простые и понятные ссылки.

Атрибут alt это еще одна возможность для улучшения качества вашей разметки. Создание хорошего альтернативного текста это достаточно сложная задача, простого описания изображения часто недостаточно, хотя оно обязательно должно присутствовать.

Правило 18: Создавайте хороший и полезный альтернативный текст.

Заголовки это еще одна сложная область разметки. Энди Будд указывает, на то, что заголовок должен содержать краткое описание темы раздела, к которому он относится, эта информация могла бы использоваться браузерами для автоматического описания содержания страницы. Он считает, что заголовки должны в первую очередь использоваться для описания содержимого страницы, а не для стилистической информации. Если удалить весь контент страницы и оставить только заголовки, они должны передать пользователю смысл ее содержания. Если этого не происходит, возможно, мы недостаточно хорошо подумали над заголовками.

Правило 19: Используйте заголовки, чтобы передать пользователю смысл содержимого страницы.

Особенно хорошо преимущества чистой и семантической разметки видны, при создании форм. С помощью элемента label, мы делаем формы более доступными и понятными. Дополнительные преимущества мы можем получить, использую одно поле ввода вместо трех для таких данных как дата или номер телефона. Не видите никаких преимуществ? Мы имеем меньше кода, большую гибкость для поддержки различных национальных форматов, и улучшаем аксессибилити, поскольку можем использовать элемент label.

Давайте представим, что у нас есть один элемент label для номера телефона, но три отдельных поля ввода, label может ссылаться только на одно из полей ввода, а доступность остальных полей становиться минимальной. Используя одно поле ввода, мы можем легко указать его предназначение с помощью элемента label, к тому же получаем меньше кода. Конечно формы это столь обширная тема, что нужна еще одна статья, чтобы описать все тонкости их создания.

Правило 20: Создавайте понятные и доступные формы.

После форм таблицы кажутся довольно простой, но упускаемой многими темой. Сейчас я говорю не о тех таблицах, которые ошибочно используются для разметки, а о тех, которые используются для форматирования данных и являются очень мощным и удобным инструментом. Чтобы правильно использовать этот инструмент необходимо ознакомиться со спецификацией таблиц. В нашем распоряжении элементы tbody, thead, tfoot и множество атрибутов которые помогают семантически верно форматировать различные данные. Как и формы, таблицы достойны отдельной, посвященной только им, статьи.

Правило 21: Создавайте семантически насыщенные таблицы данных.

Подведем итог

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

Полезные ресурсы

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