Структура html5: Структура кода | htmlbook.ru

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

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

Раздел

Следующий элемент, с которым вы должны познакомиться, — это элемент HTML5 section . Спецификация определяет раздел следующим образом:

Элемент

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

Далее поясняется, что раздел 9 0052 не следует использовать в качестве универсального контейнера, который существует только для целей стилизации или сценариев. Если вы не можете использовать раздел в качестве универсального контейнера, например, для достижения желаемого макета CSS, то что вам следует использовать? Наш старый друг, элемент div , семантически бессмысленный.

Возвращаясь к определению из спецификации, содержимое элемента

Каждый раз, когда новая семантическая разметка становится доступной для веб-дизайнеров, возникают споры о том, что представляет собой правильное использование этих элементов, каково было намерение спецификации и так далее. Возможно, вы помните обсуждение правильного использования элемента dl в предыдущих спецификациях HTML. Неудивительно, что HTML5 не застрахован от этого явления, особенно когда речь идет об элементе раздела . Даже Брюс Лоусон, авторитетный специалист по HTML5, признался в использовании раздел неправильно в прошлом. Для ясности стоит прочитать пост Брюса, объясняющий его ошибку.

Короче:

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

• раздел имеет семантическое значение ; это подразумевает, что содержание, которое оно содержит, каким-то образом связано. Если вы не можете кратко описать весь контент, который вы пытаетесь поместить в секция , используя всего несколько слов, скорее всего, вместо этого вам нужен семантически нейтральный контейнер: скромный div .

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

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

Элемент

Элемент , статья аналогичен элементу , раздел , но есть некоторые заметные отличия. Вот определение согласно спецификации:

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

Ключевыми терминами в этом определении являются автономный состав и независимо распространяемый . В то время как раздел может содержать любой контент, который может быть тематически сгруппирован, статья должна быть отдельным фрагментом контента, который может стоять сам по себе. Это различие может быть трудно усвоить, поэтому, если вы сомневаетесь, попробуйте проверить синдикацию: если часть контента может быть повторно опубликована на другом сайте без изменений или если ее можно отправить в виде обновления через RSS, или на сайтах социальных сетей, таких как Twitter или Facebook, у него есть задатки статья .

В конечном счете, вам решать, что представляет собой статья, но вот некоторые предложения в соответствии с рекомендациями в спецификации:

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

Навигация

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

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

Примечание. Пропуск навигационных ссылок

Шаблон проектирования, который вы, возможно, видели реализованным на многих сайтах, — это ссылка «пропустить навигацию». Идея состоит в том, чтобы позволить пользователям программ чтения с экрана быстро пропустить основную навигацию вашего сайта, если они уже слышали ее — в конце концов, нет смысла прослушивать все меню навигации большого сайта каждый раз, когда вы переходите на новую страницу! 9Элемент 0051 nav может устранить эту потребность; если средство чтения с экрана увидит элемент nav , оно может позволить пользователям пропускать навигацию, не требуя дополнительной ссылки. Спецификация гласит: «Пользовательские агенты (например, программы для чтения с экрана), предназначенные для пользователей, которые могут извлечь выгоду из того, что навигационная информация не отображается при первоначальном рендеринге, или которые могут извлечь выгоду из немедленного доступа к навигационной информации, могут использовать этот элемент как способ определить, какой контент на странице изначально пропускать или предоставлять по запросу (или и то, и другое)».

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

Примечание. Пользовательские агенты

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

Вы можете использовать nav более одного раза на данной странице. Если у вас есть основная панель навигации для сайта, для этого потребуется элемент nav . Кроме того, если у вас есть вторичный набор ссылок, указывающих на разные части текущей страницы (используя привязки на странице или «локальные» ссылки), его тоже можно обернуть в элемент nav .

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

Это решение, в конечном счете, зависит от вас, разработчика. Ян Хиксон, главный редактор спецификации HTML5 WHATWG, прямо ответил на вопрос: «Используйте [это] всякий раз, когда вы использовали бы class=nav». [7]

Элемент

9Элемент 0051 aside можно использовать для переноса части контента, касающейся:

Элемент aside никогда не следует использовать для переноса разделов страницы, являющихся частью основного контента; другими словами, помимо не должно быть скобками. Контент в стороне от может стоять сам по себе, но он все равно должен быть частью большего целого.

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

Нижний колонтитул

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

.

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

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

Примечание: как мы сюда попали?

Если вам интересно узнать о пути к HTML5 и о том, как мы пришли к тегам, которые мы сделали, вы можете прочитать книгу Люка Стивенса под названием 9. 0023 Правда о HTML5 . В настоящее время в своем 2-м издании книга Луки несколько противоречива. В дополнение к рассмотрению многих технологий HTML5, таких как видео и холст, он также подробно описывает историю HTML5, объясняя некоторые семантические проблемы и проблемы доступности, присущие новым элементам, и дает некоторые рекомендации о том, как справиться с этими проблемами.

---

^[7] См. http://html5doctor.com/nav-element/#comment-213.

Поделиться этой статьей

Louis Lazaris

Louis работает в индустрии веб-разработки с 2000 года и является соредактором контента HTML/CSS на SitePoint. Он ведет блог в Impressive Webs и курирует Web Tools Weekly, информационный бюллетень для фронтенд-разработчиков, в основном посвященный инструментам.

