Made in HTML/CSS – Telegram
Made in HTML/CSS
1.37K subscribers
754 photos
41 videos
2 files
677 links
Научись классно верстать и создавать сайты благодаря Made in HTML/CSS.
По рекламе - https://news.1rj.ru/str/ZilantTG
Download Telegram
Тег <dl> используется для создания списка определений, когда необходимо представить пары "термин-определение".

Основные особенности тега <dl>:

1. Структура. Список определений, созданный с помощью <dl>, состоит из двух вложенных элементов:
- <dt> (Definition Term) - термин, который определяется
- <dd> (Definition Denoscription) - определение или описание термина

2. Семантика. Использование <dl>, <dt> и <dd> помогает структурировать и смысловоглубоко обозначать содержание страницы.

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

Основные особенности тега <em>:

1. Семантика. Использование <em> указывает, что текст внутри него является важным, акцентированным или имеет особую эмоциональную окраску.

2. Стилевое оформление. По умолчанию браузеры отображают текст внутри <em> курсивным начертанием, но это можно изменить с помощью CSS.

3. Вложенность. Если внутри <em> находится еще один <em>, то это означает, что степень выделения данного текста повышается.
👍5
Тег <fieldset> используется для группировки связанных элементов формы на веб-странице. Он помогает визуально и семантически объединять элементы, относящиеся к одной логической группе.

Основные особенности тега <fieldset>:

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

2. Легенда. Внутри <fieldset> можно использовать тег <legend>, чтобы добавить заголовок или пояснение к группе элементов.

3. Семантика. Использование <fieldset> показывает, что элементы внутри него связаны между собой и относятся к одному логическому "полю" на форме.
👍4
Тег <figure> (от англ. figure — рисунок) используется для группирования любых элементов, например, изображений и подписей к ним.

Он не должен быть связан непосредственно с основным содержимым документа, и при его перемещении в другое место смысл текста не должен меняться.

Обычно применяется для иллюстраций, фрагментов кода, схем, графиков, диаграмм и др.

Тег <figcaption> (от англ. figure caption — подпись к рисунку) содержит описание для элемента figure.

Он должен быть первым или последним элементом в группе.
👍5
Тег <footer> выделяет нижний колонтитул (“подвал”) веб-сайта или раздела.

Как правило, в нем размещается информация об авторских правах, контактные данные, ссылки для навигации и т.д.

В пределах одной страницы можно разместить несколько тегов <footer>.

К примеру, можно разместить нижний колонтитул внутри тега <article> для хранения относящейся к статье информации (ссылки, сноски, и т.д.).
👍4
Теги заголовков HTML от <h1> до <h6> определяют шесть уровней иерархии разделов на веб-странице.

<h1> представляет самый главный, верхний уровень, а <h6> - самый низкий, второстепенный.

По умолчанию, все эти элементы заголовков создают блочные контейнеры.

Они начинаются с новой строки и занимают всю доступную ширину в своем родительском блоке.
👍4
Тег <header> в HTML используется для обозначения верхней части веб-страницы.

Это место, где обычно находятся такие важные элементы, как:
Логотип сайта
Главное меню навигации
Поисковая форма


Этот тег помогает показать, что содержимое внутри него является заголовочной частью страницы, а не просто обычным текстом.

Использование <header> улучшает структуру и смысл страницы. Это важно, чтобы люди с ограниченными возможностями могли легко понять, что находится в верхней части.
👍5
Тег <i> используется для выделения текста курсивным шрифтом.

Вот как это работает:

- Если вы обернете какой-то текст в теги <i>...</i>, то он будет отображаться курсивом.

- Например, вместо обычного текста "Это интересная статья" вы можете написать "<i>Это интересная статья</i>".

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

Важно понимать, что изначально тег <i> использовался именно для обозначения курсивного шрифта. Но со временем его значение расширилось.

Сейчас <i> часто применяют для придания смысловых оттенков, например, для обозначения терминов на иностранном языке, названий книг или кораблей и т.д.
👍7
Тег <iframe> используется для встраивания одной веб-страницы внутрь другой. Проще говоря, это как окно внутри окна.

Вот как это работает:

- Когда вы используете <iframe>, вы можете встроить целую другую веб-страницу на вашу собственную страницу.

- Это может быть видео с YouTube, карта Google Maps, сторонний сайт или любой другой контент, размещенный на другом ресурсе.

- Вы задаете размеры <iframe>, чтобы эта встроенная страница занимала нужное место на вашей странице.

- Таким образом, вы можете объединять различный контент и создавать более насыщенные и интерактивные веб-страницы.

Основные особенности <iframe>:

- Позволяет встраивать контент с других сайтов
- Дает возможность совмещать разные типы информации
- Помогает сделать страницу более динамичной и интересной для пользователя
👍10
Тег <img> используется для добавления изображений на веб-страницу.

Вот как это работает:

- Когда вы хотите показать картинку на своем сайте, вы используете тег <img>.

- Внутри этого тега вы указываете, где находится файл с изображением, чтобы браузер мог его отобразить.

- Например, <img src="img/logo.png"> покажет изображение "logo.png", расположенное в папке "img".

- Также вы можете задать размеры изображения с помощью атрибутов width и height.

Основные особенности <img>:

- Позволяет добавлять любые изображения на страницу: фотографии, иконки, логотипы и т.д.

- Дает возможность управлять размерами картинок.

- Помогает сделать контент более визуально привлекательным и понятным.
👍6
Тег <input> используется для создания различных элементов ввода данных на веб-странице.

Основные особенности:

- Позволяет создавать текстовые поля, чек-боксы, кнопки и другие элементы

- Дает возможность настраивать свойства этих элементов

- Помогает получать информацию от пользователей
👍8
Тег <ins> обычно используется при редактировании или обновлении контента на веб-странице, чтобы четко показать, что было добавлено.

Это очень полезно, особенно когда вы ведете учет изменений на сайте или делитесь черновиками с другими людьми.

Когда вы используете этот тег, браузер будет отображать вставленный текст особым образом, например, подчеркнутым или другим цветом.
👍8
Тег <kbd> используется для обозначения текста, представляющего ввод с клавиатуры.

Он помогает выделить клавиши или комбинации клавиш, которые нужно использовать.

Браузер отображает текст внутри <kbd> особым образом - обычно моноширинным шрифтом, чтобы он выглядел как настоящая клавиша.

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

Он помогает связать текстовую метку с соответствующим элементом формы, обеспечивая лучшую доступность и удобство использования.

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

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

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

Текст, заключенный внутри тега <legend>, будет отображаться в верхней части соответствующего <fieldset>(тут), обеспечивая лучшее понимание структуры и назначения формы для пользователей.
👍8
Тег <li> используется для обозначения элемента списка внутри упорядоченного (<ol>) или неупорядоченного (<ul>) списка.

Каждый <li> элемент представляет собой одну запись или пункт в списке. Браузер обычно отображает их с маркером или нумерацией, в зависимости от типа списка.

Тег <li> позволяет структурировать контент на веб-странице, делая его более понятным и легким для чтения.
👍9
Тег <link> используется для установления связей между текущим документом HTML и другими ресурсами, такими как стилевые таблицы (CSS), иконки, RSS-ленты и т.д.

Основное назначение тега <link> - подключение внешних ресурсов, которые улучшают или дополняют содержание веб-страницы.

Наиболее распространенное использование - подключение таблиц стилей CSS с помощью атрибута rel="stylesheet". Это позволяет применять стили оформления к элементам HTML-документа.
👍10
Тег <main> используется для обозначения основного, центрального содержимого веб-страницы.

Он предназначен для размещения основной информации, которая составляет главную цель или назначение данной страницы.

Использование <main> помогает структурировать документ, выделяя его ключевое содержимое.

Это улучшает доступность и семантику страницы, облегчая понимание ее структуры для пользователей и поисковых систем.
👍9
Тег <map> используется для создания интерактивных изображений-карт на веб-странице. Он позволяет связать определенные области изображения с гиперссылками, что дает пользователям возможность взаимодействовать с картой.

Как правило, <map> используется совместно с тегом <img> для создания "горячих точек" на изображении. Эти "горячие точки" представляют собой области, которые реагируют на действия пользователя, например, наведение курсора или щелчок.

Внутри тега <map> размещаются элементы <area>, которые определяют форму и координаты "горячих точек" на изображении, а также связывают их с соответствующими ссылками или другими действиями.
👍7
Тег <mark> используется для выделения важных фрагментов текста на веб-странице.

Он привлекает внимание к ключевым словам, цитатам или другим значимым частям контента.

По умолчанию, браузеры отображают текст внутри <mark> с желтым фоном, но стили можно изменить с помощью CSS.

<mark> помогает структурировать страницу и делать важную информацию более заметной для пользователей, особенно в контексте поиска или обучения.
👍8