Jak prawidłowo zamknąć tag <img>?

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

Który (e) z nich jest poprawny?

<img src='stackoverflow.png' />

Działa dobrze i prawidłowo zamyka tag. Najlepiej dodać altatrybut dla osób niedowidzących.

Ten jest prawidłowym HTML5 i jest całkowicie w porządku bez zamykania go. Jest to tak zwany element void:

<img src='stackoverflow.png'>

Poniżej znajdują się prawidłowe znaczniki XHTML. Muszą być zamknięte. Ta ostatnia jest również dobra w HTML 5:

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

Właściwie tylko pierwszy jest prawidłowy w HTML5

<img src='stackoverflow.png'>  

Tylko ostatnie dwa są poprawne w XHTML

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

(Chociaż nie jest to ściśle wymagane, altatrybut _zwykle_ powinien być również uwzględniony).

To powiedziawszy, Twoja strona HTML5 będzie prawdopodobnie wyświetlana zgodnie z przeznaczeniem, ponieważ przeglądarki przepiszą lub zinterpretują Twój HTML tak, jak myślą, że miałeś na myśli. Które mogą oznaczać okazuje tag, na przykład, od
<div />do <div></div>. A może po prostu ignoruje ostatnie ukośnik <img ... />.
zobacz 2016: Obsługuj HTML5 jako XHTML 5.0 w celu weryfikacji starszych wersji.
zobacz: dyskusja 2011 i dodatkowe linki tutaj, chociaż z czasem niektóre fragmenty mogły się zmienić

Częściowo dzieje się tak dlatego, że przeglądarki bardzo starają się poprawić błędy. Ponadto, ponieważ istnieje wiele nieporozumień dotyczących samozamykających się tagów i tagów void. Wreszcie specyfikacja uległa zmianie lub nie zawsze była jasna, a przeglądarki starają się być kompatybilne wstecz.

Tak więc, chociaż prawdopodobnie możesz uciec z dowolną z trzech opcji,
tylko pierwsza jest zgodna ze standardem HTML5 i gwarantuje, że przejdzie walidator HTML5.

Rozsądną strategią może być:

• Napisz nowy kod bez zamykającego ukośnika.
• Podczas ponownego faktorowania kodu aktualizuj pobliskie tagi obrazów w miarę ich napotykania.
• Nie przejmuj się zbytnio znacznikami w starszych plikach, których nie dotykasz, chyba że zajdzie taka potrzeba.

Oto lista tagów, których nie należy zamykać w HTML5 :

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

Najlepsze wykorzystanie tagów, których powinieneś używać:

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

Możesz również użyć w HTML5:

<img src="" alt="">

Te dwa są całkowicie poprawne w HTML5. Wybierz jeden z nich i trzymaj się tego.

Obie prawidłowa odpowiedź. HTML5 podlega ścisłym regułom, aw HTML5 możemy zamknąć wszystkie tagi. Od Ciebie zależy więc, czy użyjesz HTML5 lub HTML i zastosujesz odpowiednią odpowiedź.

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

Druga właściwość jest bardziej odpowiednia.

-Tag jest pusty i zawiera tylko atrybut. -Tag nie ma tagu „zamykanie”.

Więc,

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

oba są również poprawne w HTML5.

Warto mieć znacznik zamykający, jeśli kiedykolwiek spróbujesz go odczytać za pomocą parsera XHTML. To może być skrajna sprawa, ale robię to cały czas. Posiadanie go nie szkodzi i oznacza, że ​​wiem, że możemy użyć tablicy czytników XML, które nie upadną, gdy trafią w niezamknięty tag.

Jeśli nigdy nie zamierzasz analizować zawartości, zignoruj ​​zamknięcie.