Изображения в HTML

Изображения являются первым нетекстовым содержимым, которое появились в Интернете. Большинство форматов изображений, которые вы можете найти на своём компьютере, также отображается в браузере: jpg, gif (анимированный или нет), .png (прозрачный или нет), .bmp...

Синтаксис

Изображения используют элемент <img>, который относится к самозакрывающимся элементам (у него есть только открывающий тег).

Атрибут src (от англ. source — источник) определяет местоположение изображения. Подобно ссылкам, вы можете использовать относительные или абсолютные адреса.

<p>
  Взгляните на этот космический ландшафт!
  <br>
  <img src="soyuz-spacecraft.jpg">
</p>

Размеры

Каждое изображение содержит два размера: ширину и высоту. У предыдущей картинки с летательным аппаратом ширина 394 пикселя, а высота 284.

При вставке изображения в HTML вам не нужно указывать его размеры: браузер автоматически отобразит изображение в полном размере.

Если вы хотите изменить размеры изображения, что возможно в HTML, рекомендуется использовать CSS.

Блочный или строчный?

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

Это связано с элементом <img>, являющимся самозакрывающимся элементом: технически он не может содержать любой другой элемент HTML и, таким образом, считается строчным элементом, таким как <a>, <strong> или <em>.

Такое поведение может привести к неожиданным результатам:

<p>
  Это лягушка
  <img src="frog.jpg">
  в середине абзаца!
</p>

Поскольку в HTML содержимое — это ключевой элемент сайта, изображения будут отображаться независимо от странностей макета, в котором они вызываются, и задумки.

Перейти к заданиям