I тег: Тег | htmlbook.ru — Вебджем.рф | Создание и продвижение сайтов

Содержание

Разметка текста с помощью HTML

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

Курс «Разметка текста»

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

В этом курсе мы будем изучать теги для логической разметки текста. Использовать их можно только внутри тега <body>.

Начнём с простейшего тега <p>, с помощью которого создаются абзацы. По умолчанию абзацы начинаются с новой строки и имеют вертикальные отступы, которыми можно управлять с помощью стилей.

Курс «Разметка текста»

Для создания структуры больших текстов обычно используются заголовки.

В текстовых редакторах есть возможность выделить часть текста, найти пункт «Заголовок» нужного уровня в меню, и применить его.

В языке HTML для выделения заголовков предусмотрено целое семейство тегов: от <h2> до <h6>. Тег <h2> обозначает самый важный заголовок (заголовок верхнего уровня), а тег <h6> обозначает подзаголовок самого нижнего уровня.

На практике редко встречаются тексты, в которых встречаются подзаголовки ниже третьего уровня. Поэтому самыми часто используемыми тегами заголовков являются: <h2>, <h3> и <h4>.

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

Курс «Разметка текста»

Списки часто используются в различных документах. Иногда, чтобы сделать список, пользователь просто нумерует строчки текста.

Такой подход не является хорошим, так как в документе отсутствует логическая сущность «список».

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

Неупорядоченные (или маркированные) списки создаются с помощью тега <ul> (Unordered List — неупорядоченный список), который может содержать внутри себя теги <li> (List Item, элемент списка), обозначающие «элемент списка».

<ul>
  <li>черный</li>
  <li>белый</li>
</ul>

Курс «Разметка текста»

Упорядоченный список создаётся с помощью тега <ol>

, который может содержать внутри себя теги <li>.

Если элементы неупорядоченного списка по умолчанию отмечаются маркерами, то элементы упорядоченного списка — нумеруются.

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

<ol start="3">
  <li>раз</li>
  <li>два</li>
</ol>

Приведёт к такому результату:

раз
два

Курс «Разметка текста»

Создать многоуровневый список достаточно просто.

Сначала нужно создать список первого уровня, а затем внутрь любого элемента этого списка, между тегами <li> и </li>, добавить список второго уровня. При этом необходимо аккуратно закрывать все теги.

Пример правильного кода:

<ul>
  <li>1
    <ul>
      <li>1.1</li>
      <li>1.2</li>
    </ul>
  </li>
  <li>2</li>
</ul>

Пример кода с ошибкой:

<ul>
  <li>1</li>
  <ul>
    <li>1. 1</li>
    <li>1.2</li>
  </ul>
  <li>2</li>
</ul>

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

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

В этом задании мы потренируемся работать с многоуровневыми списками.

Курс «Разметка текста»

Хорошо. Вы создали двухуровневый список. Теперь задание посложнее.

В этом задании вам нужно будет создать четырёхуровневый список, наподобие этого:

Разметка
1. Основы HTML
  1. HTML-теги
    1. парные
    2. одиночные
2. Основы CSS
  1. Селекторы
    1. по типу
    2. по классу
    3. вложенные
3. Стиль кодирования
Работа с фотошопом
Построение сеток
Декоративные элементы
Введение в JavaScript
Прогрессивное улучшение

Курс «Разметка текста»

Список определений создаётся с помощью трёх тегов:

<dl> (Definition List) обозначает сам список определений;
<dt> (Definition Term) обозначает термин;
<dd> (Definition Definition) обозначает определение термина.

Теги <dt> и <dd> пишутся парами внутри <dl>.

Например:

  <dl>
  <dt>Термин</dt>
  <dd>Определение</dd>

  <dt>Второй термин</dt>
  <dd>И его определение</dd>

  <dt>Кошка</dt>
  <dd>Шерстяное изделие развлекательного характера</dd>
</dl>

Курс «Разметка текста»

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

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

Первые два тега предназначены, чтобы указать на важность слова или фразы.

Тег <strong> определяет важность отмеченного текста.

Тег <b> предназначен для выделения текста без придания ему особой важности.

Визуально оба тега одинаковы, они выделяют текст полужирным.

Лучше всего отличия этих тегов будут заметны людям, которые используют специальные настройки ОС, в частности, слепым и слабовидящим. Когда они включают функцию чтения текста, то «говорилка» будет интонацией выделять слова с тегом <strong>. То же самое касается и тегов <em> и <i>. Тег <em> «говорилка» будет выделять интонацией.

Отметим, что новый смысл тегу <b> придали в HTML5. Раньше это был тег, который просто делает текст полужирным. То есть он был предназначен только для визуального форматирования.

Курс «Разметка текста»

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

Тег <em> определяет текст, на который сделан особый акцент, меняющий смысл предложения.

Например, если мы хотим подчеркнуть, что Кекс не любит питаться укропом (он больше за тунца), а любит только гонять его по полу, то разметим текст так:

Инструктор Кекс любит <em>играть</em> с укропом.

Тег <i> обозначает текст, который отличается от окружающего текста, но не является более важным. Обычно так выделяют названия, термины, иностранные слова.

Например, если мы хотим указать, что инспектор — это какой-то специальный термин, то разметим текст так:

Обычно Кекс пользовался <i>инспектором</i> браузера для поиска ошибок.

Визуально оба тега одинаковы, они выделяют текст курсивом.

Новый смысл тегу <i> придали в HTML5. Раньше это был просто тег для выделения текста курсивом.

Курс «Разметка текста»

Иногда возникает необходимость вставить в текст перенос строки, не создавая при этом абзац. Например, при разметке стихов или текстов песен.

Для этого в HTML предусмотрен одиночный тег <br>.

Иногда этот тег используется для разбиения текста на «как бы абзацы», что является плохим подходом. Используйте для разметки абзацев тег <p>.

