Структура документа html5: Структура кода | htmlbook.ru — Вебджем.рф

Содержание

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

HTML5 | Семантическая разметка и структура документа

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

Информационно-осознанная структурная семантическая разметка html-документа легко и просто сменила классическую косметическую информационно-безликую блочную div-верстку, придав осмысленность структуре подаваемой информации. Простота семантической разметки html-документа объясняется фактом появления в спецификации HTML5 ряда целевых и наполненных смыслом тегов для оборачивания важных элементов по информационному содержимому (контенту), а не по визуальному представлению страницы в браузере.

Назначение семантической разметки
Пользователи семантики – пауки и ридеры
Структура HTML-документа
Семантическая структура HTML-документа
Вёрстка семантического шаблона (макета)
Реклама в семантике страницы

Назначение семантической разметки

Семантическая разметка несет поисковым роботам, браузерам и программам-ридерам (чтецам) информацию о типе, важности и акцентировании контентного содержания html-документа для облегчения его машинной обработки.

Семантическая разметка не имеет отношения к внешнему виду (представлению) страницы на экране, для визуализации html-элементов подключаются стилевые правила.

Пользователи семантики – пауки, обозреватели, ридеры

Поисковые пауки особенно «полюбляют» семантическую структуру веб-документа, помогающую определиться с индексацией контента (содержащегося материала). Не отстают от поисковиков в любви к html-семантике браузеры и ридеры (обозреватели и чтецы), часто скрывающие в режиме чтения колонтитулы страницы (header и footer), навигационные (nav) и связанные (aside) элементы.

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

Традиционно, код веб-страницы в HTML5 начинается элементом <!DOCTYPE html>, определяющим тип документа. Единственный и неповторимый тег html с атрибутом указания языка содержащегося контента lang=»ru» обрамляет два основных элемента html-документа: <head> – блок неотображаемой на экране служебной информации и <body> – видимая в браузере часть веб-страницы. Между тегами <body></body> находится тема семантической разметки.

1.<!DOCTYPE html>
2. <html lang="ru">
3.  <head>
4.   Служебная информация
5.  </head>
6.  <body>
7.   Семантическая разметка контента
8.  </body>
9. </html>

Семантическая структура документа

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

<header>, <nav>, <main> и <footer>.

<header>: Вводная информация документа. Сквозной элемент, отображающийся на всех сайто-страницах возглавляемого домена. Хедер (header) – визитная карточка документа, его «шапка», верхний колонтитул. Служит идентификатором контента в области принадлежности сайту, разделу, категории, домену. Обязательно содержит логотип сайта и заголовок страницы h2. Допускается размещение в хедере элементов сайтовой навигации.
<main>: Контейнер в <body> основного уникального содержимого, не допускающего дублирование на сайте. Текст, рисунки, видео, аудио и т.п., в <main> – исключительно в единственном и неповторимом экземпляре в пределах сайта (блога, домена).
Скромно умалчиваемый в практических руководствах, чисто! семантический элемент <main> – главное действующее лицо семантической разметки. <main> не содержит сквозные типовые повторяющиеся блоки страниц: шапку сайта (хедер), подвал (футер), сайтовую навигацию (нав), боковые панели (<div>), формы для поиска, регистрации, входа и т.д. Содержимое <main> индексируется поисковыми системами в первую очередь. В документе (на странице) – исключительно один элемент <main>. <main> не вкладывается в другие семантические элементы: <article>, <aside>, <footer>, <header>, <nav> .. .
Боковая панель (sidebar) в <main>
Возлелеянная яростной div-ной версткой, сквозная боковая панель навигации не входит в элемент <main> ни в каком виде. Горячо любимый рунетом сквозной боковой, повторяющийся на всех страницах, блок не получил собственного семантического тега HTML5, не предусмотрен семантической разметкой и служит исключительно удобству (юзабилити) юзера, отвлекая его от настоящих семантических элементов навигации. С большой нужды, боковая панель веб-страницы верстается div-ом, расположенным за пределами структуры вложений элемента <main> и визуально выравнивается стилями.
Контентные html-элементы внутри <main> обрамляются тегами соответствующего назначения:
картинки – <img>, <picture>, <figure> …;
заголовки, тексты, списки и цитаты – <h3 … h6>, <р>, <ul>, <ol>, <strong> и <em> вместо <b> и <i>, <blockquote> …;
видео – <video> . ..;
аудио – <audio> и т.д.
Безликий элемент <div> в <main> – крупная дичь исключительно визуального назначения!
<footer>: Нижний колонтитул веб-документа, «подвал» статьи (сайта, раздела), содержит дополнительную информацию технического или правового характера: автор, контакт, копирайт, ссылки доп.меню, кнопка «Вверх» и т.д
<nav>: Блок основных приоритетных ссылок навигации, обычно расположен в колонтитуле страницы (хедере или футере) или между ними.

