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

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

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

1. Тег <base>

Указывает базовый URL-адрес и / или цель для всех относительных URL-адресов в документе. Он должен иметь либо href, либо целевой атрибут, либо и то, и другое.

В документе может быть только один элемент <base>, и он должен находиться внутри элемента <head>.

<head>
 <base ...>
</head>

2. Тег <fieldset>

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

Совет: Тег <legend> используется для определения заголовка для элемента <fieldset>.

<form>
<fieldset>...</fieldset>
</form>

3. Тег <wbr>

Тег <wbr> (word break opportunity) указывает, где в тексте можно сделать нечетный разрыв строки.

Совет: если слово слишком длинное, браузер может разорвать его не в том месте. Вы можете использовать элемент <wbr>, чтобы добавить возможности разрыва слова.

Текст<wbr>текст

4. Тег <kbd >

Тег <kbd> используется для определения ввода в клавиатуру. Cодержимое внутри отображается моноширинным шрифтом браузера по умолчанию.

<kbd>Текст</kbd>

5. Тег <s>

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

<s>Текст</s>

6. Тег <select>

Элемент <select> используется для создания элемента в интерфейсе в виде раскрывающегося списка с одним или множественным выбором.

Атрибут имени необходим для ссылки на данные формы после отправки формы (если вы опустите атрибут имени, данные из раскрывающегося списка не будут отправлены).

Атрибут ID необходим для связи раскрывающегося списка с меткой.

<select>
<option>Пункт 1</option>
 <option>Пункт 2</option>
</select>

7. Тег <optgroup>

Тег <optgroup> используется для группировки связанных параметров в элементе <select> (раскрывающийся список). Данный тег представляет собой контейнер, внутри которого находятся теги <option> объединенные в одну группу.

<select>
 <optgroup label="...">
 <option>...</option>
 </optgroup>
</select>

8. Тег <datalist>

Тег <datalist> определяет список предопределенных параметров для элемента <input>.

Он используется для обеспечения функции «автозаполнения» для элементов <input>. При вводе данных пользователи будут видеть раскрывающийся список предопределенных параметров.

<input list="<идентификатор>">
<datalist id="<идентификатор>">
 <option value="Текст1">
 <option value="Текст2">
</datalist>

9. Тег <option>

Тег <option> определяет параметр в списке выбора.

Элементы <option> помещаются внутри элементов <select>, <optgroup> или <datalist>.

Примечание: тег <option> можно использовать без каких-либо атрибутов, но обычно вам необходим атрибут value, который указывает на то, что было отправлено на сервер при отправке формы.

<select>
 <option>Пункт 1</option> 
 <option>Пункт 2</option>
</select>

10. Тег <cite>

Тег <cite> дает ссылку на цитату или сноску другого материала.

Текст в элементе <cite> обычно отображается курсивом.

<cite>Текст</cite>

11. Тег <mark>

Тег <mark> определяет текст, который следует маркировать или выделить с помощью разных стилей.

<mark>текст</mark>

12. Тег <abbr>

Тег <abbr> определяет аббревиатуру или акроним. Аббревиатура или акроним являются сокращением сочетаний слов и представляют собой некий набор букв.

<abbr>Текст</abbr>

Это был список из неочевидных HTML-тегов, которые помогут вам разнообразить ваш сайт. Чтобы использовать использовать весь потенциал языков, необходимо изучить некоторые более специализированные, но очень полезные теги, которые  могут быть весьма практичны в определенных ситуациях.


.

  • April 8, 2021