Пример html5 страницы: Структура кода | htmlbook.ru

Структура страницы | Учебник HTML5

Итак, начнем погружение в HTML5, и начнем его с самого верха страницы. С тега HTML? Нет, еще выше, с DOCTIPE! Именно здесь нас ждет самое радикальное и, наверное, самое приятное изменение, ради одного которого уже стоило начинать революцию. DOCTYPE теперь выглядит так:

<!DOCTYPE html>

Это все, и мне кажется это прекрасно! Про PUBLIC «-//W3C// DTD XHTML 1.0 Strict//EN», xhtml1-strict. dtd и прочее можно забыть как про страшный сон. Показательно отсутствие версии html — согласно концепции WHATWG, отказывавшейся от упоминания версии, определяет стандарт по мере его развития, то есть такой тип включает все любые типы html — и xhtml-документов, в том числе и будущих версий.

Продолжим строить страницу:

<!DOCTYPE html>

<html lang=”ru” dir=”ltr” >

<head>

<title>HTML5 — путеводитель по технологии

</head>

<meta charset = utf-8> Hello HTML!

</html>

Следующий приятный сюрприз — синтаксис тега <meta>. Прежний синтаксис, включающий http-equiv = «…» content = «…», все еще правомерен, но писать по-новому немного приятней, правда? И номер версии HTML указывать нет необходимости — есть просто HTML, и все!

Да, наверное, все заметили, что сам вышеупомянутый тег расположен в непривычном месте (внутри контейнера <head></head>). Это не ошибка — новый стандарт позволяет размещать метаинформацию где угодно. Конечно, лучше ее поместить в наиболее удобном и читаемом месте, но не всегда это будет секция заголовка (в дальнейшем нам будут встречаться примеры таких решений). Кстати, секция <head> вовсе не обязательна для валидности, равно как и опущенная в нашем примере секция <body></body>.

Впрочем, тег именно «опущен», за отсутствием необходимости. Браузер считает, что он все равно незримо существует, в чем нетрудно убедиться, проанализировав данную разметку в Mоzilla Firebug или в Google Chrome Inspector (рис. 7). Этот и некоторые другие (<head>, <html>) всегда «подразумеваются», хотя для использования в CSS — или в JavaScript-сценариях их надо прописывать в явном виде.

Рис. 7. Браузер дорисовывает необходимые элементы

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

<a href=”/item. php&id=5”>

< h 2 > Ш в а б р а < / h 2 >

<р>Необходимый инструмент для дома и самообороны</р> <img src = ”shvabra. jpg»>

</a>

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

НОУ ИНТУИТ | Лекция | Новые структурные элементы в HTML5

Аннотация: В лекции рассматриваются структурные элементы HTML5. Демонстрируется, каким образом новые свойства языка взаимодействуют друг с другом в контексте реальной web-страницы. Использование тегов логической компоновки документа: колонтитулов, навигационных панелей, автономных фрагментов контента, блоков для иллюстраций, разметки времени и даты. Специфика описания типа документа (DTD — Document Type Definition). Как новые средства языка поддерживаются в популярных браузерах. Методики, позволяющие заставить старые клиентские программы отображать неизвестные элементы разметки.

Ключевые слова: API, Web, HTML, заголовки, меню, контент, окно предупреждения, css, footer, NAV, figures, twitter, синтаксический разбор, язык документа, проверка документа, валидатор, WAIS, верхний колонтитул, Заголовок документа, часовой пояс, wrapper, CMS, алгоритм, представление, outliner, google, слово, браузер, иерархия, dtd, анонимный, блочный элемент

Крис Миллз, Брюс Лоусон · 21 декабря 2010 г.

Введение