Семантическая структура html-документа

1. <header>
2.  <h2>Заголовок сайта</h2>
3.  <nav>
4.   Ссылки (сайто- навигация)
5.  </nav>
6. </header>
7. <main>
8.  Контент (неповторимый)
9. </main>
10. <footer>
11.  Копирайт, контакт, «про автора»
12. </footer>

Вёрстка семантического шаблона (макета)

Семантический шаблон (макет) веб-страницы – минимализм, лаконичность и логика, позволяющая избежать дублирования материала. Первым делом отказался от многочисленных раскрашенных менюшек и тупого поиска. CSS-трюки (закруглюшки, тенюшки, плюшки и финтиклюшки) – в прошлом, блок основной сайтовой навигации (<nav>) – одинокий воин в хедере семантической страницы.

Абзацы-черновики:

Семантические теги
<article> <aside> <audio> <canvas> <command> <datalist> <details> <figcaption> <figure> <footer><header> <hgroup> <keygen> <main> <mark> <menu> <meter> <nav> <output> <progress> <rp><rt> <ruby> <section> <source> <summary> <time> <video> <wbr>

Реклама в семантике страницы

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

Сердца почтенных юзеров наполнились теплотой термина «семантическая разметка», подаваемого под соусом некоего магического продукта, способного вознести поисковую индексацию сайта (блога) до невиданных высот. Трепетное отношение к новорождённым html-тегам сменилось легким недоумением, переросшим в банальный профессионализм контентных интернет-авторов и верстальщиков шаблонов веб-страниц.

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

Поисковые пауки усовершенствовались гораздо быстрее. Без дополнительных указаний со стороны, поисковики отлично и самостоятельно разбираются с назначением и важностью индексируемой информации, прекрасно понимая идентичность элементов <header>, <div> и <header>.

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

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

Источник: HTML5 Semantic Tags: What Are They and How To Use Them!
Перевод источника: Секреты использования семантической вёрстки в HTML5

HTML

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

Вы здесь

Главная → Блог → HTML → Построение структуры документа в HTML5 используя section

Дата:31.03.15 в 9:45

Раздел:

В первую очередь следует рассмотреть строение структуры документа HTML. Имеется ввиду именно семантическая структура, которую в некоторых отдельных случаях неопытный пользователь путает с деревом документа (DOM).

Построение структуры документа в среде HTML4

При создании документа в среде HTML4 логическая структуризация базировалась на использовании тегов заголовков – h2, h3,..,h6. Для наглядности стоит рассмотреть следующий пример:

<div>
   <h2>Важный заголовок</h2>
   <p>Какое-либо содержимое страницы</p>
   <div>
      <h3>Подзаголовок</h3>
      <p>Какое-либо содержимое страницы</p>
   </div>
</div>

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

1. Важный заголовок
   1.1. Подзаголовок

В вышеуказанном примере присутствуют теги div, которыми можно пренебречь в силу того, что на семантическое строение документа они не оказывают никакого влияния и используются только для выстраивания визуального оформления через CSS в будущем. С точки зрения семантики нас интересуют исключительно заголовки.

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

<h2>Важный заголовок</h2>
<p>Какое-либо содержимое страницы</p>
<h3>Подзаголовок</h3>
<p>Какое-либо содержимое страницы</p>

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

Недостатки семантики HTML4

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

Выстраиваем структуру документа по стандартам HTML5

Секции

