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

Ключевые выводы

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

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

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

1.
и

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

instagram viewer

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

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

<details>
<summary>Click to reveal more informationsummary>
<p>This content will be hidden by default but will appear when the user
 clicks the summary.p>
details>

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

2.

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

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

<p>
 You can use the <mark>markmark> tag to highlight important words or
 phrases.
p>

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

3.

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

Введите ярлык! Это означает зачеркнутый и отображает любой контент внутри элемента с линией посередине.

<p>
 This product is <s>out-of-stocks> currently available at a discounted
 price!
p>

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

4.

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

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

<p>
 The Declaration of Independence was signed on
<timedatetime="1776-07-04">July 4, 1776time>.
p>

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

5.

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

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

<p>
<bdi>5,000bdi> people attended the conference.
p>

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

6. , ,

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

<p>
 I'm learning
<ruby>漢<rt>かんrt>ruby>字<rp>(rp><rt>Kanjirt><rp>)rp>.
p>

В этом примере элемент содержит символ 漢 (кандзи) и элемент содержит произношение かん (кан). Элементы предоставляют запасные круглые скобки для браузеров, которые не поддерживают рубиновые аннотации.

7.

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

<p>
 This is an example of a long url: https://www.example.org/<wbr>with/a/long/path/and/a? query=string.
p>

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

8. и

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

<p>
 The chemical formula for water is H<sub>2sub>O,
 and the Pythagorean theorem is
 a<sup>2sup> + b<sup>2sup> = c<sup>2sup>.
p>

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

9.

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

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

<metervalue="75"min="0"max="100">75%meter>

В этом примере элемент представляет экзаменационную оценку 75%.

10.

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

<dialogopen>
<p>This is a dialog box!p>
<button>Closebutton>
dialog>

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

11.

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

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

Например:

<select>
<optgrouplabel="Asia">
<optionvalue="kr">South Koreaoption>
optgroup>
<optgrouplabel="Europe">
<optionvalue="de">Germanyoption>
optgroup>
select>

В этом примере раскрывающийся список выбора группируется в два раздела: Азия, и Европа. Каждая группа содержит теги, представляющие разные страны в этом регионе.

Повысьте свои навыки в веб-разработке

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

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