• Главная
  •  > 
  • Android
  •  > 
  • Семантическая структура для HTML5 страницы. Семантика в HTML5

Семантическая структура для HTML5 страницы. Семантика в HTML5

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

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

Рисунок - Семантическая структура для HTML5 страницы.

DOCTYPE и meta теги в заголовке страницы

Начнем со стандартного шаблона HTML5 документа, и добавим теги meta в head:

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

Я добавил тег который отвечает за ключевые слова. И тег который отвечает за описание страницы. Для SEO оптимизации эти теги обязательны. Также обязательно корректное заполнение тега . <a href="/questions/chto-takoe-title-stranicy-chto-takoe-teg-title-chto-takoe-glavnyi-klyuch/">Title страницы</a> должен быть уникальным для всего сайта, и содержать в названии всю суть страницы для которой он указан.</p><p>Пойдем дальше. В HTML5 появились новые теги, которые используются для того чтобы делать <a href="/useful/semanticheskaya-razmetka-dlya-wordpress-plagin-chto-takoe-mikrorazmetka-i-kakie/">семантическую разметку</a> документа. Это теги header, nav, main, article, aside, footer и т.д. По отображению они работают также как и обычные <div> теги, то есть это блочные элементы. Но если <div> не имеет семантической нагрузки, то header, nav, main и другие — уже нужно использовать только осмысленно.</p><h3>Заголовок страницы</h3><p>Шапка страницы оформляется в тег header. Заметьте что заголовок страницы пишем тегом h1.</p><p> <!-- Header страницы --> <header> <h1>Site title</h1> </header> </p><p>Если у нас есть еще и слоган рядом с заголовком, то помещаем его в p, div или span.</p><p> <!-- Header страницы --> <header> <h1>Site title</h1> <p>site slogan</p> </header> </p><p><b>Замечание по поводу тега H1 </b></p><p>Следует заметить что в HTML5 тег H1 используется для указания заголовка контейнера в котором он находится (это может быть header, section, article и т.д.)</p><p>До появления HTML5 тегов семантика была несколько другой и отличалась. Так в HTML4 на странице мог быть только один заголовок H1! Как правило это был заголовок статьи или заголовок страницы (например если это страница рубрики на которой отображаются несколько статей.) H2 использовался для подзаголовков, или для разделов главной статьи. H3 для под разделов и так далее.</p><h3>Навигация на странице</h3><p>Оформление главной навигации по сайту должно заключаться в тег nav. Также следует помнить что хорошей практикой считается оформлять навигацию элементами списка.</p><p> <!-- Главная Навигация по сайту --> <nav> <ul> <li>Home</li> <li>Portfolio</li> <li>Gallery</li> <li>Contacts</li> </ul> </nav> </p><h3>Контент на странице</h3><p>Основное содержимое страницы оформляется в тег main. Это может быть одна статья, или несколько превью статей если речь идет о странице блога с несколькими записями. Нельзя помещать сайдбар, хедер страницы, футер или главную навигацию в тег main!</p><p> <!-- Основное содержимое страниц --> <main> ...основной контент страницы... </main> </p><h3>Оформление статьи</h3><p>Тег article — служит для обертки статей. В общем этот тег содержит в себе блок контента, который может быть вынут из контекста страницы, и использован отдельно в другом месте. Это может быть статья (полный тескт статьи или превью), пост на форуме, и т.п.</p><p>На примере ниже я показал оформление статьи в контексте, внутри тега main. У статьи задан блок header с заголовком статьи. Дата публикации статьи задана специальным тегом time, который отображается как обычный <a href="/network-and-internet/css-vyravnivanie-pravomu-krayu-div-vyravnivanie-svoistvom-line-height/">inline элемент</a>. У тега time есть специальный аттрибут в котором время публикации должно быть задано в машинном формате. Это может быть только дата datetime="2015-09-30" или с указанием часов минут и секунд datetime="2015-09-30T15:25:55" . Параметр pubdate указывает что статья была и опубликована в то же время что и написана. Если это новость, то может быть такое что время новости одно, а время публикации другое, для этого необходимо указать два раза тег time, и поставить pubdate только в том теге где указано время публикации.</p><p> <main> ... <!-- Статья --> <article> <!-- Шапка статьи если в шапке у нас больше чем заголовок --> <header> <!-- Заголовок статьи --> <h1>Article title</h1> <!-- Дата публикации статьи --> <time datetime="2015-09-30T15:25:55" pubdate>30 Сентября</time> </header> <!-- Подзаголовок страницы --> <h2>Article sub-title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde?</p><p>Из примера выше видна что внутри статьи были использованы теги header и footer чтобы выделить заголовок и нижний колонтитул статьи.</p><h3>Сайдбар или колонка с виджетами</h3><p>Для каждого отдельного элемента сайдбара используем блок aside. Внутри него заголовок оформляем тегом h1. Так колонка с сайдбаром может выглядеть следующим образом:</p><p> <!-- Сайдбар --> <div class="sidebar"> <!-- Виджет в сайдбаре --> <aside> <h1>Widget title</h1> ... </aside> <!-- Виджет в сайдбаре --> <aside> <h1>Последние записи</h1> ... </aside> <!-- Виджет в сайдбаре --> <aside> <h1>Популярные комментарии</h1> ... </aside> </div> </p><h3>Тег section</h3><p>Тег section — используется для представления группы или секции тематически связанного контента.Его использование похоже на article с главным отличием в том что допускается отсутствие смысла содержимого внутри элемента <section> вне контекста самой страницы. Рекомендуется использовать теги (<h1> – <h6>) для обозначения темы секции.</p><p>В качестве примера можно привести статью, которую вы сейчас читаете, можно было бы каждый параграф обернуть в тег <section> . Например тегом section можно выделять блоки контента на лендинге. Звучит похоже на определение div элемента, который часто используется как контейнер для контента. Разница в том что div не имеет семантического значения, и он не говорит не о чем про контент находящийся внутри него. Тег section , наоборот используется чтобы четко показать что контент внутри него связан по смыслу. Вы можете заменить некоторые свои div теги на section , но всегда отвечайте себе на вопрос: «Этот контент связан между собой или нет?»</p><p>Пример использования тега section в списке с перечислением городов:</p><p> <h1>An Event Apart</h1> <section> <header> <h2>Cities</h2> </header> <p>Join us in these cities in 2010.</p> <section> <header> <h3>Seattle</h3> </header> <p>Follow the yellow brick road.</p> <section> <header> <h3>Boston</h3> </header> <p>That"s Beantown to its friends.</p> <section> <header> <h3>Minneapolis</h3> </header> <p>It"s so <em>nice</em>.</p> <small>Accommodation not provided.</small> </p><h3>Подвал сайта — Footer</h3><p>Подвал сайта оформляется тегом <footer></p><p> <!-- Подвал сайта --> <footer> <p class="copyright">© 2015 сайт Copyright</p> </footer> </p><h3>Заключение</h3><p>Для проверки структуры страницы можно использовать инструмент HTML5 outliner . Он показывает структуру страницы блокам и заголовкам.</p><p>Семантика в HTML5 не ограничивается приведенными выше в статье тегами. Но используя приведенные примеры вы можете освежить свою разметку, и сделать сайт более дружелюбным к поисковым системам, что скажется на более <a href="/problem-with-os/kitaiskie-smartfony-vysokogo-kachestva-reiting-luchshii-brend/">высоком рейтинге</a> сайта в поисковой выдаче.</p><p>В продолжение темы можно изучить другие новые HTML5 теги. А также микро форматы для оформления и структуризации данных, например такие как schema.org</p><p><b>Важное замечание по использованию HTML5 тегов. </b> В спецификации не указаны жесткие правила по использованию семантических тегов, указаны лишь рекомендации п их использованию. Если вы не понимаете или не знаете где и какой HTML5 тег использовать, лучше используйте div — чтобы не навредить и не нарушить структуру документа.</p><p><b>Статьи и материалы</b></p> <p>Приложив немного усилий мы можем сделать нашу разметку более выразительной.</p> <p>Но зачем тратить <a href="/plug-ins-for-browsers/vidy-podrabotok-dlya-muzhchin-dopolnitelnyi-zarabotok-v/">дополнительное время</a> и ресурсы на обеспечение <a href="/education-and-science/semanticheski-korrektnyi-kod-rassuzhdeniya-o-semantike-koda-html-s/">семантики HTML</a>? Большинство пользователей не читают ваш HTML. И их заботит лишь то, что происходит на экране.</p> <p>Семантический HTML предназначен только для машин. Они не так умны как вы и я, поэтому мы должны помочь им.</p> <p>Примером таких машин, которые извлекают пользу из семантического HTML, могут послужить поисковые системы. Когда поисковые системы индексируют наш сайт, они интерпретируют содержание страниц сайта на основе разметки.</p> <p>Вот что говорит Google об использовании семантического HTML (курсивом выделены мои записи):</p> <blockquote class="blockquote-full"> <p>Google (и другие поисковые системы) могут использовать эти данные для лучшей индексации контента, представления его более заметными в результатах поиска и использовать её в новом ключе , например, при голосовых ответах, картах и Google Now.</p> </blockquote> <p>Языковые инструменты (переводчики) исследуют нашу разметку для того, чтобы они могли перевести наши статьи на другой язык. <a href="/disks-and-files/programma-dlya-programmirovaniya-html-css-kakoi-luchshii-redaktor-html-php-css/">Хорошая HTML</a> разметка может привести к более точному переводу. Для примера, существуют различия между американским и британским английским. Люди могут с легкостью понять диалектические и идиоматические различия, но машины этого не могут.</p> <p>Семантический HTML также повышает доступность веб-сайтов. Вспомогательные технологии, такие как программы для чтения с экрана, анализируют и интерпретируют ваш HTML. С семантическим HTML, люди с особыми потребностями смогут читать и проще ориентироваться в наших статьях.</p> <p>Это только верхушка айсберга. Есть неисчислимое количество других машин, которые смотрят на наш HTML и пытаются его понять. Черт возьми, да интернет состоит из кучи машин. Они составляют большую часть веба. Мы должны приложить все возможности, чтобы кормить их более значимыми данными.</p> <p>Окей, теперь, я надеюсь, вы на борту и хотите использовать семантический HTML. Может быть на своём блоге или при разработке CMS.</p> <p>Посмотрите на шаблон ниже.</p> <h2>HTML шаблон</h2> <p>Вот семантический <a href="/mobile-device/skachat-lending-peidzh-shablony-html-na-russkom-shablony-landing-page/">HTML шаблон</a> для веб-контента. Это хорошая отправная точка/шаблон. Просто заполните пробелы. Это общий шаблон, который может работать со многими типами текстового содержимого: записи в блоге, новостные статьи, очерки и так далее.</p><p> <!DOCTYPE html> <html itemscope itemtype="https://schema.org/Article" lang="" dir=""> <head> <title itemprop="name">

