HTML

Тег <img>

Описание
Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border=”0″ в тег <img>.
Рисунки также могут применяться в качестве карт-изображений, когда картинка содержит активные области, выступающие в качестве ссылок. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой.

HTML<img src="URL" alt="альтернативный текст">
XHTML<img src="URL" alt="альтернативный текст"/>

5 Аттрибутов HTML которые стиит использовать

translateАтрибут translate указывает, следует ли переводить содержимое элемента или нет.Вы можете использовать его в названии своего бренда.
<p translate="no">frontenders notes</p> reversed – Атрибут reversed просто меняет нумерацию, если упорядоченный список вместо 1,2,3 будет 3,2,1

poster – Задает изображение, которое будет отображаться во время загрузки видео или пока пользователь не нажмет кнопку воспроизведения.

draggableАтрибут draggable указывает, можно ли перетаскивать элемент. Часто используется при перетаскивании. sandboxАтрибут sandbox применяет дополнительные ограничения к содержимому кадра. Значение атрибута может быть пустым, чтобы применить все ограничения, или токенами, разделенными пробелами, чтобы снять определенные ограничения.

HTML <KBD> Тег
Определите текст как ввод с клавиатуры в документе:

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).</p>

<p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text (Mac OS).</p>

Определение и использование.
<kbd>Тег используется для определения ввода с клавиатуры. Содержимое внутри отображается моноширинным шрифтом браузера по умолчанию.
Совет: этот тег не является устаревшим. Однако можно добиться большего эффекта с помощью CSS.
<kbd>Тег также поддерживает Глобальные атрибуты в HTML .
——————————
Маленький пример использования этого тега:
<html>
<head>
<style>
kbd {
 border-radius: 2px;
 padding: 2px;
 border: 1px solid black;
}
</style>
</head>
<body>

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).</p>
<p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text (Mac OS).</p>

</body>
</html>

​​Тег <bdo>в HTML
Пример
Укажите направление текста:
<bdo dir = "rtl">
This text will go right-to-left.
</bdo>

Определение и использование:
BDO означает двунаправленное перекрытие.
<bdo>Тег используется для переопределения текущего направления текста.

Настройки CSS по умолчанию:
Большинство браузеров будут отображать <bdo>элемент со следующими значениями по умолчанию:
bdo {
  unicode-bidi: bidi-override;
}

Тег <audio>

Описание
Добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>. Внутри контейнера <audio> можно написать текст, который будет выводиться в браузерах, не работающих с этим тегом.

Синтаксис
<audio src="URL"></audio>
<audio>
<source src="URL">
</audio>
Атрибуты
autoplay – Звук начинает играть сразу после загрузки страницы.
controls – Добавляет панель управления к аудиофайлу.
loop – Повторяет воспроизведение звука с начала после его завершения.
preload – Используется для загрузки файла вместе с загрузкой веб-страницы.
src – Указывает путь к воспроизводимому файлу.
Закрывающий тег:
Обязателен.

Пример

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>audio</title>
</head>
<body>
<p>Александр Клименков - Четырнадцать</p>
<audio controls>
<source src="audio/music.ogg" type="audio/ogg; codecs=vorbis">
<source src="audio/music.mp3" type="audio/mpeg">
Тег audio не поддерживается вашим браузером.
<a href="audio/music.mp3">Скачайте музыку</a>.
</audio>
</body>
</html>

​​Тег <canvas>

Описание
Создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства. При помощи тега <canvas> можно создавать рисунки, анимацию, игры и др.
Синтаксис:
<canvas id="идентификатор">
</canvas>

Атрибуты:
height
“Задает высоту холста. По умолчанию 300 пикселов.”
width
“Задает ширину холста. По умолчанию 150 пикселов.”

HTML <output>Тег

Пример:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
 <input type="range" id="a" value="50">
 +<input type="number" id="b" value="25">
 =<output name="x" for="a b"></output>
</form>

Определение и использование
<output>Тег используется для представления результата вычислений.

​​HTML <iframe> Тег

Пример:

<iframe src="/default.asp" width="100%" height="300" style="border:1px solid black;">
</iframe>
<iframe src="/default.asp" width="100%" height="300" style="border:none;">
</iframe>

Определение и использование
<iframe>Тег определяет встроенный фрейм.
Встроенный фрейм используется для встраивания другого документа в текущий HTML-документ.

Совет: рекомендуется всегда включать атрибут title для <iframe>. Это используется программами чтения с экрана для чтения содержимого <iframe> .

​​HTML <template> Тег

Определение и использование:
Тег используется в качестве контейнера для хранения HTML – содержимого скрытом от пользователя при загрузке страницы. Содержимое внутри <template>можно отобразить позже с помощью JavaScript.

Пример:
<button onclick="showContent()">Show hidden content</button>

<template>
 <h2>Flower</h2>
 <img src="img_white_flower.jpg" width="214" height="204">
</template>

<script>
function showContent() {
 var temp = document.getElementsByTagName("template")[0];
 var clon = temp.content.cloneNode(true);
 document.body.appendChild(clon);
}
</script>

Тег <param> предназначен для передачи значений параметров Java-апплетам или объектам веб-страницы, созданным с помощью тегов <applet> или <object>. Такой подход позволяет прямо в коде HTML-документа изменять характеристики апплета без его дополнительной компиляции. Количество одновременно используемых тегов <param> может быть больше одного и для каждого из них задается пара «имя/значение» через атрибуты name и value.

HTML <var> Тег

Пример
Определите текст как переменные в документе:

<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base, and <var>h</var> is the vertical height.</p>

Определение и использование
<var>Тег используется для определения переменной в программировании или в математическом выражении. Содержимое внутри обычно отображается курсивом .

HTML-трюки, о которых никто не говорит

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

1. Ленивая загрузка изображения
Она предотвращает немедленную загрузку изображений, которые на самом деле и не нужны. Как правило, изображение начинает загружаться, когда вы скроллите страницу и приближаетесь к нему.
Всё, что вам нужно сделать, – это добавить свойство loading=«lazy» у тега img.
<img src="image.png" loading="lazy" alt="…" width="200" height="200"> 2. Автокомплит
Вы можете использовать JavaScript для реализации автокомплита, установив прослушиватель событий поля ввода и затем сопоставлять искомые слова с предопределёнными вариантами.

Однако HTML также позволяет отображать набор предопределённых вариантов, используя тег datalist.
<label for="country">Choose your country from the list:</label> <input list="countries" name="country" id="country"> <datalist id="countries"> <option value="UK"> <option value="Germany"> <option value="USA"> <option value="Japan"> <option value="India"> </datalist> 3. Picture
При изменении ширины viewport’a вы можете заметить, что некоторые изображения не масштабируются вверх и вниз, как ожидалось.
К счастью, HTML даёт разработчикам возможность довольно легко исправить это, используя тег picture, позволяющий добавлять несколько изображений, соответствующих разной ширине.
<picture> <source media="(min-width:768px)" srcset="med_flag.jpg"> <source media="(min-width:495px)" srcset="small_flower.jpg"> <img src="high_flag.jpg" alt="Flags" style="width:auto;"> </picture>

Теги HTML о которых вы не знали:

<optgroup> – Этот тег используется для группировки связанных параметров в раскрывающемся списке.

<abbr> – Этот тег используется для определения аббревиатуры или акронима.

<address> – Этот тег используется для определения контактной информации

<datalist> – Этот тег определяет список предопределенных параметров для элемента <input>

<wbr> – Этот тег указывает, где в тексте можно добавить разрыв строки при изменении размера;

<time> – Этот тег определяет удобочитаемую дату / время. Этот тег может помочь поисковым системам создавать более интеллектуальные результаты поиска.

<template> – Этот тег скрывает содержимое от клиента, содержимое можно сделать видимым и отображать позже с помощью JavaScript и отображать несколько раз.

<sup> – Этот тег определяет надстрочный текст. Надстрочный текст появляется на полсимвола над нормальной строкой