Главная Услуги

DOCTYPE. Валидная верстка

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

Интернет устарел, и об этом все знают!

Сначала думали, что все обойдется, но когда в Сети появились толпы людей, которых не интересовали скучные технические отчеты и документация, это стало очевидно. Сеть добивалась красоты и функциональности: изображений, анимации, видео и аудио. Чтобы показать на странице все, что взбредет в голову дизайнера, напрягаться приходится и разработчикам браузеров, и составителям стандартов. Умеренно из обыденного формата разметки текста HTML преобразовывался в довольно сложный идеал, на базе которого делали обыденные нам страницы интернет - магазинов, банковские системы, онлайн игры и сайты для взрослых. Но возможностей образца HTML 4.0 уже не довольно, а если уж говорить совсем на чистоту, то идеал устарел уже в момент его сотворения. Первыми фишку потребностей людей просекли в Macromedia, давно полученной гигантом Adobe, которые выпустили сначала Shockwave, а позднее и Flash. Flash дал то, что всем так хотелось - видео, звук и анимацию, возможности программировать графику и создавать более - менее истинные приложения. Для особо одаренных была реализована возможность соединить JavaScript и Flash (замечу, очень по - уродливому и ненадежно), таким образом дополняя упущения разработчиков браузера. Видео наводнило мир. «YouTube», «Facebook» и «ВКонтакте» стали самыми популярными сайтами, во многом благодаря флешу, потому что без видео и приложений это были бы намного более унылые ресурсы.

Упущенные возможности

Но разработчики образца HTML тоже сообразили свое упущение и решили, что необходимо дать народу новый идеал, чтобы все делали свое дело, не уходя из обычной платформы браузера во всякие Flash, Silverlight, JavaFX. Дополнительный плагин для отображения страницы - это уже по определению плохо. Пользователям это нужно ставить, обновлять, мириться с дополнительными тормозами. А сам браузер из основного окна в мир Сети стал ненужной прослойкой для запуска приложения на Flash или Silverlight. срочно потребовался новый идеал взамен устаревшего HTML 4.0. Его и придумали, незатейливо обозвав . Это уже не только и не столько язык для разметки страниц и их форматирования, сколько управление для разработчиков браузеров, какие возможности они должны предоставлять странице и выполняемому там коду. При всем этом вторгаясь совсем не в область разметки, поручили браузеру дать невиданные возможности скриптам. Отныне работа с видео и звуком, 2D - и 3D - графикой, анимацией, эффектами, сетью на низком уровне - все это должно быть вседоступным в обычном .

Основная задача нового образца - расширение образца разметки WEB - страниц для того, чтобы создавать красивые и функциональные сайты стало легче и проще. HTML5 развивается в двух направлениях. Первое - это расширение языка HTML для внедрения новых возможностей, которые ранее делались через грязные хаки и при помощи сплава CSS и JavaScript. В основном это всякие зрительные штуки вроде скругленных уголков, элементы ввода (WEB-формы) и другие украшательства. Второе - добавление в WEB новых возможностей с таким расчетом, чтобы WEB - приложение имело все те же возможности, что и обыденное desktop приложение, при всем этом от пользователя требовался бы только браузер без всяких плагинов или дополнительных библиотек. Самый лучший этому пример - воспроизведение видео (привет, YouTube). Сейчас необходимо на JavaScript и Flash написать плеер, организовать далеко не простую серверную часть, обеспечить все обыденные возможности (проигрывание, остановку, прогрессивную загрузку и тому похожее). Морока еще та. HTML5 тебе говорит, что это все не нужно - пусть браузер этим занимается, а ты просто вставь новый тег «video» и все. Элементы управления проигрывателя, сам код и даже видеокодек - все это стандартно и уже есть в браузере.

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

Я вынужден просматривать целую кучу страниц на HTML5 и, конечно же, их исходный код. В этой статье я расскажу вам об ошибках и сомнительной разметке, которые мне частенько приходится видеть, и объясню, как их избежать.