HTML-разметка шаблона использует семантические элементы (т.е. article , header и footer).

Также здесь используется структурированная разметка данных Schema.org. В частности, схемы и Веб-страница . Schema.org - это совместный проект компаний Google, Bing и Yahoo!. Целью проекта является предоставление способа для поисковых систем, лучше понимать содержимое страниц.

Пример

Вот заполненный пример:

Название страницы статьи

Заголовок статьи

Написано

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

Основная часть статьи идет здесь.

Детали

Давайте поговорим о различных частях HTML-шаблона.

Уточнение типа контента, языка и направления текста

HTML элемент имеет четыре атрибута:

  • itemscope указывает, что схема Статья используется на протяжении всего документа.
  • itemtype содержит адрес используемой схемы.
  • lang даёт информацию о том, на каком языке написано содержимое страницы. W3C говорит, что мы должны пользоваться языковыми тегами, перечисленными в IANA Language Subtag Registry . Например, если страница написана на немецком языке, мы должны присвоить атрибуту land значение de .
  • dir содержит информацию о направлении текста статьи. У вас есть два варианта. Либо «слева направо» (ltr), либо «справа налево» (rtl). Если вы хотите, чтобы браузер решил это за вас, то не используйте его.

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

Для осмысленного структурирования, мы используем следующие HTML элементы согласно спецификациям W3C.

