Пуленепробиваемый HTML: 37 шагов к идеальной разметке - Специфика Web-публикаций - Контент - Каталог статей

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

2. Какие версии HTML существуют?

Первая версия HTML (1989) не имела номера версии; это был просто «HTML». Первая стандартизированная версия HTML, выпущенная Internet Engineering Task Force (IETF) в 1995, называлась HTML 2.0.

Позже был сформирован Консорциум WWW (W3C).
Он презентовал свою первую стандартизированную версию в 1997: HTML 3.2.
Её приемник, HTML 4.0, вышел в 1998, и был быстро сменен на HTML 4.01 в 1999. Это последняя актуальная версия HTML. W3C провозгласило, что больше не будет выпускать последующих версий HTML. HTML 4.01 рекомендован для создания HTML документов.

Не смотря на это, Web Hypertext Application Technology Working Group (WHATWG) работает над так называемым HTML5, в надежде что он в итоге станет рекомендованным W3C.

5. Что делает декларация DOCTYPE'ов?

Декларация DOCTYPE, которая должна предшествовать любой разметке в документе, обычно выглядит на подобии:

Он задает тип корневого элемента документа (<html>), публичный идентификатор и системный идентификатор.

Декларация DOCTYPE'а указывает валидатору (программе для проверки синтаксической «правильности» веб-страницы) на соответствие какой DTD должен проверяться документ. Браузеры не должны заботиться о том, задекларирован ли DOCTYPE в документе, но современные браузеры используют эту декларацию, чтобы определить является ли страница «современной» (браузер будет обрабатывать страницу в соответствии со спецификацией) или написанной «на старый манер»(браузер будет обрабатывать страницу с учетом багов старых браузеров).

DOCTYPE влияет на метод рендеринга страницы в Internet Explorer, Opera, Firefox (и прочих Mozilla-образных браузерах), Safari и в большинстве остальных современных браузеров. Полная декларация DOCTYPE - включая системный идентификатор - говорит браузеру что это современный документ. Если системный идентификатор отсутствует, или декларации DOCTYPE вообще нет, то браузер сочтет, что это страница написанная «на старый манер» и обработает её в «quirks mode» (режим с причудами).

7. Какая разница между Strict, Transitional и Frameset DTD'шками?

Разница между этими DTD в том, какие элементы и атрибуты они декларируют и в том, каким образом они позволяют (обязывают) соблюдать вложенность элементов.

