[Перевод] не использовать так много DIV, попробуйте семантическую метку

HTML

Оригинальная ссылка:Stop using so many divs! An intro to semantic HTML, Кен сильфон

много разделов

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

<div class="container" id="header">
    <div class="header header-main">Super duper best blog ever</div>
    <div class="site-navigation">
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/archive">Archive</a>
    </div>
</div>
<div class="container" id="main">
    <div class="article-header-level-1">
        Why you should buy more cheeses than you currently do
    </div>
    <div class="article-content">
        <div class="article-section">
            <div class="article-header-level-2">
                Part 1: Variety is spicy
            </div>
            <!-- cheesy content -->
        </div>
        <div class="article-section">
            <div class="article-header-level-2">
                Part 2: Cows are great
            </div>
            <!-- more cheesy content -->
        </div>
    </div>
</div>
<div class="container" id="footer">
    Contact us!
    <div class="contact-info">
        <p class="email">
            <a href="mailto:us@example.com">us@example.com</a>
        </p>
        <div class="street-address">
            <p>123 Main St., Suite 404</p>
            <p>Yourtown, AK, 12345</p>
            <p>United States of America</p>
        </div>
    </div>
</div>

использовал много<div>какие. Во всяком случае, это работает так. Я имею в виду, что это структура, которая нам нужна, а также для написания книги в соответствии со стилем оформления. Но здесь есть несколько больших проблем:

  1. Доступность: многие инструменты a11y умны. Они делают все возможное, чтобы проанализировать структуру страницы, помочь пользователям перемещаться по структуре страницы так, как задумал разработчик, и предоставить пользователям простые точки перехода для быстрого перехода к определенной части страницы. но <div>не предоставляет никакой полезной информации о структуре документа. В конце концов, самый умный а11й-инструмент в мире не является человеком, и нельзя ожидать, что он поймет все странные и дикие стили именования разработчиков во всем мире, анализируя классы и идентификаторы. я могу знатьclass="article-header-level-2"Это субтитры, но роботы не могут. (Если я только мог, пожалуйста, пожалуйста, сделайте его из моего компьютера, я не готовОИИ революцияПодготовка к приезду. )
  2. Удобочитаемость: читая приведенный выше код, нам нужно внимательно посмотреть на имя класса и определить, какой это класс.<div class="..."></div>Вверх. Однако, как только вы дойдете до нескольких уровней разметки, становится трудно определить, какие из них</div>соответствующий закрывающему тегу<div...>Где стартовый маркер. Затем мы сильно полагаемся на то, что предоставляет IDE.Уровень отступа разного цветаилиВыделите совпадающие тегии другие функции, чтобы узнать текущее местоположение. Если содержимое документа очень длинное, вам также может потребоваться много прокрутки.

HTML5

семантический элемент. “语义”是指单词或事物的含义，因此“语义元素”就是为了用更有осмысленныйСпособ разметки элементов структуры документа. Семантические теги дают понять, что элементиспользоватьи его роль в документации. Более того, поскольку он стандартизирован, используя эти элементы для определения документов, не только разработчики, но и роботы могут без проблем их понимать и использовать.

На самом деле стандарт HTML5 определяет<div>Примечание при использовании элемента:

ПРИМЕЧАНИЕ:

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

—Я 3.org/TR/HTML5/person…

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

Основная структура

В наши дни сверхобщий шаблон можно найти на интернет-сайтах, в учебных пособиях и даже в библиотеках CSS. Самый верхний уровень страницы обычно делится на три области:header,mainа такжеfootersection.上面示例中代码就证明了我的观点：

<div class="container" id="的">...</div>
<div class="container" id="main">
    ...
    <div class="article-section">...</div>
    ...
</div>
<div class="container" id="footer">...</div>

Я видел (и использовал) этот шаблон десятилетиями, документы, построенные таким образом, очень значимы, не только может улучшить читаемость HTML, вы можете упростить стиль страницы. Элементы заголовка и нижнего колонтитула также могут сотрудничать с использованием PHP или Rails / Erb и некоторых других языков шаблонов, например, вы можете использовать однородные заголовки и нижние колонтитулы на всей территории:

<?php include 'header.php'; ?>

<div id="main">...</div>

<?php include 'footer.php'; ?>

Все думали, что это хорошая модель, включая моих друзей из WHATWG и W3C. Таким образом, HTML5 вводит 4 стандартизированных семантических элемента, значения которых известны по именам:<header>,<main>,<footer>а также<section>.

Книжный стенд:<header> а также <footer>

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

