Быстро понять веб-семантику

Что такое веб-семантика

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

Подвести итог:

Правильные лейблы делают правильные вещи
Структурированный контент страницы
Легко читается даже без внешнего вида CSS, легко читается, поддерживается и понимается
Легко для браузеров и поисковых систем для анализа. Хорошо для тегов сканера, хорошо для SEO

семантические теги html

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

<html>
    <body>
        <article>
            <header>
                <h1>h1 - WEB 语义化</h1>
            </header>
            <nav>
                <ul>
                    <li>nav1 - HTML语义化</li>
                    <li>nav2 - CSS语义化</li>
                </ul>
            </nav>
            <section>
                section1 - HTML语义化
            </section>
            <section>
                section2 - CSS语义化
            </section>
            <time datetime="2018-03-23" pubdate>time - 2018年03月23日</time>
            <footer> footer - by 小维</footer>
        </article>
    </body>
</html>

Семантические теги HTML включают тело, статью, навигацию, в сторону, раздел, заголовок, нижний колонтитул, hgroup, адрес h1-h6 и т. д.

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

элемент заголовка

header обозначает заголовок «страницы» или «раздела», обычно содержащий элементы h1-h6 или hgroups, в качестве заголовка всей страницы или краткого содержимого. Также может включать оглавление раздела, окна поиска, навигации или связанного логотипа.

Пример кода:

    <header>
        <hgroup>
            <h1>网站标题<h1>
            <h2>网站副标题</h2>
        </hgroup>
    <header>

Меры предосторожности:

Может быть заголовком «веб-страницы» или любого «раздела».
безлимитный
Если hgroups или h1-h6 прекрасно работают сами по себе, то нет необходимости использовать заголовки.

элемент hgroup

hgroupЭлемент представляет заголовок «страницы» или «раздела», и когда элемент имеет несколько уровней, элемент можетh1прибытьh6элементы внутри него, такие как комбинация основного заголовка и подзаголовка статьи

Пример кода:

<hgroup>
    <h1>这是一个主标题</h1>
    <h2>这是一个副标题</h2>
</hgroup>

Меры предосторожности:

Если вам нужен только тег h1-h6, не используйте hgroup
Если в строке несколько тегов h1-h6, используйте hgroup
Если в строке несколько заголовков и других данных статьи, теги h1-h6 заключаются в hgroup и помещаются в тег заголовка вместе с другими метаданными статьи.

элемент нижнего колонтитула

footerЭлемент представляет собой нижний колонтитул «веб-страницы» или любого «раздела» и обычно содержит некоторую основную информацию о разделе, такую как: автор, ссылки на связанные документы, информация об авторских правах. еслиfooterэлементы содержат целые разделы, далее они представляют собой приложения, указатели, акции, лицензионные соглашения, теги, категории и некоторую другую подобную информацию.

Пример кода:

<footer>
    COPYRGHT@小维
</footer>

Меры предосторожности:

Может быть нижней частью «страницы» или любого «раздела».
Ограничений по количеству штук нет, разве что содержимое упаковки разное, остальное аналогично шапке

элемент навигации

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

<nav>
    <ul>
        <li>HTML语义化</li>
        <li>CSS 语义化</li>
    </ul>
</nav>

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

Меры предосторожности:

Для основной навигационной части всей страницы не используйте элемент nav, если он не подходит.

элемент статьи

article представляет собой фрагмент контента, который является автономным в документе, странице или веб-сайте и предназначен для независимой разработки или повторного использования разработчиками.
В дополнение к своему содержанию статья будет иметь название (обычно вheader), аfooterнижний колонтитул.

Пример кода:

<article>
    <h1>你好，我是这边文章的标题</h1>
    <p>你好，我是文章的内容</p>
    <footer>
        <p>最终解释权归XXX所有</p>
    </footer>
</article>

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

<article>

    <header>
        <h1>web 语义化</h1>
        <p><time pubdate datetime="2018-03-23">2018-03-23</time></p>
    </header>

    <p>文章内容..</p>

    <article>
        <h2>评论</h2>

        <article>
            <header>
                <h3>评论者: 专业水军</h3>
                <p><time pubdate datetime="2018-03-23T15:10-08:00">~1 min ago</time></p>
            </header>
            <p>还行</p>
        </article>

        <article>
            <header>
                <h3>评论者: 大水怪</h3>
                <p><time pubdate datetime="2018-03-23T15:10-08:00">~1 hour ago</time></p>
            </header>
            <p>楼上说的对</p>
        </article>

    </article>

</article>

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

<article>

    <h1>web语义化</h1>
    <p>什么是语义化？</p>

    <section>
        <h2>语义化详解</h2>
        <p>语义化就是。。。</p>
    </section>

    <section>
        <h2>语义化特点</h2>
        <p>语义化特点就是。。。</p>
    </section>

</article>

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

Меры предосторожности:

В случае собственной независимости: использовать артикль
связанный контент: используйте раздел
Несемантический: используйте div

элемент сечения

sectionЭлемент представляет собой «раздел» или «раздел» в документе. «Раздел» может относиться к подразделу статьи по теме, «раздел» может относиться к группе на странице.sectionОбычно он также имеет заголовок.Хотя раздел в html5 автоматически понизит заголовки h1-h6, лучше понизить их вручную.

Пример кода:

<section>
    <h1>section是啥？</h1>
    <article>
        <h2>关于section</h2>
        <p>section的介绍</p>
        <section>
            <h3>关于其他</h3>
            <p>关于其他section的介绍</p>
        </section>
    </article>
</section>

Меры предосторожности:

Страницу можно разделить на профили, записи статей и контактную информацию с помощью разделов. Однако на внутренней странице статьи лучше всего использовать article. Раздел не является элементом-контейнером в общем смысле.Если вы хотите использовать его для удобства отображения стилей и сценариев, вы можете использовать div.
Представляет раздел или абзац в документе.
Article, nav и aside можно понимать как специальные разделы.Если вы можете использовать article, nav и aside, не используйте section, а используйте div, если он не имеет практического значения.

боковой элемент

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

Пример кода:

<article>
    <p>内容</p>
    <aside>
        <h1>作者简介</h1>
        <p>小维,哈哈哈</p>
    </aside>
</article>

Меры предосторожности:

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

семантическая сводка html

Короче говоря, семантика HTML выступает против использования div+span+class без семантики на больших страницах и поощряет использование определенных HTML семантических тегов.

Конечно, если вам нужна совместимость с более ранними версиями браузеров IE, такими как IE8 и более ранние версии, вам необходимо рассмотреть некоторые решения для совместимости тегов HTML5.
Для получения дополнительных тегов и их совместимости перейдите на портал
Портал списка тегов HTML5

Семантика CSS

Семантика CSS — это семантика именования классов и идентификаторов. Атрибут class является связующим звеном между HTML и CSS, и его первоначальное предназначение — описать содержимое элемента. Относится к имени класса или идентификатору, прикрепленному к тегу html с понятным именем. Если семантические теги HTML предназначены для просмотра машинами, то семантика именования CSS предназначена для просмотра людьми. Хороший метод именования CSS снижает затраты на общение и отладку, и его легко понять.

Именование CSS должно сначала соответствовать соглашениям об именах W3C и соглашениям об именах команды. Во-вторых, эффективность и возможность повторного использования.

Как будто .main/.sidebar будет иметь лучшую гибкость именования классов, чем .left_content/.right_content.

<!-- 以表现为中心 -->
<div class="ft margin10">
    <span>用户名：小维</span>
<div>

<!-- 以信息为中心 -->
<p class="user_info">
    <em>用户名:小维</em>
<p>

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

Пример кода:

<html>
    <body>
        <div class="article">
            <div class="header">
                <h1>h1 - WEB 语义化</h1>
            </div>
            <div class="nav">
                <ul>
                    <li>nav1 - HTML语义化</li>
                    <li>nav2 - CSS语义化</li>
                </ul>
            </div>
            <div class="section">
                section1 - HTML语义化
            </div>
            <div class="section">
                section2 - CSS语义化
            </div>
            <div class="time">time - 2018年03月23日</div>
            <div class="footer"> footer - by 小维</div>
        </div>
    </body>
</html>

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

Расширение знаний - ARIA

ARIA расшифровывается как Accessible Rich Internet Application, что переводится на китайский язык как Accessible Rich Internet Application. Он может обеспечить безбарьерный доступ к динамическому и интерактивному веб-контенту для людей с функциональными нарушениями (например, со слухом и зрением) с помощью средств чтения с экрана, таких как голос за кадром.

ARIA в применении к HTML состоит из двух частей: role и aria-*.

Среди них «роль» определяет роль элемента, а «ария» описывает связанные с ним характеристики и положение вещей.

Конкретные правила использования ARIA можно найти в ARIA в HTML.

W3C объясняет веб-спецификацию специальных возможностей ARIA следующим образом: веб-разработчики могут использовать роль ARIA и атрибуты aria-* в элементах HTML в соответствии с требованиями, описанными в [wai-aria-1.1], за исключением случаев, когда они противоречат строгому родному стандарту. семантики или равны неявным Семантика ARIA данного элемента HTML.

    Setting an ARIA role and/or aria-* attribute that matches the implicit ARIA semantics is unnecessary and is not recommended as these properties are already set by the browser.

Таким образом, если используемые элементы (HTML5) по своей сути являются семантическими, их следует использовать вместо переопределения элемента, который добавляет роли, состояния или атрибуты ARIA.
Например:
nav уже подразумевает оператор ARIA role="navigation", поэтому его не нужно указывать в

При определении роли или арии на этикетке она может быть распознана программой чтения с экрана. Для элементов без семантики рекомендуется использовать role="navigation".

END

Веб-семантика включает семантику тегов HTML и семантику имен CSS. Существует также семантика URL.Эта статья предназначена в основном для простого и быстрого понимания веб-семантики, поэтому я не буду ее расширять. Для получения дополнительной информации и знаний, пожалуйста, обратитесь к:
Как понять веб-семантику
Одно из нововведений HTML 5: семантические теги теги элементов раздела.
Инновация HTML 5 — семантические теги (2)

Большое спасибо за сводку знаний.