Одиночный тег <hr> используется для того, чтобы создать горизонтальную линию-разделитель. На внешний вид этой линии можно влиять с помощью атрибутов, но правильней делать это с помощью CSS (это будет изучаться в последующих курсах).

Курс «Разметка текста»

В HTML существует несколько тегов для обозначения цитат:

<blockquote> предназначен для выделения длинных цитат, которые могут состоять из нескольких абзацев. Тег выделяет цитату как отдельный блок текста с отступами.
<q> предназначен для выделения коротких цитат в предложениях. Текст внутри этого тега автоматически обрамляется кавычками.
<cite> используется для того, чтобы выделить источник цитаты, название произведения или автора цитаты.

Можно ли вложить тег в тег? Об инструменте Can I Include — Веб-стандарты

На создание этого инструмента меня вдохновила HTML Academy и их стремление к чистоте вёрстки и строгим стандартам. В их курсе по вёрстке вкладывание тегов объясняется примерами из спецификации, что не очень удобно. И мне пришла в голову идея: упростить доступ к информации о тегах и придумать простой механизм проверки возможности вкладывать теги. Далее — история создания онлайн-инструмента Can I Include.

ТехнологииСкопировать ссылку

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

Про вёрсткуСкопировать ссылку

Подумав немного, понял, что старый добрый Preact c его подходом к Server Side Rendering через Hyperscript Tagged Markup поможет в разделении частей страниц на компоненты. При этом решил, что на первых порах стоит обойтись без клиентского JS, использовать на клиенте только CSS и HTML.

Про стилиСкопировать ссылку

Не стал использовать препроцессоры и отдал предпочтение raw CSS как есть, в одном файле.

Про серверную частьСкопировать ссылку

Мой любимый Express.js и Node.js.

ХостингСкопировать ссылку

Выбрал glitch.com. Он даёт возможность кодить в браузере и открывает доступ к результатам работы любым желающим. Поддерживает Node.js и возможность доступа к контейнеру через веб-консоль прямо из редактора кода. И, что самое главное, он основан на Docker. У меня уже был ранее отработанный простой механизм поставки изменений, и это тоже радовало. Вдобавок ко всем удобствам, glitch.com добавил тариф с возможностью бустинга 5 приложений, я тут же поспешил им воспользоваться.

СкрейпингСкопировать ссылку

Ну куда же без скрейпинга! Без него никуда. Данные нужно извлечь из спецификации HTML и обработать напильником в удобоваримую структуру для доступа к данным. Для скрейпинга использовал свой любимый инструмент — Puppeteer.

РеализацияСкопировать ссылку

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

В ходе скрейпинга увидел дополнительную информацию с сайтов Сan I Use и MDN по каждому тегу, расположенную на странице спецификации HTML в виде небольших бейджиков. В итоге решил разместить информацию о поддержке тегов разными браузерами сразу под сравниваемыми тегами. Чтобы, как говорится, всё было под рукой, в развёрнутом виде.

Так как не использовал JS на клиенте, то в мобильном представлении сделал переключение табов со сравниваемыми тегами с помощью CSS-селекторов.

Принцип работыСкопировать ссылку

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

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

У вкладываемого тега нужно проверить секцию Categories, а у родительского тега — Content model.
В простом случае, наличие одного из пуктов из секции Categories в секции Сontent model, даёт положительный результат.
В случае с контентной моделью Transparent в секции Content model родительского тега, нужно обратить внимание на Content model родителя нашего родительского тега. То есть в таком случае вам нужно самостоятельно проверить следующий родительский тег из вашей разметки.
Есть и более сложный случай, где есть несколько «но». Порой некторые атрибуты меняют возможность вкладывания.

Теперь про простой алгоритм проверки вложенности тегов:

Во время скрейпинга в секциях каждого тега создаётся множество ключевых слов, в которое входят названия контентной модели, имена атрибутов и тегов.
Если в секции есть Nothing, то в множество ключевых тегов включается название тега.
Если есть модель Transparent в секции Content model родительского тега, то ситуация с включением тега не определена. В этом случае выдаётся сообщение, что нужно взять из разметки следующий внешний тег и повторить запрос. При этом следующий пункт не выполняется.
Далее производится проверка на пересечение множеств:
- если найдены общие ключевые слова — положительный вердикт, теги можно вкладывать.
- если нет пересекающихся ключевых слов — отрицательный вердикт, теги нельзя вкладывать.

ИнтерфейсСкопировать ссылку

При обращении по адресу caninclude.glitch.me открывается следующая страница:

Весёлый текстовый логотип и два поля встречают пользователя: в левом нужно ввести название тега, который вы вкладываете, в правом — тега, в который вы вкладываете. После этого, нужно нажать клавишу Enter или кликнуть по кнопке с вопросом.

В результате отправки формы по методу GET рендерится страница с информацией по двум тегам и вердиктом о вложенности.

Если определить возможность вкладывания не получилось из-за «прозрачной» контентной модели внешнего тега, то страница будет выглядеть так:

В случае, если вкладывать теги нельзя, то страница с вердиктом будет выглядеть так:

ИтогСкопировать ссылку

Надеюсь, что онлайн-инструмент Сan I Include пригодится вам. Ещё много работы предстоит по улучшению интерфейса и расширению функциональности, а также по совершенствованию механизма определения вложенности. Спасибо коллективу HTML Academy за борьбу за грамотность вёрстки и что вдохновили меня на создание этого инструмента. Также в планах организовать обратную связь, чтобы получать замечания и пожелания.

Как писать на HTML / Девман

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

В этом туториале вы поможете верстальщице Оле сделать страницу с результатами поиска в Яндексе. Получится не один в один, но довольно похоже:

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

1. Создайте HTML-документ

Для начала Оле понадобится заготовка, файл index.html. Создайте у себя файл с таким же содержимым:

<html>
  <head>
    <title>Заголовок страницы</title>
  </head>
  <body>
  </body>
</html>

Здесь 3 тега, которые обязаны быть в каждом html-файле:

<html> — здесь лежат все теги страницы, он “корневой”, главный;
<head> — в этом теге лежит всё, что не контент страницы: стили, заголовок страницы в теге <title>, кодировка и так далее;
<body> — “тело” HTML-документа, здесь лежит всё, что вы увидите на страничке в браузере.

2. Добавьте текст

Вот что Оля должна вывести при поиске “Коала” в поисковике, для которого она верстает страницу с результатами поиска:

Коала — Википедия
Коaла (лат. Phascolarctos cinereus) — вид сумчатых, обитающий в Австралии. Единственный современный представитель семейства коаловых ... Читать ещё.

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

Как получилось у Оли

Не долго думая, Оля добавила текст прямо внутрь <body> и получила такой результат:

Без ссылок на результаты поиска работа Оли бесполезна. Люди пришли не просто почитать про коал: им нужны ссылки на сайты про коал.

Оля помнит наизусть несколько тегов: <img> — для картинок, а <p> — для параграфа текста. Но как добавить ссылку? Какой у неё тег?

Оля загуглила, и получила этот ответ:

htmlbook. ru — крутой сайт, на котором хорошая документация по HTML и CSS, поэтому в первую очередь присматривайтесь к нему.

Отлично, нужен тег <a>! Но как его написать?..

Как писать теги

У тегов бывают разные названия, но способов их написать всего два. Способ записи зависит от того парный он или одиночный.

Пример парного тега:

<p>Покупайте наши веб-сайты!</p>

Так на страницу можно добавить параграф с текстом. Тег <p> обязательно “закрывать” — добавлять в конце ещё один, но с чёрточкой: </p>. Так вы скажете браузеру, что всё, текст параграфа закончился.

Пример одиночного тега:

<img src="адрес_картинки">

Он сам по себе, его “закрывать” не нужно. Одиночных тегов очень мало, в основном, вам пригодится только <img> — для картинок, <br> — перенос строки и <hr> — горизонтальная линия.

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

<img src="https://dvmn.org/filer/canonical/1594118255/683/">
<h2> Зачем нужен h2 </h2>
<p>
   В теге h2 пишут заголовки, как "Как писать теги" чуть выше.
   Это парный тег, у него есть начало и конец, как и у тега p.
</p>
<p>
   У тега img нет "начала" или "конца". Он значит только то, что нужно добавить картинку.
   Браузеру не нужно сообщать, когда она "закончится".
</p>

Парные теги нужно закрывать

Допишите тег

Оля хотела добавить ссылку с помощью тега <a>, и теперь она поняла, как это сделать. Ещё немного гуглежа и она узнала : тег парный, а значит выглядеть он должен вот так:

<a href="#">Читать ещё</a>

Оля не знала какую ссылку поставить для ссылки, ведь ссылки будут подставляться уже при шаблонизации, поэтому оставила “#” вместо ссылки. Это называется якорь, и это такой обычай среди верстальщиков: если не знаешь, какую ссылку поставить, ставь #.

Теперь на страничке Оли появилась ссылка. Попробуйте повторить результат Оли:

4. Выделите все “коала” на странице

Поисковик выделяет жирным шрифтом все слова, которые вы искали. Оля не знает, что это за тег, но по запросу html жирный шрифт в google.com Оля нашла ссылку на заветный htmlbook.ru.

Попробуйте, у вас получится, как у Оли? У неё получился такой текст:

Сейчас текст у Оли весь одинакового размера. В нём Оля хочет выделить заголовок: Коала — Википедия крупно, а чуть ниже весь остальной текст, мельче. Оля загуглила html заголовок и сразу нашла подходящий тег: <h2>.

Странно, получается, заголовку достался отдельный тег, а остальному тексту — нет. Оля продолжила гуглить теги и узнала о теге <p>: пишут, что он нужен для текста. Но зачем? Чтобы разобраться в этом Оле пришлось узнать о строчных и блочных тегах.

О строчных и блочных тегах

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

<a> — ссылка;
<i> — выделение текста курсивом;
<b> — выделение текста жирным;
<br> — одиночный тег для переноса строки.

Другой вид тегов — блочные. Это теги, которые объединяют другие теги внутри себя в группы, и наделяют их смыслом. Например, блочный тег <h2> содержит в себе заголовок страницы, а блочный тег <p> — параграф текста. За счёт них можно оформить заголовок в одном стиле, а остальной текст — в другом:

<h2>Статья о котиках</h2>
<p>
  <b>Котики</b> — замечательные животные. Я полюбил их, когда мне было 7 лет.
  Как сейчас помню, на мой <i>день рождения</i> мне подарили замечательного кота. ..
</p>

В этом примере заголовок статьи покрашен в красный цвет: color:red;. Текст же статьи при этом остался чёрным, покрасился только заголовок “Статья о котиках”. Для текста внутри тега <p> теперь можно определить другие, отдельные стили, которые не коснутся текста в заголовке <h2>.

Внутри тега <p> есть несколько строчных тегов: <b> и <i>. Они прямо “срослись” с текстом, существуют прямо внутри него, в отличие от блочных, которые только обрамляют текст по краям.

Блочные теги незаменимы, когда хочется добавить тексту фон, рамку, отступы… Вот небольшой список из самых популярных блочных тегов:

<header> — “шапка” сайта, полоса, которая всегда висит в самом верху страницы;
<footer> — “подвал” сайта — самый них страницы, где расположены всякие ссылки на техподдержку, лицензии, контакты поддержки и т. д.;
<main> — главный контент на странице: то, ради чего пользователь пришёл на сайт;
<div> — для создания прочих блоков, для которых нет специализированного тега. Например, для карточки товара в магазине или карточки поста.

Отдельно стоит выделить эти блочные теги:

<p> — параграф текста;
<h2>, <h3>... <h6> — заголовок. Чем больше число — тем мельче заголовок;

Допишите код

Теперь, когда Оля разобралась с блочными/строчными тегами, она может наконец закончить незавершённую работу: добавить на страницу теги <h2> и <p>. Заголовок с тегом <h2> показался ей слишком крупным, поэтому она воспользовалась <h3>:

Заголовок на то и нужен, чтобы на него хотелось кликнуть. А на ваш заголовок кликнуть нельзя. Что делать? Нужен тег для ссылок <a>. Но как правильно: положить тег <a> внутрь тега <h2> или наоборот?..

О комбинации тегов

Нельзя располагать блочные теги внутри строчных.

Такой код существовать не должен:

<a><h2>Заголовок</h2></a>

Тег <a> — строчный, он существует внутри текста. Тег <h2> — блочный, он оборачивает собой текст и все строчные теги для этого текста. Вот как стоило поступить в этой ситуации:

<h2><a>Заголовок</a></h2>

Оля прислушалась к этой рекоммендации и вот что у неё получилось:

<h3>
  <a href="#"><b>Коала</b> — Википедия</a>
</h3>

Проверьте, у вас получилось сделать заголовок ссылкой?

Теперь Оля хочет подпись под заголовком ссылки, как вот тут:

Оля загуглила html мелкий текст и нашла тег, который поможет сделать текст меньше. Подпись под заголовком Оля решила делать прямо внутри тега <h3>, чтобы она была “едина” с заголовком <h3>, никуда не уехала и так далее:

<h3>
  <a href="#"><b>Коала</b> — Википедия</a>
  <small>ru. wikipedia.org›Коала</small>
</h3>

Получилось не то, что хотела Оля… Во-первых, текст не сильно-то и уменьшился. Во-вторых, не хватает переноса.

В HTML обычные переносы строк игнорируются, так как текст переносится по ширине экрана. Чтобы заставить текст перенестись насильно, есть одиночный тег <br>:

<h3>
  <a href="#"><b>Коала</b> — Википедия</a>
  <br>
  <small>ru.wikipedia.org›Коала</small>
</h3>

Теперь нужно сделать текст ещё мельче. Оказывается, теги можно комбинировать, вот так:

<small>
    <small>
        ru.wikipedia.org›Коала
    </small>
</small>

Тег как бы “накапливает” эффект мелкого текста и делает его ещё мельче. Проверьте, у вас тоже так получится?

Попробуйте применить

Что делать, если подходящий тег не нашёлся

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

Если же и гугл не помогает — придётся подумать, как составить то, что вы хотите из того, что есть. Самый простой пример — вы хотите сделать кнопку с картинкой. Такого тега нет, зато есть кнопка и есть картинка:

<button>
    <img src="#" >
</button>

Или вы хотите, чтобы ваш текст был выделен жирным и при этом был ссылкой, вот так: жирная ссылка. Это можно сделать двумя способами, комбинируя теги <a> и <b>, они оба строчные:

<a><b>Жирная ссылка</b></a>
<b><a>Жирная ссылка</a></b>

Что ещё почитать по теме

Статья Строчные элементы от htmlbook.ru
Слайды типичные ситуации в вёрстке

html — В чем разница между и и ?

Задавать вопрос

Спросил 13 лет, 11 месяцев назад

Изменено 3 месяца назад

Просмотрено 495k раз

В чем разница между и , и в HTML/XHTML? Когда вы должны использовать каждый?

HTML
XHTML

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

Как пишет автор в посте списка обсуждения:

Подумайте о трех разных ситуациях:

веб-браузеры
слепые люди
мобильные телефоны

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

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

— это стиль — мы знаем, как должен выглядеть «полужирный».

<сильный> однако указывает на то, как что-то следует понимать . «Сильный» может означать (и часто означает) «жирный» в браузере, но также может означать более низкий тон для говорящей программы, такой как «Челюсти» (для слепых), или может быть представлен подчеркиванием (поскольку вы не можете выделить жирным шрифтом). жирным шрифтом) на Palm Pilot.

HTML никогда не предназначался для стилей. Поищите «Тим Бернерс-Ли», и «семантическая паутина». является семантическим — оно описывает текст, который окружает (например, «этот текст должен быть четче, чем остальной отображаемый текст» ) в отличие от описания того, как текст, который он окружает , должен отображаться (например, «этот текст должен быть выделен жирным шрифтом» ).

и являются явными — они выделяют жирный шрифт и курсив соответственно.

и являются семантическими — они указывают, что вложенный текст должен быть каким-то образом «сильным» или «выделенным», обычно полужирным и курсивом, но позволяют управлять фактическим стилем с помощью CSS. Следовательно, они предпочтительны на современных веб-страницах.

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

Конечно, вы можете переопределить их стили с помощью CSS.

и , с другой стороны, применяют только стиль шрифта и больше не должны использоваться. (Потому что вы должны форматировать с помощью CSS, и если бы текст был действительно важен, вы, вероятно, все равно сделали бы его «сильным» или «выделенным»!)

Надеюсь, это имеет смысл.

Я рискну взять исторический и практический пример:

Да, согласно спецификациям, имел семантическое значение в HTML4, а имел строго презентационное значение.

Да, когда появился HTML5, для b и i было введено новое семантическое значение, которое немного отличалось.

Да, W3C рекомендует — по сути — TL,DR; не используйте б и я.

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

НО:

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

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

Но на самом деле реальность такова, что семантическое и стилистическое значение и со временем по необходимости слились.

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

Итак, если я пишу таблицу стилей для этого сайта, я, вероятно, напишу несколько стилей, которые будут выглядеть так:

 b,
сильный {
  вес шрифта: 700;
  /* ... здесь больше стилей */
}
я,
эм {
  стиль шрифта: курсив;
  /* ... здесь больше стилей */
}

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

Или я могу быть одним из миллионов сайтов, которые используют normalize.css, который заботится о том, чтобы b и strong обрабатывались одинаково.

В мире уже есть такой огромный океан HTML, который работает на основе этого ожидания, я просто не могу представить, что b КОГДА-ЛИБО обесценится в пользу strong или что браузеры когда-нибудь начнут их отображать по умолчанию иначе.