Не используйте как обёртку для оформления

Одна из самых распространённых проблем, которую я часто вижу в разметке сайтов - это произвольная замена элементов структурными элементами из HTML5, особенно замена оформительской обёртки на . В XHTML или HTML4 я бы увидел что-нибудь такое:

Моя супер-пупер страница

Вместо этого я вижу следующее:

Честно говоря, это неправильно: - это не обёртка. Элемент определяет смысловую секцию содержимого для создания структуры документа . Он должен содержать заголовок. Если вы ищете элемент для того чтобы обернуть в него всю страницу (в стиле HTML или XHTML), подумайте, не применить ли стили непосредственно к элементу , как описано у Крока Кеймена . Если же вам всё ещё нужна дополнительная обёртка, используйте . Раз уж Доктор Майк объясняет, что не мёртв , а вам не удаётся найти ничего более удачного, пожалуй, этот элемент будет самым подходящим для создания оформительской обёртки.

Таким образом, корректной разметкой для упомянутого выше примера с использованием HTML5 и пары ролей ARIA будет следующий код. Обратите внимание, что вам, в зависимости от дизайна, всё ещё могут понадобится экстра-элементы .

Моя супер-пупер страница

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

Используйте и осознанно

Элемент удалён из спецификации HTML5 и не рекомендован к использованию, прим. редактора.

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

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

Злоупотребление

Думаю, что вы в курсе, что можно использовать в документе несколько раз. Но эта возможность привела к следующим ошибкам:

Мой лучший пост

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

Мой лучший пост

Неправильное использование

Раз уж зашла речь о заголовках - я часто вижу неправильное использование . Не следует использовать в сочетании с в случае, когда:

дочерний заголовок всего один или
элемента будет достаточно и без .

Первая проблема выглядит так:

Мой лучший пост

Ричард Кларк

В этом случае стоит избавиться от и оставить только заголовок:

Мой лучший пост

Ричард Кларк

Следующая проблема состоит в очередном использовании элементов там, где они необязательны:

Моя компания Основана в 1893 году

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

Моя компания Основана в 1893 году

Больше примеров использования вы можете найти .

Не оборачивайте все списки ссылок в

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

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

Замечание: не все группы ссылок на странице должны быть обёрнуты в элемент - этот элемент, главным образом, предназначен для группировки главных навигационных блоков. В частности, в подвалах часто содержатся короткие списки ссылок на различные части сайта, вроде правил использования сервиса, домашней страницы и копирайтов. Элемента вполне достаточно для группировки такого рода ссылок; и несмотря на то, что элемент может быть использован в таких случаях, обычно в этом нет необходимости.

Ключевая фраза - «главных навигационных блоков». Мы можем дискутировать весь день о значении слова «главный», но для меня это значит:

Самая главная навигация;
Поиск по сайту;
Вторичная навигация (что спорно);
Внутренняя навигация (по длинной статье, например).

И хотя здесь не может быть «правильного» или «неправильного» использования, поверхностный опрос вкупе с моей собственной интерпретацией говорят, что следующие случаи не подходят для использования :

Постраничная навигация;
Социальные ссылки, за исключением тех случаев, когда такие ссылки являются основной навигацией, к примеру, на сайтах About Me и Flavours ;
Тэги к записи в блоге;
Категории записи;
Навигация третьего уровня;
Подвалы, набитые ссылками.

Если вы не уверены, стоит ли оборачивать список ссылок в , просто спросите у себя: «главная ли это навигация?» Чтобы было легче ответить на этот вопрос, обратитесь к следующим правилам:

«Не используйте , если кажется, что в этом случае может подойти и с заголовком », - Ян Хиксон, IRC .
Добавите ли вы этот блок в список ссылок «перейти» для улучшения доступности?

Если ответ на оба эти вопроса «нет», то, скорее всего, это не .

Общие ошибки с элементом

