Будьте осторожны, если ваш HTML полон div

HTML
Будьте осторожны, если ваш HTML полон div

Студенты, занимающиеся фронтенд-разработкой, знают, что основными компонентами веб-страницы являются HTML, JavaScript и CSS. Разработчики обычно больше внимания уделяют JavaScript и CSS, практикуя различные языковые спецификации и шаблоны проектирования. Внимания к HTML, очевидно, меньше, пока вы можете создать интерфейс, нарисованный дизайнером, все будет хорошо, и вас не сильно волнует, является ли HTML стандартизированным и разумным. Итак, везде можно наблюдать следующую ситуацию:

  • кнопка кликабельна<div>вместо<button>элемент
  • Название<div>вместо элемента заголовка (<h1>,<h2>так далее)
  • <input>Соответствующая текстовая метка использует<div>вместо<label>
  • Поле ввода также использует связанное событие клавиатуры<div>, вместо<input>

вы видели? один ход<div>Иди мир! Есть ли какие-либо проблемы с этим? Это не кажется большой проблемой, в конце концов, страница выглядит в соответствии с дизайном и может нормально взаимодействовать. Но задумывались ли вы об этом, если<div>Может решить все, зачем вам десятки или сотни других тегов? Речь идет о семантике HTML.

что такое семантика

Семантика означает, что элементы HTML имеют соответствующие значения. Он используется для описания содержимого элемента или его отношения к другим элементам. В HTML, кроме<div>а также<span>, которые в основном являются семантическими элементами.

Степень представления имен тегов также различна, например,<section> Сравнивать <article>Описание содержания еще более расплывчато.<section>также является семантическим, так как указывает, что контент должен принадлежать группе. а также<article>Не только означает, что его содержимое принадлежит группе, но и статье.

Чтобы еще больше проиллюстрировать важность семантики, ниже приведены примеры элементов заголовка и кнопки.

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

<h1>Является заголовком страницы плюс внизу<h2>Иерархия страницы формируется.

<!-- h1, 最重要的部分 -->

<h1>当你的 HTML 里全是 div，那你就要小心了</h1>

<!-- "什么是语义化" 是 "当你的 HTML 里全是 div，或许该反思下了" 的子标题 -->

<h2>什么是语义化</h2>

<!-- "标题元素" 是 "什么是语义化" 的子标题-->

<h3>标题元素</h3>

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

  • <h1>: Будьте осторожны, когда ваш HTML полон div
    • <h2>: что такое семантика
      • <h3>: элемент заголовка
      • <h3>: кнопка
    • <h2>: немантические элементы
    • <h2>: Суммировать

Как видите, сам HTML передает структурную информацию всей статьи. И наоборот, если все используют<div>, становится так:

  • <div>: Будьте осторожны, когда ваш HTML полон div
  • <div>: что такое семантика
  • <div>: элемент заголовка
  • <div>: кнопка
  • <div>: несемантические элементы
  • <div>: Суммировать

из-за <div>Никакого смысла, так что это плоская структура. При правильном HTML DOM будет четким и структурированным.

кнопка

Назначение кнопки — отправить форму или изменить состояние элемента. По определению кнопка имеет следующие характеристики:

  • получить фокус
  • Активируется нажатием пробела или клавиши ввода
  • Активируется щелчком мыши

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

  • состояние фокуса
  • взаимодействие с клавиатурой
  • взаимодействие с мышью

Более того, когда программы чтения с экрана сталкиваются с<button>提交</button>Этот элемент, который распознает семантику, сообщает пользователю, что это кнопка отправки. если только<div>, читатель не подумает, что это кнопка.

Когда мы используем семантические элементы HTML, мы придаем смысл содержимому, и оно оживает.

несемантические элементы

Как упоминалось ранее,<div>а также<span>являются не семантическими элементами.<div>не придает никакого значения содержанию, это просто<div>. Конечно, это не совсем точно, потому что<div>а также<span>Есть еще небольшая разница между:

  •  <div>является блочным элементом
  • <span>является встроенным элементом и должен быть помещен внутри других элементов, таких как<p><span class="dropcap">I</span>nline elements</p>

Если вы не можете найти соответствующий элемент HTML для представления содержимого, вы можете использовать<div> или <span>. Так как он разработан<div> а также <span>, естественно имеют свое место. В конце концов, не каждый элемент HTML нуждается в дополнительной семантике.

Общий принцип заключается в использовании соответствующих семантических элементов для максимально полного представления содержания. Следующим лучшим способом является использование ярлыков с менее ясным значением. Наконец рассмотрите возможность использования<div> а также <span>.

Суммировать

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

Эта статья была впервые опубликована в1024 станция перевода

Категории