В первую очередь для пояснения понятия секций необходимо перечислить неотъемлемые составляющие, с помощью которых они формируются: <header>, <body>, <section>, <article>, <aside>, <nav> и <footer>. Корневая секция представляется тегом <body>. В качестве примера следует изучить следующий код:

<section>
   <h2>Важный заголовок</h2>
   <section>
      <h3>Подзаголовок 1</h3>
      <p>Какое-либо содержимое страницы</p>
   </section>
   <section>
      <h3> Подзаголовок 2</h3>
      <p>Какое-либо содержимое страницы</p>
   </section>
   <aside>
      <p>Информация сайдбара</p>
   </aside>
</section>
<footer>
   <section>
      <p>Копирайты</p>
   </section>
</footer>

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

Вышеуказанная секционное строение носит явный характер. На практике также встречается и не явное секционирование, которое осуществляется посредством заглавных тегов <h2>-<h6>.

Примеры на практике

Ниже представлен скриншот сайта с указанием основных его структурных частей:

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

<header>
   <h2>Vaden pro</h2>
   [форма поиска]
   <nav>
      <ul>
      [содержимое меню]
      </ul>
   </nav>
   <p>слоган</p>
</header>
 
<section>
   [описание страницы блога]
</section>
 
<div>
   <section>
      <article>
         [вывод превью статьи]
      </article>
      <article>
         [вывод превью статьи]
      </article>
   </section>
 
   <acide>
      [сайдбар]
   </acide>
</div>

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

Значимость тега div в HTML5

В новом HTML5 тег <div> теряет свою значимость в сравнении с предыдущей четвертой версией. Теперь div отвечает исключительно за оформление, как некоторых отдельных секций, так и всего документа в целом. Семантического значения у этого тега нет, следственно располагаться этот тег может где угодно, тем самым не оказывая влияния на семантику страницы сайта.

Итог

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

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

Оценок: 5 (средняя 4 из 5)

Оценка:

Ключевые слова:

Cтруктура html

Понравилась статья? Расскажите о ней друзьям:

Еще интересное

Изучите HTML5.

Глобальная структура

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

Тип документа

Во-первых, нам нужно указать тип документа, который мы создаем. В HTML5 это чрезвычайно просто:

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

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

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

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

<заголовок>

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

<голова>

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

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

Этот тег не изменился из предыдущих версий HTML:

<голова>

<тело>

<мета>

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

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

<тело>

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

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

<мета имя="ключевые слова" содержание="HTML5">

<тело>

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

<название>

Тег, как обычно, просто указывает заголовок документа, и в нем нет ничего нового, чтобы комментировать его. <br /> <!DOCTYPE HTML> <br /><htmlязык="ru"> <br /> <голова> <br /> <метакодировка="utf-8"> <br /><meta name="description" content="Это пример HTML5"> <br /> <мета имя="ключевые слова" содержание="HTML5"> <br /><title>название документа

<тело>

Примечание. Обычно этот текст отображается браузерами в верхней части окна.

<ссылка>

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

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

<мета имя="ключевые слова" содержание="HTML5">
Этот текст является заголовком документа
css»>

<тело>

В HTML5 больше нет необходимости указывать, какую таблицу стилей мы вставляем, поэтому атрибут типа был удален. Нам нужны только два атрибута для включения нашего файла стилей: rel и href . Атрибут rel означает отношение, и речь идет об отношении между документом и файлом, который мы включаем. В этом случае атрибут rel имеет таблицу стилей значений, которая сообщает браузеру, что файл edu4javastyles.css представляет собой файл CSS со стилями, необходимыми для отображения страницы.

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

Результатом нашего кода в этот момент будет;

HTML5-Body Structure >>

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

Сью Смит

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

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

Создать страницу HTML5

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

Начните с создания нового документа HTML5 следующим образом:

 

<голова>
Демонстрация HTML5
<тип стиля="текст/CSS">


<тело>

Обратите внимание, что первая строка, тип документа HTML5, обязательна при использовании новых элементов HTML5. (Не знакомы с doctypes? Вы можете узнать больше в этой статье.)

Мы не будем тратить много времени на стилизацию в этой статье, но важно добавить следующие два объявления в CSS