Ах, . Правильным использованием этого элемента вместе с подельником не так-то просто овладеть. Рассмотрим некоторые общие проблемы, которые я вижу при использовании .

Не каждая картинка это

Ранее я советовал вам не писать лишний код там, где этого не требуется. Та же ошибка и здесь. Я видел сайты, где каждая картинка была обёрнута в . Нет никакой необходимости в добавлении экстра-разметки вокруг картинок только ради самого процесса. Вы просто делаете лишнюю работу и нисколько не улучшаете описание содержимого страницы.

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

Если это исключительно оформительская картинка, никаким образом не упомянутая в основном документе, то это точно не . Есть и другие варианты использования, но просто спросите себя: «Нужна ли эта картинка для лучшего понимания контекста?» Если нет, то это вероятно не , а, возможно, . Если да, спросите себя: «Можно ли переместить эту картинку в примечания к тексту?» Если ответ на оба вопроса «да», то это, вероятнее всего, .

Ваш логотип - это не

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

Название компании

Добавить здесь нечего: это совсем неправильно. Мы можем спорить до посинения насчёт того, должно ли лого находиться внутри , но мы здесь не за этим. Настоящая проблема - в неправильном употреблении . Этот элемент должен использоваться, только если он упоминается в документе или контексте общего структурного элемента. Будет честным признать, что ваш логотип вряд ли будет упомянут подобным образом. Просто не делайте так. Всё, что вам нужно, это:

Название компании

Элемент - это не только картинки

Другое распространённое заблуждение насчёт - что он может быть использован только для картинок. Это не так. Элемент может быть видео, аудио, графиком (на SVG, к примеру), цитатой, таблицей, блоком кода, фрагментом текста или любой комбинацией этих и многих других элементов. Не ограничивайте использование только картинками. Наша работа, как энтузиастов от веб-стандартов, заключается в том, чтобы максимально точно описывать содержимое при помощи разметки.

Веб-дизайнеру - Спецификация HTML5 (HTML 5)

Теги в HTML5 - это XML-HTML теги, описывающие структуру веб-страницы, предназначены для того чтобы компьютерная программа (поисковый робот и др.) смогла отличать основной контент страницы от остальных частей страницы (фофрмления и элементов навигации): верха, низа, меню, боковых элементов страницы, повторяющихся (динамических) блоков и т.д. Также идет разделение на уровне основного контента (текста старницы). Сам по себе язык HTML5 является надстройкой к HTML, XML, CSS и др.

Название страницы Верх веб-страницы, "шапка" Основное меню веб-страницы Основное тело, статья, материал страницы Сайдбар (боковая панель) Нижняя часть страницы, подвал

Структура веб-сайта

- обрамляют основной контент страницы (статью) ,
- обрамляют шапку страницы,
- обрамляют подвал страницы,
- обрамляют основное меню страницы,
- обрамляют боковую панель страницы (сайдбар) ,
- обрамляют повторяющиеся блоки на странице (например комментарии) .

Элементы кода шаблона веб-страницы HTML5.

- назначем кодировку windows-1251.

- если страница открыта браузером IE, то браузер должен всегда использовать последний стандартный режим отображения.

- отображение сайта на мобильных устройствах.

header - шапка страницы сайта, в нем обычно содержится логотип сайта, заголовок, телефон, слайдер и т.п.

nav - основное меню страницы сайта.

article - основной контент страницы: статья, запись в блоге, тема форума и т.д. Может содержать текст, изображения, видео, таблицы и т.д.

aside - сайдбар (боковая панель) сайта, обычно содержит различные элементы, типа: рубрики, метки, последние записи/комментарии, дополнительное меню, счетчики и т.д.

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

HTML5 на уровне структуры страницы

Рассмотрим список новых тегов HTML5, отвечающих за разделение структуры страницы:

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

- теги обрамляющие основное меню на сайте.

- теги обрамляющие основной контент страницы: статью, запись в блоге, новость, первую запись форума и т.п.

