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

0
484
views
verstka logo

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

×

Перевод статьи «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:developer.aya.b@gmail.com">
                developer.aya.b@gmail.com
            </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.

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here