Семантические элементы в HTML5.

Оцените материал
(1 Голосовать)

  Здравствуйте!  В этой статье разговор пойдет о семантических элементах в HTML5. Эти элементы помогают веб-разработчику  разметить страницу на основные части и также поисковику будет легче  распознавать  отдельные части страницы. До  HTML5 в разметке страниц  использовался тег  <div>, которому присваивали классы  или реже  идентификаторы id для структурирования и организации разметки страницы. Таким образом на веб-странице  распологали  хедер, боковые панели, навигацию, подвал (футер)  и многое другое. Новый стандарт HTML5 предоставил разработчикам  новые теги  для структурирования, организации содержимого и разметки страницы. Новые семантические элементы HTML5 позволили структурировать документ по отдельным частям, чего так раньше не хватало.

 Семантические элементы HTML5

 

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

 

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

 Секционные элементы

Элемент <header>

Данный элемент предназначен для  отображения  верхней (шапки) части страницы.  Он объединяет  меню, логотип в общем все что находится в верхней части сайта. На веб-странице может  быть одновременно больше одного элемента <header>.

 

<header>
  <hgroup>
    <h1>...</h1>
    <h2>...</h2>
  </hgroup>
</header>
<header>
  <hgroup>
    <h1>...</h1>
    <h2>...</h2>
  </hgroup>
</header>

Элемент <hgroup>

Он предназначен  для группировки элементов заголовков  <h1> - <h6> это требуется когда заголовок имеет сложную структуру

<hgroup>
 <h1>...</h1>
 <h2>...</h2>
</hgroup>
<hgroup>
<h1>...</h1>
<h2>...</h2>
</hgroup>

Элемент <nav>

Предназначен для создания панели навигации меню, и всего что связано с меню.

<nav>
  <ul>
    <li><a>...</a></li>
    <li><a>...</a></li>
    <li><a>...</a></li>
  </ul>
</nav>
<nav>
  <ul>
    <li><a>...</a></li>
    <li><a>...</a></li>
    <li><a>...</a></li>
  </ul>
</nav>

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

<nav>
  <p><a href="/">...</a></p>
  <p><a href="/">...</a></p>
</nav>
<nav>
  <p><ahref="">...</a></p>
  <p><ahref="">...</a></p>
</nav>

И  можно размещать  заголовки внутри элемента:

<nav>
  <h2>...</h2>
    <ul>
      <li><a>...</a></li>
      <li><a>...</a></li>
      <li><a>...</a></li>
    </ul>
</nav>
<nav>
  <h2>...</h2>
    <ul>
      <li><a>...</a></li>
      <li><a>...</a></li>
      <li><a>...</a></li>
    </ul>
</nav>

Элемент <article>

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

<article>
  <header>
    <h2>...</h2>
  </header>
  <p>...</p>
  <footer>
  Опубликовано в категории<a href="/?cat=3" > Новости</a>.
    <a href="/?p=17#respond">5 комментариев</a>
  </footer>
</article>
<article>
  <header>
    <h2>...</h2>
  </header>
  <p>...</p>
  <footer>
  Опубликовано в категории<ahref="/?cat=2">Новости </a>.
    <ahref="/?p=17#respond">4 комментария</a>
  </footer>
</article>

Элемент <section>

Используется для разделения страницы или статьи на темматические разделы или подразделы.

<article>
  <h1>...</h1>
    <section>
      <h2>...</h2>
      <p>...</p>
    </section>
    <section>
      <h2>...</h2>
      <p>...</p>
    </section>
    <p>...</p>
</article>
<article>
  <h1>...</h1>
    <section>
      <h2>...</h2>
      <p>...</p>
    </section>
    <section>
      <h2>...</h2>
      <p>...</p>
    </section>
    <p>...</p>
</article>

Элемент <aside>

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

<aside>
  <h2>...</h2>
  <p>...</p>
</aside>
<aside>
  <h2>...</h2>
  <p>...</p>
</aside>

Элемент <footer>

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

<footer>
  <address>...</address>
  <small>@2017...</small>
</footer>
<footer>
  <address>...</address>
  <small>@2017...</small>
</footer>

Элемент <address>

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

Группировка контента

Элементы <figure> и <figcaption>

Эти элементы нужны для  группировки картинок, причем figcaption служит подписью к картинкам.

<figure>
    <img src="/picture.jpg" alt="Зима">
    <figcaption>Зимний лес</figcaption>
</figure>
<figure>
    <img src="/picture.jpg"alt="Весна">
    <figcaption>Весенний лес</figcaption>
</figure>

 

Семантические элементы  для текстового содержимого

Элементы для поддержки языков Восточной Азии <rp>, <rt> и <ruby>

Тег <rp> устанавливает, что показывать, если браузер не поддерживает аннотаций типографики Восточной Азии. Используется вместе с тегами <ruby> и <rt>.

Тег <rt> добавляет аннотацию, объясняя написание символов Восточной Азии заключенных в контейнер <ruby>.

Тег <ruby> объясняет написание символов.

Элемент <time>

Нуджен для отображения даты и времени

Пример <time datetime="2016-09-25T12:00"> 25 Сентября 2016</time>.

Элемент <mark>

Предназначен для выделения важного содержимого.

Элемент <wbr>

Показывает браузеру где надо вставить новый разрыв строки.

Прочитано 1223 раз Последнее изменение Среда, 02 августа 2017 18:42
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

Поиск по сайту

Связной трэвел

Google+