BBC использует сопровождающее предложение ко всем своим статьям.

Структурированные данные

Шаблон использует микроданные, чтобы усилить семантическую HTML структуру.

Если вы обеспокоены использованием новых HTML5 элементов, то вы можете заменить их полностью поддерживаемыми элементами, такими как div или span. при этом вы можете обеспечить их семантическую значимость с помощью микроданных.

Ниже приводится краткое описание микроданных, используемых в HTML-шаблоне.

Микроданные Описание
name Это свойство указывает на имя пункта. В нашем случае, пункт - это статья. Свойство name нашей статьи - это заголовок веб-страницы, который представлен в элементе title . Обычно, названия веб-страниц уникальны (из-за SEO), поэтому такое название хорошо подходит, в большинстве случаев, и для статей.
headline Человекочитаемое название статьи. Некоторые сайты используют короткие, богатые на ключевые слова значения для title из-за SEO, а затем идёт полный заголовок, описывающий тему статьи.
description Краткое объяснение содержания статьи. В большинстве случаев, присвоенное значение мета-тегу description хорошо работает.
author Имя создателя контента. В HTML-шаблоне за это отвечает мета-тег author и видимая часть статьи.
datePublished Это свойство позволяет нам четко указать дату размещения статьи в элементе time .
about Это свойство применимо к тексту, описывающему тему статьи. Хорошо подходит для сопровождающего предложения или параграфа.
articleBody Это свойство представляет собой основную часть статьи.

