Как закрыть тег <img> правильно?

<img src='stackoverflow.png'>
<img src='stackoverflow.png'></img>
<img src='stackoverflow.png' />

Какой из них правильный?

Ответ 1

<img src='stackoverflow.png' />

Хорошо работает и правильно закрывает тег. Лучше всего добавить атрибут alt для людей с нарушениями зрения.

Ответ 2

Этот действительный HTML5, и это абсолютно нормально, не закрывая его. Это так называемый элемент void:

<img src='stackoverflow.png'>

Ниже перечислены допустимые теги XHTML. Они должны быть закрыты. Более поздний из них также хорош в HTML 5:

<img src='stackoverflow.png'></img>
<img src='stackoverflow.png' />

Ответ 3

Оба правильных ответа. HTML5 следует строгим правилам, а в HTML5 мы можем закрыть все теги. Таким образом, это зависит от вас, чтобы использовать HTML5 или HTML и следовать соответствующему ответу.

<img src='stackoverflow.png'>
<img src='stackoverflow.png' />

Второй более уместен.

Ответ 4

Тег -The пуст и содержит только атрибут. Тег -The не имеет тега "Закрытие".

Так,

<img src='stackoverflow.png'>
<img src='stackoverflow.png' />

оба верны в HTML5 также.

Ответ 5

Лучшее использование тегов вы должны использовать:

<img src="" alt=""/>

Также вы можете использовать в HTML5:

<img src="" alt="">

Эти два полностью действительны в HTML5. Выберите один из них и придерживайтесь этого.

Ответ 6

На самом деле в HTML5 действителен только первый

<img src='stackoverflow.png'>  

Только последние два действительны в XHTML

<img src='stackoverflow.png'></img>  
<img src='stackoverflow.png' />

(Хотя это и не обязательно, атрибут alt _usually_ также должен быть включен).

Тем не менее, ваша страница HTML5, вероятно, будет отображаться так, как задумано, потому что браузеры будут переписывать или интерпретировать ваш HTML в соответствии с тем, что, по его мнению, вы имели в виду. Это может означать, что это превращает тег, например, из
<div/> в <div></div>. Или, может быть, он просто игнорирует последний слеш на <img.../>.
см. 2016: Служите HTML5 как XHTML 5.0 для устаревшей проверки.
см.: обсуждение 2011 года и дополнительные ссылки здесь, хотя со временем некоторые биты могли измениться

Отчасти это связано с тем, что браузеры очень стараются исправить ошибки. Кроме того, потому что есть много путаницы по поводу самозакрывающихся тегов и пустых тегов. Наконец, спецификация изменилась или не всегда была ясна, и браузеры пытаются быть обратно совместимыми.

Таким образом, хотя вы, вероятно, можете избежать неприятностей с любым из трех вариантов,
только первая соответствует стандарту HTML5 и гарантированно пройдет валидатор HTML5.

Разумной стратегией может быть:

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

Вот список тегов, которые не должны закрываться в HTML5:

 <br>    <hr>    <input>       
 <img>  <link>   <source>  
 <col>  <area>   <base>
 <meta> <embed>  <param>  
<track>  <wbr>   <keygen> (HTML 5.2 Draft removed)

Ответ 7

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

<img src="smiley.gif" alt="Smiley face"
     height="42" width="42">

Ответ 8

Вам не нужно использовать тег <img> для показа изображения в метатеге просто, что вам нужно, чтобы показать путь, а поисковая система и facebook получат изображение с пути.

<meta name= 'image' content "http://your image path />