Атрибут height (от английского height, «высота») прописывают тегу, чтобы задать высоту занимаемой им области в пикселях. Закрывающей части у атрибута нет, он записывается внутри открывающего тега: height="200". Закрывающий тег нужен самому элементу не всегда: у <img>, <source>, <embed> и <input> его нет, а у <iframe>, <video>, <object> и <canvas> он обязателен.
Главное, что нужно знать сразу: в HTML это целое число без единиц измерения, а не «высота как в CSS». Проценты, auto и значения вроде 200px стандарт не допускает, хотя браузер часть из них принимает. У высоты есть и вторая задача: вместе с width она сообщает браузеру пропорции картинки до загрузки файла, и страница не прыгает. Обычно атрибут пишут рядом с src и alt.
<img src="photo.jpg" alt="Кот" width="400" height="300">
<iframe src="map.html" width="600" height="400"></iframe>
<canvas width="300" height="150"></canvas>В этой статье
- Что такое атрибут height в HTML и что он задаёт
- Для каких тегов работает height: img, video, iframe, canvas и другие
- Какие значения принимает height: число, px, проценты и auto
- Height и width вместе: пропорции и искажение картинки
- Height и CSS: чем отличается от height, min-height, line-height и aspect-ratio
- Height и скачки страницы при загрузке
- Height у iframe, canvas и video: размеры по умолчанию и особенности
- Устаревший height у table, td, th и tr: что заменить на CSS
- Атрибут height в JavaScript: свойство height, offsetHeight и naturalHeight
- Частые ошибки в атрибуте height
- Шпаргалка по атрибуту height
Что такое атрибут height в HTML и что он задаёт
Атрибут отвечает на вопрос «какой высоты должен быть этот элемент на странице». Значение записывают числом, и браузер считает его пикселями. Это не то же самое, что line-height в CSS: тот задаёт высоту строки текста, а не размер элемента. Подсказку при наведении курсора показывает атрибут title.
Для браузера height служит подсказкой о размере, самой слабой из возможных: если в CSS высота задана, побеждает CSS. Поэтому атрибут удобно считать значением по умолчанию и сведениями о файле, а подгонкой размера под макет заниматься в таблице стилей.
Атрибут height бывает не у каждого тега: у <img> он есть, а у a, p и div нет, и браузер его пропустит. В тестовых вопросах вроде «каких атрибутов не бывает: alt, href, meta, name, height, id» нужно помнить, что meta это тег, а не атрибут.
Для каких тегов работает height: img, video, iframe, canvas и другие
В современном HTML атрибут height есть у восьми тегов. Смысл у него одинаковый, но у каждого тега есть своя особенность.
| Тег | Что задаёт height | Пример записи |
|---|---|---|
<img> | Высоту картинки на странице | <img src="cat.jpg" alt="Кот" height="300"> |
<video> | Высоту плеера: без атрибута 150 пикселей | <video src="clip.webm" height="240" controls></video> |
<iframe> | Высоту фрейма: без атрибута 150 пикселей плюс рамка | <iframe src="map.html" width="600" height="400"></iframe> |
<canvas> | Высоту холста в точках, а не только его размер на странице | <canvas width="300" height="150"></canvas> |
<embed> | Высоту области встроенного файла | <embed src="doc.pdf" width="500" height="600"> |
<object> | Высоту области встроенного объекта | <object data="doc.pdf" width="500" height="600"></object> |
<input> с type="image" | Высоту кнопки-картинки | <input type="image" src="go.png" alt="Отправить" height="40"> |
<source> внутри <picture> | Не высоту, а пропорции картинки до загрузки | <source srcset="wide.webp" width="800" height="400"> |
У <input> атрибут работает только при type="image": у текстового поля он ничего не меняет, а размер поля задают атрибутом size или CSS. У <embed> без адреса файла область получается нулевой, поэтому проверять высоту нужно уже с настоящим файлом.
Отдельно рассмотрим устаревший height у таблиц: <table>, <td>, <th> и tr. Он описан в одном из последних разделов. У <svg> тоже есть свой height, но он принадлежит языку SVG, а правила записи там те же, что у width в разделе про SVG.
Какие значения принимает height: число, px, проценты и auto
По стандарту значением height служит неотрицательное целое число. Браузеры к ошибкам снисходительны и часть неверных записей применяют, но валидатор покажет ошибку, а другой браузер может поступить иначе. Ниже результаты для картинки размером 400 на 300 пикселей, замеренные в браузере, на котором я проверял.
| Запись | Что показал браузер | Валидатор |
|---|---|---|
height="60" | Высота 60, ширина подобрана по пропорциям (80) | Верно |
height="60px" | Высота 60: единицы отброшены | Ошибка |
height="150.4" | Округлено до 150 | Ошибка |
height="50%" | Половина высоты родителя, если она задана. Если нет, значение игнорируется | Ошибка |
height="auto" | Значение проигнорировано, картинка в своём размере | Ошибка |
height="-10", height="+60" | Значение проигнорировано | Ошибка |
height="1e2" | Прочитано только «1»: высота 1 пиксель | Ошибка |
height="0" | Картинка исчезает: размер 0 на 0 | Верно, но смысла нет |
height="" | Значение проигнорировано | Ошибка |
Проценты ведут себя иначе, чем у width. Ширина у блока всегда известна, а высота обычно считается по содержимому. Поэтому height="50%" работает, только когда у родителя высота задана явно. Если родитель растёт по содержимому, браузеру не от чего брать половину, и значение пропускается.
<img src="photo.png" height="60">
<div style="height: 200px">
<img src="photo.png" height="50%">
</div>Пример: когда проценты в height сработают
Нажимайте на варианты. Картинка в файле 160 на 120, поэтому высота 120 в результате означает, что значение не применилось.
Высоту считает ваш браузер, она может отличаться от моих замеров. Во втором варианте у родителя задана высота, в первом нет.
Height и width вместе: пропорции и искажение картинки
Если задать картинке только height, ширина подберётся по пропорциям файла: для файла 400 на 300 высота 60 даёт размер 80 на 60. Если задать оба атрибута, браузер вписывает файл в эту рамку, и при неверных числах картинка сплющивается или растягивается. Подробно эти случаи разобраны на странице про width, поэтому здесь главное правило: пару берут из настоящих размеров файла или в тех же пропорциях.
<img src="photo.png" height="60">
<img src="photo.png" width="200" height="50">
<img src="photo.png" width="200" height="50"
style="height:auto">Если запись содержит оба атрибута, а в CSS записано height: auto, высота снова считается по пропорциям файла. Такой приём нужен для адаптивных картинок, и он описан в следующих разделах.
Height и CSS: чем отличается от height, min-height, line-height и aspect-ratio
Когда в атрибуте и в CSS указаны разные высоты, браузер выбирает CSS: атрибут для него только подсказка. Проверено на файле 400 на 300 пикселей.
| Что записано | Размер на странице |
|---|---|
height="100" | 133 на 100 |
height="100" и style="height:50px" | высота 50, побеждает CSS, ширина подобрана по пропорциям |
height="100" и style="max-height:50px" | высота ограничена до 50 |
height="100" и style="width:100%" | ширина по контейнеру, высота остаётся 100: картинка искажена |
height="100" и style="width:100%;height:auto" | высота снова считается по пропорциям файла |
Теперь о путанице с похожими названиями. В поисковых запросах часто смешивают четыре разные вещи.
| Название | Что делает | Пример записи |
|---|---|---|
Атрибут height | Размер элемента в HTML, подсказка для браузера | <img height="300"> |
Свойство height | Высота блока в CSS, сильнее атрибута | img { height: 300px; } |
Свойство min-height | Нижняя граница высоты блока: блок не станет ниже | .box { min-height: 200px; } |
Свойство line-height | Высота строки текста, а не размер элемента | p { line-height: 1.5; } |
Свойство aspect-ratio | Пропорции блока, из которых получается недостающий размер | img { aspect-ratio: 4 / 3; } |
Для адаптивной картинки используют пару: атрибуты сообщают пропорции, а правило CSS не даёт картинке выйти за колонку.
<img src="photo.jpg" alt="Кот" width="800" height="600">
img {
max-width: 100%;
height: auto;
}Без height: auto сжатая по ширине картинка сохранит высоту из атрибута и исказится.
Height и скачки страницы при загрузке
Пока файл картинки не пришёл, браузер не знает её размеров. Если высоты нет, место под картинку равно нулю, а когда файл загрузится, весь текст ниже резко уезжает вниз. Это тот же эффект, о котором рассказано на странице width: из-за него страница «прыгает», а у поисковиков такое поведение измеряет показатель CLS.
Высота здесь играет ту же роль, что и ширина. Браузер делит одно число на другое, получает пропорции и заранее оставляет место. В браузере, на котором я проверял, картинка с атрибутами width="160" height="120" получает в вычисленном стиле пропорции auto 160 / 120. Если число высоты неверное, место оставят, но не той высоты, и скачок случится всё равно. Причём ошибиться можно в обе стороны: слишком большая высота сдвинет текст вверх.
<img src="photo.png" alt="Кот" width="160">
<img src="photo.png" alt="Кот"
width="160" height="120">
img { width: 100%; height: auto; }Пример: сдвигается ли текст, когда картинка загрузилась
Выберите вариант и нажмите «Файл получен». До этого момента у картинки нет адреса, как будто файл ещё идёт по сети. Знак перед числом показывает направление сдвига текста.
Сеть заменена кнопкой: пока файл «не получен», у картинки нет адреса, но размеры из атрибутов уже работают. Картинка занимает 45 процентов ширины фрейма демонстрации.
Height у iframe, canvas и video: размеры по умолчанию и особенности
У этих трёх тегов нет файла-картинки, из которого можно взять размер, поэтому у них есть значения по умолчанию. В браузере, на котором я проверял, у <iframe>, <canvas> и <video> без атрибута высота 150. У фрейма к этому прибавляется рамка, и вместе получается 154 пикселя.
Проценты у них считаются так же, как у картинки: от высоты родителя. Исключение составляет <canvas>: запись height="50%" холст читает как число 50. Это ещё одна причина не писать в атрибут ничего, кроме цифр. Для холста height задаёт ещё и число точек, об этом подробно рассказано в разделе про холст на странице width.
<iframe src="map.html" height="100"></iframe>
<canvas height="100"></canvas>
<video src="clip.webm" height="100"></video>Пример: высота iframe, canvas и video с разными значениями
Родитель в демонстрации высотой 200 пикселей. Высоту считает ваш браузер.
Устаревший height у table, td, th и tr: что заменить на CSS
Когда-то высоту таблиц, строк и ячеек задавали только атрибутом. Сегодня список устаревших возможностей в стандарте относит height у таблиц, ячеек и строк к устаревшим, а валидатор выдаёт предупреждение. Браузеры по-прежнему понимают его, поэтому старые страницы выглядят как раньше.
| Тег | Работает ли атрибут | Чем заменить |
|---|---|---|
<table> | Да | height: 300px; у таблицы |
<td>, <th> | Да, строка растягивается вместе с ячейкой | height: 80px; у ячейки |
tr | Да | height: 80px; у строки |
Если в одном месте заданы и атрибут, и CSS, побеждает CSS. Для таблиц высота в CSS ведёт себя как минимальная: содержимое всё равно не обрежется, а строка станет выше, если текста много.
<!-- устарело -->
<table height="300">...</table>
<td height="80">...</td>
/* сегодня */
table { height: 300px; }
td { height: 80px; }Пример: старый атрибут height и его аналог в CSS
Для каждого тега можно переключиться между атрибутом и CSS. Числа в обоих режимах совпадают.
Атрибут height в JavaScript: свойство height, offsetHeight и naturalHeight
Высоту элемента из JavaScript можно прочитать по-разному, и результаты различаются. Для картинки есть четыре способа, и каждый отвечает на свой вопрос.
| Способ | Что возвращает | Пример записи |
|---|---|---|
getAttribute | Строку из разметки как есть, а если атрибута нет, то null | img.getAttribute('height') |
Свойство height | Число: записанное в атрибуте, а без него высоту на странице | img.height |
offsetHeight | Фактическую высоту на странице вместе с рамкой | img.offsetHeight |
naturalHeight | Высоту самого файла | img.naturalHeight |
Запись в свойство height меняет атрибут в разметке. Конструктор new Image(30, 20) создаёт картинку сразу с атрибутами width="30" и height="20". У холста свойство height всегда равно числу точек, а размер на странице нужно смотреть через offsetHeight. Присвоение canvas.height очищает холст, даже если число не изменилось.
const img = document.querySelector('img');
img.getAttribute('height'); // "60" или null
img.height; // число
img.offsetHeight; // высота на странице
img.naturalHeight; // высота файла
img.height = 77; // запишет height="77"Пример: четыре способа прочитать высоту картинки
Файл в демонстрации высотой 120 пикселей, поэтому naturalHeight не меняется, а остальные значения зависят от того, как задан размер.
Частые ошибки в атрибуте height
Большинство ошибок связано с тем, что в height пытаются написать значение из CSS или ждут от него больше, чем он даёт.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
height="100%" | Работает только если у родителя задана высота, валидатор показывает ошибку | Задать height: 100%; в CSS и убедиться, что у родителя есть высота |
height="200px" | Единицы отбрасываются, валидатор показывает ошибку | Писать только цифры: height="200" |
height="auto" | Значение игнорируется, ошибка валидатора | Убрать атрибут или написать height: auto; в CSS |
height="1e2", height="150.4" | Первое читается как 1, второе округляется до 150 | Целое число из цифр |
width="200" height="50" для файла 4 к 3 | Картинка сплющена | Числа в пропорциях файла или height: auto в CSS |
Только width без height у картинки в потоке | Пока файл не пришёл, высота равна нулю, и текст ниже прыгает | Указать и width, и height |
height="120" для файла с другими пропорциями | Место оставлено не той высоты, текст сдвигается | Взять числа из свойств файла |
height="100" у большого файла | Файл скачивается целиком, меняется только его вид | Подготовить файл нужного размера или несколько через srcset |
canvas { height: 300px; } вместо атрибута | Холст остаётся 150 точек в высоту, рисунок размыт | Задать height холста атрибутом |
canvas height="50%" | Холст читает это как число 50 | Писать только число точек |
<table height="500"> | Работает, но устарело | Задать height: 500px; в CSS |
<div height="300">, <p height="300"> | У этих тегов атрибута нет, браузер его пропускает | Использовать CSS |
<input type="text" height="40"> | Атрибут не действует: размер поля прежний | Задать высоту в CSS |
p { height: 1.5; } вместо line-height | Высота «1.5 пикселя»: не та величина | Для высоты строки писать line-height |
Шпаргалка по атрибуту height
Всё главное из статьи в одной таблице.
| Задача | Как записать | Пример записи |
|---|---|---|
| Высота картинки | Целое число без единиц | <img src="cat.jpg" alt="Кот" height="300"> |
| Избежать скачков страницы | И width, и height из размеров файла | <img src="cat.jpg" alt="Кот" width="400" height="300"> |
| Адаптивная картинка | Атрибуты плюс CSS | img { max-width: 100%; height: auto; } |
| Размер фрейма | Число у iframe | <iframe src="map.html" width="600" height="400"></iframe> |
| Размер плеера | Число у video | <video src="clip.webm" height="240" controls></video> |
| Разрешение холста | Число точек у canvas | <canvas width="300" height="150"></canvas> |
| Пропорции в picture | Числа у source | <source srcset="wide.webp" width="800" height="400"> |
| Проценты и auto | Только в CSS | img { height: auto; } |
| Высота таблицы или ячейки | Только в CSS | td { height: 80px; } |
| Высота строки текста | Свойство line-height | p { line-height: 1.5; } |
| Прочитать высоту | Свойства height, offsetHeight, naturalHeight | img.offsetHeight |
