В настоящее время мы все знаем, что мы должны использовать HTML5 для создания веб-сайтов.Обсуждение в настоящее время движется по тому, как использовать HTML5 правильно.Одним из важных элементов HTML5, который все еще широко не понял в секционирования содержания: section article aside и nav.Чтобы понять секционирования содержания, мы должны понять, документ с изложением algorithm.

Понимание документ, определяющий алгоритм может быть проблемой, но награда того стоит.Вам больше не мучиться по поводу того, чтобы использовать section или div element  —   вы будете знать сразу.Кроме того, вы будете знать, why эти элементы используются, и это знание семантики является большим преимуществом обучения, как алгоритм works.

Что такое документ, определяющий алгоритм

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

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

Вот и все, это: хороший, чистый, легкий для восприятия список заголовков, отображаемых в hierarchy  —   так же, как таблицу contents.

Чтобы сделать вещи еще проще, есть только две вещи в вашей наценки влияет на контур веб-страницы:

• рубрика content (h1 до h6 и hgroup),
• секционирования content (section article aside и nav).

Очевидно, что секционирование контент-новому HTML5 для создания контуров.Но прежде чем попасть в это, давайте вернемся к HTML 101 и рассмотрим, как все мы должны использовать headings.

Создание Контуры с заголовком Content

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

<div>				
   <h1>Horses for sale</h1>

   <h2>Mares</h2>

   <h3>Pink Diva</h3>
   <p>Pink Diva has given birth to three Grand National winners.</p>

   <h3>Ring a Rosies</h3>
   <p>Ring a Rosies has won the Derby three times.</p>

   <h3>Chelsea’s Fancy</h3>
   <p>Chelsea’s Fancy has given birth to three Gold Cup winners.</p>

   <h2>Stallions</h2>

   <h3>Korah’s Fury</h3>
   <p>Korah’s Fury has fathered three champion race horses.</p>

   <h3>Sea Pioneer</h3>
   <p>Sea Pioneer has won The Oaks three times.</p>

   <h3>Brown Biscuit</h3>
   <p>Brown Biscuit has fathered nothing of any note.</p>

   <p>All our horses come with full paperwork and a family tree.</p>
</div>

Это так просто.Схема на рисунке 1, создается уровней headings.

Только так вы знаете, что я не выдумываю, вы должны скопировать и вставить код выше в Джеффри Sneddon ‘ы отличные изложением tool.Нажмите на большую “Структура этой” кнопке, и вуаля

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

Неявной разделе закончился заголовок на том же уровне или выше.В нашем примере, “Mares” раздел закончилась в начале “Жеребцы” раздел, и каждый раздел, который содержит подробную информацию о отдельными лошадь закончилась в начале следующего one.

На рисунке 3 показан пример неявного раздел, который заканчивается с заголовком на одном уровне.И рисунке 4 является неявным раздел, который заканчивается с заголовком высшего level.

<h3>Sea Pioneer</h3><!-- start of implicit section -->
<p>Sea Pioneer has won The Oaks three times.</p>
 
<h3>Brown Biscuit</h3><!-- This heading starts a new implicit section,
so the previous Sea Pioneer section is closed -->

<h3>Chelsea’s Fancy</h3><!-- start of implicit section -->
<p>Chelsea’s Fancy has given birth to 3 Gold Cup winners.</p>
 
<h2>Stallions</h2><!-- this heading starts a new implicit section
using a higher level heading, so Chelsea’s Fancy is now closed -->

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

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

<div>
   <h6>Horses for sale</h6>
	
   <section>
      <h1>Mares</h1>

      <article>
         <h1>Pink Diva</h1>
         <p>Pink Diva has given birth to three Grand National winners.</p>
      </article>
	
      <article>
         <h5>Ring a Rosies</h5>
         <p>Ring a Rosies has won the Derby three times.</p>
      </article>
	
      <article>
         <h2>Chelsea’s Fancy</h2>
         <p>Chelsea’s Fancy has given birth to three Gold Cup winners.</p>
      </article>
   </section>

   <section>
      <h6>Stallions</h6>

      <article>
         <h3>Korah’s Fury</h3>
         <p>Korah’s Fury has fathered three champion race horses.</p>
      </article>
	
      <article>
         <h3>Sea Pioneer</h3>
         <p>Sea Pioneer has won The Oaks three times.</p>
      </article>

      <article>
         <h1>Brown Biscuit</h1>
         <p>Brown Biscuit has fathered nothing of any note.</p>
      </article>			
   </section>

   <p>All our horses come with full paperwork and a family tree.</p>
