Top.Mail.Ru
ypx
INTENSIVE
Попробуй себя в UX/UI-дизайне UX/UI-дизайн бесплатно
7 дней
5 проектов в портфолио
проверка дз
banner-circle
INTENSIVE
Попробуй себя во Frontend разработке Frontend бесплатно
7 дней
1 полноценный проект
проверка дз
banner-circle
Недооцененные теги HTML
В мире веб-программирования такие теги, как body, div, table, являются одними из самых популярных и часто используемых, однако существуют недооцененные теги, которые не менее полезны и функциональны, и именно о них мы расскажем в этой статье.
Веб-разработка
5988

<fieldset>


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



<progress>


Тег <progress> используется для отображения "индикатора выполнения", то есть какой процент задачи уже выполнен, например, процент загрузки файла. Основными атрибутами тега <progress> являются max – определяет общий объем работы и valuе – указывает размер уже выполненной работы.



<base>


HTML тег <base> определяет начальную часть URL-адреса, которая будет подставлена перед всеми относительными адресами на странице. Данный тег не даст большого эффекта для маленьких ресурсов с несложной структурой, но для веб-сайтов с многоуровневым устройством каталогов, тег <base> ощутимо сократит объем страниц, а также обеспечит краткость адреса URL.

Элемент <base> обязательно должен располагаться внутри элемента <head> и находиться в документе в единичном количестве.



<details>


Тег <details> используется для хранения информации, которую можно скрыть или показать по желанию пользователя. Содержимое тега скрыто по умолчанию, поэтому необходимо использовать атрибут open для изменения статуса.

HTML-элемент <details> может быть использован для создания интерактивных виджетов, которые пользователь сможет открывать и закрывать на веб-странице.



<mark>


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

Прямое назначение тега <mark> – обратить внимание на то, что в данный момент актуально для пользователя.



<abbr>


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

Все символы, отмеченные тегом <abbr> с атрибутом title, по умолчанию подчеркиваются пунктирной линией.



<pre>


Тег означает предварительно отформатированный текст и используется для отображения текста в исходном виде. Текст с тегом <pre> будет отображаться точно так, как он отформатирован в блоке ­– со всеми табуляциями, пробелами и поддерживаемыми символами.

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





Теги и атрибуты – основы языка HTML. Именно поэтому веб-разработчикам важно практиковать их применение и изучать новые элементы для развития навыков веб-программирования.
Понравилась статья? Сохраните её в своих соц. сетях!
обучайся с нами профессии
Frontend-разработчик
Подробнее о курсе
Читайте другие статьи
Где junior разработчику искать первых клиентов?
Мы сделали подборку мест для поиска первых клиентов начинающему веб-разработчику.
Веб-разработка
16387
Чего следует избегать при написании CSS
Чтобы эффективно работать с любым проектом, разработчикам очень важно написание чистого и понятного кода. Этот аспект касается и написания стилей CSS. В статье мы рассмотрим несколько моментов, которые следует избегать при работе над CSS.
Веб-разработка
3534
Как работает Flexbox? (часть 2)
В этой статье мы продолжим рассказывать о модуле Flexbox, где рассмотрим свойства дочерних элементов Flexbox и разберем их основные значения.
Веб-разработка
787
Получайте первыми свежие статьи из нашего блога прямо на вашу почту
Введите корректный e-mail
Никакого спама. Только ценные и полезные статьи для вас!