&lt;picture&gt;

Тег <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 и max
min — минимальное значение.
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>