</div>

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

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

section article aside и nav элементов, что создает контур, и на этот раз сечения называются явными sections.

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

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

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

Я настоятельно советую, что до browsers  —   и, что более важно, экран readers  —   понимаем, что секционирования содержанию представляет подраздел, используя несколько h1 элементов является менее безопасным, чем использование заголовка структуры, что отражает уровень каждого заголовка в документе, как показано на рисунке 6 below.

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

На момент написания этой статьи, не браузеров или программ чтения с экрана внедрили описанием алгоритма, который является, почему мы должны сторонних инструментов тестирования, таких как планировщик.В последних версиях Chrome и Firefox стиль h1 элементов во вложенных разделах разному, но, что очень отличается от фактической реализации algorithm.

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

   <div>
      <h1>Horses for sale</h1>

      <section>
         <h2>Mares</h2>

         <article>
            <h3>Pink Diva</h3>
            <p>Pink Diva has given birth to three Grand National winners.</p>
         </article>

         <article>
            <h3>Ring a Rosies</h3>
            <p>Ring a Rosies has won the Derby three times.</p>
         </article>

         <article>
            <h3>Chelsea’s Fancy</h3>
            <p>Chelsea’s Fancy has given birth to three Gold Cup winners.</p>
         </article>
      </section>

      <section>
         <h2>Stallions</h2>

         <article>
            <h3>Korah’s Fury</h3>
            <p>Korah’s Fury has fathered three champion race horses.</p>
         </article>

         <article>
            <h3>Sea Pioneer</h3>
            <p>Sea Pioneer has won The Oaks three times.</p>
         </article>

         <article>
            <h3>Brown Biscuit</h3>
            <p>Brown Biscuit has fathered nothing of any note.</p>
         </article>			
      </section>

      <p>All our horses come with full paperwork and a family tree.</p>
   </div>

Еще один момент стоит отметить здесь положение абзаца “. Все наши лошади поставляются с полной документами и родословной” В примере, использовать заголовки, чтобы создать контур (рис. 2), этот пункт является частью неявногораздел создан “Brown Печенье” заголовок.Человека читатель ясно видим, что этот текст относится ко всему документу, а не только Браун Biscuit.

Структурирование содержания решает эту проблему довольно легко, перемещая его обратно на высшем уровне, во главе с __0 “Лошади на продажу”. |

Смешивая его Up

Итак, что же происходит, когда неявные и явные разделов секции объединены?Пока вы помните, что неявные разделов может пойти в явном разделов, но не наоборот, вам будет хорошо.Например, следующий работает хорошо и отлично действует:

   <h1>Horses for sale</h1>

   <section>
      <h2>Mares</h2>

      <h3>Pink Diva</h3>
      <p>Pink Diva has given birth to three Grand National winners.</p>

      <h3>Ring a Rosies</h3>
      <p>Ring a Rosies has won the Derby three times.</p>

      <h3>Chelsea’s Fancy</h3>
      <p>Chelsea’s Fancy has given birth to three Gold Cup winners.</p>
   </section>

И это создает разумный иерархической структуры:

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

   <h1>Horses for sale</h1>

   <h2>Mares</h2>

   <article>
      <h3>Pink Diva</h3>
      <p>Pink Diva has given birth to three Grand National winners.</p>
   </article>

   <article>
      <h3>Ring a Rosies</h3>
      <p>Ring a Rosies has won the Derby three times.</p>
   </article>
 
   <article>
      <h3>Chelsea’s Fancy</h3>
      <p>Chelsea’s Fancy has given birth to three Gold Cup winners.</p>
   </article>

Это …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров