语义化HTMLчто это такое? не имеет смысла?
так называемый语义化HTML, заключается в том, чтобы выражать мысли и идеи программиста на уровне кода и в то же время изображать структуру страницы сайта:
- Общайтесь с другими программистами, чтобы помочь программистам быстро освоить текущий код. На самом деле это может быть достигнуто с помощью аннотаций, но с использованием
语义化HTMLБолее или менее можно сохранить некоторые комментарии, ха-ха. - Общайтесь с системами, которые также созданы для работы с кодом (такими как отключенные считыватели и сканеры поисковых систем и т. д.), чтобы помочь им быстро и точно достичь своих целей. Поскольку такие системы ограничены по сравнению с человеческим интеллектом, необходимо соглашение о том, как общаться, и
W3Cрешение语义化HTMLстандарт.
Недавно, когда я наверстывал азы фронтенда, я наткнулся на этот пункт знаний, и обнаружил, что большая часть информации на рынке сумбурна, и часто ее можно только понять, а не произнести, и это сложно чтобы найти в этом какую-либо практическую ценность, поэтому я написал эту статью, не прося всестороннего анализа, а только в первую очередь практическую.
HTML-теги класса главы документа
Теги HTML типа главы документа могут отражать структуру веб-страницы, поэтому они также имеют наиболее семантические теги HTML.
<article> / <section>
Семантика этих двух тегов аналогична, и оба они представляют собой независимую область (независимую единицу) в документе, которая также может быть структурно разделена на<header> / <footer>и так далее.
Сравнивая две этикетки,<article>Сравнивать<section>Чтобы быть на один уровень выше:
-
<article>может содержать<section>, например: сообщение в блоге обычно имеет список «похожих статей» внизу или сбоку, тогда можно использовать весь этот фрагмент HTML<article>чтобы обернуть его, и можно использовать небольшой фрагмент HTML для «сопутствующей статьи».sectionуказать; другой пример, такой как «информация об авторских правах» статьи, также может быть использованsectionПредставлять. -
<article>может содержать<article>, например: статья и комментарии пользователей к этой статье, можно использовать весь HTML с<article>в завершение, а комментарии пользователей также подчинены этой статье из логического разбора, так что их тоже можно использовать<article>завернут и приписан к статье<article>под. -
<section>больше нельзя помещать под<section>, который со стороны показывает, что это наименьший уровень самостоятельной разметки ячеек. -
<article>Обычно используется для «подробного контента», поэтому обычно страница содержит только один элемент верхнего уровня.<article>. Напротив,<section>используется более широко, за исключением того, что можно использовать «детали»<section>Для выполнения пакета, например: на главной странице сайта вы можете использовать<section>для отображения списка статей в разных категориях/разделах.
<header> / <footer>
Эти две метки похожи по своей природе, поэтому для сравнения они сложены вместе: одна для головы и одна для дна.
На первый взгляд, я думаю, что эти два тега — это заголовок веб-страницы (обычно включающий ЛОГОТИП веб-сайта, баннер, навигацию верхнего уровня и т. д.) и нижний колонтитул (информация о самом веб-сайте, включая информацию об авторских правах, контактную информацию и т. д.). .), но на самом деле эти два тега Сфера применения гораздо шире этой, и их можно использовать как другие независимые единицы (<article>/<section>/<aside>/<nav>и т. д.), например, в столбце статьи ниже, часть, обведенная красным, может использоваться с<header>(Рассмотрите включение<nav>), а часть, выделенную синим цветом, можно использовать<footer>.
Другим примером является статья, название/автор/время публикации статьи и другая информация может быть использована<header>, а также информацию об авторских правах статьи, список справочных статей и т. д. можно использовать<footer>.
<main>
Поскольку упоминается<header> / <footer>, надо упомянуть<main>.<main>Буквально, это основная часть всей страницы. а также<header> / <footer>Не то же самое, на странице может быть только один<main>, не могут быть помещены в другие независимые блоки.<main>Включайте только основной контент страницы, такой как статья, а другой второстепенный контент, такой как панель поиска, меню и т. д., включать не следует.
<aside>
<aside>Как правило, это боковая панель, отличная от основного содержимого страницы, например упомянутые выше «связанные статьи» или «профиль автора». В этом случае она обычно включается в<article>середина. Кроме того,<aside>Он также может представлять некоторые функции инструментов, такие как «поделиться статьями», «вернуться к началу» и другие функции.
<nav>
<nav>Указывает навигацию по веб-сайту, но не обязательно всю навигацию необходимо использовать<nav>Для этого рекомендуется использовать его только для достижения более важной навигации, такой как список ссылок в нижнем колонтитуле веб-страницы, напрямую использовать<footer>Вот и все. Кроме того, каждая страница может иметь несколько<nav>.
<h1> - <h6>
<h1> - <h6>Указывает название, всего 6 уровней, из которых<h1>имеет наибольший вес,<h6>имеет наименьший вес, а остальные убывают по порядку. Вообще говоря,<h1>Его необходимо привязать к названию веб-сайта/логотипу.Если установлено доменное имя второго уровня, его также можно присвоить имени веб-сайта/логотипу подстанции.
Для поисковых систем,<h1> - <h3>Это важный способ понять веб-страницу, поэтому она должна быть размещена соответствующим образом, например: используйте заголовок статьи.<h2>, используется для каждого подзаголовка в статье<h3>.
Семантические теги HTML на уровне текста
Существует множество семантических HTML-тегов текстового уровня, но не так много из них, которые, как мне кажется, имеют практическое значение.
<a>
<a>Представляет собой вход на другие страницы или в другие места на текущей странице.Это давно устоявшийся семантический тег, а также основа поисковых систем.С ним должен быть знаком каждый, поэтому подробно описывать его здесь не будем.
<p>
<p>Представляет абзац, который также является давним тегом. Семантически я бы предпочел использовать<p>для представления фрагмента простого текста вместо использования<p>представить определенный стиль.
<em> / <strong>
Эти две метки используются для выделения определенного слова/предложения.<strong>Сравнивать<em>Чем тяжелее тон, тем сильнее акцент.
Говорят, что эти два тега используются для семантической замены<i>а также<b>. Так,<em>а также<i>, какая разница? ответ,<i>Он больше не используется для выражения «выделения», а только для того, чтобы отличить некоторые имена собственные (например, имена людей, названия книг и т. д.) от обычных слов.<b>ситуация с<i>Точно так же он больше не выделяется и в какой-то степени потерял свою семантику и используется только как вспомогательный тег для завершения стиля CSS.
<time>
<time>Используется для представления 24-часового времени или даты по григорианскому календарю. Если он представляет дату, он также может включать время и часовой пояс. для<time>, попробуйте использовать формат времени, который может распознать машина, вместо каких-то расплывчатых выражений, типа "час назад", "два дня назад" и т.п.
Комбинированные теги HTML
<figure>
<figure>Представляет собой фрагмент форматированного текста, который может быть иллюстрацией к статье, фрагментом кода, таблицей, обычно с<figcaption>чтобы выразить описание/название этого богатого текста, конечно,<figure>Может быть только один<figcaption>.
я думал об этом<figure>Типичное использование блока водопадного потока:
структурированные данные
Эта часть очень важна в области SEO.Согласно некоторым правилам, которые были составлены, вы можете четко обозначить атрибуты основного тела страницы. Например: страница с подробной информацией о товаре представлена обычной семантикой, возможно поисковику видно только название товара, но так как доступны структурированные данные, то для обозначения товара можно использовать определенные теги и атрибуты. Цена, поставщик, физическая карта и другой контент; после того, как поисковая система получит различные атрибуты страницы продукта, она будет отображаться непосредственно на странице результатов поиска, и ранжирование также будет необъективным. Контента в этой области очень много, рекомендуется обращаться к рекомендациям по оптимизации основных поисковых систем, ведь каждая поисковая система по-разному поддерживает эти структурированные данные. Вот официальный сайт структурированных данных, поддерживаемых Google: http://schema.org/