HTML 4.01 Strict DTD- делает ударение на разделении содержимого от презентации и поведения. Эту DTD W3C рекомендует для всех новых документов.
HTML4.01 Transitional DTD - является неким промежуточным звеном при переходе от «старой» (old-scool'ьной, доHTMLьной) разметки к современной. Не рекомендуется использовать при написании новых документов. Содержит 11 презентационных элементов (прим. переводчика: не несущих смысловой нагрузки, а используемых исключительно для изменения внешниго вида; например элемент ) и полный набор презентационных атрибутов, которые отменены в Strict DTD. Transitional DTD часто необходима для страниц располагающихся внутри фреймов, т.к. она имеет атрибут target, необходимый для открытия ссылки в другом фрейме.
HTML 4.01 Frameset DTD - используется для страниц на основе фреймов. Консорциум W3 не рекомендует использовать фреймы. Для современных сайтов более удачным решением будет использование приложений на стороне сервера для решения подобных задач.

8. Какой DOCTYPE выбрать?

Если мы создаем новую страницу, W3C рекомендует использовать HTML 4.01 Strict(прим. переводчика: конечно, всем известно, что всё-таки лучше использовать XHTML 1.0 Strict).

Если мы собираемся переводить старые HTML 2.0 или HTML 3.2 документы, то пока мы не перевели всю презентацию в CSS, а элементы, отвечающие за поведение в JavaScript, мы можем использовать HTML 4.01 Transitional.

11. Почему валидатор ругается на тэг <embed>?

На протяжении «войны браузеров» в конце 90-х, такие производители браузеров как Microsoft и Netscape соревновались, кто больше придумает «крутых» фич для стилизации и оформления HTML страниц. Проблема была в том, что эти фичи не были стандартизированными и, в большинстве случаев, были не кроссбраузерными.

Есть и другие элементы, которые достаточно широко использовались (например, marquee), но никогда не были включены в спецификацию. По возможности никогда их не используйте.

Также были широко распространены нестандартизированные атрибуты. Один из примеров - marginwidth.

13. Что такое BOM?

BOM, или byte order mark (отметка последовательности байтов) - используется в некоторых кодировках, которые используют больше 8-ми бит для кодирования данных (например, UTF-8 или UTF-16). Процессор умеет использовать две разные схемы хранения больших целых чисел: «big-endian» (тупоконечная) и «little-endian» (остроконечная).
BOM содержит 16 бит, записанных в самом начале файла, которые указывают браузерам, какая схема используется.

К сожалению многие старые браузеры не могут обработать эту информацию, вместо этого они отображают эти биты как символьные данные. Если вы видите несколько странных символов вверху страницы, то это вероятнее всего означает, что BOM не был обработан браузером (или не верно была установлена кодировка).

Единственное решение проблемы - не использовать BOM.
Редакторы, которые умеют сохранять документ в UTF-8 обычно позволяют выбрать, использовать или не использовать BOM.

14. Какую кодировку использовать?

Прим. переводчика:
переводить этот пункт не стал; думаю, всем известно, что UTF-8 - это наше всё. Следует использовать UTF-8.
А при сохранении документа выбирать UTF-8 without BOM.

16. Почему нужно писать & amp; вместо &?

Некоторые символы имеют особое значение в HTML: < (меньше), > (больше), & (амперсанд), " (кавычки), ' (апостроф). Иногда, когда мы хотим использовать эти значки в обычном тексте, мы должны заменять их HTML-последовательностями.

Для первых четырех указанных выше знаков последовательности будут выглядеть так:

XML определяет HTML-последовательность для апострофа (& apos;), но HTML не включает в себя эту последовательность. Апостроф может быть заменен только цифровой последовательностью (& #39;).

Т.к. амперсанд используется во всех этих последовательностях, он всегда должен быть преобразован в HTML-последовательность, включая случаи, когда он используется внутри атрибутов, в частности в атрибуте href в ссылках. К сожалению амперсанд очень часто встречается в URI в качестве разделителя аргументов.

В большинстве случаев в HTML амперсанд не замененный последовательностью ничего не ломает (но XHTML - это другая история). Но что если нам случится столкнуться с параметром запроса, совпадающим с названием html-последовательности...

21. Что использовать,  или  ?

Элемент p используется для выделения абзацев в тексте. Абзац - одно или больше предложений объединенных одной мыслью.

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

С другой стороны p имеет довольно четкое семантическое значение: разметка абзацев.
Иногда веб-разработчики склонны рассматривать p как основной блочный для использование в качестве контейнеров, но это не верно.
Не редкость увидеть элементы label и input внутри p в формах, но я бы назвал это семантически неверным. Метки и поля ввода не могут являться содержимым абзаца.

23. Стоит ли заменить  и  на  и ?

Только если вы действительно хотите подчеркнуть что-то (сделать на чем-то ударение, выделить). Эти теги не являются равноценными.

В Былые Смутные Времена, авторы использовали b и i для усиления смысловой окраски слов.

В Теперешние Не Менее Грустные Времена, авторы используют strong и em для того, чтобы сделать текст жирным или курсивом.

em означает семантическое ударение, усиление значения.
Содержимое, к которому применяется такой вид выделения, должно иметь усиление во время прочтения вслух (например, громче или протяжнее).

strong означает ещё большее ударение, но часто это считается излишним (можно использовать вложенные em для указания еще большего ударения).

Некоторые эксперты советуют использовать strong только для определенных элементов на странице, которые однозначно должны быть выделенными (например, указатель «текущей страницы»), и не должны отмечать слова и фразы внутри основного текста.

b и iне имеют семантической нагрузки; они всего лишь меняют шрифт на жирный или курсив.

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

27. Как правильно использовать элемент <address>?

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

address - блочный элемент, который может содержать только текст и inline-элементы. В большинстве браузеров по умолчанию отображается курсивом, но это легко исправить с помощью CSS.

Общеизвестное заблуждение, что address может быть использован только для указания почтового адреса, но это не так.

28. Как правильно использовать элемент <dfn>?

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

Общеизвестное заблуждение, что dfn означает «сокращение» и многие авторы используют его также как abbr и acronym (указывая пояснение к термину с помощью атрибута title).
Термины должны отмечаться с помощью dfn в документах только один раз (при первом употреблении термина и его пояснении).

29. Как правильно использовать элемент <var>?

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

Здесь тег var используется для указания «дополнительного номера» (который будет отмечен курсивом). Тот, кто захочет перенаправить звонок на дополнительный номер 942 напишет «21*942#». Таким образом, var означает не то, что вы должны ввести «д-о-п-о-л-н-и-т-е-л-ь-н-ы-й н-о-м-е-р», а то, что вместо слов «дополнительный номер» будут цифры.

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

31. Какая разница между тегами <abbr> и <acronym>?

Никто толком не может дать ответ на этот вопрос! Даже спецификация HTML в какой-то степени противоречит сама себе.

abbr было расширением Netscape для HTML на протяжении «войны браузеров».
acronym было Майкрософтовским расширением.

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

Определение акронима говорит, что это слово, т.е. оно может быть произнесено.
Таким образом, «NATO» является акронимом, т.к. состоит из начальных букв в словосочетании «North Atlantic Treaty Organization».
Напротив, «FBI» не будет являться акронимом, в соответствии с определением, потому что его нельзя произнести как целое слово, а скорее оно будет звучать как «еф-би-ай».

Вот тут то и начинает неразбериха. Технически известно, что «FBI» - это инициализм (прим. переводчика: в оригинале «initialism»), определение которого по словарю звучит так:

Инициализм -
1) название или термин, сформированный из первых букв или из нескольких первых букв слов, которые произносятся как отдельные слова;
2) группа первых букв означающих имя, организацию и т.д., которые произносяться отдельно.

