23 Фев
HTML тэги.
Современным веб-разработчикам часто приходится работать сразу в нескольких языках программирования. Из-за этого сложно изучить все возможности каждого языка и легко упустить более специализированные, но не менее полезные HTML тэги.
К сожалению, в последнее время мы мало используем возможности более редких тегов и атрибутов HTML. Однако никогда не поздно вернуться в игру и начать писать код, используя мощь некоторых редко используемых HTML-тегов.
Вот некоторые из редких и очень специальных HTML-тегов. Хотя они могут быть менее знакомы, они все еще достаточно полезны в определенных ситуациях.
<cite>
Многие из нас знакомы с тегом <blockquote>, но знали ли вы о его младшем брате <cite>? Тег <cite> позволяет определить текст внутри элемента как ссылку на источник. Обычно браузер отображает текст внутри тега <cite> курсивом, но это можно изменить с помощью CSS.
<p>David Allen's breakthrough organization book <cite>Getting Things Done</cite> has taken the web by storm.</p>
<acronym>
<acronym> – это один из крутых тегов HTML, который можно использовать для определения или дополнительного объяснения группы слов. При наведении на текст, в котором используется тег <acronym>, появляется окно с текстом из атрибута title. Например:
The microblogging site <acronym title="Founded in 2006"> Twitter</acronym> has recently struggled with downtimes.<optgroup>
Тег <optgroup> позволяет добавить некоторое определение между группами опций внутри списка выбора. Это позволяет визуально отделить элементы списка. Например, если вы хотите группировать список фильмов по времени, это будет выглядеть следующим образом:
<label for="showtimes">Showtimes</label>
<select id="showtimes" name="showtimes">
<optgroup label="1PM">
<option value="titanic">Twister</option>
<option value="nd">Napoleon Dynamite</option>
<option value="wab">What About Bob?</option>
</optgroup>
<optgroup label="2PM">
<option value="bkrw">Be Kind Rewind</option>
<option value="stf">Stranger Than Fiction</option>
</optgroup>
</select>HTML тэги <ins> и <del>
Если вы хотите отображать версии правок с помощью разметки, то <ins> и <del> – именно то, что вам нужно. Как следует из названия, <ins> подчеркивает то, что было добавлено в документ, а <del> показывает, что было удалено.
John <del>likes</del> <ins>LOVES</ins> his new iPod.<address>
Тег <address> является простым, но очень полезным тегом в HTML. Как следует из названия, он позволяет задать семантическую разметку адресов в HTML. Этот удобный тег также курсивом выделяет все данные внутри скобок, хотя стиль можно легко изменить с помощью простого CSS
<address>Glen Stansberry
1234 Web Dev Lane
Anywhere, USA
</address><base>
Для относительных ссылок в HTML используется элемент base, который предоставляет базовый URL. Например, вы можете указать базовый URL в верхней части страницы, а затем другие относительные ссылки на странице будут использовать тот же самый URL.
<base href="https://geniuscourses.com/" target="_blank">Пожалуйста, обратите внимание, что тег <base> должен находиться между тегами <head> документа, и каждый документ может иметь только один элемент <base>. Например:
<html>
<head>
<title>Base Tag Example</title>
<base href="https://geniuscourses.com/" target="_blank">
</head>
<body>
<p>Understand <a href="articles/data-structures">Data Structures</a>.</p>
</body>
</html><meta>
Тэги <meta> описания и автора являются общими HTML-тегами, которые часто игнорируются разработчиками при написании кода. Эти специальные теги в HTML используются для указания описания или ключевых слов HTML-документа, что помогает пользователям легко находить ваш веб-сайт или контент.
<meta name="keywords" content="уроки, курсы, статьи">
<meta name="description" content="Лучшие уроки, курсы и статьи по веб разработке от Genius Courses">
<meta name="author" content="Александр Сокирка"><q>
Элемент <q> является одним из наиболее часто используемых HTML-тегов, используемых для выделения цитируемого текста на веб-странице. Этот тег добавляет разнообразие в контент вашего сайта и используется в основном для обозначения кратких цитат.
<q>Tests are stories we tell the next generation of programmers on a project.</q>Атрибут <cite> указывает источник цитаты.
<p><cite>Roy Osherove</cite> said, <q>Tests are stories we tell the next generation of programmers on a project.</q>.</p>
<progress>
HTML-тег <progress> используется для отображения прогресса выполнения задачи. Он позволяет веб-разработчикам легко добавлять индикатор выполнения на свои веб-сайты. Тег <progress> также может использоваться для отображения уровня компетенции в различных областях на портфолио веб-разработчика, а также для отслеживания прогресса загрузки файлов. Атрибут max определяет диапазон прогресс-бара.
<progress value="750" max="1000">
<span>70</span>%
</progress><mark>
Тег <mark> используется для выделения текста или информации, которые являются очень важными и требуют внимания.
<p>The <mark>mark</mark> tag is used to highlight a text or a piece of information that is very important needs attention</p>
<meter>
Тег <meter> используется для определения шкалы измерения в определенном диапазоне и также может обрабатывать дробные значения. Еще одно название для него – это шкала. Толкование тега <meter> можно определить с помощью шести различных атрибутов.
- value: указывает текущее значение измерения
- min: указывает нижнюю границу диапазона
- max: указывает верхнюю границу диапазона
- low: указывает диапазон, который является низким значением
- high: указывает диапазон, который является высоким значением
- optimum: указывает наилучший или оптимальный числовой диапазон.
<p>Low storage space <meter optimum="40" high="80" max="100" value="20">85%</meter></p><details>
Элемент <details> используется для предоставления или скрытия дополнительной информации о содержании на веб-сайте. Он используется для создания интерактивного виджета, который пользователь может открыть или закрыть. Содержимое элемента details видно при открытии заданных атрибутов.
Элемент details используется с тегом <summary>, чтобы создать заголовок, на который можно нажать, чтобы открыть или закрыть информацию, которую вы хотите узнать подробнее.
<p>
<p>I'm Alex Socha, a software developer who has more development experience in frontend building responsive website sites using these web technologies like Javascript, Vue Js, HTML and CSS, Bootstrap Tailwind CSS.</p>
</p>
<details>
<summary>Click to read more about me</summary>
<p>I love sharing how to use the latest technology tools to solve problems and my technical experience through an article.</p>
</details><wbr>
Этот тег используется редко и служит для указания места, где, по вашему мнению, может потребоваться перенос строки. Однако перенос будет осуществлен браузером только в том случае, если это необходимо. Этот тег полезен, если вам нужно создать макет, избегая появления горизонтальных полос прокрутки.
<label>
Из элементов формы один из самых забытых – это тег <label>. Не только это быстрый способ указать текст метки, но тег <label> также может передавать атрибут “for“, чтобы указать, какой элемент должен получить метку. Теги <label> прекрасны для стилизации, и они также позволяют сделать заголовок кликабельным для соответствующего элемента.
<label for="username">Username</label>
<input id="username" type="text" /><fieldset>
Fieldset – это удобная маленькая функция, которую вы можете добавить к своим формам для логической группировки элементов формы. После применения тега <fieldset> создается рамка вокруг элементов внутри этого поля. Дополнительный бонус за добавление тега <label> внутри поля, чтобы определить заголовок группы. Посмотреть тэги и атрибуты для валидации формы на html5
<form><fieldset>
<legend>Are You Smarter Than a 5th Grader?</legend>
Yes <input name="yes" type="radio" value="yes" />
No <input name="no" type="radio" value="no" />
</fieldset>
</form><abbr>
Тег <abbr> очень похож на тег <acronym>, за исключением того, что он используется только для определения сокращенных слов. Как и в случае с тегом <acronym>, вы определяете заголовок внутри тега. Когда посетитель наводит курсор на сокращенный текст, полное определение появляется ниже. Тег <abbr> редко используется, но для скринридеров, проверки орфографии и поисковых систем он имеет много преимуществ.
<abbr title="Sergeant">Sgt.</abbr> Pepper's Lonely Hearts Club is my favorite album.Заключение. HTML тэги.
В заключение можно сказать, что хотя многие из этих тегов не так часто используются в HTML, они могут придать вашему веб-сайту интересный вид и дополнительную функциональность. Рекомендую изучить основные HTML тэги просмотрев плейлист на моем канале – Быть Программистом по верстке. Некоторые из этих тегов могут улучшить доступность вашего сайта для пользователей со слабым зрением или ограниченными возможностями, такими как скринридеры. Независимо от того, используете ли вы эти теги или нет, знание о них может помочь вам создавать более профессиональные и удобочитаемые веб-страницы.
Александр Сокирка