- теги обрамляющие сайдбар. Сайдбар - это так называемая "боковая панель", которая обычно содержит блоки рубрик (категорий), облака тегов (меток), список последних записей и т.п. Тегами aside также можно обрамлять счетчики, виджеты (например комментарии от вконтакта) , социальные кнопки.

- теги обрамляющие нижнюю часть сайта, так называемый "подвал страницы", который может содержать имя автора (компании), контакты (адреса, телефоны), правовую информацию (копирайты) и т.п. Также теги footer можно использовать как нижнюю часть тега section , т.е. сами теги footer будут находиться между тегами section

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

HTML5 на уровне текста

Рассмотрим список новых тегов HTML5, отвечающих за семантическое разделение текста страницы:

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

- теги предназначены для создания дат и/или времени в формате
ISO вида: YYYY-MM-DDThh:mm:ss , такой формат понятен компьютерным программам. Теги time могут обрамлять дату или текст, если тег обрамляет текст, то в него добавляют атрибут datetime , значением которого выступает дата и/или время в формате ISO.

- теги предназначены для хранения информации, которая либо скрыта, либо отображена (работает наподобие спойлера) .

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

Дополнительные теги языка HTML5

Список новых тегов HTML5, обогощающих язык:

- теги предназначены для вывода статического индикатора шкалы, при котором результат измерения не меняется. Для работы нужно минимальное и максимальное значения.

- теги предназначены для вывода динамического индикатора шкалы (например шкалы загрузки файла), при котором результат измерения меняется в реальном времени.

- тег должен находиться между тегами menu , используется при создании сценариев на JavaScript.

- между этими тегами помещают тег command .

- теги предназначены для вывода работы скрипта.

- теги предназначены для создания списка, который будет выводится при наборе в текстовом поле.

- теги обрамляют описание какого-либо объекта (например изображения) , находятся между тегами figure ..

- теги группируют различные объекты страницы имеющие свои описания, например изображения с описанием, товары с описанием и т.д.

- теги предназначены для группировки заголовков h*

- тег используется для генерации открытых/закрытых пар ключей, шифрования/расшифровки данных, создания/проверки цифровой подписи.

- теги обрамляют текст и аннотацию к нему.

- теги находятся между тегами ruby , предназначены для обрамления аннотации.

- теги предназначены для браузеров которые не поддерживают теги ruby .

- тег указывает браузеру в каком месте переносить слово ("мягкий перенос"), если это слово не вмещается в окно браузера.

Теги HTML5 описывающие новые технологии

В HTML5 появилась возможность использования множества технологий и API, которые являются частью языка HTML5, а не сторонними плагинами, вот некоторые из них:

- теги предназначены для воспроизведения аудиофайлов, без использования сторонних программ (плагинов, расширений) .

- теги предназначены для воспроизведения видеофайлов, без использования сторонних программ (плагинов, расширений) .

- тег предназначен для указания пути к аудио/видео файлам, находится внутри тегов audio и video .

- теги предназначены для создания специальной области на сайте, в которой можно создавать векторные фигуры и с помощью языка программирования JavaScript, манипулировать ими. Canvas в будущем, должен заменить Flash-технологию (угу в теории…).

Тег

Тег - это специальный элемент, который предназначен для рисования векторных фигур и манипулирования ими. Тег создан для того, чтобы заменить собою технологию Flash . С помощью тега можно рисовать векторные фигуры (изображения), а с помощью JavaScript, манипулировать данными фигурами, создавая тем самым анимацию (мультфильмы и даже игры) на сайте.

Аудио/Видео

С помощью тега можно внедрять аудиофайлы на страницу и прослушивать их. Элемент

С помощью тега можно внедрять видеофайлы на страницу и просматривать их. Элемент также создает панель с кнопками проигрывания.

API JavaScript

Спецификация HTML5 описывает как должен взаимодействовать язык JavaScript, с элементами страницы через технологию DOM. Также в HTML5, появились свои методы манипулирования объектами, например с помощью JavaScript и этих методов, можно програмно управлять кнопками на панели управления аудио/видео.

