Хватит злоупотреблять div!Введение в семантику HTML

внешний интерфейс HTML

banner

DIVS пора остановиться (злоупотребление)

нам нравится (используем)<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Этикетка. Тем не менее, это работает. Я имею в виду в основном, у него есть структура, которая вам нужна. И я уверен, что это будет выглядеть так, как вы хотите после того, как вы закончите добавлять стили. Тем не менее, у него есть серьезные проблемы:

  • Доступность - многоa11y toolsОн очень умен и сделает все возможное, чтобы проанализировать структуру страницы, чтобы помочь пользователям ориентироваться в соответствии с намерением создателя страницы, и предоставить пользователям простые ссылки перехода, чтобы направить их к той части страницы, которая им интересна. Однако,<div>Теги на самом деле не передают никакой полезной информации о структуре документа. самый умный в миреa11y toolВсе еще не человек, не могу ожидать, что он разберетclassа такжеidАтрибуты или способность распознавать странные и дикие способы, которыми разработчики по всему миру называют блочные элементы. я могу определитьclass="article-header-level-2"это подзаголовок, но машины не могут. (Уберите это с моего компьютера, если можете, но я и к этому не готовРеволюция искусственного интеллектаШерстяная ткань. )

  • Читабельность — чтобы прочитать этот код, нужно внимательно просмотреть имена классов, начиная с<div class="..."></div>Выберите между шаблонами. Как только вы (код) спуститесь на несколько уровней вниз, отслеживайте, какой из них</div>конечный тег, с которым<div ...>Начните помечать корреспонденцию, и это становится сложно. Вы начинаете сильно полагаться на функции IDE, такие какРаскажите разные уровни отступаилиВыделите совпадающие тегидля отслеживания вашего местоположения, а в более длинных документах может потребоваться много прокрутки поверх этих функций.

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

HTML5: этот стандарт

HTML5Не новый. Это преуменьшение;первоначальный рабочий проектОпубликовано для общественного обсуждения в январе 2008 г. (11 лет назад) и стало 4 с половиной года назад в октябре 2014 г.Комплексная рекомендация W3C. Так, как это было вокруг в течение некоторого времени.

HTML5Одним из основных достижений стало введение набора стандартизированныхсемантический элемент. Термин «семантический» относится к значению слова или предмета, поэтому «семантические элементы» — это элементы, используемые для обозначения структуры документа более осмысленным образом, что позволяет понять, для чего они предназначены и для чего служат в документе. Какова цель. И что важно, поскольку они стандартизированы, эти элементы, определяющие документ, могут использоваться и пониматься всеми, включая ботов.

Я думаю, что сама спецификация HTML5 находится в<div>Проблема хорошо описана в комментарии под определением элемента:

Примечания: Автор настоятельно рекомендует использоватьdivЭлемент считается последним взятым элементом, в том случае, если другие элементы не подходят. Использование более подходящего элемента вместо элемента div делает его более доступным для читателей и упрощает поддержку для авторов. --Я 3.org/TR/HTML5/person…

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

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

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

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

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

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

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

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

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

Bookends: <header>а также<footer>

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

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

В заключение,<header>Часто элемент заголовка сохраняется как его контекст (<h1>-<h6>). Это не обязательно, но может помочь сгруппировать другие связанные элементы с заголовками, такими как ссылки, изображения или подзаголовки, и сохранить согласованную структуру, даже если заголовок<header>единственный элемент в .

хороший:<main>

Третий основной элемент области --<main>особый. В спецификации указано о<main>две очень важные вещи:

Область основного содержимого документа включает содержимое, специфичное для документа, и не включает содержимое, которое повторяется в наборе документов, например ссылки для навигации по сайту, информацию о версии, логотип сайта, баннеры и формы поиска (если только основная функция документа или приложения — форма поиска) --Я 3.org/TR/HTML5/person…

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

Все остальное, логотипы, формы поиска и навбары можно найти в<body>середина<header>или<footer>в, но в<main>за пределами.

В документе не может быть более одного видимогоmainэлемент. Если в документе их несколькоmainэлемент, вы должны использоватьскрытый атрибутСкрыть все остальные (основные) экземпляры. --Я 3.org/TR/HTML5/person…

Это очень уникально. а также<header>а также<footer>(и другие элементы блока иначе),<main>Не может использоваться на всей странице произвольного содержимого фрагмента; его следует использовать только один раз. Вернее, его можно использовать в документе несколько раз, но одновременно можно увидеть только один.<main>элементы, все остальные (

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

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

<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>

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

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

Nobody likes a wall of text

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

Так,<section>и старый добрый<div>В чем разница, и тогда, когда вы должны их использовать? Что ж, позвольте мне снова процитировать спецификацию:

Примечания:

Элемент не является универсальным элементом-контейнером. Авторам рекомендуется использовать элемент [div](https://www.w3.org/TR/html5/grouping-content.html#elementdef-div), когда элемент используется только для целей стилизации или для облегчения написания сценариев. Общее правило заключается в том, что элементы применяются только в том случае, если их содержание явно указано в тексте [контур](https://www.w3.org/TR/html5/sections.html#outline). -- [https://www.w3.org/TR/html5/sections.html#the-section-element](https://www.w3.org/TR/html5/sections.html#the-section- элемент)

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

Короче говоря, если вы хотите перечислить часть документа в оглавлении, используйте<section>. Если нет, используйте<div>или другие элементы.

Метрики контента

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

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

в общем и целом:<article>

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

Спецификация HTML5Рекомендуется, чтобы у статей всегда был заголовок, который определяет, что это такое, в идеале с использованием элемента заголовка.(<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>Стремитесь четко определить основные навигационные блоки на странице, группы ссылок, которые помогают пользователям ориентироваться в остальной части сайта (например, карту сайта или список ссылок в заголовке), или текущую страницу (например, оглавление).

В верхней части нашего примера поместим<nav>Применяется к набору ссылок в заголовке.

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

вообще не меняет структуру, но вы знаете, что это такое, с первого взгляда, но вам не нужно<div>Читайте и обрабатывайте имена классов, чтобы найти их, и, что более важно, боты тоже могут их найти.

трогать:<address>

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

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

Распространенным решением является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 раз более удобочитаем, чем исходный пример, и в 100 раз эффективнее с точки зрения SEO и доступности.

Это ни в коем случае не единственные семантические элементы в HTML. Существует множество других элементов, которые помогут вам разметить и структурировать текстовое содержимое, встроить медиа-ресурсы и многое другое. Если вам это нравится и вы хотите копнуть глубже, вот некоторые (теги), чтобы проверить. Вы можете знать некоторые:

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

оригинал:Dev.to/кен сильфон/…

Статья впервые опубликована:GitHub.com/still99/блог…

больше контента:GitHub.com/still99/блог…

Категории