Недооцененные теги HTML
В мире веб-программирования такие теги, как body, div, table, являются одними из самых популярных и часто используемых, однако существуют недооцененные теги, которые не менее полезны и функциональны, и именно о них мы расскажем в этой статье.
Веб-разработка
4076
15 мая 2020
<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. Именно поэтому веб-разработчикам важно практиковать их применение и изучать новые элементы для развития навыков веб-программирования.
Читайте другие статьи
Топ-7 Angular-библиотек для ваших Frontend-проектов
Зачем писать код с нуля, когда нужного результата можно достичь при помощи готовых библиотек? Если вы разрабатываете Frontend-проекты на фреймворке Angular, то наша подборка серьезно облегчит вам жизнь. Скорее добавляйте в закладки!
Веб-разработка
2177
28 марта 2023
6 полезных привычек программирования
Привычки являются неотъемлемой частью нашей жизни. В этой статье мы поговорим о полезных привычках в программировании, которые есть не у каждого разработчика, но, выработав которые, вы можете стать лучшим программистом.
Веб-разработка
2962
16 июня 2020
Советы веб-верстальщику о работе с веб-дизайнером
Войны между верстальщиками и веб-дизайнерами — это обычное дело. Но если оба будут знать, как работать друг с другом и какие обязанности исполнять, то сотрудничество будет в радость всем. В статье мы рассказали, как верстальщику вести себя с дизайнером.
Веб-разработка
3823
19 дек. 2019
Получайте первыми свежие статьи из нашего блога прямо на вашу почту
Никакого спама. Только ценные и полезные статьи для вас!