<header> а также<footer>семантически находится в ближайшем "secioning root"или"sectioning content". Эти элементы представлены<body>,<blockquote>,<section>,<td>,<aside>и многие другие элементы (нажмите на ссылку выше, чтобы увидеть полный список). Вспомогательные технологии могут использовать эти и другие элементы для создания структуры документа, чтобы облегчить пользователям навигацию по документу. В то же время следует отметить, что каждый раздел root/content может иметь только один<header>или<footer>(Каждый появляется максимум один раз, не дважды в то же время).

Последнее, что следует отметить, это то, что<header>обычно содержит элемент заголовка (<h1>~<h6>).当然，不是一定要有的，但可以帮助其他相关元素与标题组合，比如：链接、图像或子标题。 хотя<header>Содержит только элемент заголовка, его можно поддерживать в той же структуре.

хороший:<main>

Третьим основным элементом regoin является<main>, что довольно специфично. Спецификация делает два важных замечания по этому поводу:

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

—Я 3.org/TR/HTML5/person…

следовательно<main>То, что размещено на странице, является хорошим и важным контентом на странице, поэтому пользовательОсновная причина посетить эту страницу, а не ваш сайт. Другими словами, основное содержание. 😯😲🤯

Другие вещи, такие как логотипы, формы поиска, навигация, могут быть размещены в<body>из <header>или<footer> в,<main>за пределами.

Документ может иметь не более одного<main>элемент. Если документ содержит несколько<main>элемент, остальные должны использоватьhiddenАтрибутыСпрятать.

—Я 3.org/TR/HTML5/person…

这很独特。 а также<header>,<footer>(и большинство других блочных элементов), разница в том, что<main>Его нельзя использовать ни в каком разделе содержимого всей страницы, его можно использовать только один раз. Или можно использовать несколько раз, но только по одному за раз<main>Элементы видны, другие пропущеныhiddenСвойство скрыто, и эффект эквивалентен эффекту CSS.display: none.

Если подумать, это ограничение полезно для добавления возможности предварительной загрузки представлений в приложение: создайте новый<main hidden>, чтобы получить то, что пользователь может захотеть увидеть дальше (например, следующую статью в серии, следующий слайд в слайд-шоу и т. д.). Когда пользователь щелкает ссылку/кнопку, переключая текущую<main>и предварительно загружен<main hidden> серединаhiddenСвойство реализует функцию переключения вида.

Прежде чем двигаться дальше, давайте остановимся на мгновение и повторим то, что мы сказали ранее. Код в начале статьи с использованием<header>,<footer>,<main>После модификации становится так:

<header>
    <h1>Super duper best blog ever</h1>
    ...
</header>
<main>
    <h2>Why you should buy more cheeses than you currently do</h2>
    ...
</main>
<footer>
    Contact us!
    <div class="contact-info">this.is.us@example.com</div>
</footer>

отлично! Но предстоит еще много работы.

Расколоть:<section>

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

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

Никто не любит читать такую ​​текстовую стену

это введение<section>значение.<section>Правила самые простые: структурно это в основном<div>.<section>Начинает новую область «содержимое разделов», поэтому она может иметь свою собственную<header>,<footer>.

Так,<section>и обычный<``div``>В чем разница между. когда использовать<div>, Когда он используется?<section>Шерстяная ткань? Я снова цитирую спецификацию, чтобы ответить:

ПРИМЕЧАНИЕ:

<section>Не общие элементы контейнера. Если это стиль с целью удобства или сценариев, чтобы поощрить разработчиков использовать<div>.一般规则是，如果元素内容需要出现在文档контур, то это содержимое будет использовать<section>Обтекание элементов.

—Я 3.org/TR/HTML5/color…

顺便说一句，HTML5 规范很容易阅读。每次为了得到答案快速浏览时，我都会不可避免地学到一些意想不到的有用信息，尤其是在我开始点击链接时。 Попробуйте бесплатно!

Проще говоря - если вам нужно, чтобы эта часть содержимого появилась в каталоге, то используйте<section>bar; если он вам не нужен, используйте<div>или другие элементы.

Содержание инструкции

У нас есть хорошо структурированная страница. бесполезно только<div>, мы четко обозначили основную контентную область страницы, а также обозначили шапки, футеры и разделы, но смысловых элементов определенно больше, чем используется в нашей документации.

Далее, давайте поговорим о некоторых других элементах, добавленных в HTML5, которые передают, чтосодержаниесемантика, а неструктураСемантика.

<article>

