Статья, в которой рассматривается положение дел, связанных с созданием HTML5-структуры на практике, а также некоторые другие моменты, которые необходимо учитывать во время её разработки.
Уровень поддержки HTML5-структуры пользовательскими агентами
Перед тем как перейти к разработке структуры документа согласно спецификации HTML5, рассмотрим на каком уровне осуществляется её поддержка в браузерах и других пользовательских агентах.
В настоящее время сложилась такая ситуация, когда одна часть пользовательских агентов вообще не понимает структуру документа, которая выполнена в соответствии со спецификацией HTML5. А другая часть пользовательских агентов обеспечивают её поддержку пока только экспериментально.
Чтобы авторы обратили на это внимание, разработчики спецификации опубликовали в стандарте HTML5 следующий абзац.
Основное содержимое вышеприведённого абзаца заключается в том, что они призывают авторов не полагаться полностью на структуру документа, описанной в этой спецификации, по крайне мере до тех пор, пока новая структура не получит широкую поддержку. Стандарт рекомендует авторам, как и прежде, создавать структуру веб-страниц с помощью элементов
h2, h3, h4, h5, h5 и h6 или такую, которая была бы обратно совместимой с заголовочной.
Несмотря на расплывчатую поддержку HTML5 структуры документа пользовательскими агентами, авторам всё равно стоит задуматься о её внедрении. Это позволит сделать документ структурированным, семантическим и логичным с точки зрения HTML5.
Создание HTML5-структуры обратно совместимой с заголовочной (HTML4)
До тех пор пока HTML 5 структура документа, не будет однозначно пониматься пользовательскими агентами, её создание будет обусловлено необходимостью использования обратной совместимости с HTML4. Таким образом, при создании структуры документа авторам следует учитывать то, что она должна быть правильной как в отношении HTML4, так и в отношении HTML5.
Создавать такую структуру не так уж сложно как это может показаться на первый взгляд. Для этого авторам всего лишь необходимо использовать внутри секционных элементов заголовки соответствующего ранга. Определяется ранг по уровню вложенности секционного элемента. Корневой секционный элемент имеет 1 ранг. Секции, которые расположены непосредственно в нём, имеют 2 ранг. Секции, которые расположены внутри секций второго ранга, соответственно имеют 3 ранг и т.д.
Рассмотрение процесса проектирования структуры документа на реальном примере
Процесс создания HTML5-структуры документа обратно совместимой с заголовочной (HTML4) рассмотрим на примере страницы блога, содержащей статью.
Начнём процесс проектирования с рассмотрения основных групп контента, из которых состоит данная страница.
На вышепредставленном рисунке видно, что данная страница состоит из шапки, навигации по блогу, основного блока (статья с комментариями), боковой панели и футера.
Самой важной информацией на этой странице является название статьи. Далее по важности можно расположить разделы статьи и комментарии к ней. Разделы, представленные в боковой панели, являются вспомогательными и не несут в себе основной контент страницы.
Процесс создания HTML5-структуры документа обратно совместимой с заголовочной (HTML4) и оптимизированной под поисковые системы выполним поэтапно.
На 1 этапе разработаем HTML5-структуру страницы, не обращая внимание на то, как она будет выглядеть с точки зрения HTML4 (заголовочной структуры).
Для этого воспользуется элементами article, section, nav и aside из категории sectioning, и элементом h2 из группы heading.
HTML5 структура страницы:
[document] Название сайта
[nav] Навигация по сайту
[article] Название статьи
[section] 1 раздел статьи
[section] 1 подраздел 1 раздела
[section] 2 раздел статьи
[section] 1 подраздел 2 раздела
[section] 2 подраздел 2 раздела
[section] 3 раздел статьи
[section] Комментарии к статье
[aside] Дополнительные разделы
[section] Поиск
[section] Облако тегов
[section] Комментарии
[section] Статьи
[section] Голосование
[section] О блоге
HTML4 структура страницы:
[h2] Название сайта
[h2] Навигация по сайту
[h2] Название статьи
[h2] 1 раздел статьи
[h2] 1 подраздел 1 раздела
[h2] 2 раздел статьи
[h2] 1 подраздел 2 раздела
[h2] 2 подраздел 2 раздела
[h2] 3 раздел статьи
[h2] Комментарии к статье
[h2] Дополнительные разделы
[h2] Поиск
[h2] Облако тегов
[h2] Комментарии
[h2] Статьи
[h2] Голосование
[h2] О блоге
На 2 этапе доработаем структуру, полученную на 1 этапе, таким образом, чтобы она была обратно совместимой с заголовочной.
HTML5 структура страницы:
[document] Название сайта
[nav] Навигация по сайту
[article] Название статьи
[section] 1 раздел статьи
[section] 1 подраздел 1 раздела
[section] 2 раздел статьи
[section] 1 подраздел 2 раздела
[section] 2 подраздел 2 раздела
[section] 3 раздел статьи
[section] Комментарии к статье
[aside] Дополнительные разделы
[section] Поиск
[section] Облако тегов
[section] Комментарии
[section] Статьи
[section] Голосование
[section] О блоге
HTML4 структура страницы:
[h2] Название сайта
[h3] Навигация по сайту
[h3] Название статьи
[h4] 1 раздел статьи
[h5] 1 подраздел 1 раздела
[h4] 2 раздел статьи
[h5] 1 подраздел 2 раздела
[h5] 2 подраздел 2 раздела
[h4] 3 раздел статьи
[h4] Комментарии к статье
[h3] Дополнительные разделы
[h4] Поиск
[h4] Облако тегов
[h4] Комментарии
[h4] Статьи
[h4] Голосование
[h4] О блоге
Теперь перейдём к оптимизации вышепредставленной структуры документа под критерии поисковых систем, а именно переделаем её таким образом, чтобы самым главным содержимым страницы было не название блога, а название статьи.
HTML5 структура страницы:
[document] Название статьи
[section] 1 раздел статьи
[section] 1 подраздел 1 раздела
[section] 2 раздел статьи
[section] 1 подраздел 2 раздела
[section] 2 подраздел 2 раздела
[section] 3 раздел статьи
[section] Комментарии к статье
[aside] Дополнительные разделы
[section] Поиск
[section] Облако тегов
[section] Комментарии
[section] Статьи
[section] Голосование
[section] О блоге
HTML4 структура страницы:
[h2] Название статьи
[h3] 1 раздел статьи
[h4] 1 подраздел 1 раздела
[h3] 2 раздел статьи
[h4] 1 подраздел 2 раздела
[h4] 2 подраздел 2 раздела
[h3] 3 раздел статьи
[h4] Комментарии к статье
[h5] Дополнительные разделы
[h5] Поиск
[h5] Облако тегов
[h5] Комментарии
[h5] Статьи
[h5] Голосование
[h5] О блоге
Инструменты для проверки HTML-структуры документа
Проверить разработанную структуру документа можно с помощью следующих инструментов:
расширения «HTML5 Outliner» для браузера Google Chrome;
онлайн инструмента HTML5 Outliner;
сервиса проверки разметки W3C, доступного по адресу https://validator. w3.org/;
расширения headingsMap 2.1 для браузера Mozilla Firefox.
Проверка структуры документа с помощью сервиса W3C
Сервис W3C предназначен в первую очередь для проверки соответствия кода HTML-документа выбранной спецификации (HTML 4.01, HTML5 и др.). Кроме этого он также позволяет также проверить структуру документа, если будет включена соответствующая опция.
Проверка структуры документа с помощью HeadingsMap
Расширение HeadingsMap для браузера Mozilla Firefox — это очень удобный инструмент, который позволяет проверить структуру документа в соответствии со спецификацией HTML5 и HTML4.
Заключение
В заключение можно отметить то, что авторам при создании структуры документа, необходимо её сделать не только соответствующей спецификации HTML5, но и HTML4. Это утверждение будет ещё актуально довольно продолжительное время, и закончит своё существование только тогда, когда основная масса пользовательских агентов обзаведётся полноценной поддержкой структурных алгоритмов, работающих в соответствии со спецификацией HTML5.
Основы HTML5 — Структура документа
В HTML4 можно, используя CSS, создавать страницы с очень понятной
для пользователей структурой. Но как поисковый робот мог отличить
содержимое документа от подвала или навигационного меню, если все они
размечены с помощью элементов div?
Семантические теги, добавленные в HTML5, позволяют сделать страницы
такими же понятными для поисковых систем и браузеров, как и для
пользователей.
Тег
Описание
header
Определяет заголовочный блок сайта.
nav
Определяет навигационное меню.
footer
Определяет подвал
article
Определяет независимое содержимое страницы.
section
Назначение — определение секций. Позволяет сгруппировать
логически связанное содержимое.
Так выглядела общая структура документа в HTML4.
Так выглядит общая структура документа в HTML5 с использованием новых
тегов разметки.
Тег <header> позволяет определить заголовочный
блок сайта.
В заголовочном блоке обычно располагаются логотип, лозунг сайта, а
также поле поиска и ссылки на другие разделы сайта.
Тег <nav> позволяет создать навигационный
блок.
В навигационном блоке обычно содержаться ссылки на другие страницы
сайта.
Тег <footer> позволяет определить подвал для
документа или
сгруппированного (с помощью тэга article или section) содержимого.
В футере обычно располагается информация об авторском праве, авторе
документа и могут присутствовать ссылки на другие ресурсы.
С помощью тега <section> можно выделить на
странице логически связанное содержимое.
Содержимое, помещенное в данный тэг не будет выделяется визуально, но
будет
использоваться поисковыми системами и браузерами для того, чтобы лучше
понять структуру страницы.
С помощью тега <article> Вы можете выделить на
странице независимое содержимое (т.е. содержимое, которое может быть
опубликовано в других источниках без остального содержимого
находящегося на странице).
Содержимое помещенное в данный тэг не будет выделяется визуально, но
будет
использоваться поисковыми системами и браузерами для того, чтобы лучше
понять структуру страницы.
Пример содержимого, которое может быть выделено тэгом <article>:
газетная статья, комментарий пользователя, запись в блоге и т.д.
Структура (скелет) сайта на HTML5 . Основная структура сайта
Структура сайт на HTML5 немногим отличается от обычной структуры. В новой версии языка разметки введены новые семантические элементы которые позволяют лучше структурировать страницу сайта и придать каждому блоку определенный смысл.
Мы рассмотрим основные нововведения HTML5 которые облегчают разработку сайта. Самая простая структура тела сайта имеет стандартные части (в большинстве случаев), это заголовок, меню, боковая панель, основное содержимое и подвал.
Семантические элементы HTML5 помогают упростить работу с этими частями. Итак давайте рассмотрим какие элементы HTML нам необходимы для создания структуры сайта
1. Основная стандартная структура сайта, которая имеет заголовок страницы и тело страницы:
<!DOCTYPE html>
<html>
<head>
<title> Структура сайта на HTML5 </title>
</head>
<body>
</body>
</html>
2. Теперь добавим в тело страницы (внутрь тега BODY) элемент которые будет отвечать за заголовок страницы в новом HTML5 это тег HEADER
<body>
<header>
<h2>Это структура сайта с использованием семантических тегов HTML5 </h2>
</header>
</body>
3. Часть HEADER обычно включает в себя часть меню. Меню создается с помощью парного тега NAV
<body>
<header>
<h2>Это структура сайта с использованием семантических тегов HTML5 </h2>
<nav>
<ul>
<li> <a> Пункт меню 1 </a></li>
<li> <a> Пункт меню 2 </a></li>
</ul>
</nav>
</header> </body>
4. Следующий элемент который используется для создания структуры сайта это ARTICLE. Он используется для группировки записей, статей и прочего на странице. В большинстве своем используется для разделения частей сайта на различные блоки. Может содержать внутри себя другие элементы ARTICLE.
<body>
<article>
<header>
<h2>Это структура сайта с использованием семантических тегов HTML5 </h2>
<nav>
<ul>
<li> <a> Пункт меню 1 </a></li>
<li> <a> Пункт меню 2 </a></li>
</ul>
</nav>
</article>
</header> </body>
5. Далее идет элемент ASIDE, который чаще всего используется для создания боковых колонок на странице сайта, это может быть меню, дополнительная информация и прочее.
6. И последний часто используемый элемент это подвал FOOTER. Представляет собой нижнюю часть страницы сайта, обычно эта часть всегда одинакова на всех страницах сайта. Но каждая страницы или статья может иметь свой собственный footer.
Подведя итог можно сделать окончательную структуру сайта на HTML5, который будет иметь следующий вид:
<!DOCTYPE html>
<html>
<head>
<title> Структура сайта на HTML5 </title>
</head>
<body>
<header>
<h2>Это структура сайта с использованием семантических тегов HTML5 </h2>
<nav>
<ul>
<li> <a> Пункт меню 1 </a></li>
<li> <a> Пункт меню 2 </a></li>
</ul>
</nav>
</header>
<aside>
<h4> Рекламные блоки </h3>
<p> Какая то реклама </p>
</aside>
<footer>
<adress> Ул.Новая д.43, г.Большой </adress>
</footer>
</body>
</html>
Построение структуры документа в HTML5 используя section
В первую очередь следует рассмотреть строение структуры документа HTML. Имеется ввиду именно семантическая структура, которую в некоторых отдельных случаях неопытный пользователь путает с деревом документа (DOM).
Построение структуры документа в среде HTML4
При создании документа в среде HTML4 логическая структуризация базировалась на использовании тегов заголовков – h2, h3,. .,h6. Для наглядности стоит рассмотреть следующий пример:
В результате изучения данного примера вырисовывается следующая структура:
1. Важный заголовок
1.1. Подзаголовок
В вышеуказанном примере присутствуют теги div, которыми можно пренебречь в силу того, что на семантическое строение документа они не оказывают никакого влияния и используются только для выстраивания визуального оформления через CSS в будущем. С точки зрения семантики нас интересуют исключительно заголовки.
Таким образом, код, на который обращает внимание поисковый робот, выглядит примерно следующим образом:
Подводя итог вышесказанному, стоит отметить, что в HTML4 грамотная постановка структуры документа основывалась на рациональной расстановке заголовков внутри документа.
Недостатки семантики HTML4
Во-первых, это невозможность чтения структуры документа в автономном режиме из-за применения тега <div> при отмечании семантических блоков. Это играет важную роль при использовании дополнительных программ браузера, к примеру – голосовой ввод запроса.
Следующий недостаток заключается в трудоемкости объединения двух разных документов HTML. В свою очередь эта трудоемкость заключается в сопряжении заголовков. Для построения грамотной структуры документа необходимо изменить уровни заголовков.
Также к недостаткам следует отнести невозможность одновременного использования основного и альтернативного заголовков. К примеру, множество компаний под своим названием пишут свой слоган. Вот этот слоган и будет альтернативным заголовком. При разметке
<h2>Vaden Pro</h2>
<h3>Выйди за рамки. Ультиматумная веб-разработка</h3>
Получим ложную ветку в логической структуре документа. Чтобы этого избежать, луче для подзаголовка использовать нейтральные элементы:
<h2>Vaden Pro</h2>
<p class=”slogan”>Выйди за рамки. Ультиматумная веб-разработка</p>
И в заключении следует отметить неспособность отделять подразделы, относящиеся к разным тематикам и не связаны между собой. Примером этого явления служат вставки рекламы внутри основного содержимого страницы. Под эту же категорию попадает и информация с сайта, которая указана на данной странице, но не связана с ее содержанием (меню навигации, последние обновления блога и тд).
В пятой версии HTML все вышеперечисленные недостатки учтены. Их можно избежать при использовании новых структурных тегов. Использование этих тегов упрощает процедуру обработки кода для поисковиков.
Выстраиваем структуру документа по стандартам HTML5
Секции
В первую очередь для пояснения понятия секций необходимо перечислить неотъемлемые составляющие, с помощью которых они формируются: <header>, <body>, <section>, <article>, <aside>, <nav> и <footer>. Корневая секция представляется тегом <body>. В качестве примера следует изучить следующий код:
Для простоты понимания уберем сложный для восприятия код и представим структуру документа в следующем виде:
Вышеуказанная секционное строение носит явный характер. На практике также встречается и не явное секционирование, которое осуществляется посредством заглавных тегов <h2>-<h6>.
Примеры на практике
Ниже представлен скриншот сайта с указанием основных его структурных частей:
В виде языка HTML сематническая структура данного сайта будет выглядеть следующим образом:
Стоит обратить внимание на тот факт, что в данном случае тег <div> применяется в целях оформление и не несет в себе семантической нагрузки.
Значимость тега div в HTML5
В новом HTML5 тег <div> теряет свою значимость в сравнении с предыдущей четвертой версией. Теперь div отвечает исключительно за оформление, как некоторых отдельных секций, так и всего документа в целом. Семантического значения у этого тега нет, следственно располагаться этот тег может где угодно, тем самым не оказывая влияния на семантику страницы сайта.
Итог
В первую очередь стоит отметить полезность новых тегов для разметки документа, которые упрощают задачу формирования иерархии внутри документа и способствуют облегчению читабельности кода для поискового робота.
Также стоит отметить новую возможность широкой вариации верстки одного и того же кода. В зависимости от стилевого оформления и желаний верстальщика, один и тот же сайт может быть написан разными способами с использованием разной структуры документа.
Оценок: 5 (средняя 4 из 5)
Понравилась статья? Расскажите о ней друзьям:
Еще интересное
Базовая структура HTML документа — Основы современной вёрстки
Основы современной вёрстки
Как театр начинается с вешалки, так и любой HTML-документ начинается с базовой структуры. Она включает в себя теги, которые есть в любом HTML-файле. Эти теги и служебная информация нужны браузеру для корректного отображения информации.
Взглянем на базовую структуру любого HTML-документа:
Этот набор кажется не очень большим, но браузеру он сообщает множество полезной информации. В этом уроке разберёмся с каждой строчкой этой структуры.
DOCTYPE
Первая конструкция в любом HTML-документе — элемент DOCTYPE. Он не относится к тегам и никаким образом не может отображаться на странице. Его задача — указать браузеру, какой стандарт HTML используется в этом документе. Сейчас это везде стандарт HTML5. Записывается он следующим образом:
<!DOCTYPE html>
С приходом стандарта HTML5 элемент DOCTYPE немного упростился. Если вы встретитесь с сайтами, созданными пять-десять лет назад, то сможете увидеть совершенно другие записи. Они были больше и напрямую влияли на то, как браузер обработает информацию. Неправильное указание элемента DOCTYPE могло привести к некорректному отображению. Сейчас такой проблемы нет, поэтому вы можете без всяких опасений использовать конструкцию, которая указана в данном уроке. Использование старых значений DOCTYPE необходимо только при разработке с поддержкой очень старых браузеров.
Парный тег html
Тег <html></html> является основой основ. Именно внутри него располагается вся информация. Благодаря этому тегу браузер понимает, где начинается контент, который необходимо обработать как HTML.
Важной частью тега html является наличие атрибута lang. В нём указывается язык, на котором отображается веб-страница. С помощью этого атрибута браузеры могут корректно считать множество специфичных символов, которые присутствуют в разных языках. Помимо этого, атрибут lang начинает использоваться и в CSS, с которым вы познакомитесь в следующих уроках. В новых стандартах CSS появляются свойства, которые опираются на данный атрибут. Например, позволяют корректно переводить слова в тексте.
В качестве значения атрибут lang принимает знакомые всем сокращения языков. Для русского — ru, для английского — en, для немецкого — de.
Парный тег head
Тег служит для хранения служебной информации. Здесь возможны самые разные сочетания тегов, которые подсказывают браузеру название страницы, описание, ключевые слова и так далее. Такая информация называется метаинформацией. В современном вебе она отвечает не только за служебную информацию для браузера, но и активно используется при продвижении сайта. Поисковые системы считывают всю эту информацию и на основе множества алгоритмов определяют место сайта при разных поисковых запросах.
Любые данные, которые указаны внутри тега head, не видны при отображении страницы в браузере. Это значит, что нет необходимости располагать там информацию, которая предназначена для отображения.
Хоть различной информации внутри head может быть множество, в этом уроке разберём несколько основных тегов, которые пригодятся при создании любой веб-страницы:
Метаинформация
Метатег <meta>. Он принимает множество разных атрибутов, с которыми вы познакомитесь при создании своих сайтов. В настоящее время важным является метатег <meta> с атрибутом charset. Он позволяет установить кодировку документа.
Кодировка — таблица символов. В ней каждый символ имеет уникальный код, благодаря чему программы, в том числе и браузеры, могут одинаково отображать один и тот же текст. У разных пользователей может стоять различная кодировка по умолчанию. Это приводит к тому, что у некоторых пользователей текст может отображаться в виде «кракозябр», хотя у вас он будет отображаться правильно. Универсальной кодировкой, которая содержит большинство необходимых символов из разных языков является кодировка UTF-8. Именно её рекомендуется устанавливать в качестве значения атрибута charset. Теперь браузер будет отображать все символы именно в этой кодировке.
<meta charset="UTF-8">
Заголовок страницы
На любом веб-сайте вы можете заметить заголовок, который отображается на вкладке вашего браузера. Например, на странице курса «Основы современной вёрстки» вкладка в браузере Google Chrome выглядит следующим образом:
Для указания заголовка страницы используется специальный парный тег <title></title>, внутри которого указывается нужная информация.
<title>Моя первая страница</title>
Тело документа
После тега head в документе указывается парный тег <body></body>, который является «телом» всей страницы. Именно здесь размещается вся информация, которая будет выведена на странице.
Используем один из примеров прошлого урока и добавим все недостающие теги.
Хоть данный набор и является основным, но на самом деле браузеры могут обработать HTML-информацию и без базовой структуры документа. Но не стоит отдавать всё на откуп браузеру. Он постарается автоматически обернуть контент в body, добавит современный DOCTYPE, но при этом нет уверенности в том, что всё это он добавит корректно.
Дополнительное задание
Создайте страницу, используя примеры из прошлого урока. Добавьте все необходимые теги, которые определяют базовую структуру документа.
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты.
Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?
Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.
Что-то не получается или материал кажется сложным?
Загляните в раздел «Обсуждение»:
задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете
HTML5 структура страницы: Правильное размещение раздела и статьи
Я пытаюсь построить правильную структуру для страницы HTML.
Мой вопрос касается реализации тегов article и section . article тег внутри section тег или section тег внутри article тег. Какой из них должен быть правильным?
Вот моя структура
html
structure
sections Поделиться ИсточникTharaka Nilupul Dharmabandu31 июля 2018 в 08:49
2 ответа
3
Эта статья содержит некоторую полезную информацию:
Нет никаких причин, по которым вы не можете иметь раздел в статье, который сам находится внутри раздела, если это лучше всего описывает содержание, над которым вы работаете.
ПоделитьсяOliverRadini31 июля 2018 в 08:53
ПоделитьсяVSM31 июля 2018 в 09:26
Похожие вопросы:
законная структура сайта HTML5
Я пытаюсь использовать теги html5 в следующей структуре, и мой вопрос заключается в том, является ли это законным способом, если вы проверите код ниже, у меня все еще есть довольно много контейнеров…
Структура HTML5 название сайта и заголовок страницы
Правильна ли приведенная ниже структура или тег раздела не нужен? Для SEO, предполагая, что релевантными ключевыми словами являются название страницы, а не название сайта, является ли структура ниже…
HTML5: что делать, если заголовок страницы равен заголовку статьи?
Это не давало мне покоя уже некоторое время, с момента появления HTML5: В некоторых наших проектах заголовок страницы на самом деле является заголовком статьи, которую вы просматриваете, что…
Соответствует ли размещение адресного тега внутри тега раздела рекомендациям html5?
Соответствует ли размещение адресного тега в таком разделе рекомендациям html5? <section id=address> <header> <h4><span style=color: #f3d351;>Call Us: 1-800-576-7449…
html5 семантический тег для резюме статьи и выделения
Я ищу правильный тег html5, который я могу использовать для маркировки резюме очень длинной статьи. Само резюме может занимать один-два абзаца. Я знаю, что в html5 есть тег <summary> , но этот…
HTML5 svg тег и атрибут alt
Не специалист в HTML и проверяющий правильное поведение парсера HTML (ищущий правильное поведение в соответствии с html5 нехорошо или ожидаемо (мы можем справиться с этим позже)). Допустимо ли…
HTML5-Структура статьи: разделы и заголовки
Я нашел много противоречивой информации о лучших практиках HTML5, и мне интересно, правильна ли структура моей статьи. В общем, страницы на этом сайте будут состоять из заголовка с навигацией,…
Лучшая семантика HTML5 для SEO статьи и раздела?
Этот вопрос касается раздела статьи и других тегов, поскольку он относится к лучшим практикам SEO. Я видел, как некоторые учебники учат, что вы должны поместить тег статьи и внутри тега статьи…
Лучшие практики по использованию семантических элементов раздела/статьи в HTML5
Это почти первый раз, когда я действительно использую HTML5, я провел некоторое исследование статьи/раздела, но нахожу ответы немного запутанными. Примером может служить следующее утверждение:…
HTML5 тег статьи: Содержание предварительной статьи?
Мой вопрос, вероятно, основан на плохом дизайне. Однако я не могу этого изменить, и мне нужно работать с этим. Это визуальный проект, о котором я говорю, это просто часть полного веб-сайта: Как вы…
Семантическая разметка и структура документа
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> находится тема семантической разметки.
Опытные верстальщики настоятельно рекомендуют избегать лишних нагромождений кода и для начала ограничиться минимальным набором обязательных структурных семантических 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>
Блок основных приоритетных ссылок навигации, обычно расположен в колонтитуле страницы (хедере или футере) или между ними.
Семантический шаблон (макет) веб-страницы – минимализм, лаконичность и логика, позволяющая избежать дублирования материала. Первым делом отказался от многочисленных раскрашенных менюшек и тупого поиска. CSS-трюки (закруглюшки, тенюшки, плюшки и финтиклюшки) – в прошлом, блок основной сайтовой навигации (<nav>) – одинокий воин в хедере семантической страницы.
Расширение спецификации HTML явило миру два десятка новых тегов, призванных указать поисковым роботам особенности содержания веб-страницы для облегчения машинной обработки.
Сердца почтенных юзеров наполнились теплотой термина «семантическая разметка», подаваемого под соусом некоего магического продукта, способного вознести поисковую индексацию сайта (блога) до невиданных высот. Трепетное отношение к новорождённым html-тегам сменилось легким недоумением, переросшим в банальный профессионализм контентных интернет-авторов и верстальщиков шаблонов веб-страниц.
Семантическая разметка HTML – не панацея, свод соблюдаемых правил оформления интернет-документа, не больше и не меньше. Хорошим тоном современности считается обозначение соответствующими html-тегами вида и степени важности подаваемой информации.
Поисковые пауки усовершенствовались гораздо быстрее. Без дополнительных указаний со стороны, поисковики отлично и самостоятельно разбираются с назначением и важностью индексируемой информации, прекрасно понимая идентичность элементов <header>, <div> и <header>.
Элемент <р> (абзац) – чисто «литературный герой». Не правильное трактование перевода с инглиш – параграф. Не используемый верстальщиками в сайтовых шаблонах тег, предназначенный исключительно для отображения структуры контентного текстового содержания.
Игнорирование использования семантических HTML-тегов непременно приводит к падению общего рейтинга веб-страницы в глазах поисковиков, уделяющих пристальное внимание качеству индексируемого материала. Использование семантических HTML-тегов в соответствии с их семантикой (назначением) – обязательное условие повышения конкурентоспособности веб-документа.
Источник: HTML5 Semantic Tags: What Are They and How To Use Them! Перевод источника: Секреты использования семантической вёрстки в HTML5
Интернетчик: HTML, сайт, интернет
Структура страницы HTML5
Фрагменты
›
HTML
›
Структура страницы HTML5
Информация о версии — Doctype¶
Базовая страница HTML начинается с объявления типа документа или документа. Это способ сообщить браузеру, какой это тип документа. Тип документа всегда является первым элементом в начале любого файла HTML. Затем идут разделы и подразделы, у каждого, возможно, есть заголовок и подзаголовок.Эти элементы заголовков и разделов помогают читателю понять смысл содержания.
Говоря о прошлом, можно сказать, что объявление doctype было очень неприятным и трудным для запоминания.
В качестве иллюстрации см. Объявление HTML 4.01 Strict DTD:
HTML5 сделал больше! Лучшее решение на данный момент — это короткое объявление:
Тип документа может быть написан в нижнем, верхнем регистре или в смешанном регистре.Как вы заметили, в декларации отсутствует цифра «5». Хотя эта веб-разметка известна как «HTML5».
Элемент
¶
Элемент следует за информацией о типе документа, которая используется для информирования браузера о том, что это документ HTML. Вы можете использовать атрибут lang со значением «en» , чтобы указать, что документ на английском языке. Но в настоящее время даже атрибут lang не нужен для проверки или правильной работы документа.
Не забудьте включить закрывающий тег:
Раздел
¶
Следующая часть — раздел.Элемент содержит метаданные (заголовок документа, набор символов, стили, ссылки, сценарии), конкретную информацию о веб-странице, которая не отображается пользователю.
Элемент используется для указания метаданных, чтобы предоставить браузерам и поисковым системам техническую информацию о веб-странице.
Например, если вы хотите указать автора вашего документа, вы можете использовать элемент следующим образом:
Чтобы определить символ Кодировка документа, вам необходимо установить атрибут charset со значением «utf-8» почти во всех случаях. UTF-8 — кодировка символов по умолчанию для HTML5.
Подробнее о кодировке UTF-8.
Используйте элемент
, чтобы определить заголовок вашего документа.</p><pre content="code snippet"> <code> <title> W3Docs - Изучите языки программирования в Интернете.
Далее идет элемент, который устанавливает связь между текущим документом и внешним ресурсом. Как правило, он используется для ссылки на внешнюю таблицу стилей CSS.
Обязательные атрибуты для элемента: rel, href и type.
Теперь вы можете увидеть весь раздел:
W3Docs - Изучите языки программирования в Интернете.
Элемент
документа содержит содержимое документа.Контент может быть представлен пользовательским агентом по-разному. Например, содержимым может быть текст, изображения, ссылки, цвета, графика и т. Д.
Между тегами тела могут быть разные элементы, которым вы можете придать стиль с помощью свойств CSS. Просто добавьте селектор идентификатора или класса в свой HTML-элемент и в разделе
Элемент
Заголовки (элементы h2-h6) ¶
Элементы заголовка
-
используются для краткого описания грядущий раздел.
считается самым важным, а
наименее важным.
<тело>
Заголовок первого уровня
Заголовок второго уровня
Используйте элемент
для определения заголовка документа или раздела.Обычно он содержит логотип, панель поиска, навигационные ссылки и т. Д.
Элемент
Элемент
¶
Элемент
используется для определения независимого, автономного содержимого (статей, сообщений в блогах, комментариев и т. д.)). Содержимое элемента имеет свое значение, и его легко отличить от остального содержимого веб-страницы.
<статья>
Текст статьи
Элемент
¶
Элемент
используется для группировки отдельных разделов на веб-странице, содержащих логически связанный контент (блок новостей, контактную информацию и т. д.).
<раздел>
Заголовок
Например, абзац
<раздел>
Заголовок 2
Например, другой абзац.
Теперь давайте закончим и посмотрим, как будет выглядеть страница HTML5.
Пример создания страницы HTML5: ¶
Название документа
<стиль>
html,
тело {
высота: 100%;
}
тело {
дисплей: гибкий;
flex-wrap: обертка;
маржа: 0;
}
.заголовок-меню,
нижний колонтитул {
дисплей: гибкий;
align-items: center;
ширина: 100%;
}
.header-menu {
justify-content: гибкий конец;
высота: 60 пикселей;
фон: # 1c87c9;
цвет: #fff;
}
h3 {
маржа: 0 0 8px;
}
ul li {
дисплей: встроенный блок;
отступ: 0 10 пикселей;
стиль списка: нет;
}
в стороне {
гибкость: 0.4;
высота: 165 пикселей;
отступ слева: 15 пикселей;
граница слева: сплошной 1px # 666;
}
раздел {
гибкость: 1;
отступ справа: 15 пикселей;
}
нижний колонтитул {
отступ: 0 10 пикселей;
фон: #ccc;
}
<заголовок>
Пункт меню
Пункт меню
Пункт меню
<раздел>
<статья>
<заголовок>
Изучите HTML
Язык гипертекстовой разметки
Наш бесплатный учебник по HTML для начинающих научит вас HTML и научит вас создавать веб-сайт с нуля.HTML не сложен, поэтому надеюсь, вам понравится учиться.
<статья>
<заголовок>
Начать тест "HTML Basic"
Вы можете проверить свои навыки HTML с помощью Викторины W3docs.
Вы получите 5% за каждый правильный ответ на вопросы с одним вариантом ответа. В вопросе с несколькими вариантами ответов это может быть до 5%. В конце викторины будет отображен ваш общий балл.Максимальный балл - 100%.
Веб-страница, отображаемая в браузере, состоит из множества вещей - логотипа, информативного текста, изображений, гиперссылок, структуры навигации и многого другого.HTML5 предлагает набор элементов разметки, которые позволяют создавать структурированный макет для веб-страниц. Эти элементы часто называют семантической разметкой, потому что они четко передают свое значение и цель разработчику и браузеру. В этой статье обсуждаются некоторые важные элементы HTML5, которые могут способствовать разметке веб-страницы.
Семантическая разметка
Семантическая разметка ясно выражает свое значение и цель разработчикам и браузеру. Веб-разработчики часто используют элемент
для компоновки своих веб-страниц.Однако элемент
сам по себе не передает то, что он представляет на веб-странице. Элемент
может заключать меню навигации или содержать список сообщений в блоге, но простое использование
не передает много информации разработчикам или браузерам. Обычно классы CSS, применяемые к элементам
, раскрывают некоторую информацию об их предназначении. Например, рассмотрим следующую разметку:
...
В приведенной выше разметке именно CSS-класс заголовка дает вам представление о том, что может делать
.Однако в отсутствие этого класса CSS невозможно легко определить, что может делать
. Это потому, что
- элемент общего назначения. У него нет конкретной задокументированной ответственности. Он просто отмечает раздел или раздел веб-страницы, но не определяет, что может быть внутри этого раздела.
HTML5 включает набор элементов разметки, которые преодолевают эту трудность. Эти новые элементы имеют значимые имена, поэтому, просто взглянув на эти элементы, вы получите четкое представление об их содержании.Эти семантические элементы HTML5 перечислены ниже (это не исчерпывающий список):
<заголовок>
<нижний колонтитул>
<раздел>
<статья>
<сторона>
Как видите, эти элементы достаточно выразительны и сразу можно составить представление о предназначении. На следующем рисунке показан образец макета страницы, созданный с использованием этих элементов:
На рисунке выше показано типичное расположение различных элементов.Обратите внимание, что их точное расположение на странице полностью зависит от макета. Например, элемент
<нижний колонтитул>
<час />
Авторское право (C) 2013.Все права защищены.
Создание CSS для примера веб-страницы
Пример веб-страницы, который вы создали в предыдущем разделе, имеет связанный с ним StyleSheet.css. Эта таблица стилей содержит несколько правил CSS, которые регулируют внешний вид различных семантических элементов. В более реальной ситуации вы можете создавать классы CSS, а затем присоединять их к соответствующим элементам. Однако в этом примере стили определены для элементов, как показано ниже:
Определенные выше правила CSS довольно просты и не нуждаются в пояснениях.Просто добавьте эти правила в новый файл таблицы стилей и свяжите эту таблицу стилей с примером веб-страницы, которую вы разработали ранее.
Сводка
В этой статье рассматриваются элементы семантической разметки HTML5, которые можно использовать в правильном макете веб-страниц. В отличие от элемента
семантические элементы предназначены для использования с определенной целью. Элементы, которые мы рассмотрели в этой статье, включают,,
Представьте,что образец страницы,который мы создаем,предназначен для новостного веб-сайта. Мы будем использовать только один элемент header на нашей странице,но вы можете использовать больше в разделах страницы.
До HTML5 элементы
были единственным вариантом для определения структуры страницы на уровне блока. Чтобы идентифицировать эти элементы для стилизации и манипулирования,разработчики обычно использовали атрибуты id и class с некоторыми из тех же имен,что и новые структурные элементы.Типичные примеры включают
и
. Если вы использовали такие имена атрибутов в прошлом,вы включали семантическую информацию в свою разметку независимо от того,знали вы об этом или нет. Если задуматься,использование атрибута id заголовка включает значимую информацию в код вашей страницы;это информация,указывающая на назначение элемента. Как вы уже можете видеть,HTML5 встраивает этот уровень смысла в сами структуры разметки.
Это потрясающе? Не совсем. Это просто более чистый и логичный способ сделать то,что мы делали раньше,нестандартным способом. Однако у этого есть полезные побочные эффекты,такие как упрощение навигации для групп населения с проблемами доступности.
Элемент нижнего колонтитула
Перейдем сразу к элементу нижнего колонтитула ,поскольку он очень похож на заголовок . Внизу тела страницы добавьте следующее:
<нижний колонтитул>
Этот сайт создан компанией Great Sites Inc.
Как и в случае с заголовком ,нижний колонтитул может содержать другие элементы,такие как ссылки и изображения. Эти первые два тега имеют значение,поскольку они указывают что-то о содержимом элементов и об их роли в логической структуре страницы,то есть о том,что содержимое функционирует как верхний или нижний колонтитул.
Элемент навигации
До сих пор мы рассмотрели два элемента,которые содержатся почти на каждой веб-странице;Теперь обратимся к другому,разделу навигации.Элемент nav предназначен для основной части навигации страницы,которая обычно содержит список ссылок на другие страницы сайта. Вставьте следующее после элемента заголовка :
Опять же,элемент nav может содержать другие элементы.Использование этого элемента позволяет указать его функцию или цель,как,например,заголовок и нижний колонтитул . Это еще один случай,когда многие из нас использовали имя тега в качестве атрибута id или class в прошлом (например,
).
Раздел и элементы статьи
Пока все интуитивно понятно,но теперь все становится немного сложнее. Элементы section и article были источником путаницы для некоторых разработчиков,поскольку существует некоторая гибкость в том,как они используются.По сути,элемент section маркирует разделы страницы или разделы другого элемента (такого как элемент article ). Содержимое раздела сгруппировано в соответствии с некоторой логической темой (которую вы можете определить произвольно). С другой стороны,элемент article для представляет собой элемент контента,который был бы автономным ,если бы он был удален с остальной части страницы - типичными примерами могут быть сообщения в блогах или новостные статьи.Подводя итог:
=область содержимого,которая является отдельной,но также является зависимой частью целого
=отдельная и независимая область содержимого
Как всегда,эти концепции проще всего изучить на практических примерах. Допустим,страница нашего новостного сайта будет состоять из следующих областей,каждая из которых будет представлена разделом :главная статья;отрывки из нескольких других основных рассказов;список мультимедийных объектов;и список популярных историй.Добавьте элементы section для каждого из них после элемента nav ,используя атрибуты id ,чтобы определить их назначение и дать нам крючки для любого стиля,который мы применим позже:
<раздел><раздел><раздел><раздел>
На данный момент вы можете увидеть общую структуру страницы с заголовком ,nav ,различными элементами section для тематических разделов содержимого страницы,затем нижним колонтитулом .Внутри элемента раздела мы исследуем доступные структуры вложенности.
Лучшая история
Внутри первого раздела для верхней истории (id="top_story" ),начинаются с заголовка:
Лучшие новости
Обратите внимание,что мы используем элемент h3 ,поскольку у нас уже есть h2 ,и он находится ниже в иерархии страниц. Придет время,когда вашим элементам заголовка не нужно будет соблюдать эту относительную иерархию внутри страницы в целом,но они смогут относиться к отдельным разделам страницы;однако на данный момент безопаснее всего придерживаться иерархии на уровне всей страницы,чтобы обеспечить совместимость и доступность браузера.
По логике,верхним сюжетом должна быть статья ,поэтому добавьте ее после заголовка:
<статья>
Поскольку главный сюжет будет самым крупным отдельным элементом контента на странице,мы будем использовать элементы раздела ,чтобы разделить фрагменты текстового контента внутри него. Добавьте в артикул следующее:
<раздел><раздел><раздел>
Как и раньше,мы используем атрибуты,чтобы указать цель каждого раздела в родительской статье .Вы можете включить любой текст или другой контент в эти разделы ,просто используя на данный момент фиктивный текст,если хотите.
Другие новости ...
Перейдем к содержанию раздела other_news . Начните с заголовка,как мы делали для главного сюжета:
Другие новости
Давайте теперь добавим несколько элементов article ,чтобы они содержали отрывки из этих других новостей:
<статья><статья><статья>
Добавьте элемент заголовка в каждую из этих новых статей ,не забывая отражать иерархическую структуру страницы (h2 ,затем h3 ,затем h4 и т. Д.):
Заголовок статьи
После заголовка добавьте любое содержимое,которое вам нравится,к элементам article ,например,абзацу (p ) или элементам div .
Используйте ту же логику для заполнения двух других разделов главной страницы,как в следующем примере для раздела популярных историй:
Вы можете начать видеть,как эти новые элементы играют более важную роль с точки зрения определения структуры страницы,а также цели или содержания отдельных элементов.Элементы section и article могут также иметь элементы header и footer внутри,но для нашей страницы мы будем придерживаться того,чтобы каждый из них был на странице. В общем,лучше всего использовать элементы заголовка в этих других элементах только в том случае,если вам нужно иметь несколько тегов,связанных с заголовком,в этой статье/разделе. Поскольку у нас есть только один тег (элемент заголовка h3 ),нет необходимости заключать его в заголовок .
Элемент в стороне
Давайте посмотрим на один последний элемент,который нужно добавить на нашу страницу.Элемент aside предназначен для контента,который относится к другому элементу контента (например,раздел раздел или статья ),но не является центральным или существенным для основного элемента. Например,в нашей демонстрации это может быть ссылка «сообщить об этом». Добавьте один в верхнюю статью,внутри "top_story" ,артикул ,после элементов раздела :
<сторона>
Вы были там? Отправьте нам электронное письмо ...
Эта информация представляет собой помимо к содержанию статьи главной новости .Давайте теперь также добавим один в раздел ,а именно,для мультимедийных элементов:
<сторона>
Присылайте нам свои видео ...
На этот раз информация помимо относится к элементу раздела ,внутри которого он находится. И снова мы можем увидеть назначение этого элемента,просто прочитав имя тега.
Уход за Internet Explorer
Если вы пробовали какие-либо методы HTML5 раньше,вы не удивитесь,узнав,что необходим дополнительный шаг для обеспечения обратной совместимости со старыми версиями Internet Explorer.По умолчанию версии IE 8 и старше не позволяют стилизовать теги HTML5,поскольку браузер не распознает эти новые теги. Однако для решения этой проблемы можно использовать крошечный файл JavaScript,в просторечии известный как HTM5 Shiv .
Вам нужно только добавить следующий код в раздел head страницы :
(Необязательно:если вы хотите использовать свою собственную копию файла,вы можете загрузить исходный файл с GitHub,добавить его на свой сайт,а затем вместо этого ссылаться на эту локальную копию.)
Условные комментарии гарантируют,что сценарий загружается только для соответствующих старых версий браузера.
Заключение
Переход на HTML5 предполагает некоторые изменения в том,как вы подходите к проектированию структур страниц. Однако преимущества значительны. Хорошо структурированный HTML5 делает страницы более доступными для множества пользователей и более простыми для поиска. Код также стал более чистым для работы,поскольку некоторые из бесконечных элементов div с атрибутами class и id заменены элементами с интуитивно понятным названием.
Для ясности,старый тег
жив. Также отсутствуют атрибуты id и class . Все эти функции по-прежнему играют важную роль в структуре страницы. Структурные элементы HTML5 являются правильным инструментом только тогда,когда их название напрямую описывает их роль на странице. В этих случаях их можно и нужно использовать.
Удачного кодирования!
Пример структуры страницы HTML5 | Web Code Geeks
HTML5 - пятая редакция и новейшая версия стандарта HTML.
Он предлагает новые функции,которые обеспечивают не только поддержку мультимедиа,но также расширяют поддержку для создания веб-приложений,которые могут более легко и эффективно взаимодействовать с пользователем,его/ее локальными данными и серверами.
Некоторые функции HTML5 по-прежнему не поддерживаются некоторыми браузерами,но ведется работа,чтобы сделать все функции доступными.
Ниже мы рассмотрим,как структурирована страница HTML5,и какие основные теги нужно понимать,чтобы начать ее использовать.
1. Структура HTML5
1.1 Настройка
Первое,что нужно сделать,это объявить страницу,использующую разметку HTML5,используя ! DOCTYPE html в верхней части документа.
Во-вторых,укажите используемый набор символов. В предыдущих версиях HTML это было сделано с использованием очень сложного элемента.
Теперь очень просто использовать мета-кодировку,например:meta charset="UTF-8" . Продолжая метатеги,мы должны упомянуть мета http-Equiv="X-UA-Compatible" content="IE = edge" .Но что это?
По сути,Internet Explorer позволяет вам определять,какая версия движка используется для отображения страницы,используя X-UA-Compatible META-тег или HTTP-заголовок. Можно указать конкретную версию или последнюю версию с помощью значения «IE=edge».
Идея режима совместимости состоит в том,чтобы разрешить веб-сайтам и приложениям,которые не соответствуют современным стандартам,продолжать работать,пока могут быть выполнены обновления,позволяя конечным пользователям обновляться до последней версии браузера.
Затем используйте html lang="en" для ссылки на код языка,который используется в html-документе.
1.2 Сайт,оптимизированный для мобильных устройств
Типичный сайт,оптимизированный для мобильных устройств,содержит что-то вроде следующего:
meta name="viewport" content="width = device-width, initial-scale = 1"
Свойство width контролирует размер области просмотра. Он может быть установлен на определенное количество пикселей,например width=600,или на специальное значение device-width,которое представляет собой ширину экрана в пикселях CSS в масштабе 100%.
Свойство initial-scale управляет уровнем масштабирования при первой загрузке страницы. Свойства «Максимальный масштаб»,«Минимальный масштаб» и «Масштабируемые пользователем» определяют,как пользователям разрешено увеличивать или уменьшать масштаб страницы. Это было краткое объяснение оптимизированного для мобильных устройств контента.
Весь этот код до этого момента вместе с тегом title ,который будет содержать имя вкладки страницы,может быть включен и заключен (по семантическим причинам) в тег head сразу после типа документа,как показано ниже:
1.3 ссылки
Важная часть внутри тега заголовка - это связывание широкого спектра элементов,таких как шрифты,стили,скрипты и т. Д.
Это означает,что когда страница отображается браузером,он будет учитывать возможность связывания этих (в основном) файлов и отображения содержимого страницы в правильном порядке,стиле и с правильной анимацией.
1.4 Завершение
До этого момента наш документ,включая все теги и элементы,которые мы упоминали до сих пор,будет выглядеть так:
Структура HTML5
1.5 Основной макет HTML-структура
Ваш HTML-документ,как и настоящий документ,должен состоять из трех основных частей:заголовок ,,тело ,и нижний колонтитул ,.
Эти элементы будут содержать соответствующий контент и организовывать код таким семантическим образом,чтобы вам и вашему браузеру/поисковой системе было легче читать и понимать. Ниже мы объясним каждый из них отдельно.
1.6 Заголовок
Элемент заголовка представляет собой контейнер для вводного содержания или набора навигационных ссылок.
Заголовок Элемент обычно содержит:один или несколько элементов заголовка (h2 - h6),логотип или значок,информацию об авторстве.
Кроме того,заголовок может иметь полнофункциональную панель навигации и карусель,что усложняет его.
Основные теги,используемые внутри заголовка:nav ,ul ,li ,a ,div ,section ,span ,input ,label и т. Д.
Корпус может содержать такое большое количество тегов (элементов) как form ,article ,ul/ol ,li ,main ,section ,aside .
Но он также содержит определенные предварительно стилизованные элементы,такие как datetime ,progres ,select и т. Д. Что ж,если вам интересно,что означают или используются все эти теги,просто имейте в виду,что это все дело семантики. Возьмем,к примеру,тег ul или ol :
Это правда,что вы можете иметь список элементов,используя либо div,либо просто свободное написание с тегом br в конце каждой строки для создания списка. Но использование ul упростит распознавание и быстрое отображение в браузере.
О семантическом коде мы поговорим позже. Сейчас пример простого тела страницы:
После нижнего колонтитула рекомендуется добавить скрипты,которые могут вам понадобиться,чтобы не замедлять загрузку страницы.
2. Все дело в семантическом коде!
2.1 Что такое семантический код?
HTML изначально задумывался как средство описания содержимого документа,а не как средство сделать его визуально приятным. Семантический код возвращается к этой исходной концепции и побуждает веб-дизайнеров писать код,который описывает контент,а не то,как он должен выглядеть. Например,заголовок страницы может быть закодирован следующим образом:
Это заголовок страницы
Это сделает заголовок большим и жирным. придавая ему вид заголовка страницы,но в коде нет ничего,что могло бы описать его как заголовок.Это означает,что компьютер не может идентифицировать это как заголовок страницы.
Чтобы записать тот же заголовок семантически,чтобы компьютер понимал,что это заголовок,вы должны использовать следующий код:
Это заголовок
2.2 Почему важен семантический код?
Способность компьютера понимать ваш контент важна по ряду причин:
- Многие люди с ослабленным зрением полагаются на речевые браузеры,чтобы читать им страницы.Эти программы не могут хорошо интерпретировать страницы,если они не имеют четкого объяснения. Другими словами,семантический код способствует доступности.
- Поисковые системы должны понимать,о чем ваш контент,чтобы правильно ранжировать вас в поисковых системах. Семантический код имеет тенденцию улучшать ваше размещение в поисковых системах,поскольку это проще для «пауков поисковых систем».
Однако семантический код имеет и другие преимущества:
Как видно из приведенного выше примера,семантический код короче и поэтому загружается быстрее.
Семантический код упрощает обновление сайта,потому что вы можете применять стиль дизайна к заголовкам на всем сайте,а не на каждой странице,семантический код также легче понять людям,поэтому,если новый веб-дизайнер подберет код,который они могут изучить это намного быстрее. Поскольку семантический код не содержит элементов дизайна,можно изменить внешний вид вашего сайта без перекодирования всего HTML.
3. Графические макеты HTML5
Для всех,у кого нет хорошего представления о том,как в графическом виде будет выглядеть страница в виде макета.
Существуют разные макеты,однако некоторые из них показаны ниже:
Макеты веб-страницы
4. Образец веб-страницы
Взгляните на простой бесплатный шаблон веб-страницы HTML5,который является отличным примером множества элементов используется для создания структуры
HTML5. Вы найдете этот пример в виде файла .zip,доступного для загрузки в разделе загрузки ниже.
И поместите сюда что-нибудь почти такое же крутое,но немного длиннее ...
<раздел>
Добро пожаловать в Minimaxing!
Это Minimaxing ,полностью адаптивный шаблон сайта HTML5,разработанный n33 и бесплатно выпущен HTML5 UP . В нем есть простой,легкий дизайн,надежный код HTML5 и CSS3,а также полная адаптивная поддержка дисплеев для настольных компьютеров,планшетов и мобильных устройств.
Duis neque nisi,dapibus sed mattis quis,rutrum et accumsan.Suspendisse nibh. Suspendisse vitae magna eget odio amet mollis justo facilisis quis. Sed sagittis mauris,амет теллус гравида lorem ipsum dolor sit amet conquat blandit lorem ipsum dolor сидеть амет конскват сед долоре.
Magna Gravida Dolore
Varius nibh. Suspendisse vitae magna eget et amet mollis justo facilisis amet quis conctetur in,sollicitudin vitae justo.Cras Maecenas eu arcu purus,phasellus fermentum elit.
Magna Gravida Dolore
Varius nibh. Suspendisse vitae magna eget et amet mollis justo facilisis amet quis conctetur in,sollicitudin vitae justo. Cras Maecenas eu arcu purus,phasellus fermentum elit.
Magna Gravida Dolore
Varius nibh. Suspendisse vitae magna eget et amet mollis justo facilisis amet quis conctetur in,sollicitudin vitae justo. Cras Maecenas eu arcu purus,phasellus fermentum elit.
Aenean non massa sapien. In hac Habitasse platea dictumst. Maecenas sodales purus et nulla sodales aliquam. Aenean ac Порттитор Метус. In hac Habitasse platea dictumst. Phasellus blandit turpis in leo scelerisque mollis. Nulla venenatis ipsum nec est porta rhoncus. Содовые напитки Mauris sed pharetra nisi nec Conctetur. Cras elit magna,hendrerit nec Conctetur in,sollicitudin vitae justo. Cras Amet Aliquet Aliquam ligula turpis,feugiat id fermentum malesuada,rutrum eget turpis.Содовые напитки Mauris sed pharetra nisi nec Conctetur. Cras elit magna,hendrerit nec consctetur in sollicitudin vitae.
Duis neque nisi,dapibus sed mattis quis,rutrum accumsan sed.Suspendisse eu varius nibh. Suspendisse vitae magna eget odio amet mollis justo facilisis quis. Sed sagittis mauris,амет теллус гравида lorem ipsum dolor sit amet consquat blandit.
Этот пример выглядит следующим образом (уменьшен до 50%,чтобы уместиться на холсте):
A Образец веб-страницы
5.Заключение
В заключение,мы можем констатировать,что HTML5 - это новая,усовершенствованная версия старого HTML,поддерживающая отличные функции при написании меньшего количества кода. Идея состоит в том,чтобы поддерживать баланс между тем,что предлагает разметка,и производительностью программистов,чтобы кодирование не превратилось в беспорядок для всех,когда каждый включает ежедневных пользователей,программистов,сам браузер и его стандарты.
Чтобы получить представление обо всех новых тегах HTML5,обратитесь сюда. Не стесняйтесь пробовать все.
Шаблон предоставлен HTML5 UP.
6. Загрузить
Области страницы • Структура страницы • Учебники по веб-доступности WAI
Разметка различных областей веб-страниц и приложений,чтобы их можно было идентифицировать с помощью веб-браузеров и вспомогательных технологий.
Заголовок страницы
У большинства веб-сайтов есть область в верхней части каждой страницы,которая содержит информацию всего сайта,такую как логотип веб-сайта,функция поиска и параметры навигации.HTML5 предоставляет элемент ,который можно использовать для определения такой области.
Примечание:Если элемент используется внутри элементов и ,он не связан со всей страницей,а только с конкретным или <раздел>.
Фрагмент кода:
<заголовок>… …
Нижний колонтитул страницы
Подобно заголовку страницы,большинство веб-сайтов также имеют область внизу каждой страницы,которая содержит информацию в масштабе всего сайта,такую как информация об авторских правах,заявления о конфиденциальности или заявления об отказе от ответственности. HTML5 предоставляет элемент ,который можно использовать для определения такой области.
Примечание:Если элемент используется внутри элементов и ,он не идентифицируется как нижний колонтитул для всей страницы,а относится только к этому конкретному или <раздел>.
Фрагмент кода:
<нижний колонтитул>…
& копировать;2014 г.,SpaceBears Inc.
…
Навигация
Элемент HTML5 может использоваться для идентификации меню навигации. Веб-страница может иметь любое количество меню навигации. Используйте ярлыки для обозначения каждого меню навигации.
Фрагмент кода:
… …
Быстрая навигация
…
Основное содержание
Используйте элемент HTML5 для определения области основного содержимого веб-страницы или приложения.
Используйте элемент HTML5 ,чтобы идентифицировать области,которые поддерживают основной контент,но являются отдельными и значимыми разделами сами по себе;Например,примечание,поясняющее или аннотирующее основное содержание.
Фрагмент кода:
Области страницы в HTML5 с использованием WAI-ARIA
Большинство современных веб-браузеров поддерживают указанные выше элементы HTML5 и передают информацию вспомогательным технологиям через API специальных возможностей.Однако для максимальной совместимости с веб-браузерами и вспомогательными технологиями,которые поддерживают WAI-ARIA,но еще не поддерживают HTML5,в настоящее время рекомендуется использовать как элементы HTML5,так и соответствующие роли WAI-ARIA.
Фрагмент кода:примеры в HTML5
… … …
Изучите другие ресурсы WAI-ARIA:
Области страницы в HTML4 с использованием WAI-ARIA
Если невозможно использовать HTML5 или если страница HTML4 модернизирована для улучшения доступности,добавьте код WAI-ARIA в элементы div ,которые функционируют как их аналоги HTML5,например:
Фрагмент кода:примеры в HTML4
…
…
…
…
Эти руководства содержат практические рекомендации по реализации специальных возможностей в различных ситуациях.На этой странице собраны следующие критерии успеха и методы WCAG из разных уровней соответствия:
Критерии успеха:
1.3.1 Информация и взаимосвязи. Информация,структура и взаимосвязи,передаваемые посредством презентации,могут быть определены программно или доступны в тексте. (Уровень A)
2.4.1 Обход блоков. Доступен механизм обхода блоков контента,которые повторяются на нескольких веб-страницах.(Уровень A)
2.4.6 Заголовки и ярлыки:Заголовки и ярлыки описывают тему или цель. (Уровень AA)
Методы:
Мы приветствуем ваши идеи
Присылайте любые идеи,предложения или комментарии в (общедоступный) список рассылки wai-eo-editors@w3.org. Вы также можете внести свой вклад в код прямо на Github.
Создайте и отредактируйте эту страницу на Github
Основные понятия о структуре страницы • Структура страницы • Учебные пособия по веб-доступности WAI
Технологии,описанные в этом руководстве:
HTML5 WAI-ARIA
Хорошо структурированный контент обеспечивает более эффективную навигацию и обработку.Используйте HTML и WAI-ARIA для улучшения навигации и ориентации на веб-страницах и в приложениях.
Области страницы:Выявление и разметка областей на веб-страницах с использованием ролей HTML5 и WAI-ARIA.
Обозначение регионов:Обозначение областей,позволяющих пользователям различать их и получать к ним доступ.
Заголовки:Добавьте заголовки и логически вложите их,чтобы пометить разделы веб-страниц в соответствии с их отношениями и важностью.
Структура содержимого:Разметьте содержимое на странице таким образом,чтобы использовать подходящие и значимые элементы.
Почему это важно?
Страницы с хорошо структурированным содержанием необходимы многим пользователям Интернета,например:
Людям с когнитивными нарушениями и нарушениями обучаемости будет проще находить контент на странице и расставлять приоритеты.
Люди,использующие программы чтения с экрана ,могут сразу перейти к основному содержанию и перейти к важным для них разделам.
Пользователи клавиатуры могут более эффективно просматривать страницы и их разделы. В противном случае пользователям придется нажимать клавишу табуляции несколько раз,чтобы перемещаться по всем ссылкам в каждом разделе.
Люди,использующие программное обеспечение,которое показывает только основное содержимое веб-страницы,например люди с когнитивными нарушениями,получат лучшие результаты,если структура страницы правильно размечена.
Люди с нарушениями зрения ,в том числе люди со слабым зрением,имеют подсказки,обеспечивающие ориентацию на странице и в контенте.
Пользователи мобильного Интернета часто имеют доступ к так называемому режиму «чтения» или «чтения»,в котором будет отображаться только основное содержимое страницы,если оно правильно размечено.
Люди,использующие определенные плагины браузера ,могут использовать роли ориентира для перехода к определенным разделам на странице.
Хорошая и доступная структура страниц дает дополнительные преимущества,помимо тех,с которыми сталкиваются люди с ограниченными возможностями. Например,поисковые системы могут использовать данные для лучшего индексации содержимого страницы.
Эти руководства содержат практические рекомендации по реализации специальных возможностей в различных ситуациях. На этой странице собраны следующие критерии успеха и методы WCAG из разных уровней соответствия:
Критерии успеха:
Мы приветствуем ваши идеи
Присылайте любые идеи,предложения или комментарии в (общедоступный) список рассылки wai-eo-editors@w3.org. Вы также можете внести свой вклад в код прямо на Github.
Создайте и отредактируйте эту страницу на Github
Что это такое и как ими пользоваться!
Если вы немного разбираетесь в HTML,вы знаете,что теги HTML (в основном) используются для форматирования содержимого - эти теги сообщают браузеру,как отображать содержимое на странице. Они не указывают,какой тип контента они содержат или какую роль играет на странице.
Семантический HTML5 устраняет этот недостаток,определяя конкретные теги,чтобы четко указать,какую роль играет контент,который содержат эти теги.Эта явная информация помогает роботам/сканерам,таким как Google и Bing,лучше понимать,какой контент важен,какой является вспомогательным,какой предназначен для навигации и т. Д.
Добавляя семантические HTML-теги на свои страницы,вы предоставляете дополнительную информацию,которая помогает Google и Bing понять роли и относительную важность различных частей вашей страницы.
Это руководство предполагает базовое понимание того,как добавлять HTML на страницу. Если все это становится немного ошеломляющим,было бы полезно отступить и взглянуть на вводное руководство по HTML.
Примеры:
теги div и span. Несемантический/общий.
Это примеры несемантических элементов HTML. Они служат только в качестве держателей,чтобы сообщить браузеру,как должен отображаться контент. Они не дают никакой информации о роли,которую контент,который они содержат,играет на странице.
Примеры семантических тегов.
Это семантические элементы. Для программ чтения с экрана и роботов поисковых систем каждый элемент определяет роль содержимого,содержащегося в их тегах.
Для зрячих пользователей,когда страница хорошо оформлена визуально,легко идентифицировать различные части веб-страницы с первого взгляда. Заголовки,меню и (надеюсь) основное содержимое сразу визуально видны. А теперь представьте,что вы слепы.
Боты (пауки) Google и Bing если не слепые,то серьезно ослабляют зрение. Им феноменально трудно увидеть и понять визуальные подсказки - им нужна ваша помощь.
Если вы сможете успешно сообщить Google и Bing,какая часть страницы является заголовком,а какая нижним колонтитулом,а какая предназначена для навигации,они будут вам благодарны.Что наиболее важно,говоря им,какой контент является наиболее важным,вы даете им четкую инструкцию по определению приоритетов этого контента.
Для слепых или слабовидящих пользователей,которые полагаются на средства чтения с экрана для устного описания того,что находится на странице,правильное использование семантических элементов HTML5 позволит программам чтения с экрана более точно передавать ваш контент,делая визуальное слышимым. Крайне важно использовать эту новую версию HTML,чтобы вы могли сделать свой контент доступным для всех возможных посетителей сайта.
Вот наша страничка.
Семантический HTML5 - одна из тех,казалось бы,мелких деталей,которая затрагивает самую суть индексации,которую часто недооценивают. Точно реализованный семантический HTML5 дает большую помощь алгоритмам индексации,используемым роботами Googlebot и Bingbot. Это дает им лучшее понимание (и уверенность в их понимании) вашего контента,что помогает им лучше индексировать ваш контент,что,в свою очередь,помогает вашим усилиям по SEO.
Ввод для поисковых систем
Фабрис Канель из Bing в своем выступлении в моем подкасте заявил,что это так - страницы с правильно реализованным семантическим HTML5 имеют преимущество в SEO перед теми,которые этого не делают.Мартин Сплитт из Google подтвердил это во время саммита SEJ в июне 2020 года.
Когда Googlebot и Bingbot сохраняют просканированные страницы в своем индексе,они добавляют обширный уровень аннотаций. Это тот аннотативный слой,который используют алгоритмы ранжирования для поиска и извлечения контента с отдельных веб-страниц. Более подробные и точные аннотации улучшают поиск и увеличивают шансы того,что любой конкретный фрагмент контента будет рассмотрен алгоритмами для ранжирования.
Итак,правильное использование семантического HTML5 дает вашему контенту преимущество в процессе отбора,который лежит в основе ранжирования.Это увеличивает шансы на то,что алгоритмы ранжирования выберут ваш контент в качестве кандидата для ранжирования в первую очередь.
Примеры семантических тегов HTML включают ,
Следующие теги HTML5 можно использовать вместо тегов
,чтобы разбить содержимое страницы на определенные части,каждая из которых выполняет определенную роль.Как вы понимаете,роботам вроде Googlebot и Bingbot это нравится.
Семантические теги HTML5,которые мы будем использовать в этой статье.
Примеры вы увидите позже,но их краткий обзор будет следующим:
Элемент заголовка - Элемент определяет контент,который следует рассматривать как вводную информацию страницы или раздела.
Навигационный элемент - Все ссылки главного меню навигации будут помещены в тег .Но подменю навигации в другом месте страницы также могут получить его.
Главный тег - В теге должно быть тело страницы,а не боковые панели и основная навигация. Их должно быть только по одному на странице.
Элемент article - Элемент определяет автономный контент,который может стоять независимо от страницы или сайта,на котором он находится. Например,сообщение в блоге.
Элемент раздела - Использование - это способ группировки близлежащего содержимого схожей темы.Тег раздела отличается от тега статьи,потому что он не обязательно самодостаточен.
Aside element - Элемент
Элемент нижнего колонтитула - Вы должны использовать <нижний колонтитул>в основании страницы или раздела. Он может включать контактную информацию и некоторые элементы навигации по сайту.
Это четкое разграничение и явное присвоение ролей каждой части контента делает страницу более понятной и упрощает ее правильное индексирование для Google и Bing.
NB Поскольку все эти теги ведут себя точно так же,как теги
;они могут просто заменить существующие
на странице,не затрагивая макет. Во многих случаях реализация семантического HTML5 может быть столь же простой,как найти правильную пару
и
и заменить их.
Fabric Canel,руководитель группы Bingbot,подтвердил,что семантический HTML5 им очень помогает в невероятно содержательном интервью для моего подкаста «Обнаружение,сканирование,извлечение и индексирование в Bing».
Здесь мы просто определили,какую роль играет каждая часть страницы. Когда вы начинаете применять HTML5,это безопасное место для начала - заголовок,навигация,главный,нижний колонтитул.
Супер простой пример с наиболее важными элементами:header,footer,nav и main.
Лучше иметь суперпростую реализацию,которая на 100% правильна,чем сложную,которая неверна.
Неточная реализация посылает противоречивые и сбивающие с толку сигналы,которые только усугубят ситуацию,а не улучшат ее.
Простая и правильная реализация - уже большой шаг вперед в вашем общении с Google и Bing. Не будьте слишком амбициозными;ошибетесь,и вы можете создать больше проблем,чем решить!
Здесь мы создали иерархию в нашем основном содержании. Это всеобъемлющая статья,которая определяет центральное содержание в пределах основного тега. Это дает обзор темы этой части страницы. В этой статье у нас есть несколько подтем,которые развивают основную тему,которая определяется вложенными разделами.
Обратите внимание,что дизайн (оранжевые блоки) не используется для определения семантических областей страницы.
Обратите внимание,что дизайн (оранжевые блоки) не используется для определения семантических областей страницы. Это дизайн страницы - для людей. Это выглядит немного запутанным,но хорошо показывает,что HTML макета дизайна и семантический HTML5 имеют разные роли.
В реальном мире семантическая разметка часто следует макету больше,чем в этом примере.Общее правило:раздел является частью чего-то еще. Статья - это отдельная вещь.
Также обратите внимание,что здесь я добавил раздел навигации в нижний колонтитул. Логически,как и заголовок,нижний колонтитул содержит элементы навигации.
Здесь мы добавили две части непосредственно связанного содержания к основной статье содержания. Используя asides,мы указываем,что связанный контент (aside) является необязательным. Основной раздел контента может быть показан без отступов и при этом понятен.
Сторона не обязательно должна быть боковой панелью рядом с основным контентом. Его также можно использовать для блоков под основным содержимым,содержащих заголовок,текст и ссылку на другую страницу.
Наша последняя версия страницы,размеченная тегами HTML5.
Здесь мы определили некоторый контент,косвенно связанный со страницей за пределами основной статьи контента. С помощью этой правильной реализации семантического HTML5 мы указываем,что содержимое в стороне не имеет прямого отношения к основной статье.
Здесь важно отметить,что мы явно определили большое количество некритического контента,который можно безопасно исключить из рассмотрения алгоритмами ранжирования. Это означает,что они могут сосредоточиться на важном контенте в этом теге . Мы просто значительно упростили работу алгоритма индексации и алгоритмов ранжирования.
Структурирования веб-страницы с семантическим HTML5 таким образом достаточно для большинства потребностей и уже обеспечивает конкурентное преимущество в SEO.
Об этом много говорят. Нет фиксированных правил для разделов и статей,и их реализация довольно гибкая. Они более или менее одинаковы и в большинстве случаев могут использоваться взаимозаменяемо.
Самое главное - быть логичным и последовательным на всем сайте;Роботу Googlebot и Bingbot НЕОБХОДИМО согласованность.
Персональный совет :Я обнаружил,что вложение разделов внутри статьи с контентом логично как для машины,так и для человека (разработчику будет легче читать HTML-код).
Элементы могут вмещать другие элементы. Например,статья может иметь свой собственный ,
Редко,когда какая-либо веб-страница требует такого подробного структурно-семантического HTML5. Если страница становится сложной для организации,то она,вероятно,не будет хорошо работать в SEO,и вы почти наверняка захотите разделить контент на несколько страниц.
Как упоминалось выше,для целей SEO вам следует сконцентрироваться на предоставлении страницы с прочной и простой структурой.
Просто предупреждение - я видел много сайтов,использующих визуальный дизайн в качестве руководства для реализации HTML5. Как видно выше,семантический HTML5 предназначен не для этого.
Семантический HTML5 не для дизайна.
Этот (на удивление типичный) пример просто дублирует визуальный макет. Что еще хуже,чем бессмысленно,это означает,что страница содержит 4 разные темы,а не одну тему и 3 подтемы.
Явное предоставление вводящей в заблуждение информации роботам Google и Bingbot отрицательно повлияет на их понимание и снизит полноту и точность их аннотаций,что затруднит поиск вашего контента с помощью алгоритмов ранжирования (см. Выше).
Помогите роботам Googlebot и Bingbot,и они помогут вам 🙂
Семантический HTML5 - это невероятно мощный способ сообщить роботам Googlebot и Bingbot ту роль,которую играет каждая часть вашей страницы. И когда у них есть точное понимание этого,они могут более точно аннотировать ваш контент при его сохранении.
Что,возможно,не кажется большим делом. Но богатые и точные аннотации ботов - это то,что делает контент легко доступным для каждого отдельного алгоритма ранжирования:основная синяя ссылка,избранный фрагмент,люди также спрашивают,изображения,видео и т. Д.
Какую бы функцию SERP вы ни выбрали,семантический HTML5 дает вы трамплин для соревнований.
Понимание - это один из трех столпов долгосрочной стратегии SEO,которая приведет к успеху в мире,где нам нужно будет оптимизировать для работы с механизмами ответа.Если вы хотите,чтобы машина понимала,вам нужно общаться четко и эффективно. Семантический HTML5 - одно из очень эффективных средств в вашем распоряжении для эффективного взаимодействия с этими машинами. Структурированная разметка схемы - другое. Вот статья об этом.
Второй столп - доверие. Вы также можете сделать множество вещей,чтобы повысить свой авторитет. E-A-T - это центральный столп здесь. Посмотрите этот веб-семинар,чтобы узнать об этом больше.
Третий столп - возможность доставки.Если Google не может доставить ваш контент своим пользователям или если он считает,что ваш сайт не будет доставлять контент так,как ожидают его пользователи,то он никогда не будет предлагать ваш контент в качестве ответа на вопрос пользователя (или решения его проблемы).
Все SEO (и AEO) сводятся к коммуникации,надежности и доставляемости. Я буду продолжать регулярно писать здесь,на SEMrush,о методах улучшения вашего общения,вашего доверия и доставляемости вашего контента с помощью Google и Bing (кстати,Bing скоро вернется).
Пожалуйста,поделитесь своими мыслями об этой статье в разделе комментариев ниже,но также не стесняйтесь задавать свои вопросы о коммуникации,надежности и доставляемости в SEO;ваши вопросы помогут определить приоритеты того,о чем я должен писать.
Структура,роли,относительная важность и иерархия - это вещи,которые люди часто понимают инстинктивно из дизайна/макета.