Разное

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

23.06.2021

Содержание

Структура тела документа | Учебник HTML5

Структура тела документа.

Структура тела документа (код между тегами <body>) определяет его видимую часть. Именно в этом коде находится содержимое веб-страницы.

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

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

Основным элементом стал <div>. С появлением интерактивных веб-приложений и взаимной интеграции HTML, CSS и JavaScript использование <div> стало привычной практикой. Однако этот элемент, как и <table>, не дает достаточно информации о той части тела документа, которую он представляет. Между открывающим и закрывающим тегами <div> может находиться все, что угодно: меню, текст, ссылки, сценарии, формы и т. д. Другими словами, ключевое слово div всего лишь указывает на некую составляющую тела документа, например на ячейку в таблице, однако ничего не говорит о том, что это за составляющая, каково ее назначение и что находится внутри нее.

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

Именно поэтому в HTML5 появились новые элементы, помогающие определить каждую часть документа и упорядочить его тело. В HTML5 документ делится на несколько важных разделов, и основная структура больше не зависит от тегов <div> и <table>.

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

Вам также могут быть интересны следующие статьи:

» УРОК 1. СТРУКТУРА HTML ДОКУМЕНТА

Перед началом работы создадим файл index.html, который будем редактировать в блокноте (Notepad++). 

 

Задаем тип документа с помощью <doctype>

Строка  <!DOCTYPE html> идет первой в файле HTML и перед ней не должно быть пробелов и пустых с трок.

 

<html>

Внутри элемента <html

> помещается весь код

В теге html указываем атрибут lang, который определяет язык содержимого в документе

<head> — голова

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

Содержимое тега, за исключением заголовка, не отображается в браузере.

 

 

<body> — тело

<meta> — метатеги

Кодировка символов  в теге head указывается следующим через метатэг <meta charset=»utf-8″>

В description и keywords указывается описание сайта (description) и ключевые слова (keywords)

<title> — заголовок страницы

Чрезвычайно важный тег.

Заголовок указывается в теге head:

<title>Разработка сайтов с помощью HTML5</title>

 

<link> — ссылка на style.css

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

     <link rel=»stylesheet» href=»style.css»> 

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

Таблица стилей — это набор правил форматирования, по­зволяющий менять внешний вид документа, например размер и цвет текста. Без таких правил текст и другие элементы отображаются на экране с использованием стандартных стилей браузера. Стили представляют собой простые правила, занимающие обычно всего несколько строк кода, и их можно объявить в самом документе HTML. Загрузка стилей CSS из внешнего файла упрощает структуру основного документа, увеличивает скорость загрузки веб-сайта, а также позволя­ет воспользоваться преимуществами новых возможностей HTML5.[1]

В HTML5 не нужно указывать тип подключаемой таблицы стилей (атрибут type больше не используется). Достаточно двух атрибутов: rel и href. Название атрибута rel происходит от англ. relation (отно­шение), и его значение определяет, чем для нашего документа является подключаемый файл. В данном случае атрибуту rel присвоено значение stylesheet, то есть мы сообщаем браузеру, что styles.css — это CSS-файл со стилями.

[1] Гоше X. Д. HTML5. Для профессионалов. — СПб.: Питер, 2013. — 496 с

Язык гипертекстовой разметки HTML5 — его структура и основы работы с ним » Мистерия онлайна: продвижение сайтов, способы заработать в интернете

Продолжаем цикл статей об основах веб-языков и разработках в этой области. Ранее мы ознакомились с основами гипертекстового языка  HTML, его особенностями и методами разметки текста (тегами).

Также нам стало известно, что язык HTML иесно взаимодействует с такими программными разработками, как стили CSS и Javascript и для чего необходимо такое сотрудничество языков. Сегодня мы в подробностях будем рассматривать структуру построения документов на HTML5. Блочное построение документа, его структура – тема сегодняшней статьи. Но вначале нужно понять, что такое HTML5.

Язык программирования HTML5 (от английского HyperText Markup Language) – это пятая версия языка. Как и все предыдущие версии, предназначен для выстраивания структуры документов и представления их в сети. На данный момент версия HTML5 находится в стадии разработки. Цель, преследуемая созданием пятой версии HTML – улучшение языка в области его работы с документами мультимедиа (аудио- и видеоприложениями).

