Join
Алекс Мельников
@sanchos
HTML&CSS
November 15, 2021

5 HTML-тегов, о которых мало кто знает

Перевод статьи «5 HTML Tags That Almost Nobody Knows».

Photo by Jackson So on Unsplash

Представляем подборку HTML-тегов, которыми довольно редко пользуются разработчики (и, возможно, зря).

<mark>

<mark> — тег, используемый для выделения части текста. Этот тег поддерживает все глобальные атрибуты HTML. По умолчанию выделенный текст имеет черный шрифт на желтом фоне.

<!DOCTYPE html>

<html>

<head> </head>

<body>

<p>

in this paragraph, there is a text

<!--

by default => (

color: black;

background-color: yellow;

)

-->

<mark>highlighted</mark>

</p>

</body>

</html>

Результат:

Можно изменить цвет выделения:

<mark style="background-color:green">highlighted</mark>

Результат:

<address>

<address> — тег, отображающий контактную информацию вроде email-адреса и номера телефона автора документа или статьи. Поддерживает все глобальные атрибуты HTML.

<!DOCTYPE html>

<html>

<head> </head>

<body>

<address>

Posted by

<a href="https://t.me/AyaBouchiha"> Aya Bouchiha </a>

<br />

Email Address:

<a href="mailto:[email protected]">

[email protected]

</a>

<br />

Phone Number:

<a href="tel:+212632772265">+212632772265 </a>

<br />

Morocco, Azemmour

</address>

</body>

</html>

Результат:

<noscript>

Тег <noscript> может находиться внутри тегов <head> или <body>. Он отображает альтернативный HTML-контент, если тип скрипта не поддерживается или если в браузере вообще отключен запуск скриптов. Вне этих условий тег не отображает альтернативный HTML.

Но нужно быть осторожным: <noscript> порой влияет на SEO из-за того, что в нем повторяются все предложения вашего сайта. О решении этой проблемы и подробности можно почитать здесь.

<!DOCTYPE html>

<html>

<body>

<script>

alert("javascript is supported in your browser :)");

</script>

<noscript> Javascript is not supported in your browser :( </noscript>

</body>

</html>

Результат:

<time>

Тег <time> представляет определенный промежуток времени. Он может иметь атрибут datetime для перевода дат в машиночитаемый формат (это хорошо для поисковиков и для пользовательских функций, таких как «напоминалки»). Поддерживает все глобальные HTML- атрибуты.

<html>

<head></head>

<body>

<p>

The next meeting will be held on

<time datetime="2021-11-25">

Nov 25

</time>

in Rabat

</p>

</body>

</html>

Результат:

<var>

Тег <var> служит для обозначения математических переменных, таких как x и y. По умолчанию содержимое тега имеет курсивное начертание. Тег поддерживает все глобальные HTML- атрибуты.

<html>

<head></head>

<body>

<div>

<!--

by default (

var {

font-style: italic;

}

)

-->

<p>Ex:1 solve this equation:</p>

<var>4x</var> + <var>2y</var> = 12

</div>

</body>

</html>

Результат:

Итоги

Мы рассмотрели пять HTML-тегов, которые довольно редко используются:

  • <mark> — для выделения фрагментов текста
  • <address> — для вывода контактной информации
  • <noscript> — для отображения альтернативного HTML-контента на случай, если браузер не поддерживает скрипты
  • <time> — для представления определенного временного периода
  • <var> — для обозначения математических переменных вроде x и y.
Алекс Мельников
November 15, 2021, 03:24
0 views
0 reactions