Справочники

HTML Элементы HTML Атрибуты Глобальные Атрибуты HTML События HTML MIME-типы HTML Коды языков HTMLТаблица цветов HTML ASCII HTML ISO-8859-1 HTML Windows-1251 HTML UTF-8 кирилица HTML URL для UTF-8 HTML URL для ISO-8859


 


HTML Атрибут width

Атрибут width (от англ. "width" — «ширина») устанавливает ширину элемента, к которому применяется.

Примечание: Атрибут width для элемента input используется только с <input type="image">.

Синтаксис

<element width="[значение]">

Значения

Любое целое положительное число в пикселях или процентах.

Значение по умолчанию

Нет.

Применяется к тегам

Элементы Атрибут
<canvas> width
<embed> width
<iframe> width
<img> width
<input> width
<object> width
<videot> width

Отличия HTML 4.01 от HTML 5

Нет.

Примеры использования:

Атрибут width (Элемент <canvas>)

Элемент <canvas> высотой и шириной в 200 пикселей:

Пример HTML:

Попробуй сам
<canvas id="myCanvas" width="200" height="200" style="border:1px solid">

Атрибут width (Элемент <embed>)

Элемент флэш-анимации шириной и высотой в 200 пикселей:

Пример HTML:

Попробуй сам
<embed src="shar.swf" width="200" height="200" style="border:1px solid">

Атрибут width (Элемент <img>)

Следует всегда для изображений определять высоту и ширину. Если высота и ширина установлены, то необходимое для изображения место выделяется во время загрузки страницы. Без этих атрибутов браузер не знает размеры изображения и не может зарезервировать необходимое для него место. В результате дизайн страницы может начать "ломаться", когда браузер начнет загрузку изображений.

Не стоит уменьшать изображение устанавливая меньшие значения высоты и ширины, чем они есть на самом деле. Пользователю все равно придется загружать первоначальное объемное изображение, хотя в браузере его геометрические размеры уменьшаться. Чтобы перемасштабировать слишком большое изображение, следует воспользоваться специальными программами.

В HTML 4.01 допустимо в качестве значения атрибута width использовать как пиксели, так и проценты от родительского элемента. В HTML5 разрешено использовать только пиксели.

Пример HTML:

Попробуй сам
<img src="smiley.jpg" alt="Смайлик" height="100" width="75">

Атрибут width (Элемент <input>)

Изображение, используемое в качестве кнопки отправки данных на сервер, с установленными высотой и шириной:

Пример HTML:

Попробуй сам
<form action="action_form.php">
  Имя: <input type="text" name="firstname"><br>
  Фамилия: <input type="text" name="lastname"><br>
  <input type="image" src="img_html.gif" alt="Отправить" width="109" height="48">
</form>

Атрибут width (Элемент <object>)

Элемент флэш-анимации шириной и высотой в 200 пикселей:

Пример HTML:

Попробуй сам
<object data="shar.swf" width="400" height="400"></object>

Атрибут width (Элемент <video>)

Следует всегда определять для видео атрибуты width и height. Если ширина и высота определены, то место под видеоплеер резервируется еще на этапе загрузки веб-страницы. Без указания этих атрибутов браузер не будет знать геометрические размеры видео и не сможет зарезервировать необходимое место. В итоге, после того как видео будет загружено, дизайн веб-страницы может быть искажен.

Не следует менять масштаб исходного видео при помощи атрибутов width и height. Пользователю все равно придется скачивать исходный видеофайл, даже если на странице видео будет отображаться меньшим масштабом.

Пример HTML:

Попробуй сам
<video width="350" height="250" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Ваш браузер не поддерживает тег video.
</video>

Поддержка браузерами

Атрибут width имеет следующую поддержку браузерами для каждого элемента:

Элемент
<canvas> 9+ 4+ 9+ Да 3.1+ 2+
<embed> 3+ 1+ 3,5+ 1+ 1+ 1+
<iframe> 4+ 1+ 4+ 1+ 1+ 1+
<img> 1+ 1+ 1+ 1+ 1+ 1+
<input> Да+ 1+ 1+ Да 6+ 16+
<object> 3+ 1+ 4+ 1+ 1+ 1+
<video> 9+ 4+ 11,5+ Да 4+ 3.5+

Спецификации

Спецификация Статус
HTML 5 (W3C) Рекомендация (canvas-width)
HTML 5.1 (W3C) Рекомендация (canvas-width)

Учебник HTML

HTML уроки: HTML Атрибуты