htmlHTML5 Учебники и статьи

Пример структуры страницы HTML5 — Web Code Geeks

HTML5 — это пятая и новейшая версия стандарта HTML.

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

Некоторые функции HTML5 по-прежнему не поддерживаются некоторыми браузерами, но ведется работа по обеспечению доступности всех функций.

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

1. Структура HTML5

1.1 Настройка

Первое, что нужно сделать, это объявить, что страница использует разметку HTML5, используя !DOCTYPE html в верхней части документа.

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

Теперь очень просто использовать метакодировку, например: meta charset="UTF-8" . Продолжая метатеги, мы должны упомянуть мета http-equiv="X-UA-Compatible" content="IE=edge" . Но что это?

По сути, Internet Explorer позволяет вам определить, какая версия движка используется для отображения страницы, используя X-UA-Compatible META-тег или HTTP-заголовок. Можно указать конкретную версию или последнюю версию, используя значение «IE=edge».

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

Затем используйте html lang="en" для ссылки на код языка, который используется в html-документе.

1.2 Сайт, оптимизированный для мобильных устройств

Типичный сайт, оптимизированный для мобильных устройств, содержит следующее:

meta name="viewport" content="width=device-width, initial-scale=1" управляет размером области просмотра. Его можно установить на определенное количество пикселей, например, ширина = 600, или на специальное значение ширины устройства, которое представляет собой ширину экрана в пикселях CSS в масштабе 100%.

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

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

1.3 Ссылки

Важная часть внутри тега head — это связывание самых разных элементов, таких как шрифты, стили, скрипты и т. д.

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

1.4 Завершение

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

 

<голова>
<мета-кодировка="UTF-8">










  
 

1.5 HTML-структура основного макета

Ваш HTML-документ, как и настоящий документ, должен состоять из трех основных частей: заголовка , тела и нижнего колонтитула .

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

 <заголовок>
<тело>
<нижний колонтитул>
 

1.6 Понимание заголовка

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

Элемент заголовка обычно содержит: один или несколько элементов заголовка (h2 – h6), логотип или значок, информацию об авторстве.

Кроме того, заголовок может иметь полнофункциональную панель навигации и карусель, что усложняет его.

Основными тегами, используемыми внутри заголовка, будут nav , UL , LI , A , DIV , Раздел , SPAN , Вход , Label и т. Д. заголовок> <навигация> <ул>

Главная

Профиль

О нас

<тип ввода="поиск">

Это мой заголовок.

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

1.7 Основные сведения о теле

Тело содержит наиболее релевантное содержимое вашего HTML-документа и основные элементы страницы.

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

Большинство браузеров отображают элемент со следующими значениями по умолчанию:

 тело {
    дисплей: блок;
    поле: 8px;
}
тело: фокус {
    контур: нет;
}
 

Тело может содержать такое большое количество тегов (элементов) как форма , артикул , ул/ол , ли , основной , раздел 2 а сторона ,

.

Но он также содержит определенные предварительно стилизованные элементы, такие как datetime , progres , select и т. д. Ну, если вам интересно, что все эти теги означают или для чего используются, просто имейте в виду, что это все вопрос семантики. Возьмем, к примеру, ul или ol тег:

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

Позже мы еще поговорим о семантическом коде. На данный момент примером простого тела страницы будет:

 
 
Это основной раздел
 
<раздел>


<раздел>
<ул>
Функция 1
Функция 2
Функция 3

Подробнее

<раздел>
<форма>
<тип ввода="отправить">
<тип ввода="текст">


<в сторону>
<дел>

<рисунок>
Это первое изображение
 jpg">
Это второе изображение


<статья>
Lorem ipsum dolor sit amet


 

1.8 Понимание нижнего колонтитула

Элемент нижнего колонтитула обычно содержит:

информацию об авторстве, информацию об авторских правах, контактную информацию, карту сайта, ссылки вверх и т. д.

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

Простой нижний колонтитул будет выглядеть так:

 <нижний колонтитул>
<ул>
Справочный центр
О нас
Контакты
Карта сайта

 
Все права защищены | Экселиксис Медиа, ООО
 




 

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

2. Все дело в семантическом коде!

2.1 Что такое семантический код?

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

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

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

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

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

2.2 Почему важен семантический код?

Способность компьютера понимать ваш контент важна по ряду причин:

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

— Поисковые системы должны понимать, о чем ваш контент, чтобы правильно ранжировать вас в поисковых системах. Семантический код имеет тенденцию улучшать ваше положение в поисковых системах, так как он легче для «пауков поисковых систем».

Однако у семантического кода есть и другие преимущества:

Как видно из приведенного выше примера, семантический код короче и поэтому загружается быстрее.

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

3. Графические макеты HTML5

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

Существуют различные макеты, однако некоторые из них показаны ниже:

Макеты веб-страницы

4. Пример веб-страницы

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

HTML5. Вы найдете этот пример в виде ZIP-файла, доступного для загрузки в разделе загрузки ниже.

<голова>

<метакодировка="utf-8" />





<тело>
<дел>
<дел>
<дел>
<дел>
<дел>
<заголовок>
 
Минимаксирование 
<навигация>
Главная страница
Два столбца №1
 html">Две колонки #2
Один столбец
Три столбца