Семантический HTML: лучшие практики на 2019 год

Опубликовано: 2019-08-31

Семантический HTML сейчас важнее, чем когда-либо, тем более что Google постоянно меняет алгоритмы ранжирования страниц. Верхние позиции в каждом запросе становятся все более и более конкурентоспособными. Вам нужно секретное оружие, и семантический HTML - хорошее оружие в вашем арсенале. Вы можете использовать некоторый семантический код на своих веб-сайтах, но чем больше вы можете вставить для важного контента, тем лучше поисковые системы смогут сканировать ваш сайт и знать, что вы предлагаете потенциальным посетителям.

Что такое семантический HTML?

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

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

Но как это сделать? Что ж, он использует множество специальных тегов HTML5, которые очень специфичны. Давайте рассмотрим несколько примеров, и вы убедитесь в этом сами.

Форматирование текста

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

<p>This is <b>bold text</b></p>
<p>While <i>this is italics</i>, and this is <u>underlined</u>.</p>

С семантическим HTML, можно использовать сильный смелый текст и показать его сильное значение или им , чтобы Курсив (или подчеркнуть) текст. Интересно, что буква U по-прежнему используется для подчеркивания текста; однако MDN предлагает стилизовать его с помощью CSS с text-decoration: underline; чтобы дифференцировать это.

<p>This is <strong>bold text</strong>, while <em>this is italics</em>.</p>
<p>This would be <u style=text-decoration: #222000 wavy underline;">underlined</u>.</p>

Еще мы любим дель показать ~~зачеркивание~~ удаленный текст.

<p>We are also fond of <em>del</em> to show <del>strikethrough</del> deleted text.</p>

И мы подумали, что закончим наш взгляд на семантическое форматирование текста HTML выделением. Буквально. Если вы используете пометку вокруг текста, вы выделите все, что заключите.

<p>Make sure that you remember <strong>this term for your test</strong>.
<p>But you should remember <mark>this information about how to use it in context</mark>.</p> 
<p>If you do that, you will be fine.</p>

MDN говорит, что это не должно использоваться так же, как вы используете strong . Вы используете strong, чтобы указать на что-то важное в тексте, и вы используете mark, чтобы выделить то, что имеет отношение к его пониманию.

Разделы, заголовки и меню

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

<div>
  <h1>Page Title Goes here</h1>
    <p>Tagline!</p>
  <div>
  	<ul>
  	  <li><a href="example.com">Home Page Link</a></li>
  	  <li><a href="example.com">Blog Page Link</a></li>
  	  <li><a href="example.com">Podcast Page Link</a></li>
  	</ul>
   </div>
</div>

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

 <div class="header" id="hero-section">
  <h1 class="page-title">Page Title Goes here</h1>
    <p>Tagline!</p>
  <div class="header-menu">
  	<ul>
  	  <li><a href="example.com">Home Page Link</a></li>
  	  <li><a href="example.com">Blog Page Link</a></li>
  	  <li><a href="example.com">Podcast Page Link</a></li>
  	</ul>
   </div>
</div>

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

<header>
  <h1>Page Title Goes Here</h1>
    <p>Tagline!</p>
  <nav>
    <a href="example.com">Home Page Link</a>
    <a href="example.com">Home Page Link</a>
    <a href="example.com">Home Page Link</a>
  </nav>
</header>

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

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

<section id="hero-section">
  <header>
    <h1>Page Title Goes Here</h1>
      <p>Tagline!</p>
    <nav>
      <a href="example.com">Home Page Link</a>
      <a href="example.com">Home Page Link</a>
      <a href="example.com">Home Page Link</a>
    </nav>
  </header>
</section>

Кроме того, обратите внимание на использование id = "hero-section" , которое является необязательным шагом к необязательному шагу, но вы можете стилизовать раздел как селектор CSS самостоятельно.

Выводы

