Какой из вариантов структуры html документа правильный. Семантическая структура для HTML5 страницы. Семантика в HTML5. Названия идентификаторов и классов

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

Тема структура сайта html одна из наиболее важных и является фундаментом сайтостроения, после освоения которой вы с легкостью сможете моделировать индивидуальный дизайн для своих страничек и сайтов. Для подробного изучения темы в статье предоставляется не только теоретический материал, а и конкретный пример создания блога. А теперь настало время приступить к обучению!

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

Моя страница BODY { background: #fff1e4; margin: 0; } .layout { width: 70%; padding-bottom:30px; margin: 0 auto 10px; background: #fff; } .content { height:250px; margin-right: 350px; background: #f6cf65; } .sidebar { height:250px; width: 320px; float: right; background: #f6cf65; } footer{font-size:18px;} Создание структуры сайта при помощи html

• Основные теги языка гипертекстовой разметки
• Новые теги, пришедшие с html 5
• Пример структурирования страницы

Здесь расположен текст первой статьи.

Здесь расположен текст второй статьи.

Данный код создает страницу блога, которая в свою очередь разбита на заголовок (header), меню (menu), основную панель (layout), в которой расположены панель для контента (content) и боковая панель (sidebar), а также называемый «подвал» (footer).

Начнем разбор полетов с первой строки.

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

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

Логически могу предположить, что в вашей голове сразу же зародился вопрос: «Что за непонятный код расположен в этой части программы? Он совершенно не похож на html!». А ответ таков: в тег style записывается не html, а css код. Как уже ранее было сказано, это инструмент для форматирования внешнего вида сайтов .

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

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

Таким образом, в коде имеются:

• layout – блок, отвечающий за основную часть страницы,
• sidebar – боковая панель (обычно создается для навигации),
• content – блок, в котором располагаются публикации блога.

В элементе с определением класса sidebar я задаю ненумерованный список, используя при этом элементы

и
• . В блоке со стилевым классом content – теги заголовка и параграфа

  А теперь подробнее рассмотрим блок .

  HTML или все-таки HTML 5? Как же распознать?

  В div-е со стилевым классом layout помимо других блоков, расположены такие теги, как header, menu и footer. В отличие от других элементов примера, они относятся к платформе html 5.

  Так, header – это элемент языка гипертекстовой разметки, обычно создающий шапку страниц сайта или разделов, в которую вносят заголовок. Стоит отметить, что браузер Internet Explorer не поддерживает header включительно до 8 версии, однако отображает его содержимое.

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

• .

  

  И наконец, единица языка footer. На жаргоне веб-разработчиков ее иногда называют «подвалом» страницы. Этот тег располагается внизу страницы или разделов. В footer обычно заносится информация об авторстве определенного ресурса, дата создания документа, справочная информация или другие материалы, не требующие особого внимания читателей веб-ресурса.

  Инструменты для создания веб-ресурсов

  Для разработки интернет-страниц было создано множество программных продуктов . Условно их можно поделить на простые программы-редакторы и на профессионально ориентированные программные продукты.

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

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

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

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

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

  
  
  
  Заголовок документа
  
  
  Тело документа
  
  

  Первый тег со всеми его параметрами и является тем самым идентификатором, который сообщает браузеру, какая именно версия HTML была использована для создания данной Web-страницы. Эта достаточно громоздкая и непонятная конструкция на самом деле является пришельцем из языка более высокого уровня XML. Подразумевается, что в будущем браузеры смогут работать одновременно как с обычными Web-страницами, написанными на языке ХМL так и с HTML-документами. Поэтому с расчетом на это самое светлое будущее и используется данный тег-идентификатор. Точная дата наступления этого светлого будущего, как обычно, неизвестна, поэтому очень часто данным идентификатором пренебрегают без каких-либо последствий. Но предусмотрительность, как известно, лучше, чем непредусмотрительность, поэтому идентификатор лучше все-таки использовать.

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

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

  
  Заголовок Web-страницы
  

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

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

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

  
  
  
  Моя первая Web-страница
  
  
  Доброго времени суток, всем посетившим мой скромный сайт
  
  

  Не следует забывать, что при сохранении файла, следует установить для него расширение htm или html. Если после этого запустить его на выполнение, просто щелкнув по его наименованию в Проводнике Windows, то автоматически будет запущен браузер, установленный по умолчанию в операционной системе, и в него уже будет загружен HTML-документ. Как выглядят наша первая Web-страница в браузере Internet Explorer видно на рис. 1.1.

  Рис. 1.1. Результат просмотра в браузере файла, приведенного в листинге 1.1

  Но следует отметить, что тег может содержать дополнительные параметры. Мы уже говорили немного ранее, что параметры включаются в состав стартового тега конструкции. Теперь пришло время увидеть, как это происходит на самом деле.

  Чаще всего параметр представляет собой пару "наименование-значение".

  Рассмотрим на простом примере. Параметр bgcolor позволяет задавать цвет фона, на котором будет отображаться содержимое Web-страницы. Например, если мы хотим использовать зеленый фон, то мы должны использовать следующую конструкцию:

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

  О параметре bgcolor , который позволяет устанавливать цвет фона Web-страницы, мы уже знаем. Рассмотрим остальные параметры.

  • Параметр background позволяет использовать в качестве фона какое-либо графическое изображение. Значением параметра является адрес этого изображения, т. е. его URL.
  • Параметр text задает цвет шрифта, которым будет отображаться текстовое содержимое Web-страницы.
  • Параметр link позволяет устанавливать цвет, которым будут отображаться в окне просмотра браузера текстовые гиперссылки, внедренные в содержимое Web-страницы.
  • Параметр vlink задает цвет гиперссылок, которые пользователь уже проходил в текущем сеансе работы.
  • Параметр alink указывает, какой цвет будет использоваться для отображения гиперссылок, выделенных пользователем.
  • Параметр lang указывает, на каком языке написано текстовое содержимое Web-страницы. В качестве значения используются кодовые двухбуквенные обозначения языков, приведенные в документе RFC 1766. На самом деле, нам не надо знать все эти обозначения. В подавляющем большинстве случаев мы будем использовать русский или английский язык. Их коды: "гu" и "en" соответственно.

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

  Как видно, все просто и незатейливо. Теперь самое время узнать, что же такое метаданные. Метаданные, скорее всего, можно определить как неотображаемая информация о документе. Она применяется для идентификации документа и указания режима отображения Web-страницы. Для внедрения метаданных в Web-страницу используется тег . Чаще всего он имеет следующий вид:

  "http://www.w3.org/TR/html4 /strict.dtd">
  
  
  Все о кормлеиии хомяков
  
  
  
  О, эти маленькие, симпатичные животные - хомячки. ,
  
  

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

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

  Также метаданные позволяют передавать так называемые заголовки HTTP. Здесь необходимо сделать маленькое техническое отступление. Все HTML-документы передаются при помощи специализированных программ, называемых Web-серверами, при помощи определенного набора правил. Этот набор правил приема и передачи информации в компьютерной индустрии называется протоколом. А набор правил для передачи Web-страниц и данных от удаленных пользователей называется протоколом HTTP (HyperText Transfer Protocol), Этот протокол обладает набором директив и переменных, которые часто называют заголовками HTTP-протокола.

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

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

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

  Из примера видно, что для указания наименования стандартной неременной HTTP-протокола используется параметр http-equiv , а для установки значения этой переменной - уже знакомый нам параметр content. Также легко заметить, что установка срока последнего использования документа производится при помощи переменной Expires, а значение ее должно быть указано в определенном текстовом формате со временем, указанным по гринвичскому меридиану.

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

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

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

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

  Для идентификации какого-либо тега применяется параметр id. Вернемся к примеру с абзацами текста. Забегая немного вперед, можно сказать, что абзацы указываются при помощи пары тегов и . Таким образом, создание абзацев, которые мы сможем потом отличать, производится при помощи приблизительно следующей конструкции:

  Первый абзац
  Bторой абзац

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

  Если параметр id применяется для уникальной идентификации, то при помощи параметра class мы можем относить тег к той или иной группе. Этот параметр используется только для стилевого оформления. Мы просто некоторые элементы Web-страницы разбиваем на классы, а затем достаточно в одном месте изменить описание правил отображения класса, и это изменение автоматически распространится на все теги, которые вошли в данный класс.

  Также нам доступны методы объединения соседних элементов Web-страницы в единые блоки. Все элементы оформления HTML-документов разделяются на два типа. Inline-элементы, которые чаще всего являются просто элементами текста, и блочные элементы. Inline-элементы могут являться частью строки, а блочные элементы всегда занимают обособленное место на Web-странице и обязаны начинаться всегда с новой строки. Естественно, блочные элементы могут включать в себя другие блочные элементы и inline-элементы. По вполне понятным причинам inline-элементы не могут включать в себя блочные элементы.

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

  Для объединения элементов блочного типа используется тег с его закрывающим близнецом . А для inline-элементов используется пара тегов и . С учетом вышесказанного, ясно, что блок с тегом не может располагаться внутри блока с тегом , так как блочные элементы не могут входить в состав inline-элементов.

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

  Листинг 1.2

  
  
  
  Отображение div-блоков
  
  
  
  Доброго времени cyток, всем посетившим мой скромный сайт.
  
  
  

  Результат отображения подобного HTML-файла браузером Internet Explorer показан на рис. 1.2. Теги и могут также иметь дополнительные параметры. Помимо уже знакомых нам идентифицирующих параметров id и class, могут использоваться параметры style и align . Параметр style применяется для установки стиля отображения содержимого блока, а параметр align позволяет устанавливать выравнивание данного блока относительно других элементов содержимого Web-страницы. Более детально применение этих параметров мы рассмотрим в следующих разделах этой главы.

  

  Рис. 1.2. Окно браузера с результатом отображения файла, приведенного в листинге 1.2

  Также к вопросам структуры HTML-документа можно отнести использование различных заголовков в тексте. Для заголовков в HTML отведены собственные теги. Всего в HTML-документах применяется шесть уровней текстовых заголовков. Самый старший уровень - первый. И для каждого заголовка существует свой тег и свои правила отображения.

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

  Листинг 1.3

  
  
  
  Отображение заголовков
  
  
  Заголовок первого уровня
  Заголовок второго уровня
  Заголовок третьего уровня
  Заголовок четвертого уровня
  Заголовок пятого уровня
  Заголовок шестого уровня
  0бычный текст
  
  

  А как это выглядит, хорошо видно на рис. 1.3.

  

  Рис. 1.3. Окно браузера с результатом отображения файла, приведенного в Листинге 1.3

  Теги заголовков обладают тем же набором параметров, что и недавно рассмотренные теги и , т. е. идентификационные id и class , параметр общего оформления style и параметр выравнивания align .

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

  Сегодня мы поговорим о семантике в 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.

  Seattle

  Follow the yellow brick road.

  Boston

  That"s Beantown to its friends.

  Minneapolis

  It"s so nice.

  Accommodation not provided.
  Подвал сайта — Footer

  Подвал сайта оформляется тегом

  © 2015 сайт Copyright

  Заключение

  Для проверки структуры страницы можно использовать инструмент HTML5 outliner . Он показывает структуру страницы блокам и заголовкам.

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

  В продолжение темы можно изучить другие новые HTML5 теги. А также микро форматы для оформления и структуризации данных, например такие как schema.org

  Важное замечание по использованию HTML5 тегов. В спецификации не указаны жесткие правила по использованию семантических тегов, указаны лишь рекомендации п их использованию. Если вы не понимаете или не знаете где и какой HTML5 тег использовать, лучше используйте div — чтобы не навредить и не нарушить структуру документа.

  Статьи и материалы

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

  Также в HTML-документе должны присутствовать элементы HEAD (информация о документе) и BODY (тело документа).

  Раздел документа HEAD

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

  Раздел заголовка начинается тегом < HEAD > и следует сразу за тегом . Между открывающим и закрывающим тегами элемента HEAD располагаются другие элементы заголовка.

  Название документа title

  Для того чтобы дать название HTML-документу, предназначен тег < TITLE > . Это название будет выведено в заголовок окна броузера. Название записывается между тегами и и представляет собой строку текста. Длина этой строки может быть любой, но рекомендуется делать ее не больше 60 символов. Элемент TITLE должен находиться только в разделе HEAD.

  Раздел документа BODY

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

  Спецификация элемента BODY

  Тег имеет ряд атрибутов, определяющих внешний вид документа. Ниже приводится спецификация тега .

  TEXT="цвет текста"

  BGCOLOR="цвет фона"

  BACKGROUND="адрес фонового рисунка"

  Атрибут TEXT задает цвет шрифта для всего документа в формате RGB или в символьной нотации. По умолчанию (если не указан этот атрибут) используются настройки броузера.

  Атрибут BGCOLOR задает цвет фона окна броузера документа в формате RGB или в символьной нотации. По умолчанию используются настройки броузера.

  Атрибут BACKGROUND позволяет указать адрес и имя рисунка, используемого в качестве фона. Этот рисунок будет размножен и распределен на заднем плане документа.

  Атрибуты LINK, VLINK и ALINK задают цвета гиперссылок в формате RGB или в символьной нотации. По умолчанию используются настройки броузера. Непосещенная гиперссылка – гиперссылка, которая еще не использовалась для перехода к другому документу. Посещенная гиперссылка – гиперссылка, которая уже использовалась для перехода к другому документу. Активная гиперссылка – гиперссылка на документ, к которому в данный момент происходит переход.

  Советы по использованию атрибутов тега BODY

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

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

   В элементе BODY можно задать как BGCOLOR, так и BACKGROUND. В этом случае броузер отдает предпочтение BACKGROUND, но если изображение фона невозможно загрузить, будет использовано BGCOLOR. Поэтому старайтесь задавать цвет фона похожим на цвет фонового рисунка, чтобы не нарушился цветовой баланс документа.

  По возможности поясняйте свой код, где это необходимо.

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

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

  Задачи Отмечайте задачи для списка дел с помощью TODO .

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

  Заключайте контакты (имя пользователя или список адресатов) в круглые скобки: TODO(контакт) .

  Описывайте задачу после двоеточия, например: TODO: Задача .

  Рекомендуется: {# TODO(Ivan Ivanov): Разобраться с центровкой #} Тест
  Рекомендуется:

  • Огурцы
  • Помидоры
  Правила оформления HTMLТип документа Используйте HTML5.

  (Рекомендуется использовать HTML с типом контента text/html . Не используйте XHTML, так как application/xhtml+xml (англ.) , хуже поддерживается браузерами и ограничивает возможность оптимизации.)

  Валидность HTML По возможности используйте валидный HTML.

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

  W3C HTML validator (англ.) чтобы проверить валидность кода.

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

  Не рекомендуется: Проверка Просто проверка
  Рекомендуется: Проверка Просто проверка.

  Семантика Используйте HTML так, как это было задумано.

  Используйте элементы (Иногда неверно называемые “тегами”) по назначению: заголовки для заголовков, p для абзацев, a для ссылок и т.д.

  Это облегчает чтение, редактирование и поддержку кода.

  Альтернатива для мультимедиа Всегда указывайте альтернативное содержимое для мультимедиа.

  Постарайтесь указать альтернативное содержимое для мультимедиа: например для картинок, видео или анимаций, заданных с помощью canvas . Для картинок это осмысленный альтернативный текст (alt ), а для видео и аудио расшифровки текста и подписи если это возможно.

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

  (Если для картинки alt избыточен, или она используется только в декоративных целях в местах, где нельзя использовать CSS, используйте пустой альтернативный текст alt="" )

  Разделение ответственности Разделяйте структуру, оформление и поведение.

  Держите структуру (разметка), оформление (стили) и поведение (скрипты) раздельно и постарайтесь свести взаимодействие между ними к минимуму.

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

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

  Отделение структуры от представления и поведения помогает облегчить поддержку кода. Изменение шаблонов и HTML-документов всегда занимает больше времени чем изменение файлов стилей или скриптов.

  Не рекомендуется: HTML sucks HTML Отстой

  Я об этом и раньше где-то читал, но теперь точно все ясно: HTML - полная фигня!!1 Не могу поверить, что для того чтобы изменить оформление, нужно каждый раз все переделывать заново.
  Рекомендуется: My first CSS-only redesign Мой новый CSS дизайн

  Я читал об этом и раньше, но наконец-то сделал сам: Использую принцип разделения ответственности и не пихаю оформление в HTML

  Как круто!

  Ссылки-мнемоники Не используйте ссылки-мнемоники.

  Единственное исключение из этого правила - служебные символы HTML (например < и & ) а так же вспомогательные и “невидимые” символы (например неразрывный пробел).

  Необязательные теги Не используйте необязательные теги. (не обязательно)

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

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

  Не рекомендуется: Тратим байты - тратим деньги.
  Рекомендуется: Байты-деньги!

  Так-то

  Атрибут "type" Не указывайте атрибут type при подключении стилей и скриптов в документ.

  Не используйте атрибут type при подключении стилей (кроме вариантов когда используется что-то кроме CSS) и скриптов (кроме вариантов когда это не JavaScript).

  Указывать атрибут type в данном случае не обязательно потому что HTML5 использует text/css (англ.) и text/javascript (англ.) по умолчанию. Это будет работать даже в старых браузерах.

  Не рекомендуется:
  Рекомендуется:
  Не рекомендуется:
  Рекомендуется:

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

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

  Также ставьте отступы для всех элементов вложенных в блочный или табличный элемент.

  (Если у вас возникнут сложности из-за пробельных символов между списочными элементами, допускается поместить все li элементы в одну строку. Линту [утилита для проверки качества кода прим. пер.] рекомендуется в данном случае выдавать предупреждение вместо ошибки.

  
  Рекомендуется:
  • Маша
  • Глаша
  • Чебураша
  
  Рекомендуется: Прибыль Налоги

  $ 5.00	$ 4.50

  Правила оформления CSSВалидность CSS По возможности используйте валидный CSS-код.

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

  Используйте такие инструменты как W3C CSS Валидатор (англ.) для проверки своего кода.

  Валидность - это важное и при этом измеряемое качество кода. Написание валидного CSS помогает избавиться от избыточного кода и обеспечивает правильное использование таблиц стилей…

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

  Вместо использования шифров, или описания внешнего вида элемента, попробуйте в имени класса или идентификатора выразить смысл его создания, или дайте ему шаблонное имя…

  Шаблонные имена - это просто вариант названия для элементов, у которых нет специального предназначения или которые не отличаются от своих братьев и сестер. Обычно они необходимы в качестве “Помощников.”

  Использование функциональных или шаблонных имен уменьшает необходимость ненужных изменений в документа или шаблонах.

  Не рекомендуется: /* Не рекомендуется: не имеет смысла */ #yee-1901 {} /* Не рекомендуется: описание внешнего вида */ .button-green {} .clear {}
  Рекомендуется: /* Рекомендуется: точно и по делу */ #gallery {} #login {} .video {} /* Рекомендуется: шаблонное имя */ .aux {} .alt {}

  Названия идентификаторов и классов Для идентификаторов и классов используйте настолько длинные имена, насколько нужно, но настолько короткие, насколько возможно.

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

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

  Селекторы типа Избегайте использование имен классов или идентификаторов с селекторами типа (тега) элемента.

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

  Сокращенные формы записи свойств Используйте сокращенные формы записи свойств, где возможно.

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

  Использование сокращенной записи свойств полезно для большей эффективности и лучшего понимания кода.

  Не рекомендуется: /* Не рекомендуется */ border-top-style: none; font-family: palatino, georgia, serif; font-size: 100%; line-height: 1.6; padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0;
  Рекомендуется: /* Рекомендуется */ border-top: 0; font: 100%/1.6 palatino, georgia, serif; padding: 0 1em 2em;

  0 и единицы измерения Не указывайте единицы измерения для нулевых значений

  Не указывайте единицы измерения для нулевых значений если на это нет причины.

  0 в целой части дроби Не ставьте “0” в целой части дробных чисел.

  Не ставьте 0 в целой части в значениях между -1 и 1.

  Кавычки в ссылках Не используйте кавычки в ссылках

  Не используйте кавычки ("" , "" ) с url() .

  Шестнадцатеричные названия цветов Используйте трехсимвольную шестнадцатеричную запись где это возможно.

  Трехсимвольная шестнадцатиричная запись для цветов короче и занимает меньше места.

  Префиксы Предваряйте селекторы уникальными для текущего приложения префиксами. (не обязательно)

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

  Использование пространств имен позволяет предотвратить конфликты имен и может облегчить обслуживание сайта. Например при поиске и замене.

  Разделители в классах и идентификаторах Разделяйте слова в идентификаторах и именах классов с помощью дефиса.

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

  Не рекомендуется: /* Не рекомендуется: слова “demo” и “image” не разделены */ .demoimage {} /* Не рекомендуется: используется подчеркивание вместо дефиса */ .error_status {}
  Рекомендуется: /* Рекомендуется */ #video-id {} .ads-sample {}

  Хаки Избегайте использования информации о версии браузеров, или CSS “хаков”- сперва попробуйте другие способы.

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

  Правила форматирования CSSУпорядочивание объявлений Сортируйте объявления по алфавиту.

  Задавайте объявления в алфавитном порядке, чтобы получить согласованный код, с которым легко работать.

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

  Отступы в блоках. Всегда ставьте отступы для содержимого блоков.

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

  После объявлений Ставьте точку с запятой после каждого объявления.

  После каждого объявления ставьте точку с запятой для согласованности кода и облегчения добавления новых свойств.

  После названий свойств Используйте пробелы после двоеточий в объявлениях.

  Всегда используйте один пробел после двоеточия (но не до) в объявлениях, для порядка в коде.

  Отделение селектора и объявления Отделяйте селекторы и объявления переносом строки.

  Начинайте каждый селектор или объявление с новой строки.

  Разделение правил Разделяйте правила переносом строки.

  Всегда ставьте перенос строки между правилами.

  Мета правила CSSГруппировка правил Группируйте правила и обозначайте группы комментарием. (не обязательно)

  По возможности объединяйте правила в группы. Обозначайте группы комментариями и разделяйте переносом строки.

  ЗаключениеБудьте последовательны

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

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

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

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

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

  Спасибо всем кто дочитал до этого места.

  Теги: Добавить метки