Добавление некоторых синтаксических новшеств, таких, как <audio>, <video> и <canvas>, позволит минимизировать логические и синтаксические ошибки при работе HTML5 с мультимедийными файлами. Также для обогащения семантического содержимого документа (семантика – изучение значения языковых единиц) вводятся и новые значение, такие, как <article>, <section>, <nav> и <header>. Некоторые из атрибутов будут удалены или изменены. Вводятся новые возможности для обработки недопустимых документов, так что все браузеры будут способны работать с такого рода документами.

Что такое DOCTYPE?

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

где PUBLIC обозначало доступность документа к прочтению, а DTD обозначает тип публикующихся документов (Document Type Definition). Определение DOCTYPE в HTML5 намного упрощено — < !DOCTYPE HTML>. Это все – разметка готова.

Так за какие действия отвечает объявление DOCTYPE? Этот тег предназначен для сообщения браузерам о том, какой стандарт языка использовать – от определения версии HTML будет зависеть визуализация страницы в целом, её рендеринг. Стандарты разработки HTML строго регламентированы и следуют определенным правилам, поэтому работа с чужими кодами, их чтение и отображение в браузере за счет использования стандартов заметно упрощается.

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

Условно можно разделить всю страницу, написанную на HTML, на несколько подразделов. Корень основного кода всей страницы – тег  <html>. То есть,  между тегами <html> и <html> можно расположить практически все, что угодно. Схематично страница на языке  HTML представлена так:

Например:

1

< !DOCTYPE HTML><html lang="ru" xml:lang="ru">< !—Любой текст, изображения, таблицы и т.д. --></html>

< !DOCTYPE HTML><html lang=»ru» xml:lang=»ru»>< !—Любой текст, изображения, таблицы и т.д. —></html>

В нашем случае тег <html> </html> вмещает в себя атрибут, определяющий  язык документа – русский. Для облегчения работы с документом необходимо указывать язык документа. Все содержимое страницы находится именно между тегами <html> …. </html>, кроме объявления DOCTYPE.

Тег <head> так называемая голова документа. Все необходимые данные о странице (как для работы браузера, так и информативные данные для разработчика) располагаются между <head> и </head>. Заголовок страницы, её код – например, UTF-8, meta-данные, такие, как ключевые слова, описание страницы, имя автора и т.д. – все подобные данные находятся именно между тегами <head> и </head>. Здесь же можно подключить внешние файлы, скрипты и библиотеки.

Что такое meta-теги?

В них, как было сказано выше, заключается вся информация о странице. Основные мета-теги описаны ниже:

1.    Тип кодировки страницы – Charset. В большинстве случаев используется UTF8, но можно задействовать и другие кодировки, например – windows-1251, KOI-8, ISO и т.д. Такой атрибут, как Charset, определяет, какую кодировку использовать для чтения страницы. В HTML5 этот атрибут выглядит следующим образом:

1

<meta charset="utf-8" />

<meta charset=»utf-8″ />

Ранее же эта строка выглядела вот так:

1

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<meta http-equiv=»content-type» content=»text/html; charset=UTF-8″ />

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

Мета-тег Description, то есть – краткое содержание страницы. Например:

1

<meta name="description" content="Язык HTML, версия №5, её возможности и описание основных принципов работы " />

<meta name=»description» content=»Язык HTML, версия №5, её возможности и описание основных принципов работы » />

Мета-тег Author указывает на то, что страница составлена конкретно каким-либо автором. Например:

1

<meta name="author" content="Сергей Колычев" />

<meta name=»author» content=»Сергей Колычев» />

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

Мета-тег, обозначающий заголовок страницы или записи на странице – title. Выглядит тег таким образом:

1

<title>Определение HTML и структура языка. | vashsite.com</title>

<title>Определение HTML и структура языка. | vashsite.com</title>

Отображается заголовок в названии открывающегося окна или вверху страницы.

Мета-теги link и script используются для подключения к исполнению файлы стилей, внешние файлы и библиотеки. Например, таблицы стилей CSS и JavaScript, а также библиотека jQuery. Выглядят строки подключения этих файлов так:

1

<link rel="stylesheet" href="style.css" /><script src="js/jquery.js"></script>

<link rel=»stylesheet» href=»style.css» /><script src=»js/jquery.js»></script>