<article>Элемент используется для представления полностью независимой области контента. Эта область содержимого, даже если они размещены на другой странице, по-прежнему имеет смысл. Например, это могут быть статьи или посты, но это может быть и твит, или стикеры на стене Facebook, или контент в социальных сетях, и тому подобное.

 <article>должен иметь заголовок, чтобы определить его значение, желательно с использованием элемента заголовка (<h1>~<h6>).<article>элемент может содержать<header>,<footer>а также<section>элемент, поэтому вы действительно можете использовать его для встраивания полного фрагмента документа со всей необходимой структурой в другую страницу.

Возвращаясь к исходному примеру, мы используем<article>и некоторые другие элементы обсуждались, чтобы переписатьclass="article-*"элемент.

<article>
    <header>
        <h1>Why you should buy more cheeses than you currently do</h1>
    </header>
    <section>
        <header>
            <h2>Part 1: Variety is spicy</h2>
        </header>
        <!-- cheesy content -->
    </section>
    <section>
        <header>
            <h2>Part 2: Cows are great</h2>
        </header>
        <!-- more cheesy content -->
    </section>
</article>

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

<nav>

Этот элемент более известен, чем другие элементы. потому что<nav>заключается в четком определении основных навигационных блоков на странице, которые помогают пользователям переходить к другим частям сайта (таким как карта сайта или<header>список ссылок в ) или навигации по текущей странице (например, определение каталога).

В приведенном выше примере мы имеем<header>Связанные приложения в<nav>.

<nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/archive">Archive</a>
</nav>

Модификация не меняет структуру страницы, не нужно видеть<div>Имена классов, можно знать здесь значение, и, что более важно, робот может понять.

связаться:<address>

Последний элемент, который мы собираемся обсудить, это<address>. Этот элемент используется для идентификации контактной информации и обычно отображается на главной странице.<footer>середина.比如标记企业的邮寄地址、电话号码、客服邮件等。

<address>

Распространенным решением являетсяRDFa, такжеСпецификация W3C. Он использует теги для размещения различных компонентов данных. Вот наш пример кода нижнего колонтитула в использовании<address>Скорректированы как элементы и разметки RDFA:

<footer>
    <section class="contact" vocab="http://schema.org/" typeof="LocalBusiness">
        <h2>Contact us!</h2>
        <address property="email">
            <a href="mailto:us@example.com">us@example.com</a>
        </address>
        <address property="address" typeof="PostalAddress">
            <p property="streetAddress">123 Main St., Suite 404</p>
            <p>
                <span property="addressLocality">Yourtown</span>,
                <span property="addressRegion">AK</span>,
                <span property="postalCode">12345</span>   
            </p>
            <p property="addressCountry">United States of America</p>
        </address>
    </section>
</footer>

RDFa действительно немного многословен, но очень удобен для маркировки данных. Если вы хотите узнать больше о RDFa, вот несколько ссылок:

Суммировать

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

<header>
    <h1>Super duper best blog ever</h1>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/archive">Archive</a>
    </nav>
</header>
<main>
    <article>
    <header>
        <h1>Why you should buy more cheeses than you currently do</h1>
    </header>
    <section>
        <header>
            <h2>Part 1: Variety is spicy</h2>
        </header>
        <!-- cheesy content -->
    </section>
    <section>
        <header>
            <h2>Part 2: Cows are great</h2>
        </header>
        <!-- more cheesy content -->
    </section>
</article>
</main>
<footer>
    <section class="contact" vocab="http://schema.org/" typeof="LocalBusiness">
        <h2>Contact us!</h2>
        <address property="email">
            <a href="mailto:us@example.com">us@example.com</a>
        </address>
        <address property="address" typeof="PostalAddress">
            <p property="streetAddress">123 Main St., Suite 404</p>
            <p>
                <span property="addressLocality">Yourtown</span>,
                <span property="addressRegion">AK</span>,
                <span property="postalCode">12345</span>   
            </p>
            <p property="addressCountry">United States of America</p>
        </address>
    </section>
</footer>

Я бы сказал, что это 100 раза более читаемо, чем началось с 100x больше SEO и вспомогательного устройства.

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

Эта статья — только начало. Когда вы начинаете читать спецификацию HTML, вы просто не можете остановиться. Это очень богатый язык, и я думаю, что люди недооценивают возможности HTML на веб-сайте.

(Конец текста)

коммерческое время(длительный эффект)

Моя хорошая знакомая владеет питомником, и я здесь, чтобы помочь ей распространить информацию. Теперь все кошки в питомникекукла кошка. Если вы также любите кошек и нуждаетесь в этом, вы можете также отсканировать ее [Xianyu] QR-код. Неважно, если вы не купите его, просто взгляните.

(над)

Категории