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

123

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

Który (e) z nich jest poprawny?

html

— insertusernamehere
źródło

6

Pytanie brzmi „Jak prawidłowo zamknąć tag <img>?” co jest prawdziwym pytaniem, a odpowiedzi są przydatne. To pytanie nie powinno być zamknięte.

3

Obecnie pytanie jest w porządku. To nie niejednoznaczne, niejasne jest niekompletne, zbyt szerokie, lub rhetorial. Poniżej znajduje się również świetna odpowiedź.

— David J.

Nie wiem, która z poniższych odpowiedzi jest poprawna, ale co ciekawe, Inspektor kodu Firefoksa dodaje </img> na końcu tagu, jeśli go tam nie umieścisz. IE tego nie robi. To ma znaczenie w moim wszechświecie.

— Chiwda

PS Dreamweaver wstawia znacznik /> XHTML.

— Chiwda

50

<img src='stackoverflow.png' />

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

— Ed Heal
źródło

4

To prawda, że <img />jest to poprawne w [X] HTML / XML, chociaż użycie XHTML jest obecnie bardzo rzadkie i jeśli twój serwer obsługuje strony text/html, jedyne, o co musisz się martwić, to pisanie prawidłowego HTML. Szanse na migrację aplikacji HTML do XHTML są bliskie zeru.

— Fabrício Matté

1

Powyższa odpowiedź nie zostanie zweryfikowana za pomocą narzędzia do sprawdzania HTML W3C, jeśli jest kierowane na 4.01 Transitional i wyższe. Zobacz także usługę W3C Markup Validation Service . Uważam, że powyższa odpowiedź wymaga HTML5 lub XHTML. Aby uniknąć niepowodzeń walidacji, musisz skorzystać z tego <img src='stackoverflow.png'>(jeśli ma to dla Ciebie znaczenie).

— jww

1

@ FabrícioMatté Poważnie nie doceniasz xhtml w rzeczywistym użyciu. Im większa firma, tym większe prawdopodobieństwo, że będzie pracować z xhtml zamiast html lub html5 sformatowanym jak xhtml (w celu łatwego / szybszego analizowania) lub pracujesz z innymi rzeczami, takimi jak mikrodane lub ulepszone znaczniki, takie jak ixbrl.

— Robert McKee

Istnieje duża różnica między słowami „działa dobrze” i „określone” i nigdy nie znajdziesz specyfikacji HTML obwołującej użycie zamykającego ukośnika w tym tagu. Jak wspominali inni, dozwolone jest nie niszczenie witryn internetowych, które zostały pierwotnie napisane w celu używania XHTML / XML, ale nigdzie nie znajdziesz żadnych sformułowań ani przykładów wskazujących, że ich użycie jest potrzebne. W rzeczywistości znajdziesz sformułowanie stwierdzające, że nie ma znaczenia, a przeglądarki są poinstruowane, aby je zignorować!

— Rob

Rob - 6 lat temu był problem. To naprawiło. Zgadnij, teraz przeglądarki są lepsze

— Ed Heal

164

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' />

— Marvin Rabe
źródło

5

Jest to nie tylko poprawny HTML5, ale także poprawny w HTML4. Jak powiedziałeś, HTML nie wymaga samozamykających się elementów „void”. +1 za spójną odpowiedź.

— Fabrício Matté,

2

HTML5 lub XHTML nie przejdzie walidacji za pomocą kontrolera HTML W3C, jeśli jest kierowany na 4.01 Transitional lub nowszy. Zobacz także usługę W3C Markup Validation Service . Musisz użyć jednego <img src='stackoverflow.png'>(jeśli to dla ciebie ważne).

— jww

Komentowanie po wielu latach ... Zmyliłem się, widząc <img src="about:logo" alt="about:logo">tag na about:logostronie Firefox 76 ! Chociaż document.body.innerHTMLpokazuje <img src=\"about:logo\" alt=\"about:logo\">... Bardzo dobra odpowiedź ...

— S.Goswami

4

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)

— SherylHohman
źródło

1

Jest to technicznie niepoprawne. Samozamykający się void element jest całkowicie poprawny w html 5. Zobacz html.spec.whatwg.org/#start-tags, które sprawdzą się <img src='stackoverflow.png' />w każdej wersji XHTML i HTML 5.

— Robert McKee

1

@RobertMcKee Nie, jest technicznie poprawne. Chociaż używanie zamykającego ukośnika jest dozwolone i nie będzie oznaczane jako błąd, nigdzie w żadnej specyfikacji HTML nie zobaczysz, że jest określony jako do użycia. Dozwolone jest nie niszczenie starszych witryn internetowych, które były oparte na XHTML / XML, ale nigdzie nie znajdziesz specyfikacji HTML pokazującej, słowami lub przykładem, użycie zamykającego ukośnika w tych tagach, w których są one określone przez W3C lub WHATWG.

— Rob

@Rob Zgodnie z dokumentem WHATWG, do którego utworzyłem łącze powyżej w sekcji 12.1.2.1.6 -

Then, if the element is one of the void elements, or if the element is a foreign element, then there may be a single U+002F SOLIDUS character (/). This character has no effect on void elements, but on foreign elements it marks the start tag as self-closing.

img jest pustym elementem w sekcji 12.1.2

— Robert McKee

1

@RobertMcKee Yes. To jest (część) specyfikacji wyjaśniającej, dlaczego ukośnik jest dozwolony (z powodów, które podałem w moim poprzednim komentarzu). Powinieneś jednak przyjrzeć się rzeczywistej specyfikacji tego elementu - w tym przypadku img - która jasno pokazuje słowami i przykładami, że nie jest wymagany ani określony żaden zamykający ukośnik. W rzeczywistości, bez sprawdzania tego, dalsze czytanie w tej sekcji wskaże, że zamykający ukośnik nie ma znaczenia, nic nie robi, a przeglądarki są zobowiązane do zignorowania go. Jest to więc bezużyteczne i bezcelowe i prowadzi nas z powrotem do mojego pierwotnego komentarza: zamykający ukośnik nie jest używany.

— Rob

1

@Rob Tak, jest to opcjonalne, ale całkowicie ważne. Co sprawia, że stwierdzenie jest Actually, only the first one is valid in HTML5technicznie niepoprawne. Drugi jest również poprawny w HTML5. Nie jest wymagane, ale ważne. Nikt nie twierdzi, że jest to wymagane. Tyle tylko, że zgodnie ze specyfikacją, użycie samozamykającej się formy tagu jest ważne we wszystkich obecnych formach XHTML i HTML.

— Robert McKee

2

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.

— Md. A. Barik
źródło

Pierwsza nie jest najlepsza, ponieważ nie jest określona w żadnym standardzie HTML, a druga tak. Pierwsza jest dozwolona tylko ze względów historycznych! (Zgodność z użyciem XHTML / XML w starszych witrynach internetowych, która zepsuje się, jeśli przeglądarki tego zabronią.)

— Rob

Nie jestem pewien, co Rob próbuje tutaj powiedzieć, ale specyfikacja HTML określa, że pierwsza jest poprawna.

— Robert McKee

2

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.

— PLB
źródło

Błędny. Pierwsza jest jedyną określoną w dowolnej specyfikacji HTML. Drugi jest dozwolony tylko ze względów historycznych, ale ponownie nie jest nigdzie określony jako wymagany.

— Rob

1

-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.

— PLB
źródło

Pierwszy jest poprawny! Drugi jest dozwolony tylko ze względów historycznych. (Zgodność z użyciem XHTML / XML w starszych witrynach internetowych może się zepsuć, jeśli przeglądarki tego zabronią)

— Rob

1

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.

— AmateurD
źródło