То есть, для понимания сути этих строк можно представить себе такую ситуацию – файлы CSS и JavaScript на сервере лежат, но без этих строк в документе они просто не будут работать. Небольшой нюанс для использования этих тегов – файлы могут быть как на локальном сервере, так и на удаленном. В последнем случае в мета-тегах необходимо указать полный путь к файлам. В нашем примере мета-тег link используется для подключения файла CSS и использует ссылочные отношения (link relation). Эта подпись дает знать браузеру, что данный файл является файлом стилей. Тег rel  имеет также множество других значений.

Альтернативой первому варианту подключения файла стилей может быть такая строка:

1
2
3
4

<style type="text/css">
    a { text-decoration: underline; }
    p { color: #000000; }
</style>

<style type=»text/css»> a { text-decoration: underline; } p { color: #000000; } </style>

Такой способ напрямую подключает стиль к странице, без подключения файла стилей.

Самый значимый тег в HTML документе – тег <body>. Он также имеет закрывающее окончание </body>. Все данные, которые содержатся внутри этого тега, определяют содержимое страницы – её контент, изображения на странице, всю ссылочную массу, содержащуюся в тексте и т.д. Таким образом, вся информация, которая располагается до тега <body>, можно заключить в своего рода неизменяемый шаблон. Содержимое же тела — <body> </body> может редактироваться, заменяться, улучшаться.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

< !DOCTYPE HTML>
<html lang="en" xml:lang="en">
 
<head>
    <meta charset="utf-8" />
    <title>Design Shack</title>
    <meta name="description" content="A Very Basic HTML5 Anatomy" />
        <link rel="stylesheet" href="style.css" />
    <script src="js/jquery.js"></script>
</head>
 
<body>
  <!-- Page Content Goes Here -->
</body>
</html>

< !DOCTYPE HTML> <html lang=»en» xml:lang=»en»> <head> <meta charset=»utf-8″ /> <title>Design Shack</title> <meta name=»description» content=»A Very Basic HTML5 Anatomy» /> <link rel=»stylesheet» href=»style.css» /> <script src=»js/jquery.js»></script> </head> <body> <!— Page Content Goes Here —> </body> </html>

Если схематично представить структуру HTML страницы, то она будет выглядеть так:

Это так называемая объектная модель документа HTML (DOM).

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

Оцените статью по 5-бальной шкале:

Загрузка…

Вконтакте

Facebook

Twitter

Google+

Понравилась запись? Подпишитесь на обновления по почте:

TwitterFacebook

Почему не нужно использовать семантические элементы HTML5 – POPEL Agency

HTML5 — качественный скачок для веб-разработки. Он дал веб-разработчикам множество инструментов, которых нам по-настоящему не хватало. Но не все нововведения HTML5 одинаково полезны. Так, есть вполне объективные причины отказаться от использования элементов header, footer, nav, aside, article и section. Но обо всем по порядку.

Структура документа

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

Во всех версиях HTML до HTML5 структура документа составляется из заголовков — элементов h2-h6. Каждый заголовок одного уровня включает в себя все, что находится «под ним» вплоть до следующего заголовка такого же уровня. Напомню, что страница не должна содержать более одного заголовка h2. Рассмотрим упрощенный пример типичной верстки блога:

<h2>Мой бложек</h2>
    <h3>Последние записи</h3>
        <h4>Не могу по карте найти выход из леса, помогите!</h4>
        <h4>Наконец купил себе iPhone 5! Теперь я самый модный парень на районе!</h4>
        <h4>Сегодня вышел iPhone 5! Коплю деньги и питаюсь ягодками и грибочками</h4>

    <h4>Сайдбар</h4>
        <h5>Архив записей</h5>
        <h5>Популярные записи</h5>
        <h5>Облако тегов</h5>

    <h5>Другое</h5>
        <h5>Я на твитторе</h5>
        <h5>Мои фоточки на Instagram</h5>
        <h5>Блог моего братюни Коляна</h5>

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

Структура документа

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

Обновленная структура документа

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

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

В первом черновом варианте спецификации не увидевшего свет XHTML 2.0 было предложено новое решение проблемы создания структуры документа. Оно предполагало создания разделов с использованием тега section и общего тега h для всех заголовков. Это приводит нас к текущему положению вещей в HTML5.

Создание структуры документа в HTML5

В HTML5 попытались внедрить концепцию создания структуры документа из XHTML 2.0 в HTML и при этом сохранить определенную долю обратной совместимости. Результаты неоднозначны. Вот как предлагается создавать структуру документа в HTML5:

  • Каждый раздел документа определяется одним из четырех секционных тегов: section, article, nav и aside; теги h2-h6 для создания разделов в структуре документа не используются. Цель — решить проблемы ограниченности h2-h6 о которой я писал выше.
  • В HTML5 нет общего тега h для всех заголовков. Вместо этого в чистом HTML5 предлагается использовать h2 для всех заголовков, уровень любого заголовка будет определяться уровнем его вложенности в секционных тегах.
  • Но чистого HTML5 на данный момент не существует, поэтому в целях обратной совместимости нужно использовать теги h2-h6.

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

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

В 2009 году, Йен Хиксон, создатель тестов Acid2 и Acid3, а также один из авторов спецификации HTML5, сказал следующее:

Они [новые элементы], более или менее реализуют наиболее частые просьбы веб-разработчиков на основании наиболее распространенных значений атрибута class. Их основным предназначением является упрощение верстки и создания стилей.

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

Сторонникам HTML5 стоило объяснять назначение новых элементов доступнее, либо вовсе от них отказаться. Теперь фактически мы имеем две версии HTML5: официальная версия от W3C и WHATWG и версия веб-сообщества.

Правильная разметка страницы с использованием HTML5

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

  • Теги section, article, nav и aside используются для создания структуры разделов документа.
  • Теги header и footer используются внутри каждого раздела для определения шапки и подложки раздела соответственно. В данном контексте разделом могут быть как разделы, созданные с помощью новых элементов, так и корневой раздел — сам элемент body.
  • Теги h2-h6 используются для создания заголовков разделов в структуре документа, а также для обратной совместимости (читай «совместимости в ближайшем будущем», ведь на данный момент почти никто не поддерживает HTML5-структуру документов).
Такая схема неверна! Не используйте ее!

Думаете, можно просто заменить все элементы div новыми элементами? Как бы не так! Согласно спецификации, секционные элементы нельзя использовать там, где нужна простая зацепка для каскадных стилей, так что элементы div из «чистого» HTML5-документа никуда не денутся. Более того, в «чистом» HTML5-документе будут:

  • группа элементов section, article, nav и aside для создания структуры;
  • куча элементов div для создания стилей;
  • избыточное использование тегов h2-h6 для создания обратной совместимости;
  • все это приправлено избыточными элементами header и footer внутри каждого раздела, которые ничего не делают.

Вы уже чувствуете «упрощение верстки»? Ну, тогда перейдем к «упрощению создания стилей».

Создание стилей для заголовков в HTML5

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

Допустим, у нас есть элемент h2, на третьем уровне вложенности (по сути, элемент h4). Какой именно селектор будет его выбирать в наших таблицах стилей? Можете себе представить селекторы для выбора заголовков всех уровней? Не волнуйтесь, я вам помогу:

h2 {font-size: 36px} /* h2 */
section h2 {font-size: 28px} /* h3 */
section section h2 {font-size: 22px} /* h4 */
section section section h2 {font-size: 18px} /* h5 */
section section section section h2 {font-size: 16px} /* h5 */
section section section section section h2 {font-size: 14px} /* h6 */

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

Количество селекторов для выбора заголовков всех уровней растет в геометрической прогрессии!

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

Что же делать?

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

Альтернатива, о которой я пишу — это WAI-ARIA (далее ARIA). Это не часть спецификации HTML5, это отдельная спецификация W3C, совместимая с HTML5, HTML4 и XHTML 1. Суть сводится к добавлению атрибута role некоторым элементам.

Сама спецификация очень-очень большая, но нас интересует лишь подраздел, который называется landmarks. Он определяет названия для областей веб-страницы. Вот пример простой веб-страницы с использованием областей ARIA:

<div role="banner"></div>
<div role="main"></div>
<div role="complementary"></div>
<div role="contentinfo"></div>

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

При написании статьи использовались материалы с сайта netmagazine.com

Что такое семантическая вёрстка и зачем она нужна — Блог HTML Academy

Давным-давно (лет пятнадцать назад) почти все делали сайты и не переживали о том, что под капотом. Верстали таблицами, использовали всё, что попадётся под руку (а попадались в основном div и span) и не особо заморачивались о доступности. А потом случился HTML5 и понеслось.

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

Почему семантика важна

Чтобы сделать сайт доступным. Зрячие пользователи могут без проблем с первого взгляда понять, где какая часть страницы находится — где заголовок, списки или изображения. Для незрячих или частично незрячих всё сложнее. Основной инструмент для просмотра сайтов не браузер, который отрисовывает страницу, а скринридер, который читает текст со страницы вслух.

Этот инструмент «зачитывает» содержимое страницы, и семантическая структура помогает ему лучше определять, какой сейчас блок, а пользователю понимать, о чём идёт речь. Таким образом семантическая разметка помогает большему количеству пользователей взаимодействовать с вашим сайтом. Например, наличие заголовков помогает незрячим в навигации по странице. У скринридеров есть функция навигации по заголовкам, что ускоряет знакомство с информацией на сайте.

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

Классический пример — расписание поезда «Сапсан» в выдаче Google.

Разработчики tutu.ru сверстали таблицу тегом table вместо div и их сниппет оказался в выдаче Google по важному коммерческому запросу.

Семантика прописана в стандартах. Многие разработчики по старинке пользуются конструкциями типа <divnav»></div>. Или вот такой код. Смотрите и сразу понятно, что тут и зачем.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Заголовок страницы</title>
  </head>
  <body>
    <header>
      <!— Шапка сайта —>
    </header>
    <main>
      <!— Основное содержимое страницы —>
    </main>
    <footer>
      <!— Подвал сайта —>
    </footer>
  </body>
</html>

Основные семантические теги HTML

Среди «старых» тегов из ранних версий HTML тоже есть семантические — например, тег <p>, который обозначает параграф. При этом теги <i> или <b> не семантические, потому что они не добавляют смысла выделенному тексту, а просто определяют его внешний вид.

Но в актуальной версии стандарта HTML Living Standard есть семантические теги почти для всех основных частей сайта, и лучше пользоваться ими. Вот несколько примеров семантических тегов.

<article>

  • Значение: независимая, отделяемая смысловая единица, например комментарий, твит, статья, виджет ВК и так далее.
  • Особенности: желателен заголовок внутри.
  • Типовые ошибки: путают с тегами <section> и <div>.

<section>

  • Значение: смысловой раздел документа. Неотделяемый, в отличие от <article>.
  • Особенности: желателен заголовок внутри.
  • Типовые ошибки: путают с тегами <article> и <div>.

<aside>

  • Значение: побочный, косвенный для страницы контент.
  • Особенности: может иметь свой заголовок. Может встречаться несколько раз на странице.
  • Типовые ошибки: считать <aside> тегом для «боковой панели» и размечать этим тегом основной контент, который связан с окружающими его элементами.

<nav>

  • Значение: навигационный раздел со ссылками на другие страницы или другие части страниц.
  • Особенности: используется для основной навигации, а не для всех групп ссылок. Основной является навигация или нет — на усмотрение верстальщика. Например, меню в подвале сайта можно не оборачивать в <nav>. В подвале обычно появляется краткий список ссылок (например, ссылка на главную, копирайт и условия) — это не является основной навигацией, семантически для такой информации предназначен <footer> сам по себе.
  • Типовые ошибки: многие считают, что в <nav> может быть только список навигационных ссылок, но согласно спецификации там может быть навигация в любой форме.

<header>

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

<main>

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

<footer>

  • Значение: заключительная часть смыслового раздела или всего сайта, обычно содержит информацию об авторах, список литературы, копирайт и так далее. Чаще всего повторяется на всех страницах сайта.
  • Особенности: этих элементов может быть несколько на странице. Тег <footer> не обязан находиться в конце раздела.
  • Типовые ошибки: использовать только как подвал сайта.

Как разметить страницу с точки зрения семантики

Процесс разметки можно разделить на несколько шагов с разной степенью детализации.

  1. Крупные смысловые блоки на каждой странице сайта. Теги: <header>, <main>, <footer>.
  2. Крупные смысловые разделы в блоках. Теги: <nav>, <section>, <article>, <aside>.
  3. Заголовок всего документа и заголовки смысловых разделов. Теги: <h2>-<h6>.
  4. Мелкие элементы в смысловых разделах. Списки, таблицы, демо-материалы, параграфы и переносы, формы, цитаты, контактная информация и прогресс.
  5. Фразовые элементы. Изображения, ссылки, кнопки, видео, время и мелкие текстовые элементы.

Более подробно методика создания семантической разметки описана в навыке «Создание семантической разметки по макету» и профессиональных курсах HTML Academy.

Создание семантической разметки по макету

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

Изучить

Сомневаюсь, какие теги использовать

Есть простые правила для выбора нужных тегов.

  • Получилось найти самый подходящий смысловой тег — использовать его.
  • Для потоковых контейнеров — <div>.
  • Для мелких фразовых элементов (слово или фраза) — <span>.

Правило для определения <article>, <section> и <div>:

  1. Можете дать имя разделу и вынести этот раздел на другой сайт? — <article>
  2. Можете дать имя разделу, но вынести на другой сайт не можете? — <section>
  3. Не можете дать имя? Получается что-то наподобие «новости и фотогалерея» или «правая колонка»? — <div>

Как точно не нужно делать

Не используйте семантические теги для украшательств. Для этого есть CSS.

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

Здесь сразу несколько ошибок:

  1. Тег <blockquote> должен использоваться для выделения в тексте цитат, а не просто случайного выделения текста. Так совпало, что в браузерах этот блок по умолчанию выделен, но это не значит, что нужно его использовать таким образом.
  2. Тег <ul> тоже использован для визуального «сдвига» текста. Это неверно, потому что этот тег должен быть использован только для обозначения списков, а во-вторых, в тег <ul> можно вкладывать только теги <li> и ничего больше.
  3. Тег <p> использован, чтобы визуально раздвинуть текст. На самом деле этот тег используется для выделения параграфов.

А любое выделение, сдвиг или иные превращения текста можно выполнить с помощью CSS.

Поэтому используйте семантические теги по назначению.

HTML5 Структура, Синтаксис, и Семантика

  • Урок 0. 00:05:15

    5.1. Пишем комментарии

  • Урок 0. 00:05:26

    4.3. Используем div в HTML5

  • Урок 0. 00:07:28

    4.4. Работаем со списками в HTML5

  • Урок 0. 00:08:21

    4.5. Правильно выделяем текст

  • Урок 0. 00:08:17

    4.6. Семантика элемента <cite>

  • Урок 0. 00:05:55

    4.7. Используем элемент <adress>

  • Урок 0. 00:03:56

    4.8. Используем элемент <small>

  • Урок 0. 00:05:12

    4.9. Используем элемент <mark>

  • Урок 0. 00:10:09

    4.10. Работаем с <date> и <time>

  • Урок 0. 00:07:47

    4.11. Определяем взаимоотношения между ссылками

  • Урок 0. 00:06:55

    4.2. Группируем контент с помощью aside

  • Урок 0. 00:07:05

    5.2. Работаем с мета тегами

  • Урок 0. 00:10:37

    5.3. Используем атрибуты \»class\» и \»id\»

  • Урок 0. 00:07:27

    5.4. Используем aria landmark roles

  • Урок 0. 00:06:34

    5.5. Введение в microformats, microdata и RDFa

  • Урок 0. 00:07:06

    5.6. Используем microdata

  • Урок 0. 00:05:34

    5.7. Вложенная расширенная информация

  • Урок 0. 00:06:09

    5.8. Проверяем семантику страницы

  • Урок 0. 00:02:39

    Дополнительные ресурсы

  • Урок 0. 00:02:17

    3.6. Определяем основной контент

  • Урок 0. 00:00:53

    1.2. Файлы упражнений

  • Урок 0. 00:02:10

    2.1. Что такое семантика в web

  • Урок 0. 00:03:57

    2.2. Семантика HTML5

  • Урок 0. 00:05:40

    2.3. Модели контента в HTML5

  • Урок 0. 00:05:01

    3.1. Структурируем документ HTML5

  • Урок 0. 00:03:46

    3.2. Определение документов HTML5

  • Урок 0. 00:04:16

    3.3. Поддержка устаревших браузеров

  • Урок 0. 00:04:26

    3.4. Организовываем контент

  • Урок 0. 00:07:44

    3.5. Создаем разделы документа

  • Урок 0. 00:01:12

    1.1. Вступление

  • Урок 0. 00:08:51

    3.7. Используем заголовки правильно

  • Урок 0. 00:03:56

    3.8. Пишем навигационую панель

  • Урок 0. 00:06:32

    3.9. Верная вложенная структура

  • Урок 0. 00:07:33

    3.10. Структурируем хэдеры

  • Урок 0. 00:04:11

    3.11. Структурируем футеры

  • Урок 0. 00:04:01

    3.12. Проверяем структуру документа

  • Урок 0. 00:03:07

    3.13. Корневые элементы

  • Урок 0. 00:06:52

    4.1. Работаем с figure и figcaption

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

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

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

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

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

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

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

    
<!DOCTYPE html>

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

    
<!doctype html>

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

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

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

    Плохо:

    
<SECTION>
  <p>Это параграф текста.</p>
</SECTION>

    Очень плохо:

    
<Section>
  <p>Это параграф текста.</p>
</SECTION>

    Хорошо:

    
<section>
  <p>Это параграф текста.</p>
</section>

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

    В HTML5 вы не обязаны закрывать все элементы (например, элемент <p>). Тем не менее, мы все же рекомендуем закрывать все HTML элементы.

    Плохо:

    
<section>
  <p>Это параграф текста.
  <p>Это параграф текста.
</section>

    Хорошо:

    
<section>
  <p>Это параграф текста.</p>
  <p>Это параграф текста.</p>
</section>

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

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

    Допустимо:

    
<meta charset="utf-8">

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

    
<meta charset="utf-8" />

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

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

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

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

    Мы рекомендуем в именах атрибутов всегда использовать только маленькие буквы. Это вызвано следующими причинами:

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

    Плохо:

    
<div>

    Хорошо:

    
<div>

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

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

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

    Очень плохо:

    
Это не будет работать, потому что в значении есть пробелы
<table class=table striped>

    Плохо:

    
<table class=striped>

    Хорошо:

    
<table>

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

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

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

    Плохо:

    
<img src='html5.gif'>

    Хорошо:

    
<img src='html5.gif' alt="HTML5">

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

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

    Плохо:

    
<link rel = "stylesheet" href = "styles.css">

    Хорошо:

    
<link rel="stylesheet" href='styles.css'>

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

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

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

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

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

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

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

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

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

    
<body>

  <h2>Famous Cities</h2>

  <h3>Tokyo</h3>

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

</body>

    Лучше:

    
<body>

<h2>Famous Cities</h2>

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

</body>

    Таблица:

    
<table>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Description of A</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Description of B</td>
  </tr>
</table>

    Список:

    
<ol>
  <li>London</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ol>

    Пропускать или нет <html> и <body>?

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

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

    
<!DOCTYPE html>
<head>
  <title>Заголовок страницы</title>
</head>

<h2>Это текстовый заголовок</h2>
<p>Это абзац текста.</p>

    Однако мы не рекомендует пропускать теги <html> и <body>.

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

    
<!DOCTYPE html>
<html lang="en-US">

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

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

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

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

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

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

    
<!DOCTYPE html>
<html>
<title>Заголовок страницы</title>

<body>
  <h2>Текстовый заголовок</h2>
  <p>Это текстовый абзац.</p>
</body>

</html>

    Однако мы не рекомендуем пропускать тег <head>, так как это еще не вошло в повседневную практику и может запутать веб-разработчиков.

    Метаданные

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

    
<title>Стандарты синтаксиса и кодирования в HTML5</title>

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

    
<!DOCTYPE html>
<html lang="ru-RU">
<head>
  <meta charset="UTF-8">
  <title>Стандарты синтаксиса и кодирования в HTML5</title>
</head>

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

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

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

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

    
<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

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

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

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

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

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

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

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

    
<!-- Это комментарий -->

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

    
<!-- 
  Это пример длинного комментария. Это пример длинного комментария.
  Это пример длинного комментария. Это пример длинного комментария.
-->

    Длинные комментарии легче читать, если они имеют отступ в два пробела.

    Таблицы стилей

    Используйте простой синтаксис для подключения внешних каскадных таблиц стилей (атрибут type не нужен):

    
<link rel="stylesheet" href='styles.css'>

    Короткие правила могут записываться в сжатом виде в одну строку:

    
 p.intro {font-family: Verdana; font-size: 16em;}

    Длинные правила следует записывать на нескольких строках:

    
 body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
    • Открывающие скобки размещайте на одной строке с селектором
    • Используйте один пробел перед открывающими скобками
    • Для отступов используйте два пробела
    • После каждой пары свойство-значение, включая последнюю, ставьте точку с запятой
    • Кавычки используйте только со значениями, содержащими пробелы
    • Закрывающие скобки пишите на новой строке без отступа
    • Старайтесь, чтобы длина записи на одной строке была не больше 80 символов

    Загрузка JavaScript в HTML

    Для загрузки внешних скриптов Javascript используйте простой синтаксис (атрибут type не нужен):

    
<script src='myscript.js'>

    Доступ к HTML элементам при помощи JavaScript

    «Неряшливость» во время кодирования HTML может привести к ошибкам в работе скриптов JavaScript.

    Следующие два выражения JavaScript дадут разные результаты:

    
var obj =  getElementById("Demo")

var obj = getElementById("demo")

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

    Некоторые веб-серверы (Apache, Unix) являются регистрозависимыми при обращении к файлам, т. е. к файлу с именем «london.jpg» нельзя получить доступ как «London.jpg».

    Другие веб-серверы (Microsoft, IIS) на размер букв в именах файлов не обращают внимание, т. е. к файлу с именем «london.jpg» можно обращаться как «London.jpg», так и «london.jpg».

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

    Если вы переносите свой сайт с регистронезависимого на регистрозависимый сервер, то малейшая ошибка может обрушить весь ваш ресурс!

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

    Расширения файлов

    HTML файлы должны иметь расширение .html или .htm.

    CSS файлы должны иметь расширение .css.

    JavaScript файлы должны иметь расширение .js.

    Разница между .htm и .html

    Нет никакой разницы между расширениями .htm и .html. Файлы и с одним и с другим расширением будут рассматриваться любым браузером или веб-сервером как файл с HTML кодом.

    В настоящее время разница между ними лежит лишь в культурной плоскости:

    • .htm отдает духом ранних DOS систем, у которых были ограничения на длину расширения файла в 3 символа.
    • .html напоминает о системах Unix, у которых таких ограничений не было.

    Технические особенности

    Если в URL не указывается имя файла (например, http://example.com/css/), то сервер передаст файл по умолчанию. Обычно файлами по умолчанию являются index.html, index.htm, default.html и default.htm.

    Если на сервере в качестве имени файла по умолчанию установлено только имя «index.html», то и у вас должен быть файл с именем «index.html», но никак не «index.htm».

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

    В любом случае полное расширение для HTML файлов — это .html, и нет никаких причин, почему его не следует использовать.

    Вверх Миграция с HTML4 на HTML5

    Структура HTML-документа до и после HTML5 — вот что изменилось »

    Раскрытие информации: Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальный сбор за некоторые услуги, которые мы рекомендуем на этой странице. Узнать больше

    Если вы хотите писать семантическую разметку — и поверьте нам, вы действительно хотите писать семантическую разметку — тогда вам необходимо правильно структурировать HTML-документы. Элементы html , head и body были частью спецификации HTML с середины 1990-х годов, а еще несколько лет назад они были основными элементами, используемыми для структурирования документов HTML.Однако за последние несколько лет ситуация кардинально изменилась, поскольку HTML5 добавил множество новых тегов, которые можно использовать для добавления богатого семантического значения в структуру HTML-документа.

    Структура документа HTML До HTML5

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

    Элемент head — это первый элемент, который появляется после открывающего тега html . В документе head мы размещаем такие вещи, как страница title и метаданных , мы добавляем JavaScript на нашу страницу с тегом script , и мы [ link ] к внешним таблицам стилей и другим ресурсам.

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

    Все содержимое, которое отображается на веб-странице, вложено между открывающими и закрывающими тегами body . Тело — это основной контейнер содержимого, составляющего веб-страницу.

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

    Новые семантические теги, добавленные HTML5

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

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

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

    Используйте элемент main между header и footer элементами, чтобы содержать основное содержимое вашей веб-страницы. Элемент main не может быть потомком article , aside , header , footer или nav element. Вместо этого он должен быть прямым потомком элемента body . Думайте об этом как о прямой замене div , который вы использовали в прошлом для завершения всего содержимого вашей страницы.

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

    <нижний колонтитул> <адрес>

    Джон - писатель-фрилансер, любитель путешествий, муж и отец. Он пишет о веб-технологиях, таких как WordPress, HTML и CSS.

    Структурные элементы HTML5

    Структурные элементы HTML5

    Вернуться на страницу 3 недели »

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

    Кузов

    Элемент body содержит все содержимое нашего документа.

    Обычно охватывает все, кроме мета-элемента и его подэлементов.

    Основной

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

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

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

      


   
    Рецепт чили 


    
     Книга рецептов 
     
   
   
          <основная>  
       
     Рецепт чили 
     
      
     Инструкции ...