Подготовил: Евгений Рыжков Дата публикации: 22.01.2010

У тебя в распоряжении 6 различных тегов для вставки заголовков — h1, h2, h3, h4, h5, h6 (h сокращенное от англ. heading — заголовок). Каждый из них имеет определенный вес (важность): h1 — имеет наибольшую важность, h6 — наименьшую. А вот как эти заголовки правильно использовать — одна из самых спорных тем. Давай попробуем копнуть глубже в тему и ответить на следующие вопросы:

  1. зачем вообще нужно грамотное использование заголовков в верстке?
  2. какова правильная иерархия заголовков в HTML?
  3. сколько и каких заголовков должно быть на странице?
  4. а если заголовок картинкой?
  5. нужен ли title заголовку?

Зачем вообще нужно правильное использование заголовков в верстке?

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

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

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

Спецификации гласят следующее:

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

Google говорит практически тоже самое:

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

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

  • засорять страницу лишними заголовками,
  • использовать заголовки только для стилизации текста, без определения структуры страницы.
  • использовать заголовки только там, где действительно заголовки
  • соблюдать четкую иерархию заголовков (h2, следует за h1. h3 после h2 и т.д.). Желательно не нарушать четкую последовательность уровней
  • желательно чтобы первый заголовок (по коду) на странице был h1
  • не следует неупорядоченно переключаться от заголовков одного размера к другому

соблюдай четкую иерархию вложенности заголовков

Сколько и каких заголовков должно быть на HTML странице?

Четких каких-либо правил в спецификациях или рекомендациях от поисковиков нет. Некоторые гуру рекомендуют придерживаться следующей схемы:

  • h1 — один на странице
  • h2 — 2-3
  • h3 — 4-6
  • и т.д.

Такой порядок имеет смысл: h1 — это тема страницы (статьи), поэтому должен быть один (это особенно важно при поисковой оптимизации). У статьи может быть несколько подтем, как правило в рамках одной темы их немного, потому заголовков второго уровня немного на странице. И так далее с остальными.

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

Рассмотрим несколько примеров использования заголовков на веб страницах:

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

Если заголовок картинкой

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

Фирма Рога и копыта

H1 { width: 250px; height: 100px; background: url(path-to/logo.png); text-indent: -9999px; /* прячем текст за пределами заголовка, прием предложен Джеффри Зельдманом */ overflow: hidden; }

Нужен ли атрибут title заголовку?

Атрибут title предназначен, чтобы дать пользователю дополнительную (расширенную) информацию об объекте. Имеет смысл использовать данный атрибут для тех заголовков, когда действительно есть чем дополнить и title даст дополнительную полезную информацию пользователю. Такое использование атрибутов title сделает сайт более удобным и понятным, а на это обращают внимание и поисковые роботы. С другой стороны, повсеместное использование атрибута title, которые не несут дополнительное полезной информации могут негативно сказаться на удобстве и позициях в выдачах поисковиков. Представь себе, ты используешь голосовой браузер, который тебе прочитал заголовок. Тебе показалось этого мало и ты просишь прочитать и title. Что ты подумаешь о разработчиках сайта, если содержимое title окажется идентичным тексту заголовка? Поэтому использовать атрибут title (как и вообще любой другой элемент ли атрибут) нужно обдуманно.

Чем глубже вы изучаете html и web разработку, тем чаще слышите одно загадочное слово “семантика”. В этой статье мы разгадаем загадку, и расскажем что такое семантическая верстка. Разберем основные теги которые используются для описания семантической структуры.