Используйте section там, где у вас может возникнуть соблазн использовать внешний div.
Используйте заголовок, чтобы указать, какая часть страницы является вашим заголовком. Вы также можете использовать это в статье или сообщении, чтобы указать заголовок этого сообщения, который отделен от самого веб-сайта.
Используйте навигацию, когда вы устанавливаете главное меню навигации для сайта. Nav - это не способ для поисковых систем находить ссылки, а способ поиска основных способов навигации по вашему сайту. Любая коллекция ссылок (например, хлебные крошки и т. Д.) Также может быть включена в навигацию.

Нижний колонтитул

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

<div class="site-footer>
    <p>Designed by <a href="elegantthemes.com">Elegant Themes</a></p>
    <a href="example.com/contact">Contact Us!</a>
    <img src="/logo.png">
</div>

В то время как семантический нижний колонтитул может выглядеть так:

<footer>
    <p>Designed by <a href="elegantthemes.com">Elegant Themes</a></p>
    <a href="example.com/contact">Contact Us!</a>
    <img src="/logo.png">
</footer>

По общему признанию, здесь нет большой разницы в базовой настройке, но роботы, которые видят ваш сайт, оценят разъяснения. Также имейте в виду, что вы можете использовать нижний колонтитул для нижних колонтитулов страницы, публикации или сайта.

Главная, статьи и дополнения

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

Обычно сообщение или страница в блоге - это простой HTML-документ, но верхний колонтитул, нижний колонтитул, контент, боковые панели, вставки и т. Д. Можно объединить вместе.

<body>
  <div class="post-header>
    <h1>Article title</h1>
  </div>
  <div class="post-content>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
      <div class="article-aside">
        <p>Text block</p>
      </div>
  </div>
 <div class="post-footer">
    <img src="/subscribe.png">
  </div>
</body>

Это не очень красивый код, но он работает. Однако это некрасиво и требует довольно приличного количества CSS, чтобы при рендеринге он выглядел хоть сколько-нибудь читабельным. Используя main , article и aside , вы можете легко структурировать страницу, чтобы сделать ее более читаемой.

<main>
  <article>
    <header>
      <h1>Article title</h1>
    </header>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
      <p>Paragraph 3</p>
      <aside>
        <p>Text block</p>
      </aside>
    <footer>
      <img src="/subscribe.png">
    </footer>
  </article>
</main>

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

Выводы

Используйте один основной тег на странице
На странице можно использовать несколько тегов статей для идентификации отдельного автономного контента (включая несколько H1 на странице).
В сторону можно использовать как боковую панель или вставлять в сообщение или страницу.

Другие, менее используемые элементы

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

Детали и резюме

Элементы сведений и сводки создают расширяющийся уровень контента, который можно скрыть для пользователей, если они специально не активируют его (например, модуль аккордеона в Divi или других компоновщиках страниц).

<details>
  <summary>Headline that will be shown and clicked on</summary>
    <p>Content that will be hidden</p>
    <a href="example.com">Link that will be hidden</a>
</details>

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

Рисунок и Figcaption

Это довольно понятно. Рисунок - это своего рода наглядное пособие в вашем посте. Фото, график, может быть, встроенное видео с YouTube. Таким образом , figcaption - это подпись, которую вы добавляете, чтобы объяснить использование рисунка выше. Хотя они носят технический характер для использования семантики, вы можете использовать их для любого контента, который вы хотите проиндексировать специально в качестве вспомогательного средства в основной публикации или на странице.

<figure>
  <img src="/chart.jpg">
    <figcaption>Explanation of this chart in short text</figcaption>
</figure>

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

Время

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

<article>
  <h1>Title</h1>
   <p>The event will begin on <time datetime="2019-12-25">December 25th</time> and last for <time datetime="PT12H30M0S">12 and a half hours</time>.</p>
</article>

Использование datetime с элементом time дает вашей разработке гораздо лучший захват времени, что затем позволит вам интегрироваться с календарями и различными другими API. Вы сможете отправлять напоминания со своего сайта, и люди будут возвращаться к вам чаще.

Заключение

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

Каким лучшим практикам семантического HTML вы следуете?

Статья рекомендованное изображение: whiteMocca / shutterstock.com