Поддержка XML-технологий

В HTML-документ написанный с помощью языка HTML5, отныне можно внедрять технологии связанные с различными XML-форматами, например такими как SVG или MathML.

SVG

SVG - Scalable Vector Graphics (язык разметки масштабируемой векторной графики) , является XML-форматом. Так как HTML5 начал поддерживать XML-форматы, то теперь можно внедрять в HTML-документ рисунки созданные с помощью SVG и манипулировать ими через JavaScript.

Пример кода рисунка "зеленый круг":

Результат:

MathML

MathML - Mathematical Markup Language (язык математической разметки) XML-формат. С помощью данного формата можно описывать различные математические формулы.

Какие теги в HTML5, являются устаревшими?

Устаревшими тегами , в спецификации HTML5 являются:

и вместо них следует использовать тег embed
вместо него следует использовать тег abbr
вместо него следует использовать тег audio
вместо него следует использовать тег ul
, , вместо них следует использовать тег iframe
вместо него следует использовать связку тегов form и input
и вместо них следует использовать теги pre или code

Вместо него следует использовать тег pre
вместо него следует использовать тег s

Вместо тегов форматирования: , , , , , , , , , и , следует использовать CSS-свойства.

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

Новые глобальные атрибуты в HTML5

Глобальные атрибуты - это атрибуты, которые могут быть внедрены в любой тег HTML-документа. В HTML5 появились новые глобальные атрибуты, в описаниях ниже они выделены словом Новый

Рассмотрим названия и описания глобальных атрибутов HTML5:

accesskey=" " - позволяет задействовать какой-либо элемент (тег) страницы, нажатием заранее запрограммированной комбинацией клавиш,
class=" " - позволяет устанавливать имя класса,
contenteditable=" " - позволяет редактировать содержимое элемента Новый,
contextmenu=" " - позволяет создавать контекстное меню для элемента Новый,
dir=" " - позволяет управлять направлением текста,
draggable=" " - позволяет пользователю перетаскивать элемент Новый,
dropzone=" " - позволяет указывать, что делать с элементом при перетаскивании Новый,
hiden=" " - позволяет скрывать элемент Новый,
id=" " - позволяет устанавливать уникальный идентификатор для элемента,
lang=" " - позволяет указывать код языка в содержимом элемента,
spellcheck=" " - позволяет указывать проверять или нет правописание, в содержимом элемента Новый,
style=" " - позволяет создавать стиль для элемента,
tabindex=" " - позволяет создавать правило, которое указывает в каком порядке должны получать фокус элементы, при нажатии на клавишу Tab ,
title=" " - позволяет создавать всплывающую подсказку, которая появляется при наведении указателя мыши на элемент.

Так как в спецификации HTML5, теги превратились в полноценные объекты, то в этих объектах уже изначально заложено понятие глобального атрибута, даже для тех тегов которые еще не описаны в спецификации.

Новшества в структуре кода HTML5 документа

Структура кода в HTML5 претерпела некоторые изменения, вот некоторые из них:

1. В отличии от предыдущих версий языка, в HTML5 существует лишь один доктайп:
его например вы можете увидеть в исходниках страниц данного сайта (не забывайте что перед доктайпом ничего не должно быть, ни пробелов, ни переносов строк и т.д.).

2. Для того, чтобы указать язык документа, теперь вместо мета-тегa:
нужно использовать атрибут lang="ru" в теге :

3. Для того, чтобы указать кодировку документа, теперь вместо мета-тега:

нужно использовать мета-тег , без атрибутов http-equiv и content

4. При создании JavaSсript сценария, теперь в тег , внедрять атрибуты type="text/javascript" и language="JavaScript" не нужно.

5. При внедрении CSS стилей, теперь в теги и , внедрять атрибут type="text/css" не нужно.

