Пуленепробиваемый HTML: 37 шагов к идеальной разметке

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

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, которая должна предшествовать любой разметке в документе, обычно выглядит на подобии:

Он задает тип корневого элемента документа (), публичный идентификатор и системный идентификатор.
Публичный идентификатор (-//W3C//DTD HTML 4.01//EN) показывает кто использовал декларацию типа документа, или DTD, (W3C); название DTD (DTD HTML 4.01); и язык на котором написана DTD (EN, т.е. английский). Обратите внимание, что DTD не указывает на язык самой веб-страницы; там указан язык, на котором составлен DTD.

Системный идентификатор (www.w3.org/TR/html4/strict.dtd) — это путь к используемой DTD.

Декларация 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 рекомендует для всех новых документов.
• HTML 4.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?

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

На протяжении «войны браузеров» в конце 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-последовательностями.

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

• & lt; (меньше)
• & gt; (больше)
• & amp; (амперсанд)
• & quot; (кавычки)

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

Прим.переводчика: ради интереса провел маленький эксперимент. На практикепоследовательность & apos; в апостроф интерпретируют все браузеры(FF3, Opera 9, Safari 3, Google Chrome) кроме IE (все версии).

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

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

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

Элемент p используется для выделения абзацев в тексте. Абзац — одно или больше предложений объединенных одной мыслью.
Перенос строки (br) в основном используется как презентационный инструмент и должен скорее быть реализован на CSS чем на HTML. Впрочем, есть несколько ситуаций, когда перенос строки можетиметь семантический смысл, например, при разметке строк в стихах ипеснях, при написании почтовых адресов или при разметке примеров кода.В этих случаях использование br оправдано, но использование br для разделения абзацев не допустимо.
С другой стороны p имеет довольно четкое семантическое значение: разметка абзацев. Иногда веб-разработчики склонны рассматривать p как основной блочный для использование в качестве контейнеров, но это не верно. Не редкость увидеть элементы label и input внутри p в формах, но я бы назвал это семантически неверным. Метки и поля ввода не могут являться содержимым абзаца.
 

23. Стоит ли заменить b и i на strong и em?

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

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

em означает семантическое ударение, усиление значения.Содержимое, к которому применяИз минусов можно заметить это достаточно долгое генерирование страниц при разработке, досточно большое потребление оперативы ~10-12МБ ется такой вид выделения, должно иметьусиление во время прочтения вслух (например, громче или протяжнее). 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 используется для разметки переменных, или заменяемыхчастей текта. Это типографское соглашение, принятое для выделенияпеременных курсивом, которые в реальной жизни заменяются другимиданными. Например, в руководстве к телефонным коммуникациям, инструкцияпо перенаправлению входящего телефонного звонка на другойдополнительный номер может выглядеть приблизительно так:

* 21 * дополнительный номер #

Здесь тег 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 предлагает следующие определения:

abbr — указывает на сокращенную форму (например, WWW, HTTP, URI, Mass и т.д.).
acronym — указывает на акроним (например, WAC, radar и т.д.).

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

Западные языки широко используют такие акронимы как «GmbH»,«NATO», и «F.B.I.», в качестве аббревиатур таких как «M.», «Inc.», «etal.», «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: