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
Тег <mark> используется для выделения важных фрагментов текста на веб-странице.

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

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

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

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

Атрибуты min, max и value определяют диапазон и текущее значение.
Дополнительные атрибуты low, high и optimum задают границы оптимального интервала.

Браузеры обычно показывают <meter> в виде горизонтальной полосы, заполненной пропорционально текущему значению.
Внешний вид можно стилизовать с помощью CSS.
👍8
Тег <nav> обозначает навигационный блок на веб-странице.

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

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

Он позволяет задавать параметры встраиваемого объекта, такие как ширина, высота и URL источника. Также <object> дает возможность указать альтернативный контент, который будет показан, если основной ресурс не может быть отображен.
👍10
Тег <ol> создает нумерованный список в HTML.

Он упорядочивает элементы в определенной последовательности, нумеруя их автоматически.

Каждый элемент списка оформляется тегом <li>. По умолчанию нумерация начинается с 1, но можно изменить ее тип с помощью атрибута type (1, a, A, i, I).

Начальный номер списка также можно задать с помощью атрибута start.

Списки <ol> могут быть вложенными, при этом внутренний список будет иметь свою собственную нумерацию.
👍6
Тег <optgroup> в HTML объединяет связанные элементы <option в выпадающем списке или <select>.

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

Внутри <optgroup> располагаются теги <option, представляющие конкретные варианты выбора. Группы могут быть вложенными.
👍7
Тег <option> используется внутри элемента <select> для создания вариантов выбора в раскрывающемся списке. Он позволяет задать текст варианта и его значение.

Основные атрибуты:
- value - значение варианта
- selected - делает вариант выбранным по умолчанию
- disabled - делает вариант недоступным для выбора
👍5
Тег <output> используется для представления результата вычислений или других типов выходных данных.

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

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

- Позволяет отображать результат вычислений, скриптов и других операций.
- Может содержать текстовый, графический или мультимедийный контент.
- Имеет атрибут name, чтобы идентифицировать выходные данные.
- Часто используется совместно с элементами формы, такими как <input> и <button>.
👍7
Тег <param> используется внутри <object> для передачи параметров объекту.

Основные особенности:
- Задает имя и значение параметра с помощью атрибутов name и value.
- Позволяет настраивать поведение и внешний вид встраиваемого объекта.
🔥5
Тег <picture> позволяет предоставлять браузеру разные версии изображения.

Особенности:
- Внутри <picture> размещаются теги <source> с медиа-запросами.
- Браузер выбирает подходящий вариант изображения.
- Тег <img> используется как резервный вариант.
🔥8
Тег <pre> сохраняет форматирование текста, включая пробелы, табуляцию, переносы строк.

Особенности:
- Отображает текст в моноширинном шрифте.
- Часто используется для примеров кода.
- Можно комбинировать с другими элементами, например <code>.


<pre aria-label="Изображение кота, собранное из текстовых символов.">
../\„„./\.
.(='•'= ) .
.(") „. (").
. \,\„„/,/
. │„„. „│
. /„/„ \„\
.(„)''l l''(„)
. .. ((...
. . . ))..
. . .((..
</pre>
👍6
Тег <progress> отображает индикатор прогресса.

Особенности:
- Имеет атрибуты value и max.
- value показывает текущее значение прогресса.
- max указывает максимальное значение.
- Отображается в виде прогрессивной полосы.
- Используется для показа загрузки, выполнения задач и т.д.
👍8
Тег <q> используется для вставки короткой цитаты в текст.

Основные особенности:
- Автоматически добавляет кавычки вокруг текста цитаты.
- Предназначен для семантического обозначения цитаты, а не для форматирования.
- Улучшает доступность и структуру документа.
- Браузеры могут использовать тег <q> для добавления специального форматирования цитат.
- Длинные цитаты лучше помещать внутрь тега <blockquote>.
👍6
Тег <ruby> используется для добавления к тексту кандзи (китайских иероглифов) их фонетической записи (руби).

Основные особенности:
- Состоит из основного текста и дополнительной фонетической записи.
- Дополнительная запись размещается над или рядом с основным текстом.
- Часто используется в азиатских языках для помощи в чтении сложных иероглифов.
- Улучшает доступность текста для читателей, не знакомых с иероглифами.
- Может содержать теги <rb>, <rt> и <rp> для более точного указания руби.
👍4
Тег <s> используется для обозначения текста, который больше не актуален или недействителен.

Основные особенности:
- Отображает текст с перечеркиванием, визуально обозначая, что он устарел или более не актуален.
- Применяется для семантической разметки, а не только для визуального эффекта.
- Помогает обозначить изменения в содержании, не удаляя весь текст.
- Улучшает доступность и понимание документа для пользователей.
- Отличается от тега <del>, который используется для обозначения удаленного текста.
👍6
тег <samp> используется для обозначения примера или фрагмента текста, должен быть отображен в моноширинном шрифте.

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

Это помогает визуально отделить такие фрагменты от остального содержания страницы.
👍6
<section> — это HTML-элемент, который используется для определения семантического раздела на веб-странице.

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

Основные характеристики:

1. Семантика: <section> подразумевает, что содержимое в нем связано единой темой. Это может быть раздел текста, статей, или страниц, относящихся к одной тематике.

2. Заголовок: Обычно <section> содержит заголовок, определяемый элементом <h1>, <h2>, <h3> (и т.д.), который описывает тему данного раздела.
👍4
<select> — это HTML-элемент для создания выпадающего списка, позволяющего пользователю выбирать один или несколько вариантов из списка.

Внутри <select> размещаются элементы <option>, каждый из которых представляет отдельный вариант выбора.
👍6
<small> — это HTML-элемент, который используется для представления текста меньшего размера, обычно для создания второстепенного или менее важного текста.

Этот элемент часто применяется для выделения сносок, примечаний, авторских прав и другой информации, которая не является основным содержанием.
👍5
<source> — это HTML-элемент, который используется в медиаэлементах <audio> и <video> для определения источников медиафайлов.

Он позволяет браузерам выбирать наиболее подходящий файл для воспроизведения в зависимости от поддерживаемых форматов и кодеков.
👍4
<strong> — это HTML-элемент, предназначенный для выделения текста, который имеет повышенную важность.

Обычно браузеры отображают содержимое внутри <strong> с жирным шрифтом, что визуально подчеркивает выделенный текст.
👍5