<div>
- 25 января 2023
✔️ Актуальный |
Тег <div> определяет раздел или секцию в HTML-документе. Это контейнер, который используется для группировки других элементов, таких как текст, изображения или другие теги, в разделы или блоки.
<div>
// какой-нибудь контент
</div>
Примеры использования
Создание раздела веб-страницы:
<div class="section">
<h2>Заголовок секции</h2>
<p>Какое-нибудь содержимое секции</p>
</div>
Группировка элементов формы:
<div class="form-group">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
</div>
Создание панели навигации:
<div class="nav-bar">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>
Для чего использовать тег <div>
- для объединения связанных элементов в группы;
- для создания раздела или блока содержимого;
- для применения стилей к определенному разделу содержимого;
- для создания сетки макета;
- для создания контейнера для кода JavaScript или CSS;
- для создания многократно используемого компонента или виджета;
- чтобы обернуть содержимое для использования с плагинами JavaScript или jQuery.
Глобальные атрибуты
Тег поддерживает все глобальные атрибуты HTML.
Ограничения
Если вы используете слишком много тегов <div> для обёртывания содержимого, код может стать громоздким и трудночитаемым. В этом случае лучше использовать семантические теги <section> или <article>.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Справочник по HTML
Введение
Структура HTML-документа: <!DOCTYPE>, <html>, <head> и <body>.
Основные HTML-теги
Форматирование текста: <b>, <i>, <u>, <strong>, <em> и другие.
Абзацы и разрывы строк: <p>, <br>
Списки: <ul>, <ol>, <li>, <dl>, <dt>, <dd>
Ссылки: <a>
Картинки: <img>
Атрибуты и мета-теги
Глобальные атрибуты: class, id, style.
Атрибуты событий: onclick, onload и т. д.
Основные мета-теги: charset, viewport, description.
Формы
Элемент формы: <form>
Поля ввода: <input>, <textarea>, <button>, <select>, <option>.
Валидация форм разными способами.
Таблицы
Основная структура таблицы: <table>, <tr>, <td>, <th>
Расширенные функции таблицы: <caption>, <colgroup>, <col>, <thead>, <tfoot>, <tbody>
Аудио, видео, встроенные элементы
Аудио и видео: <audio>, <video>
Встроенные элементы: <embed>, <iframe>, <object>
Семантика, структура и доступность
Семантические теги: <header>, <footer>, <nav>, <article>, <section>, <aside>, <figure>, <figcaption>
Цитаты и источники: <blockquote>, <q>, <cite>
Дополнительные элементы
Интерактивные элементы: <details>, <summary>
Скрипты: <script>, <noscript>
Шаблоны: <template>
Проверка и тестирование документа
💡 Авторы и редакторы — Евгений Шкляр, Лена Цимбалист, Настя Ткачёва, Саша Ермайкина.
Вёрстка, оформление — Саша Ермайкина.
- 12 сентября 2023
<source>
Тег <source> нужен для указания адреса картинок в теге <picture>, аудио в теге <audio> или видео в теге <video>. Он не используется как отдельный тег.
<audio>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Ваш браузер не поддерживает аудиоэлемент.
</audio>
Для картинок:
<picture>
<source media=""(min-width: 650px)" srcset="large-image.jpg">
<source media=""(min-width: 465px)" srcset="medium-image.jpg">
<img src="small-image.jpg" alt="Изображение">
</picture>
Атрибуты тега <source>:
type: Определяет формат мультимедиа ресурса, напримерvideo/mp4илиimage/jpeg.src: Указывает на конкретный мультимедийный файл.srcset: Предоставляет разные версии изображения, обычно для разных разрешений экрана.sizes: Определяет, какой размер изображения должен быть выбран в зависимости от размера экрана устройства.media: Определяет условия (например, минимальная ширина экрана), при которых данный источник должен быть использован.widthиheight: Указывают размеры мультимедиа ресурса.
- 8 августа 2023
Вставка элементов на страницу. Тег <object>
✔️ Актуальный |
Тег <object> используется для вставки на страницу какого-то содержимого, например, видео с YouTube, PDF-файлов, Google Maps или других элементов. Этот тег может использоваться вместо устаревших <embed> и <applet>.
<object data="movie.mp4" width="400" height="300"></object>
<object data="music.mp3" width="200" height="50"></object>
<object data="document.pdf" width="500" height="600"></object>
Атрибуты тега <object>:
data— URL или относительный путь к объекту.type— MIME-тип объекта.name— имя объекта.usemap— URL карты изображения.width— ширина объекта.height— высота объекта.
- 8 августа 2023
Наглядное отображение чисел. Тег <meter>
✔️ Актуальный |
Тег <meter> используется для наглядного отображения числовых данных — например, надёжности пароля, уровня зарядки или громкости звука.
Атрибуты тега <meter>:
value— значение на шкале измерений. Обязательный атрибут, значение должно находиться междуminиmaxmin— минимальное значение.max— максимальное значение.low— нижнее пороговое значение.high— верхнее пороговое значение.optimum— оптимальное пороговое значение.
Вместо тега <meter> можно использовать <div> или <span> с CSS-стилями.
- 8 августа 2023
Показ текста при отключенном JavaScript. <noscript>
✔️ Актуальный | 🏗️ Не семантический |
Содержимое тега <noscript> отображается в браузерах с отключенным JavaScript. Если JS включён, содержимое тега <noscript> игнорируется.
Внутри тега <noscript> можно использовать только ограниченное количество тегов, допустимых внутри <body>. В их числе <p>, <h1> —<h6>, <ul>, <ol>, <li>, <blockquote>, <address>, <hr>, <pre>, <figure>, <figcaption>, <table>.
- 8 августа 2023
Добавление меню. Тег <menu>
✔️ Актуальный |
Тег <menu> используется для создания меню на странице. Например, такого:
Тег <menu> может содержать только элементы <li>. Но внутри <li> можно использовать изображения, ссылки, текст и другие списки.
Браузеры могут не отображать меню, если оно не содержит хотя бы один элемент <li>.
- 7 августа 2023
Вставка строки в HTML-таблицу. Тег <tr>
✔️ Актуальный |
Тег <tr> создаёт в таблице строку. Он содержит ячейки <td> или заголовки <th>.
Чтобы таблица отображалась корректно, все ячейки должны быть заполнены. Также ячейки можно объединять с помощью атрибута colspan.
Если необходимо создать таблицу без использования тега <tr>, можете воспользоваться другими тегами для создания разметки, например,<div>, <ul> или <dl>. Однако это может затруднить стилизацию таблицы с помощью CSS.
- 7 августа 2023
Подвал таблицы. Тег <tfoot>
✔️ Актуальный |
Тег <tfoot> создаёт нижнюю часть таблицы — с результатами или другой информацией. Он используется вместе с тегами <table> и <tbody> для структурирования содержимого HTML-таблицы.
Тег <tfoot> — необязательный. Таблица может иметь верхний и нижний колонтитул, но не обязана иметь ни то, ни другое. Если вы не хотите использовать тег <tfoot>, можете заменить его на <div>, <section> или <footer>.
- 7 августа 2023
Как создать шаблон с разметкой. Тег <template>
✔️ Актуальный |
Тег <template> создаёт на странице шаблоны с разметкой, которые можно использовать многократно без копирования кода. Это упрощает работу с динамическим содержимым JavaScript и ускоряет загрузку страницы.
Например, вот шаблон для карточки товара:
<template>
<div class="card">
<h2></h2>
<img src="">
<p></p>
<button></button>
</div>
</template>
⚠️ Содержимое шаблона не отображается на странице, пока не будет склонировано и вставлено в документ при помощи JavaScript.
- 7 августа 2023
Элемент списка в HTML. Тег <li>
✔️ Актуальный |
Тег <li> используется для создания элементов списка. Тег может быть вложен в элемент маркированного списка — <ul>, нумерованного списка — <ol> или меню — <menu>.
В маркированном списке:
В нумерованном списке:
- 7 августа 2023