<frame>
- 25 января 2023
📝 Спецификация | Альтернативы: |
Тег <frame> использовался для определения отдельной области в рамках фреймового набора страниц. Он мог содержать атрибуты для определения размеров, заголовка и цвета границы.
<frameset>
<frame src="frame1.html">
<frame src="frame2.html">
</frameset>
Атрибуты тега <frame>:
src— адрес документа, который будет загружен в фреймеname— имя фрейма, которое используется для ссылки на него из других фреймов или извнеnoresize— запрещает изменение размеров фрейма пользователемscrolling— определяет, будут ли отображаться полосы прокрутки внутри фрейма.marginwidth— определяет ширину полей вокруг содержимого фреймаmarginheight— определяет высоту полей вокруг содержимого фреймаframeborder— определяет наличие границы вокруг фрейма.longdesc— указывает длинное описание содержимого фреймаscrolling— определяет, должна ли загружаться страница заново каждый раз, когда фрейм получает фокус.
Глобальные атрибуты
Тег поддерживает все глобальные атрибуты HTML.
Ограничения
Тег <frame> использовался только внутри тега <frameset>, который задавал расположение и количество фреймов в наборе.
Нюансы
- Тег
<frame>является устаревшим и не рекомендуется к использованию в современной веб-разработке. - В настоящее время рекомендуется использовать более современные способы работы с фреймами, такие как тег
<iframe>.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Изображение в HTML. Тег <img>
Элемент <img> используется для вставки изображений на веб-страницы.
У <img> нет закрывающего тега. Он поддерживает изображения в различных форматах — например, JPEG, PNG, WebP, GIF, SVG.
Существуют определенные правила или стандарты использования тега <img>, которые рекомендуются для большинства случаев в веб-разработке. Несмотря на то что конкретные требования могут варьироваться в зависимости от проекта, ниже приведены атрибуты и практики, которые часто рекомендуются к использованию.
- 28 сентября 2023
Справочник по 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