Вот и все. Это мой горячий взгляд на семантику, историю и реальный мир. b/i и strong/em — это одно и то же? Нет. Будут ли они оба существовать и рассматриваться как идентичные почти во всех ситуациях вплоть до краха современной цивилизации? Я думаю да.

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

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

…теперь означает важность, а не сильный акцент.

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

…указывает на выделение.

(Это все прямые цитаты из источников W3C с добавлением моего выделения. См.: https://rawgithub.com/whatwg/html-differences/master/Overview.html#changed-elements и http://www.w3 .org/TR/html401/struct/text.html#h-9.2.1 для оригиналов)

и связаны со стилем, тогда как и являются семантическими. В HTML 4 первые классифицируются как элементы стиля шрифта, а вторые — как элементы фраз.

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

В то время как и , конечно, более семантически правильны, есть определенные законные причины для использования и 9Теги 0014 для пользовательского контента.

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

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

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

1

и потребляют больше пропускной способности, чем и .

Они также требуют больше ввода (если не генерируются автоматически).

Они также загромождают экран редактора текстом. Кажется, я припоминаю, что программистам нравятся меньшие исходные файлы, если они одинаковы. (А если быть честными, они одинаковые. Да, есть «технические» ( кашель , кхм, простите) отличия, но это по большей части липовое.)

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

1

b или i означает, что вы хотите, чтобы текст отображался жирным шрифтом или курсивом. strong или em означает, что вы хотите, чтобы текст отображался таким образом, чтобы пользователь понимал его как «важный». По умолчанию сильное отображается полужирным шрифтом, а em — курсивом, но в некоторых других культурах может использоваться другое сопоставление.

Подобно строкам в программе, b и i будут "жестко закодированы", а strong и em будут "локализованы".

Как уже говорили другие, и являются явными (т. е. «выделить этот текст полужирным»), тогда как и являются семантическими (т. е. «этот текст следует выделить»).

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

2 Теги

, , и традиционно являются репрезентативными. Но им было дано новое семантическое значение в HTML5 .

и использовались для стиля шрифта в HTML4. был использован для курсива и для жирного шрифта. В HTML5 9Тег 0014 имеет новое семантическое значение ' альтернативный голос или настроение ' , а тег имеет значение стилистически смещенного .

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

 Надеюсь, это сработает, подумал он.

Пример использования 9Тег 0014 — это ключевые слова в выдержке из документа, названия продуктов в обзоре, действенные слова в интерактивном текстовом программном обеспечении, лид статьи.

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

 Мероприятие состоится в ближайшую субботу, и уже зарегистрировалось более 3000 человек.

и имели значение выделения и сильного выделения в HTML4. Но в HTML5 означает подчеркнутое выделение и означает сильное значение .

В следующем примере должно произойти лингвистическое изменение при чтении слова перед ...

 Обязательно зарегистрируйтесь до дня мероприятия, 16 сентября 2016 г.

В том же примере мы можем использовать тег следующим образом..

 Обязательно зарегистрируйтесь до дня мероприятия, 16 сентября, 2016 г.

, чтобы придать важность дате события.

MDN Ref:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b

https://developer.mozilla.org/en-US/docs/Web/ HTML/Element/i

https://developer. mozilla.org/en-US/docs/Web/HTML/Element/em

https://developer.mozilla.org/en-US/docs/Web/ HTML/Element/strong

Как уже говорили другие, разница в том, что и стили жесткого кода, тогда как и диктуют семантическое значение, при этом стиль шрифта (или интонация говорящего браузера, или что у вас есть) определяется во время рендеринга (или произнесения) текста.

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

Довольно ловко, да?

Это также является основанием для определения подстилей (на которые ссылается свойство style= в текстовых тегах) для абзацев, ячеек таблицы, текста заголовка, подписей и т. д., а также использования тегов

 . Вы можете определить физическое представление для ваших логических стилей в таблице стилей, и изменения автоматически отразятся на веб-страницах, которые ссылаются на эту таблицу стилей. Хотите другое представление исходного кода? Переопределите шрифт, размер, толщину, интервалы и т. д. для вашего стиля «кода».
 Если вы используете XHTML, вы даже можете определить свои собственные семантические теги, и ваша таблица стилей сделает за вас преобразование в физические стили шрифтов и макеты.
 2
 Я использую как , так и , собственно, именно по причинам, упомянутым в этой ветке ответов. Бывают случаи, когда текст, выделенный жирным шрифтом, просто  выглядит на  лучше, но это не обязательно семантически более важно, чем остальная часть предложения. Вот пример со страницы, над которой я сейчас работаю:
 "Поиск всех книг по лакроссу."
 В этом предложении слово «все» очень важно, а слово «лакросс» менее важно — я просто выделил его жирным шрифтом, потому что оно представляет собой поисковый запрос, поэтому мне нужно было визуальное разделение. Если вы просматриваете страницу с помощью программы чтения с экрана, я действительно не думаю, что нужно изо всех сил подчеркивать слово «лакросс».
 Я бы предположил, что большинство веб-разработчиков используют один из двух, но оба они хороши —  определенно не устарел, как утверждают некоторые люди. Для меня это просто тонкая грань между визуальной привлекательностью и смыслом.
 Используйте их только в том случае, если использование классов стилей CSS по какой-либо причине неудобно или невозможно (например, в системах блогов разрешается использовать только некоторые теги в сообщениях и, возможно, во встроенных стилях). Другая причина — поддержка очень старых браузеров (некоторых мобильных устройств?) или примитивных поисковых систем (которые дают баллы за теги    или    вместо анализа стилей CSS).
 Если вы можете определить стили CSS, используйте их.
 Для полужирного текста используйте    Тег
 Для важного текста используйте    Тег
 Для курсивного текста используйте    Тег
 Для выделенного текста используйте    Тег
 13b 9090 13 >  , не имеющее фактического семантического значения (как указал @splattne), было правдой,  давным-давно  назад. В современном HTML5 (    ) они  и  имеют значение. Проверьте следующие ссылки.
 Семантическое значение (из MDN) 
 Здесь, в компании XYZ, мы используем HTML и Javascript.
 
    : Элемент идиоматического текста Альтернативный голос или настроение
 Таксономические обозначения (например, род и вид «Homo sapiens»)
 Идиоматические термины из другого языка (например, «и так далее»)
 Технические условия
 Я сказал ему, чтобы он пришел вовремя на встречу. 
 
   по сравнению с    Возможно, вам будет полезно понять, что оба являются допустимыми и семантическими элементами в HTML5 и что это совпадение, что они оба имеют одинаковый стиль по умолчанию (жирный шрифт) в большинстве браузеров ( хотя некоторые старые браузеры подчеркивают    ). Каждый элемент предназначен для использования в определенных типах сценариев, и если вы хотите выделить текст жирным шрифтом для украшения, вы должны вместо этого использовать свойство CSS font-weight. источник
   по сравнению с    Элемент    представляет ударение в своем содержании, а элемент    представляет текст, который выделяется из обычной прозы. source
 Мои 2 цента 
 Лично я предпочитаю    и       и    .
 Они короче, и их смысловое значение просто имеет смысл  и с точки зрения разработчика. Я понятия не имею, могут ли современные программы для чтения с экрана работать с ними. Если нет, я думаю, что они в конечном итоге. A18n — сложная тема, я просто следую примеру документации. MDN говорит, что я могу их использовать, что я и делаю.
 В: Разница между сильным, b, полужирным, em, i?
 Ответ: Это встроенные свойства.
 Strong: используется для выделения текста жирным шрифтом или его семантического выделения.
 Полужирный или b: этот жирный тег представляет собой просто смещенный текст, обычно выделенный полужирным шрифтом.
 em:    Тег семантически выделяет важное слово.
 i :    тег просто смещает текст, обычно выделенный курсивом.
  примечание: вы должны использовать теги    и   , их значащие имена, которые говорят о типе контента. Семантические теги также полезны для SEO. 
    и    следует избегать, поскольку они описывают стиль текста. Вместо этого используйте    и   , потому что это описывает семантику (смысл) текста.
 Как и все в HTML, вы должны думать не о том, как вы хотите, чтобы  выглядело  , а о том, что вы на самом деле  означаете  . Конечно, для вас он может быть просто выделен жирным шрифтом и курсивом, но не для программы чтения с экрана.
 1
 "Они имеют тот же эффект. Однако XHTML, более чистая и новая версия HTML, рекомендует использовать    тег. Strong лучше, потому что его легче читать - его смысл понятнее. Кроме того,    передает значение — сильное выделение текста — в то время как    (для полужирного) передает метод — выделение текста жирным шрифтом. С сильным код по-прежнему имеет смысл, если вы используете таблицы стилей CSS, чтобы изменить методы создания сильного текста.
 То же самое касается разницы между  и ".
 Google dixit:
 http://wiki.answers.com/Q/What_is_the_difference_between_HTML_tags_b_and_strong
  Элементы форматирования HTML: 
 HTML также определяет специальные элементы для определения текста с особым значением.
HTML использует такие элементы, как  и  для форматирования вывода, например полужирного или курсивного текста.
  Полужирное и сильное форматирование HTML: 
 Элемент HTML  определяет полужирный текст без какой-либо дополнительной важности.
 Этот текст выделен жирным шрифтом
 
 HTML-элемент  определяет сильный текст с добавленной семантикой.
 «сильное» значение.
 Это сильный текст
 
  Форматирование HTML курсивом и выделением: 
 Элемент HTML  определяет текст курсивом без каких-либо дополнительных
 важность.
 Этот текст выделен курсивом
 
 Элемент HTML  определяет выделенный текст с добавленной семантикой. важность.
 Этот текст выделен
 
 1
 Обычно следует избегать    и    . Они были введены для компоновки страницы (изменения ее внешнего вида) в ранних версиях HMTL до создания CSS, как и тем временем удаленный тег шрифта  , и в основном сохранялись для обратной совместимости, а также потому, что некоторые форумы допускают встроенный HTML и это простой способ изменить внешний вид текста (например, BBCode с использованием  [i]  , вы можете использовать    и так далее).
 С момента создания CSS компоновка больше не должна выполняться в HTML, поэтому в первую очередь был создан CSS (HTML == Структура, CSS == Макет). Эти теги также могут исчезнуть в будущем, в конце концов, вы можете просто использовать теги CSS и  span , чтобы сделать текст жирным/курсивным, если вам нужна «бессмысленная» вариация шрифта. HTML 5 по-прежнему разрешает их, но объявляет, что маркировка текста таким образом имеет  не имеет значения  .
    и   , с другой стороны, говорит только о том, что что-то «выделено» или «сильно выделено», и оставляет браузеру полную свободу действий, как это отображать. Большинство браузеров отображают  em  курсивом, а  strong  жирным шрифтом, как предлагает стандарт по умолчанию, но они не обязаны делать это (они могут использовать разные цвета, размеры шрифтов, шрифты и т. д.). Вы можете использовать CSS, чтобы изменить поведение так, как вы хотите. Вы можете сделать  em  жирный, если хотите, и  strong  жирный и красный, например.
 2
 В языке HTML эти два тега используются следующим образом:
 простой текст это тестовый текст обычный текст
простой текст это важный текстс обычным текстом
 
 Основное различие между этими двумя тегами HTML заключается в том, что жирный шрифт делает текст только визуально выглядящим жирным, в то время как сильный также символизирует соответствующий текст как существенный и указывает, что это четкое слово или текстовая часть.
 Это различие связано с тем, что HTML-код различает символы и физические визуальные HTML-теги. В то время как более ранние относятся к значению соответствующих областей, вторые просто определяют оптический дисплей в браузерах.
    и    являются абстрактными (это то, что люди имеют в виду, когда говорят, что это семантика).    и    — особые способы сделать что-то «сильным» или «подчеркнутым»
 Аналогия:
 Оба    к    и    к   
 as
 "транспортное средство" 90 2 3 "jeep" 3
 1
 Мы используем тег    для текста, который имеет высокий приоритет в целях SEO, например, название продукта, название компании и т. д., а    simple делает его жирным.
 Точно так же мы используем    для текста, который имеет высокий приоритет для SEO, а   , чтобы сделать текст просто курсивом.
 1
 Тег HTML 
 Тег HTML    представляет текст с другим голосом или настроением или иным образом смещен от обычного текста.
 До появления HTML5 элемент    использовался только в презентационных целях (т. е. для выделения текста курсивом), однако HTML5 придавал этому элементу особое семантическое назначение. Хотя браузеры обычно по-прежнему используют стиль    выделены курсивом, не следует использовать тег    специально для этой цели. Чтобы выделить текст курсивом, следует использовать свойство CSS  font-style .
 Кроме того,    не следует использовать для передачи ударения. Чтобы разметить текст с ударением, вы должны использовать    .
 Синтаксис 
 Тег    записывается как       с текстом, вставляемым между начальным и конечным тегами.
 Вот так:
 Текст сюда...
 Примеры 
 Спецификация HTML5 предполагает, что примеры использования    могут включать  таксономическое обозначение, технический термин, идиоматическую фразу из другого языка, транслитерацию, мысль или название корабля в западных текстах  .
 Таксономическое обозначение 
 В этом примере тег    используется для разметки таксономического обозначения.
 Существует два вида туатары, оба из которых являются эндемиками Новой Зеландии. Научное название этих двух видов: Sphenodon punctatus (Туатара пролива Кука) и Sphenodon guntheri (Туатара острова Братьев).
 Технический термин 
 В этом примере тег    используется для разметки технического термина.
 Мысль 
 В этом примере тег    используется для разметки мысли.
 Название корабля 
 В этом примере тег    используется для разметки двух названий кораблей.
 Знаменитая гонка
Катти Сарк против Фермопил произошла в 1872 году, когда два корабля вместе вышли из Шанхая 18 июня.
 Атрибуты 
 Атрибуты могут быть добавлены к элементу HTML, чтобы предоставить больше информации о том, как элемент должен выглядеть или вести себя.
  <я> 9Элемент 0014 принимает следующие атрибуты.
 Атрибут  Описание
 Нет   
 Глобальные атрибуты 
 Следующие атрибуты являются стандартными для всех элементов HTML. Поэтому вы можете использовать эти атрибуты с тегом   , а также со всеми другими тегами HTML.
  ключ доступа 
  автокапитализировать 
  класс 
  редактируемый контент 
  данные-* 
  директор 
  перетаскиваемый 
  скрытый 
  идентификатор 
  режим ввода 
  это 
  ИД товара 
  itemprop 
  Артикул 
  предметная область 
  тип изделия 
  язык 
  часть 
  слот 
  проверка правописания 
  стиль 
  tabindex 
  название 
  перевод 
 Полное объяснение этих атрибутов см. в разделе Глобальные атрибуты HTML 5.
 Обработчики событий 
 Атрибуты содержимого обработчика событий позволяют вам вызывать сценарий из вашего HTML. Скрипт вызывается, когда происходит определенное «событие». Каждый атрибут содержимого обработчика событий имеет дело с другим событием.
  прерывание 
  onauxclick 
  размытие 
  при отмене 
  онканплей 
  oncanplaythrough 
  при обмене 
  по клику 
  при закрытии 
  в контекстном меню 
  онкопия 
  при обмене 
  врезной 
  ondblclick 
  на драге 
  ондрагенд 
  Драгентер 
  выход на драже 
  на кожухе 
  ондраговер 
  ондрагстарт 
  на входе 
  ondurationchange 
  при опорожнении 
  односторонний 
  при ошибке 
  онфокус 
  данные формы 
  на входе 
  недействительный 
  нажатие клавиши 
  нажатие клавиши 
  onkeyup 
  onlanguagechange 
  под нагрузкой 
  загруженные данные 
  загруженные метаданные 
  запуск при загрузке 
  при наведении мыши 
  ввод с помощью мыши 
  для мышей 
  onmousemove 
  onmouseout 
  при наведении мыши 
  на мышке вверх 
  паста 
  при паузе 
  в игре 
  в игре 
  в процессе 
  при изменении скорости 
  при сбросе 
  при изменении размера 
  при прокрутке 
  нарушение политики безопасности 
  onseeked 
  поиск 
  по выбору 
  при смене слота 
  установлен 
  при отправке 
  приостановить 
  своевременное обновление 
  нагрудник 
  при изменении объема 
  в ожидании 
  на колесе 
 Большинство атрибутов содержимого обработчика событий можно использовать для всех элементов HTML, но для некоторых обработчиков событий существуют определенные правила, определяющие, когда их можно использовать и к каким элементам они применимы.
 Дополнительные сведения см. в разделе Атрибуты содержимого обработчика событий HTML.
 AirTag — Apple 
 Потерять умение 
 терять вещи.
 AirTag — очень простой способ следить за своими вещами. Прикрепите один к своим ключам. Положите еще один в рюкзак. И точно так же они находятся на вашем радаре в приложении «Локатор», где вы также можете отслеживать свои устройства Apple и не отставать от друзей и семьи.
 Купить AirTag
 Посмотреть в дополненной реальности
 Пропингуйте его. Найди это. 
 Потеря чего-либо, например кошелька, не должна иметь большого значения, если к нему прикреплена бирка AirTag. Вы можете воспроизвести звук на встроенном динамике, перейдя на новую вкладку "Элементы" в приложении "Локатор" или сказав "Привет, Siri, найди мой кошелек". Если он прячется поблизости — например, под диваном или в соседней комнате — просто идите на звук, и ваши поиски окончены.
 Холод.
 Тепло. 
 Теплее. Горячий. Если ваша метка AirTag находится поблизости, ваш iPhone может привести вас прямо к ней с помощью Precision Finding. ¹ Вы будете видеть расстояние до вашего AirTag и направление движения — и все это благодаря технологии Ultra Wideband.
 С небольшой помощью 

 сотен из 
 миллионов друзей. Если вы оставили что-то далеко позади, например, на пляже или в спортзале, сеть «Локатор» — сотни миллионов устройств iPhone, iPad и Mac по всему миру — поможет отследить вашу AirTag. И он предназначен для защиты вашей конфиденциальности на каждом этапе пути.
 Как это работает? 
 Ваш AirTag отправляет безопасный сигнал Bluetooth, который может быть обнаружен ближайшими устройствами в сети «Найти меня». Эти устройства отправляют местоположение вашего AirTag в iCloud, после чего вы можете перейти в приложение «Локатор» и увидеть его на карте. Весь процесс является анонимным и зашифрованным для защиты вашей конфиденциальности. И это эффективно, так что не нужно беспокоиться о времени автономной работы или использовании данных.
 Режим пропажи делает поиск вещей 

 еще проще. Как и другие ваши устройства Apple, AirTag можно перевести в режим пропажи. Затем, когда оно будет обнаружено устройством в сети, вы автоматически получите уведомление. Вы также можете настроить его так, чтобы кто-то мог получить вашу контактную информацию, коснувшись вашей AirTag смартфоном с поддержкой NFC — это та же технология, которая позволяет людям оплачивать покупки с помощью своих телефонов.
 Конфиденциальность встроена. 
 Только вы можете видеть, где находится ваш AirTag. Данные о вашем местоположении и история никогда не сохраняются на самом AirTag. Устройства, которые передают местоположение вашего AirTag, также остаются анонимными, и эти данные о местоположении шифруются на каждом этапе пути. Таким образом, даже Apple не знает местонахождение вашего AirTag или идентификатор устройства, которое помогает его найти.
  AirTag предназначен для предотвращения нежелательного отслеживания.  Если чужая метка AirTag попадет в ваши вещи, ваш iPhone обнаружит, что она путешествует с вами, и отправит вам предупреждение. Через некоторое время, если вы все еще не нашли его, AirTag начнет воспроизводить звук, чтобы вы знали, что он там.
 Конечно, если вы оказались с другом, у которого есть AirTag, или в поезде с целой кучей людей с AirTag, не беспокойтесь. Эти оповещения запускаются только тогда, когда AirTag отделен от своего владельца.
 Красиво просто. 
 Установка одним касанием позволяет мгновенно подключить AirTag к iPhone или iPad. Введите имя для своего AirTag, прикрепите его к элементу, который хотите отслеживать, и все готово. Хотите получать уведомления AirTag и на Apple Watch? Без проблем.
 Подробнее о приложении «Найти»
 Да здравствует батарея. 
 AirTag рассчитан на работу более года от стандартной батареи, которую можно легко заменить. ² Ваш iPhone сообщит вам, когда пора вставлять новый.
 Брызги, брызги. 
 Допустим, вы пометили свои ключи и — упс — уронили их в лужу. Или они находятся на пути колоссального разлива. Эй, все в порядке. Ваш AirTag водонепроницаем. ³
 Инициал. Смайлик это. 
 При покупке AirTag на сайте apple.com или в приложении Apple Store вы можете персонализировать его своими инициалами. Смайлик. Или оба. Это бесплатно и просто, и это добавляет веселья.
 Используйте дополненную реальность, чтобы увидеть его 

 со всех сторон. Откройте эту страницу в Safari на своем iPhone или iPad.
 См. AirTag в дополненной реальности
 Больше цвета. Смешнее. Больше тебя. 
 AirTag легко прикрепить практически к чему угодно с помощью ярких колец для ключей и петель от Apple. AirTag поставляется по отдельности или в упаковке по 4 шт. Удачной пометки.
 Магазин аксессуаров Apple AirTag
 AirTag Hermes 
 Партнерство, основанное на тщательном мастерстве и общих ценностях, продолжается. Три кожаных изделия ручной работы — багажная бирка, подвеска для сумки и кольцо для ключей — снабжены эксклюзивной биркой AirTag Hermès с выгравированной легендарной подписью Clou de Selle. Это форма и функциональность в лучшем виде.
 Магазин AirTag Hermès
 1,26 дюйма 
 (31,9 мм)
1,26 дюйма 
 (31,9 мм)
  Size 
 Diameter: 1.26 inches (31.9 mm)
 Height: 0.31 inch (8.0 mm)
  Weight 
 0.39 ounce (11 grams)
 Rated IP67 (maximum depth of 1 meter up до 30 минут) по стандарту IEC 60529
 Bluetooth для обнаружения расстояния
 Разработанный Apple чип U1 для сверхширокополосного и точного поиска
 Касание NFC для режима пропажи
 Встроенный динамик
 Заменяемая пользователем батарейка типа «таблетка» CR2032
 Акселерометр
  Приложение «Локатор» совместимо со следующими специальными возможностями iPhone: 
 VoiceOver
 Инвертировать цвета
 Крупный текст
 Совместимость с дисплеями Брайля
 Apple ID
 Модели iPhone и iPod touch с iOS 14. 5 или более поздней версии
 Модели iPad с iPadOS 14.5 или более поздней версии
 Рабочая температура окружающей среды: от −4° до 140° F (от −20° до 60° C)
 AirTag с установленной батарейкой типа «таблетка» CR2032
 Документация
 AirTag разработан со следующими характеристиками для снижения воздействия на окружающую среду: 
 100% переработанное олово в припое основной логической платы
 Без ртути
 Без бромированных огнестойких добавок
 Без ПВХ
 Без бериллия
 Apple и окружающая среда 
 Узнайте больше о стремлении Apple снизить воздействие наших продуктов и процессов на окружающую среду. Или прочтите наши экологические отчеты о продуктах, чтобы получить подробную информацию об экологических характеристиках каждого продукта Apple.