6. Ссылка - строчный тег, поэтому в ранних спецификациях HTML и XHTML, ими не рекомендовалось обрамлять блочные теги, сейчас в спецификации HTML5 данная рекомендация для ссылок была убрана и ими теперь разрешается обрамлять один или несколько блочных элементов.

Заголовок

Абзац

Теперь при HTML5, можно делать так:

Заголовок

По материалам сайта http://html-5.ru/ , http://html-5.ru/uchebnik-html5

Командные тэги поисковым роботам поисковых систем, смысловая нагрузка страниц

Дополнения к HTML W3C от 2015-2017 года

Рекомендации W3C от 24 декабря 1999 года

Зачастую веб-разработчики даже не подозревают о существовании определенных стандартов кодирования в HTML. Однако в период с 2000 по 2010 годы многие веб-разработчики перешли с HTML на XHTML. При этом XHTML вынудил разработчиков писать валидный и "хорошо сформированный" код. HTML5 же, когда дело доходит до валидации кода, допускает некоторую небрежность.

Тем не менее, единообразие по стилю облегчит другим понимание вашего HTML кода.

Возможно, когда-нибудь программам, вроде программ чтения XML данных, потребуется прочитать ваш HTML код. Таким образом, использование хорошо сформированного, близкого к XHTML синтаксиса будет вполне разумным подходом.

Всегда следите, чтобы ваш код был аккуратным, чистым и хорошо сформированным.

Используйте корректный тип документа

На первой строке всегда декларируйте тип документа:

Если вы хотите соблюдать последовательность с написанием тегов в нижнем регистре, то вы можете использовать следующее определение типа документа:

Имена элементов пишите маленькими буквами

HTML5 допускает одновременное использование в именах элементов больших и маленьких букв. Однако, лучше всегда использовать только маленькие буквы. Это объясняется следующими соображениями:

Смешение больших и маленьких букв в именах тегов считается плохой практикой

Это параграф текста.

Очень плохо:

Это параграф текста.

Закрывайте все HTML элементы

В HTML5 вы не обязаны закрывать все элементы (например, элемент

Это параграф текста.

Закрывайте пустые HTML элементы

В HTML5 закрывать или нет пустые элементы зависит от желания веб-разработчика.

Допустимо:

Также допустимо:

Тем не менее, закрывающая косая черта (/) ОБЯЗАТЕЛЬНА в XHTML и XML.

Если ожидается, что к вашей веб-странице будут обращаться XML приложения, то в пустых HTML элементах лучше использовать закрывающую косую черту!

В именах атрибутов используйте маленькие буквы

В HTML5 при написании имен атрибутов можно смешивать большие и маленькие буквы.

Смешение больших и маленьких букв в именах атрибутов считается плохой практикой
Разработчики обычно используют маленькие буквы (как в XHTML)
Написание в нижнем регистре выглядит чище
В нижнем регистре легче писать

Заключайте значения атрибутов в кавычки

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

Смешение больших и маленьких букв в значениях считается плохой практикой
Значения в кавычках легче читать
Вы ДОЛЖНЫ заключать в кавычки, если в значениях есть пробелы

Очень плохо:

Это не будет работать, потому что в значении есть пробелы

Атрибуты изображений

При определении изображений всегда используйте атрибут "alt". Этот атрибут важен, когда изображение по какой-то причине не отображается.

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

Пробелы и знак равно

HTML5 допускает пробелы вокруг знака равно. Однако, когда пробелов нет, то такой код легче читать, и это лучше группирует сущности.

Избегайте длинных строк кода

При использовании HTML редактора, неудобно читать HTML код, если приходится прокручивать окно влево или вправо.

Следует стараться, чтобы строка кода в длину не превышала 80 символов.

Пустые строки и отступы

Не следует без веских причин добавлять пустые строки.

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

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

Не используйте ненужные пустые строки и отступы. Нет необходимости ставить отступ перед каждым элементом.

Необязательно:

Famous Cities Tokyo

Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world. It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.

Famous Cities Tokyo

Name Description

A	Description of A
B	Description of B

London

Paris

Tokyo

Пропускать или нет и ?

По стандарту HTML5 тег и тег могут не использоваться.

Следующий код согласно стандарту HTML5 считается валидным:

Заголовок страницы Это текстовый заголовок

Это абзац текста.

Элемент - это корень документа. Это рекомендованное место для определения языка страницы:

Декларация языка страницы важна как для специализированных приложений (например, программ чтения с экрана), так и для поисковых систем.

Кроме этого, если не написать тег или тег , то это может сломать структуру DOM и XML приложения. А пропуск тега к тому же может привести к ошибками в старых браузерах (IE9).

Пропускать ли тег ?

Согласно стандарту HTML5 тег может не использоваться.

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

Вы можете снизить сложность структуры HTML, пропустив тег :

Заголовок страницы Текстовый заголовок

Это текстовый абзац.

Метаданные

Элемент является обязательным в HTML5. Заголовок страницы должен быть наполнен значением:

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

Стандарты синтаксиса и кодирования в HTML5

Установка вьюпорта (окна просмотра)

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

В HTML5 был введен метод, позволяющий веб-дизайнерам контролировать вьюпорт при помощи тега .

Следует всегда использовать элемент управления вьюпортом в следующей форме на всех веб-страницах:

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

Часть width=device-width устанавливает ширину страницы в соответствии с шириной экрана текущего устройства (которая будет разной в зависимости от используемого устройства).

Часть initial-scale=1.0 устанавливает начальный уровень увеличения, когда страница впервые загружается браузером.

Ниже вы можете увидеть пример веб-страницы на экране смартфона с установленным мета тегом вьюпорта и без него:

Страница с мета тегом вьюпорта

HTML комментарии

Короткий комментарий должен писаться на одной строке:

Простой документ HTML5

Рассмотрим один из простейших документов HTML5. Он начинается с указания типа документа с помощью специального кода описания типа документа (значение этого кода объясняется в следующем разделе), после чего задается кодировка и название документа, а потом идет его содержимое. В данном случае содержимое состоит из одного абзаца текста:

Крошечный документ HTML5

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

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

Крошечный документ HTML5

Дадим встряску браузеру в стиле HTML5!

Наконец, весь документ (за исключением строки doctype) можно облачить в традиционный элемент , как показано в следующем листинге:

Крошечный документ HTML5

Дадим встряску браузеру в стиле HTML5!

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

Использование элементов , и является просто вопросом стиля. Страница без этих элементов будет работать отличнейшим образом даже на старых браузерах, которые и слыхом не слыхивали ни о каком HTML5. Фактически, браузер автоматически предполагает наличие этих элементов. Поэтому, если посмотреть на модель DOM (набор программных объектов, представляющих страницу) страницы с помощью сценария JavaScript, она будет содержать объекты для элементов , и , даже если разработчик и не использовал их.

На данном этапе этот пример страницы является чем-то средним между самым простым HTML5-документом и расширенной отправной точкой практической веб-страницы HTML5. В последующих разделах мы добавим к нему остальные необходимые элементы и копнем глубже в разметку.

Описание типа документа HTML5

В первой строке каждого HTML5-документа всегда дается описание типа документа. Это описание ясно указывает, что далее следует HTML5-содержимое, и выглядит следующим образом:

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

Даже профессиональные веб-разработчики были вынуждены вставлять описание типа документа XHTML методом копирования и вставки из другого документа. А описание типа документа HTML5 короткое, четкое и легко вводится вручную.

Описание типа документа HTML5 также примечательно тем, что оно не содержит номера официальной версии HTML (5 для HTML5). В нем просто указывается, что страница является HTML-страницей. Это соответствует новой концепции HTML5 как живого языка. Добавленные в HTML новые возможности автоматически доступны для размещения на странице, не требуя для этого изменений в описании типа документа.

Все это порождает непростой вопрос: если HTML5 - живой язык, то зачем тогда для страницы вообще нужно описание типа документа?

Ответ на этот вопрос таков: описание типа документа продолжает использоваться по историческим причинам. При обработке страницы с отсутствующим описанием типа документа большинство браузеров (включая Internet Explorer и Firefox) переходят в режим совместимости (quirks mode) . В этом режиме они пытаются отобразить страницу с учетом ошибок в правилах, которые использовались в более ранних версиях. Проблема с этим состоит в том, что режим совместимости одного браузера может отличаться от режима совместимости другого браузера, вследствие чего страницы, разработанные для одного браузера, на другом браузере будут, скорее всего, отображаться с ошибками, такими как неправильный размер шрифта, нарушенная структура оформления и т.п.

А обнаружив на странице описание типа документа, браузер знает, что обработку этой страницы требуется выполнять, следуя более строгим правилам режима стандартов (standards mode) , который обеспечивает единообразное форматирование и структуру страницы при ее отображении любым современным браузером. За некоторыми исключениями, браузеру совершенно безразлично, какой именно тип документа указан в описании. Он просто проверяет, что страница имеет какое-либо описание типа документа. Описание типа документа HTML5 просто самое короткое действительное описание типа документа, которое задействует режим стандартов браузера.

Кодировка символов

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

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

HTML5 делает эту задачу легкой. Для этого нужно лишь вставить элемент в самом начале блока (или, если элемент не используется, сразу же после кода описания типа документа):

Крошечный документ HTML5

Инструменты для веб-разработки, такие как Dreamweaver или Expression Web, вставляют этот элемент автоматически при создании страницы. Эти инструменты также обеспечивают сохранение файлов в кодировке UTF. Но при создании веб-страницы с помощью обычного текстового редактора, чтобы обеспечить сохранение файлов в правильной кодировке, может потребоваться выполнить дополнительные шаги.

Язык

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

Вставить в веб-страницу информацию о языке легче всего через элемент :

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

Добавление таблицы стилей

Практически в каждой странице должным образом разработанного профессионального веб-сайта используются таблицы стилей. Для указания требуемой таблицы стилей используется элемент в блоке документа HTML5:

Крошечный документ HTML5

Этот способ похож на указание таблиц стилей в традиционных HTML-документах, но немного проще. Так как существует единственный язык каскадных таблиц стилей - CSS, то в добавлении атрибута type="text/css", который требовался ранее, больше нет надобности.

Добавление JavaScript-кода

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

Код JavaScript вставляется в документ HTML5 по большому счету таким же способом, как и в традиционную HTML-страницу. В следующем листинге приводится пример вставки в веб-документ кода JavaScript по ссылке на внешний файл:

Крошечный документ HTML5

Атрибут language="JavaScript" не является обязательным, т. к. если не указан какой-либо другой язык сценариев (а поскольку JavaScript - единственный широко-поддерживаемый язык сценариев для HTML, то вероятность такого развития ничтожно мала), браузеры автоматически предполагают, что используется JavaScript. Но даже ссылаясь на внешний файл с кодом JavaScript, все равно нужно помнить о закрывающем теге . Если упустить этот тег по недосмотру или при попытке укоротить код, используя синтаксис пустых элементов, то страница не будет работать должным образом.

Если вы уделяете много времени тестированию своих страниц с JavaScript в Internet Explorer, может быть полезным добавление метки MOTW (Mark of the Web - метка особенности сети) в блок сразу же после строки кодировки. Делается это таким образом:

Крошечный документ HTML5

Эта строка кода указывает Internet Explorer обрабатывать страницу таким образом, как будто бы она была загружена с удаленного веб-сайта. В противном случае IE переключается в особый режим блокировки, выводит предупреждение безопасности в строке сообщений и отказывается исполнять любой код JavaScript до тех пор, пока вы не нажмете кнопку "Разрешить заблокированное содержимое".

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

Статьи по теме