Что такое семантическая верстка?

Семантическая верстка — это изучение значений слов и выражений. В html ничто иное как написание элементов со смыслом. Семантический элемент четко описывает свое значение как для браузеров, так и для разработчиков.

Давайте взглянем на отличие семантического элемента от обычного.

Например div или span — простые элементы, глядя на них мы не можем понять какого типа контент в них содержится. Это может быть просто текст, картинка, или другие теги.

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

XHTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, pariatur! Quasi sed eaque praesentium ea odio voluptatibus repudiandae commodi, ut cupiditate perferendis voluptate provident, nobis ullam doloribus accusantium omnis perspiciatis.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores atque facere repellat. Maxime quod dolor exercitationem commodi, perspiciatis laborum, sunt, magni illo ipsam molestiae a ullam amet adipisci et omnis!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, pariatur! Quasi sed eaque praesentium ea odio voluptatibus repudiandae commodi, ut cupiditate perferendis voluptate provident, nobis ullam doloribus accusantium omnis perspiciatis.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores atque facere repellat. Maxime quod dolor exercitationem commodi, perspiciatis laborum, sunt, magni illo ipsam molestiae a ullam amet adipisci et omnis!

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

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

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

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

Как реализовать семантическую верстку страницы?

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

Мы можем сгруппировать наиболее распространенные и важные элементы на четыри группы:

  • Теги структуры документа
  • Текстовые теги
  • Медиа теги
  • Корреляционные теги

Теги структуры документа

В прошлом элемент div был основным с помощью которого создавалась , W3C обратили внимание на то, что разработчики использовали в названиях id и class слова header, footer, menu и т.д. Которые описывали смысловое содержимое элемента. Так и появились новые семантические теги в HTML5.

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

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

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

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

section: Описывает разделы документа, должен содержать в себе заголовок h1 — h6

aside: Используется для идентификации контента, который связан с основным контентом на странице. Например, aside элемент может содержать определение термина в статье, рекламные объявления, дополнительную информацию на странице.

article: Это самодостаточный элемент который используется для описания статьи сайта, блога так же публикации на форуме. Может содержать элемент header и footer.

Текстовые теги

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

h1, h2, h3, h4, h5 и h6: используются для обозначения заголовков. Самый высокий уровень, или самым главным, заголовком является h1, за ним идут в порядке убывания важности заголовки уровня h2 — h6.

strong: тег придает тексту важности, как правило, отображается полужирным шрифтом.

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

cite: тегом обычно помечают названия книг, песен, фильмов, тв-передач.

blockquote и q: элементы используются для вставки цитаты из текста другого источника.

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

Медиа теги

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

audio: Используется для добавления одного или нескольких аудио на страницу, отображается в виде аудио плеера.

video: подобен аудио тегу, но используется для добавления видео контента в документ.

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

Корреляционные теги

Некоторые теги используются для создания связи между другими элементами. К примеру тег маркированного списка ul говорит браузеру что элементы li связаны и должны появляться в определенном порядке. Есть еще теги:

ol: тег нумерованного списка, аналогичен с тегом ul

figure: используется для группировки такого контента как картинки, графики, может содержать заголовок figcaption.

address: описывает контактную информацию на странице. И связывает ее с автором статьи или страницы.

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

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

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

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

Структурные элементы: организация страницы

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

Вот что типичная веб-страница может в себя включать:

  • в качестве первого элемента страницы, который может включать в себя логотип и слоган;

  • в качестве заголовка страницы;

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

Текстовые элементы: определение контента

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

Вы, в основном, будете использовать:

  • Для абзацев;

    • для (неупорядоченных) списков;
      • для (упорядоченных) списков;
      2. для отдельных пунктов списка;
      3. для цитат.

    Строчные элементы: различный текст

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

    Есть много строчных элементов, но вы обычно столкнётесь со следующими:

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

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

    Подзаголовок

    Какие-то всякие разные штуки и некоторые выделенные и даже важные слова.

    Другой абзац.

    • Один
    • Два
    • Три
    Однажды сказано

    Общие элементы

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

    Хотя эти элементы HTML на самом деле не несут какого-либо смысла , они пригодятся когда мы начнём использовать CSS.

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

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

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

    Структурные Текстовые Строчные












rustrackers.ru - Бесплатные программы для вашего ПК