Зачастую веб-разработчики даже не подозревают о существовании определенных стандартов кодирования в HTML. Однако в период с 2000 по 2010 годы многие веб-разработчики перешли с HTML на XHTML. При этом XHTML вынудил разработчиков писать валидный и "хорошо сформированный" код. HTML5 же, когда дело доходит до валидации кода, допускает некоторую небрежность.
Тем не менее, единообразие по стилю облегчит другим понимание вашего HTML кода.
Возможно, когда-нибудь программам, вроде программ чтения XML данных, потребуется прочитать ваш HTML код. Таким образом, использование хорошо сформированного, близкого к XHTML синтаксиса будет вполне разумным подходом.
Всегда следите, чтобы ваш код был аккуратным, чистым и хорошо сформированным.
Используйте корректный тип документаНа первой строке всегда декларируйте тип документа:
Если вы хотите соблюдать последовательность с написанием тегов в нижнем регистре, то вы можете использовать следующее определение типа документа:
Имена элементов пишите маленькими буквами
HTML5 допускает одновременное использование в именах элементов больших и маленьких букв. Однако, лучше всегда использовать только маленькие буквы. Это объясняется следующими соображениями:
- Смешение больших и маленьких букв в именах тегов считается плохой практикой
Это параграф текста.
Очень плохо:
Это параграф текста.
Это параграф текста.
Закрывайте все HTML элементыВ HTML5 вы не обязаны закрывать все элементы (например, элемент
Это параграф текста.
Это параграф текста.
Это параграф текста.
Это параграф текста.
Закрывайте пустые HTML элементыВ HTML5 закрывать или нет пустые элементы зависит от желания веб-разработчика.
Допустимо:
Также допустимо:
Тем не менее, закрывающая косая черта (/) ОБЯЗАТЕЛЬНА в XHTML и XML.
Если ожидается, что к вашей веб-странице будут обращаться XML приложения, то в пустых HTML элементах лучше использовать закрывающую косую черту!
В именах атрибутов используйте маленькие буквыВ HTML5 при написании имен атрибутов можно смешивать большие и маленькие буквы.
- Смешение больших и маленьких букв в именах атрибутов считается плохой практикой
- Разработчики обычно используют маленькие буквы (как в XHTML)
- Написание в нижнем регистре выглядит чище
- В нижнем регистре легче писать
Заключайте значения атрибутов в кавычки
HTML5 допускает написание значений атрибутов без кавычек. Однако мы рекомендуем всегда заключать значения атрибутов в кавычки, потому что
- Смешение больших и маленьких букв в значениях считается плохой практикой
- Значения в кавычках легче читать
- Вы ДОЛЖНЫ заключать в кавычки, если в значениях есть пробелы
Очень плохо:
Это не будет работать, потому что в значении есть пробелы
| A | Description of A |
| B | Description of B |
По стандарту 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.
Дата создания: 2012-03-03 21:08:27
Последний раз редактировалось: 2012-03-03 21:10:19
Сегодня мы поговорим об HTML-документах, т.е. о файлах, содержащих HTML код.
Создание HTML-документовЛюбой HTML-документ представляет из себя простой текстовый файл, а это значит, что его можно прочитать в текстовом редакторе (например, в блокноте).
Создайте в любой папке системы текстовый файл и поменяйте его расширение на html или htm . Теперь, если вы попытаетесь прочитать такой файл, он будет открыт в веб-браузере (который вы используете по-умолчанию).
Я использую Оперу, и вот так будет выглядеть в браузере пустой файл, который я назвал HTML-документ :
Замечание:
Кстати, названия файлов (особенно, если они будут храниться в интернете) лучше писать на латиннице.
Для изменения содержимого файла нужно открыть его через текстовый редактор. Щёлкните правой кнопкой мыши на значке файла в проводнике и выберите Открыть с помощью -> Блокнот . Конечно, лучше использовать текстовый редактор посолиднее. Я вот, например, во всех примерах буду использовать бесплатный Notepad++. Вот как будет выглядеть пустой файл.html в текстовом редакторе Notepad++:
Ну чтож, у нас есть пустой HTML-документ, который уже открывается в браузере. Осталось его заполнить.
Правильно сформированный HTML5-документЛюбой HTML5-документ должен начинаться со строки:
Эта строка предназначена для специальной программы (html-validator), проверяющей соответствие содержимого документа стандарту HTML5. Помещайте эту строку в каждый свой html-файл.
Комментарии HTMLВ HTML предусмотрены комментарии для того, чтобы пометить текст, который не нужно показывать конечному пользователю. Т.е. текст помещённый в комментарий не виден в браузере. Комментарии оформляются так:
Комментарии располагаются между конструкциями .
Комментарии используются для пояснения кода.
html, headПосле DOCTYPE следует корневой тег html:
Всё содержимое страницы должно находиться внутри тега html. У этого тега есть атрибут lang (от lang uage - язык), который влияет, на каком языке видят вашу страницу поисковые системы.
HTML-документ делится на две основные части: head и body:
В тег head помещают служебную информацию: кодировка, заголовок страницы, описание, ключевые слова и многое другое, с чем мы познакомимся в последующих уроках. Давайте посмотрим, как будет выглядеть страница со служебной информацией:
HTML-документ
Тег title хранит заголовок страницы. Именно этот текст будет отображаться при выдаче результатов поисковых систем.
Тег meta не нужндается в закрывающем теге. Он состоит из двух атрибутов. Первым атрибутом могут быть: charset, name, http-equiv.
Я думаю, что с описанием и ключевыми словами всё понятно, единственное, ключевые слова могут вводиться как через запятую, так и через пробел. А вот на кодировке мы остановимся подробнее.
Кодировка html-документаУказание кодировки необходимо, чтобы браузер смог правильно определить, какие символы создатель использовал при написании страницы.
Сейчас повсеместно используется юникод, а в интернете юникод представлен utf-8 (есть и другие представления). Юникод позволяет использовать символы разных языков.
Более ранние кодировки позволяют использовать только символы латинницы и ещё какой-нибудь одной письменности. Например, для использования кириллицы можно использовать вот такой код:
Но тогда вы не сможете на своих страницах использовать символы никаких других письменностей кроме латинницы и кириллицы. Поэтому всегда используйте utf-8. Это позволит браузерам без проблем отображать, например, вот такой текст:
Hello! Привет! नमस्कार।
Более подробно (исчерпывающе, я бы сказал) кодировки обсуждаются в других уроках сайта.
Для того чтобы юникод правильно отображался, страницы должны быть сохранены в utf-8.
bodyИменно в теге body выводится всё видимое содержимое страницы.
Итак, финальный HTML-документ выглядит вот так:
HTML-документ
В следующем уроке мы приступим к наполнению страницы.
Просмотр html-кода страницыКстати, вы можете просмотреть исходный код любой страницы. Например, в Опере можно щёлкнуть правой кнопкой мыши в любом пустом месте (не на картинке/ссылке) и выбрать "Исходный код". Вот так выглядит исходный HTML-код одной из страниц сайта shatalov.su:
Статья, которая повествует об основах создания структуры документа в HTML 5.
Семантика и структура документа в HTML 5Структура документа играет очень важную роль для понимания того, как устроена веб-страница. Она определяет то, как контенты организованы и взаимосвязаны между собой в документе, а также их относительную важность. Если воспользоваться схемой документа, то можно увидеть, как более просто стало просматривать информацию. Правильно спроектированная структура придаёт содержимому страницы смысл, делает его более лёгким для чтения, которое осуществляется поисковыми системами и другими пользовательскими агентами. На сайте, в котором правильно спроектирована структура, проще ориентироваться и находить нужную информацию.
Создание структуры документа до HTML 5Перед изучением процесса создания структуры документа в HTML 5, желательно познакомиться с тем, как это осуществлялось в предыдущей версии языка и с какими проблемами веб-разработчику при этом приходилось сталкиваться.
Как образуется структура документа в HTML 4Создание структуры документа в HTML 4 осуществляется с помощью 6 элементов (h1 , h2 , h3 , h4 , h5 , h6). Эти элементы, при их размещении на странице, создают неявные разделы. Данные разделы называются неявными, потому что автор их в документе явно не создаёт. Они образуются автоматически, как только user agent встречает один из этих элементов в документе. Впоследствии из всех созданных user agent-ом разделов образуется структура документа.
Проблемы при реализации структуры документаМодель структуры документа, использованная в HTML 4, имеет существенные ограничения, которые связаны с тем, что автору доступны для её создания всего 6 элементов h1 , h2 , h3 , h4 , h5 и h6 . С помощью этих элементов веб-разработчик не может спроектировать структуру документа, которая одновременно обеспечивала бы логическую взаимосвязь между разделами и отвечала критериям SEO.
Более подробно познакомиться с процессом создания структуры документа в HTML 4 и с проблемами при её реализации можно в следующей статье.
Создание структуры документа в HTML 5Стратегия создания структуры документа в HTML5 значительно изменилась. Теперь она не определяется только одними заголовками, т.к. это всегда для большинства веб-разработчиков выглядело как-то нелепо. Заголовки позволяют определить структуру документа, но они не группируют контент. До HTML 5 авторы группировали контент с помощью элементов div , а затем использовали атрибуты классов или id атрибуты для того, чтобы присвоить этим разделам более семантически верное значение. К счастью в HTML5 появилась новая группа элементов sectioning, которые позволяют авторам создавать описание (структуру) документа. К этой группе относятся элементы article , aside , nav и section . Их основное назначение сделать код HTML более семантическим, добавить в него смысл с помощью разметки.
Элементы, предназначенные для создания структуры в HTML 5.Для создания структуры документа в HTML 5 используются заголовочные элементы (h1 , h2 , h3 , h4 , h5 и h6) и элементы nav , aside , section и article из группы sectioning. Данные элементы в отличие от заголовков предназначены для создания явных разделов и установления этим разделам некоторого смысла.
Для того чтобы было более просто понять основные принципы структурирования документа в HTML 5 будет считать, что элементы body , nav , aside , section и article создают секции (явные разделы), а элементы h1 , h2 , h3 , h4 , h5 и h6 - обычные разделы (неявные разделы).
Процесс разработки структуры документа рассмотрим посредством пошаговых инструкций.
В HTML 5 создание структуры документа начинается с элемента body . Данный элемент создаёт основную секцию (раздел на уровне документа).
--> Вышеприведённый пример будет создавть следующую структуру документа: Untitled
После этого обычно переходят к созданию секций внутри body (основной секции). Например, создадим секции nav , section и aside . Эти секции будут являться дочерними по отношению к body .
--> Untitled Untitled Untitled Untitled
Каждая из секций (nav , aside , section , article) в свою очередь тоже может содержать секции. Таким образом, в HTML 5 получается структура документа. Т.е. одни секции вкладываются в другие. Секции, которые расположены непосредственно в body , имеют 2 уровень. А секции, которые расположены непосредственно в секциях 2 уровня будут уже иметь 3 уровень и т.д.
Например, создадим в section 3 секции article .
--> Вышеприведённый пример будет создавать следующую структуру документа: Untitled Untitled Untitled Untitled Untitled Untitled Untitled
Элементы h1 , h2 , h3 , h4 , h5 и h6 в HTML5 применяются для указания названия секции (т.е. выступают в качестве заголовка секции) и для создания неявных разделов внутри секции. Причём взаимосвязь между неявными разделами осуществляется только в пределах одной секции. Т.е. заголовочные элементы, находящиеся в одной секции, не связаны с заголовочными элементами, находящимися в другой секции. Другими словами неявные разделы одной секции изолированы от неявных разделах другой секции. В качестве заголовка секции выступает заголовочный элемент, находящийся в этой секции и имеющий самый высокий ранг (уровень). Если секция не содержит заголовочный элемент, то она не имеет названия (Untitled).
Внимание: В HTML 4 в отличие от HTML 5 взаимосвязь между неявными разделами осуществлялась в пределах всего документа, а не в пределах секции (body , nav , aside , section , article). В HTML 4 нет элементов для создания секций.
Например, создадим названия для всех секций кроме nav . A B C D E F --> Вышеприведённый пример будет создавать следующую структуру документа: A Untitled B C D E F
Например, создадим неявные разделы в секции section и aside:
A B C D E B-R1 B-R2 B-R3 F F-R1 F-R2 F-R3 F-R4 F-R5 --> Вышеприведённый пример будет создавать следующую структуру документа: A Untitled B C D E B-R1 B-R2 B-R3 F F-R1 F-R2 F-R3 F-R4 F-R5
Сегодня мы поговорим о семантике в HTML5. Я уже писал небольшой обзорный пост про . Рекомендую с ней предварительно ознакомиться, перед прочтением этой статьи. Сейчас мы разберемся с этим вопросом более подробно, о том как правильно и грамотно составлять семантическую структуру HTML5 документа.
В этой статье мы будем постепенно создавать html страницу, и оформлять ее семантическими HTML5 тегами.
Рисунок - Семантическая структура для HTML5 страницы.
DOCTYPE и meta теги в заголовке страницыНачнем со стандартного шаблона HTML5 документа, и добавим теги meta в head:
Заголовок страницы
Я добавил тег который отвечает за ключевые слова. И тег который отвечает за описание страницы. Для SEO оптимизации эти теги обязательны. Также обязательно корректное заполнение тега . Title страницы должен быть уникальным для всего сайта, и содержать в названии всю суть страницы для которой он указан.
Пойдем дальше. В HTML5 появились новые теги, которые используются для того чтобы делать семантическую разметку документа. Это теги header, nav, main, article, aside, footer и т.д. По отображению они работают также как и обычные теги, то есть это блочные элементы. Но если не имеет семантической нагрузки, то header, nav, main и другие — уже нужно использовать только осмысленно.
Заголовок страницыШапка страницы оформляется в тег header. Заметьте что заголовок страницы пишем тегом h1.
Site title
Если у нас есть еще и слоган рядом с заголовком, то помещаем его в p, div или span.
Site title
site slogan
Замечание по поводу тега H1
Следует заметить что в HTML5 тег H1 используется для указания заголовка контейнера в котором он находится (это может быть header, section, article и т.д.)
До появления HTML5 тегов семантика была несколько другой и отличалась. Так в HTML4 на странице мог быть только один заголовок H1! Как правило это был заголовок статьи или заголовок страницы (например если это страница рубрики на которой отображаются несколько статей.) H2 использовался для подзаголовков, или для разделов главной статьи. H3 для под разделов и так далее.
Навигация на страницеОформление главной навигации по сайту должно заключаться в тег nav. Также следует помнить что хорошей практикой считается оформлять навигацию элементами списка.
- Home
- Portfolio
- Gallery
- Contacts
Основное содержимое страницы оформляется в тег main. Это может быть одна статья, или несколько превью статей если речь идет о странице блога с несколькими записями. Нельзя помещать сайдбар, хедер страницы, футер или главную навигацию в тег main!
...основной контент страницы...
Оформление статьиТег article — служит для обертки статей. В общем этот тег содержит в себе блок контента, который может быть вынут из контекста страницы, и использован отдельно в другом месте. Это может быть статья (полный тескт статьи или превью), пост на форуме, и т.п.
На примере ниже я показал оформление статьи в контексте, внутри тега main. У статьи задан блок header с заголовком статьи. Дата публикации статьи задана специальным тегом time, который отображается как обычный inline элемент. У тега time есть специальный аттрибут в котором время публикации должно быть задано в машинном формате. Это может быть только дата datetime="2015-09-30" или с указанием часов минут и секунд datetime="2015-09-30T15:25:55" . Параметр pubdate указывает что статья была и опубликована в то же время что и написана. Если это новость, то может быть такое что время новости одно, а время публикации другое, для этого необходимо указать два раза тег time, и поставить pubdate только в том теге где указано время публикации.
... Article title 30 Сентября Article sub-title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde?
Из примера выше видна что внутри статьи были использованы теги header и footer чтобы выделить заголовок и нижний колонтитул статьи.
Сайдбар или колонка с виджетамиДля каждого отдельного элемента сайдбара используем блок aside. Внутри него заголовок оформляем тегом h1. Так колонка с сайдбаром может выглядеть следующим образом:
Widget title ... Последние записи ... Популярные комментарии ...
Тег sectionТег section — используется для представления группы или секции тематически связанного контента.Его использование похоже на article с главным отличием в том что допускается отсутствие смысла содержимого внутри элемента вне контекста самой страницы. Рекомендуется использовать теги ( – ) для обозначения темы секции.
В качестве примера можно привести статью, которую вы сейчас читаете, можно было бы каждый параграф обернуть в тег . Например тегом section можно выделять блоки контента на лендинге. Звучит похоже на определение div элемента, который часто используется как контейнер для контента. Разница в том что div не имеет семантического значения, и он не говорит не о чем про контент находящийся внутри него. Тег section , наоборот используется чтобы четко показать что контент внутри него связан по смыслу. Вы можете заменить некоторые свои div теги на section , но всегда отвечайте себе на вопрос: «Этот контент связан между собой или нет?»
Пример использования тега section в списке с перечислением городов:
An Event Apart Cities
Join us in these cities in 2010.
SeattleFollow the yellow brick road.
BostonThat"s Beantown to its friends.
MinneapolisIt"s so nice.
Accommodation not provided. Подвал сайта — FooterПодвал сайта оформляется тегом
© 2015 сайт Copyright
ЗаключениеДля проверки структуры страницы можно использовать инструмент HTML5 outliner . Он показывает структуру страницы блокам и заголовкам.
Семантика в HTML5 не ограничивается приведенными выше в статье тегами. Но используя приведенные примеры вы можете освежить свою разметку, и сделать сайт более дружелюбным к поисковым системам, что скажется на более высоком рейтинге сайта в поисковой выдаче.
В продолжение темы можно изучить другие новые HTML5 теги. А также микро форматы для оформления и структуризации данных, например такие как schema.org
Важное замечание по использованию HTML5 тегов. В спецификации не указаны жесткие правила по использованию семантических тегов, указаны лишь рекомендации п их использованию. Если вы не понимаете или не знаете где и какой HTML5 тег использовать, лучше используйте div — чтобы не навредить и не нарушить структуру документа.
Статьи и материалы
-
Где Itunes хранит резервные копии
Резервная копия Iphone необходима для сохранности данных при переустановке ОС, поломке устройства, сбоя ПО или облачного сервиса. Обеспечить синхронизацию информации: Адресной книги (всех контактов) и истории вызовов. Полного списка календарей,...
Советы начинающим -
Эксплуатация, зарядка и маркировка аккумуляторов для планшета Где купить аккумулятор для планшета
Найти подходящий аккумулятор для планшета непросто для пользователя, который слабо осведомлен о том, где в его таблете находится отсек для АКБ. Впрочем, если гаджет неожиданно «поправился» в размерах и демонстрирует все признаки готовности треснуть...
Компьютерная грамотность -
Samsung Galaxy Note8 SD835 - Технические характеристики
Информация о марке, модели и альтернативных названиях конкретного устройства, если таковые имеются. ДизайнИнформация о размерах и весе устройства, представленная в разных единицах измерения. Использованные материалы, предлагаемые цвета,...
Компьютерная грамотность