HTML5 содержит две новые вещи: новые API, которые добавляют существенно важные новые свойства к открытым стандартам модели разработки web, и новые структурные элементы, которые определяют специальные свойства страницы Web со значительно более точной семантикой, чем это было доступно в HTML 4. Статьи, посвященные многим новым API, можно найти на Dev.Opera (http://dev.opera.com/articles/tags/html5/) с меткой HTML5.

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

Введение в структурные элементы HTML5

HTML4 имеет множество семантических элементов, позволяющих четко определять различные свойства страницы Web, такие как формы, списки, параграфы, таблицы и т.д. Однако он имеет и свои недостатки. Существенно используются элементы <div> и <span> с различными атрибутами id и class для определения различных других свойств, таких как навигационные меню, верхние и нижние колонтитулы, основной контент, окна предупреждения, боковые панели, и т. д. Что-нибудь типа <div> будет понятно разработчикам и дизайнерам, знающим, для чего это предназначено, и умеющих использовать CSS и JavaScript для применения собственных стилей и поведения, чтобы сделать это понятным для конечных пользователей.

Все могло бы быть значительно лучше, но с такими настройками по-прежнему существуют проблемы:

  • Люди могут понять разницу между различным контентом, но машины не могут — браузер не видит различные div как верхние и нижние колонтитулы и т.д. Он видит их как различные div. Не будет ли полезнее, если браузеры и считыватели экрана смогут явно идентифицировать, скажем, навигационное меню, чтобы пользователям с недостатками зрения было легче его найти, или различные элементы новостей в пакете блогов, чтобы их было легче объединить в ленту RSS без дополнительного программирования?
  • Даже если для решения некоторых из этих проблем используется дополнительный код, вы можете сделать это надежно только для собственных web-сайтов, так как другие разработчики web будут использовать другие имена классов и ID, особенно, если рассмотреть международную аудиторию — различные разработчики web в разных странах будут использовать различные языки для записи имен своих классов и id.

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

  • <header>: Используется для верхнего колонтитула сайта.
  • <footer>: Используется для нижнего колонтитула сайта.
  • <nav>: Содержит навигационные функции страницы.
  • <article>: Содержит автономный фрагмент контента, который будет иметь смысл, если используется как позиция RSS, например, новостное сообщение.
  • <section>: Используется либо для объединения в группу различных статей с различной целью или по различным темам, или для определения различных разделов одной статьи.
  • <time>: Используется для разметки времени и даты.
  • <aside>: Определяет блок контента, который связан с основным контентом, но не входит в его основной поток.
  • <hgroup>: Используется в качестве оболочки скрытия более одного заголовка, если требуется, чтобы учитывался только один заголовок в структуре заголовков страницы.
  • <figure> и <figcaption>: Используется для инкапсуляции рисунка как единого элемента, и содержит, соответственно, подпись для рисунка.
Как были выбраны названия элементов?

Во время создания HTML5 редактор Ян Хиксон использовал инструменты Google для извлечения данных более чем миллиарда web-страниц, определяя, какие имена ID и class использовались наиболее часто в реальной сети web. Можно посмотреть один из подготовленных обзоров, опубликованный на сайте Google Code (http://code.google.com/webstats/2005-12/classes.html). Выражаясь короче, имена элементов, указанные в этой статье, были взяты из 20 наиболее популярных имен ID и class, представленных в обзорах Хиксона.

Примечание: Компания Opera выполнила аналогичное исследование 3.5 миллионов URL, назвав его MAMA. MAMA использует меньшее множество URL, но рассматривает более широкий набор статистики Web-страниц. Дополнительную информацию можно найти на домашней странице проекта MAMA (https://dev.opera.com/tags/mama/).

Почему нет элемента <content>?

Хотя это может казаться кричащим упущением, на самом деле это не так. Основной контент будет блоком верхнего уровня контента, который не является <header>, <nav> или <footer>, и в зависимости от конкретных обстоятельств, может иметь больше смысла пометить контент с помощью <article>, <section>, или даже <div>. Брюс Лоусон называет это «алгоритмом Scooby Doo», но чтобы понять почему, вы должны спросить его самого в Twitter или на конференции.

Представляем пример страницы HTML5

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

Посмотрите на мою страницу A history of Pop Will Eat Itself (http://dev.opera.com/articles/view/new-structural-elements-in-html5/pwei_sample_html5.html) – историю и дискографию одной из моих любимых музыкальных групп 80/90-х (если вам нравится альтернативная музыка, пожалуйста, подтвердите это). Я использовал исходную разметку страницы Wikipedia Pop will Eat Itself (http://en.wikipedia.org/wiki/Pop_Will_Eat_Itself), почистил ее, и превратил в HTML5. Давайте внимательно посмотрим на то, что было сделано.

intuit.ru/2010/edi»>Держите пример страницы открытым в отдельной вкладке во время чтения статьи – вы можете захотеть вернуться к ней.

Пример использует традиционную проверенную оболочку <div> для размещения контента по центру, но Крок Камен опубликовал интересную статью о создании центрированного дизайна без оболочки <div> (http://camendesign.com/code/developpeurs_sans_frontieres), поэтому я подумал, что покажу ее здесь также. Также полезно порекомендовать не использовать элементы HTML5 <section> в качестве оболочки на страницах HTML5 – это просто совершенно неверно!

Некоторые мета-различия

Первое, что вы заметите, состоит в том, что doctype значительно проще, чем в более старых версиях HTML:

<!DOCTYPE html>

Создатели HTML5 выбрали самую короткую возможную строку doctype для этой цели — в конце концов, почему разработчик должен помнить длинную строку, содержащую множество URL, когда в действительности doctype присутствует здесь только для того, чтобы задать для браузера стандартный режим (в противоположность необычному режиму)?

intuit.ru/2010/edi»>Затем, я хотел бы привлечь ваше внимание к кажущимся «слабым синтаксическим требованиям» HTML5. Я добавил кавычки вокруг всех значений атрибутов, и написал все элементы строчными буквами, но это, на самом деле, связано с привычкой писать по правилам XHTML. Но для кого-то может показаться удивительным открытие, что в HTML5 можно при желании игнорировать эти правила. Фактически не нужно даже беспокоиться о том, чтобы использовать элементы <head>, <body>, или <html>, все будет по-прежнему допустимо!

Примечание: Это не так, если вы переключаетесь на использование XHTML (HTML работающий с doctype XHTML— application/xhtml+xml )

Дело в том, что такие элементы подразумеваются браузером в любом случае. Если создать пример страницы HTML5 без этих элементов, загрузить ее в браузер и посмотреть исходный код загруженной страницы, то можно заметить, что они будут автоматически вставлены браузером. Иначе можно воспользоваться утилитой-просмотрщиком Яна Хиксона Live DOM (http://software.hixie.ch/utilities/js/live-dom-viewer/), чтобы увидеть состояние DOM.

Примечание: На самом деле можно также отправить на проверку документ HTML4, не содержащий <head>, <body>, или <html>, но это, тем не менее, стоит здесь отметить.

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

Не означает ли это, что нам не нужно больше беспокоиться о проверке правильности и эффективных методах работы? ВОВСЕ НЕТ! Проверка правильности по-прежнему является очень полезным инструментом для создания страниц насколько возможно хорошими. Даже если DOM совместим с браузерами, он по-прежнему может вести себя, прежде всего не так, как требуется, создавая проблемы в CSS и JavaScript! И как вы увидите при дальнейшем изучении HTML5, существуют очень серьезные причины для проверки, что такие свойства документа как <html> объявляются явно. Например, вы можете захотеть объявить язык документа в элементе <html> для интернационализации и улучшения доступности, и это требуют также некоторые связанные технологии. Хорошим примером является AppCache (http://dev.opera.com/articles/view/offline-applications-html5-appcache/).

Для проверки документов HTML5 можно использовать валидатор W3C (http://validator.w3.org/), который может проверять HTML5, а также большой спектр других разновидностей языков разметки. Или использовать специальный валидатор HTML5 (+ WAI-ARIA и MathML) по адресу validator.nu (http://validator.nu/).

ru/2010/edi»>В конце этого раздела я хочу привлечь ваше внимание к следующей строке:

<meta charset="utf-8" />

Вам необходимо объявить множество символов документа среди первых 512 байтов, чтобы защититься от серьезной угрозы безопасности. Если нет действительно серьезной причины не делать это, то рекомендуется использовать множество символов UTF-8.

<header>

Верхний колонтитул документа выглядит следующим образом:

<header>
  <hgroup>
    <h2>A history of Pop Will Eat Itself</h2>
    <h3>Introducing the legendary Grebo Gurus!</h3>
  </hgroup>
</header>

Назначение элемента <header> состоит в создании оболочки вокруг раздела контента, который формирует верхний колонтитул страницы, содержащий обычно логотип компании/графику, заголовок основной страницы, и т. д.

<hgroup>

Вы можете заметить, что в приведенном выше коде, единственным контентом колонтитула является элемент <hgroup>, содержащий два заголовка. Я хочу здесь определить заголовок документа верхнего уровня, плюс подзаголовок/ключевую фразу. Мне нужно, чтобы только заголовок верхнего уровня учитывался в иерархии заголовков документа, и именно это делает элемент <hgroup> — он позволяет учитывать группу заголовков как один заголовок в структуре документа. Подробнее о работе иерархии заголовков в HTML5 будет написано ниже в разделе «Разбивка HTML5 и алгоритм заголовков HTML5».

<footer>

Внизу документа можно увидеть следующий код:

<footer>
  <h4>Copyright and attribution</h4>
</footer>

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

Примечание: Не существует ограничения только на один верхний и нижний колонтитул на страницу — страница может содержать несколько статей, и иметь для каждой статьи верхний и нижний колонтитул.

<nav>

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

<nav>
  <h3>Contents</h3>
    <ul>
      <li><a href="#Intro">Introduction</a></li>
      <li><a href="#History">History</a>
      
      <!—другие навигационные ссылки ... -->
      
    </ul>
</nav>

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

<aside>

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

<aside> <table> <!—- множество кратких фактов в этом месте --> </table> </aside>

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

<figure> и <figcaption>

Динамический дуэт из <figure> и <figcaption> был создан для решения достаточно специального множества проблем. Прежде всего, не казалось ли всегда немного семантически сомнительно и неясно размечать рисунок и его подпись как два параграфа, или как пару списка определений, или как-то иначе? И второе, что делать, когда требуется рисунок, состоящий из изображения, или двух изображений, или двух изображений и некоторого текста? Элемент <figure> хорошо подходит, чтобы объединить весь контент, из которого вы хотите составить один рисунок, будет ли это текст, изображения, SVG, видео, или что-то другое. Элемент <figcaption> затем помещается внутри элемента <figure>, и содержит описательный заголовок для этого рисунка. В мой пример включен простой рисунок, чтобы просто показать, как это используется:

<figure>
  <img src="pwei.png" alt="Old poppies logo" />
  <figcaption>
    The old poppies logo, circa 1987.<br /> <a href="http://www.flickr.com/photos/bobcatrock/317261648/">
     Original picture on Flickr</a>, taken by bobcatrock. 
  </figcaption>
</figure>

Пример страницы HTML5

Пример страницы HTML5

Этот одноразовый сайт предоставляет простой шаблон для создания страницы HTML5.

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

📋 Просто скопируйте и вставьте следующий HTML-шаблон.

🤖 Если эта страница запрашивается из инструмента командной строки, то она вернет только HTML-шаблон. Тип wget html5example.com или curl -L html5example.com > index.html или

http https://html5example.com > index.html в вашей оболочке, чтобы создать новый файл HTML5. Подсказка: добавьте псевдоним для создания новых файлов шаблонов в вашем проект, когда вы хотите.

 

<голова>
  <мета-кодировка="utf-8">
  Пример страницы HTML5
  
  
  

<тело>
  <заголовок>
     

Пример страницы HTML5

<навигация> <ул>
  • Главная
  • О нас
  • Контакты
  • <статья>

    Это заголовок

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

    Это подзаголовок для большего содержания

    <ул>
  • Ненумерованные списки имеют базовые стили.
  • Они используют стиль кругового списка. <ул>
  • Вложенный элемент списка 1
  • Второй элемент вложенного списка
  • Еще один элемент списка
  • <ол>
  • Упорядоченные списки также имеют базовые стили.
  • Они используют десятичный стиль списка. <ул>
  • Вложенный элемент списка 1
  • Второй элемент вложенного списка
  • Последний элемент списка
  • <в сторону>

    Это расширенный контент

    <рисунок> Описание первого изображения
    Подпись к первому изображению
    <рисунок> Описание второго изображения
    Подпись ко второму изображению
    Описание одного изображения без подписи webp"/>

    Кнопка привязки

    <цитата> «Печально известная цитата»
    – Атрибуция
    <час> <детали> Расширяемый заголовок

    Открытый контент

    <детали> Еще один расширяемый заголовок

    Больше опубликованного контента

    Это пример кода
    .some-class {
      цвет фона: красный;
    
      
      <раздел>
         

    Это другой заголовок

    <дел> Это коробочный элемент.
    <дел> Это еще один коробочный элемент.

    Это таблица

    <таблица> Имя Количество Цена Сырное фондю <тд>1 23 евро Пицца <тд>10 10 000,00 евро Вафли <тд>1 14,30 евро

    А это форма

    <форма> <дел>
    <дел>