Первое определение почти то же, что и акроним, а второе более отстраненное. Не смотря на это в спецификации нет элемента initialism, и путаница усугубляется тем, что слово «акроним» в простой американской речи используется как синоним слова «инициализм».

Спецификация HTML предлагает следующие определения:

Похоже на то, что спецификация ссылается на словарные определения, что означает что «FBI» должно быть размечено тегом abbr, т.к. не может быть произнесено как целое слово. Не смотря на это, несколькими абзацами ниже спецификация говорит:

Западные языки широко используют такие акронимы как «GmbH», «NATO», и «F.B.I.», в качестве аббревиатур таких как «M.», «Inc.», «et al.», «etc.»

Вы еще не запутались? Я да.
Безопаснее всего всегда использовать abbr, так как все акронимы также являются аббревиатурами, но не наоборот.
Не смотря на это, тут есть небольшая проблема. Microsoft были так расстроены решением W3C использовать abbr для абревиатур и инициализмов вместо acronym, что они отказались от поддержки тега abbr! (Но все же ввели поддержку abbr в Internet Explorer 7.)

Так что же делать бедным веб-разработчикам? И почему мы вообще должны заморачиваться? Конечно, хорошо иметь элемент, к которому можно прилепить атрибут title, но мы же это можем сделать и со span'ом. Суть в том, что размечать акронимы и аббревиатуры хорошо для смежных технологий; в частности для screen reader'ов.
Но скрин ридеры в большинстве предпочитают игнорировать теги abbr и acronym, т.к. никто точно не знает, как правильно их использовать и Microsoft не поддерживает тег abbr. Это палка о двух концах.

Вопрос на этот ответ я не знаю! Лично я использую abbr для таких очевидных аббревиатур как «Inc.» и для таких инициализмов как «FBI», и использую acronym для сокращений, которые можно прочесть как слово, например «GIF». Но в соответствии со спецификацией я не могу никого обвинить в разметке «FBI» в качестве акронима. А как на счет «SQL», который некоторые произносят по буквам, а некоторые называют «сикуэл».

32. Почему отменяются определенные фичи?

Самая распространенная фича которой интересуются новички - это атрибут target.
Этот атрибут запрещен в HTML 4.01 Strict, но до сих пор поддерживается в HTML 4.01 Transitional. Существует много элементов и атрибутов, которые разрешены в Transitional, но запрещены в Strict.

Причина, по которой W3C отменяет некоторые элементы и атрибуты - желает разделить содержимое (HTML), внешний вид (CSS) и поведение (JavaScript). Заставить элемент отображаться по середине - это вопрос презентационный; он должен быть решен средствами CSS, а не с помощью тега center. Открыть ссылку в новом окне - это вопрос поведения; он должен решаться средствами JavaScript, а не с помощью атрибута target.

В основном, отмененные фичи - те, которые появились на протяжении войны браузеров в 90-х. Эти фичи были включены в HTML 3.2, чтобы хоть как-то навести порядок, но это не главная задача, которая стояла перед HTML. С релизом HTML 4, его авторы попытались «переучить Веб» убирая «пагубные» части, которые были включены в HTML 3.2, по крайней мере в Strict DTD.

Другими словами эти вещи отменены не просто так. По возможности старайтесь их не использовать.

37. Как подключить HTML страницу внутри другой страницы?

Если вы используете Strict DTD, то у вас есть только один валидный способ - использовать элемент object:

К сожалению поддержки object'а нет в Internet Explorer'е.

При использовании Transitional DTD можно использовать iframe'ы: