Wie schließe ich das <img> -Tag richtig?

122

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

Welches von ihnen ist richtig?

html

— insertusernamehere
quelle

6

Die Frage lautet: "Wie schließe ich ein <img> -Tag richtig?" Das ist eine echte Frage, und die Antworten sind nützlich. Diese Frage hätte nicht geschlossen werden dürfen.

3

Die Frage ist derzeit in Ordnung. Es ist nicht mehrdeutig, vage, unvollständig, zu breit oder rhetorial. Es gibt auch eine großartige Antwort unten.

— David J.

Ich weiß nicht, welche der folgenden Antworten richtig ist, aber interessanterweise fügt der Code-Inspektor von Firefox das </ img> am Ende des Tags hinzu, wenn Sie es nicht dort ablegen. Und IE nicht. Dies ist in meinem Universum von Bedeutung.

— Chiwda

PS Dreamweaver fügt das Tag /> XHTML ein.

— Chiwda

50

<img src='stackoverflow.png' />

Funktioniert einwandfrei und schließt das Tag ordnungsgemäß. Fügen Sie am besten das altAttribut für Personen mit Sehbehinderung hinzu.

— Ed Heal
quelle

4

Es ist richtig, dass dies <img />in [X] HTML / XML gültig ist, obwohl die Verwendung von XHTML heutzutage sehr selten ist und wenn Ihr Server die Seiten text/htmlbereitstellt, müssen Sie sich nur um das Schreiben von gültigem HTML kümmern. Die Wahrscheinlichkeit, eine HTML-App auf XHTML migrieren zu müssen, liegt nahe bei Null.

— Fabrício Matté

1

Die obige Antwort kann mit dem HTML-Checker des W3C nicht überprüft werden, wenn das Ziel 4.01 Transitional und höher ist. Siehe auch W3C Markup Validation Service . Ich glaube, die obige Antwort erfordert HTML5 oder XHTML. Um Validierungsfehler zu vermeiden, müssen Sie die eine verwenden <img src='stackoverflow.png'>(wenn es für Sie wichtig ist).

— JWW

1

@ FabrícioMatté Sie unterschätzen xhtml im tatsächlichen Gebrauch stark. Je größer das Unternehmen, desto wahrscheinlicher ist es, dass sie mit xhtml über html oder html5 wie xhtml (für einfaches / schnelleres Parsen) formatiert arbeiten oder mit anderen Dingen wie Mikrodaten oder erweiterten Markups wie ixbrl arbeiten.

— Robert McKee

Es gibt einen großen Unterschied zwischen "funktioniert einwandfrei" und "angegeben", und Sie werden niemals eine HTML-Spezifikation finden, die die Verwendung des schließenden Schrägstrichs für dieses Tag hervorruft. Wie bereits erwähnt, ist es zulässig, Websites, die ursprünglich für die Verwendung von XHTML / XML geschrieben wurden, nicht zu beschädigen. Nirgendwo finden Sie jedoch Formulierungen oder Beispiele, aus denen hervorgeht, dass deren Verwendung erforderlich ist. In der Tat werden Sie Formulierungen finden, die besagen, dass sie keine Bedeutung haben, und Browser werden angewiesen, sie zu ignorieren!

— Rob

Rob - vor 6 Jahren gab es ein Problem. Dies hat es behoben. Ich denke, jetzt sind Browser besser

— Ed Heal

163

Dieser ist gültiges HTML5 und es ist absolut in Ordnung, ohne es zu schließen. Es ist ein sogenanntes Leerelement:

<img src='stackoverflow.png'>

Das Folgende sind gültige XHTML-Tags. Sie müssen geschlossen werden. Letzteres ist auch in HTML 5 in Ordnung:

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

— Marvin Rabe
quelle

5

Es ist nicht nur in HTML5 gültig, sondern auch in HTML4. HTML erfordert keine selbstschließenden "void" -Elemente, wie Sie sagten. +1 für die kohärente Antwort.

— Fabrício Matté

2

HTML5 oder XHTML können mit dem HTML-Checker des W3C nicht überprüft werden, wenn das Ziel 4.01 Transitional und höher ist. Siehe auch W3C Markup Validation Service . Sie müssen die verwenden <img src='stackoverflow.png'>(wenn es Ihnen wichtig ist).

— JWW

Nach vielen Jahren kommentieren ... Ich war verwirrt, als ich das <img src="about:logo" alt="about:logo">Tag auf der about:logoSeite von Firefox 76 sah ! Obwohl document.body.innerHTMLzeigt <img src=\"about:logo\" alt=\"about:logo\">... Sehr gute Antwort ...

— Goswami

4

Tatsächlich ist nur der erste in HTML5 gültig

<img src='stackoverflow.png'>

Nur die letzten beiden sind in XHTML gültig

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

(Obwohl nicht stricly erforderlich, ein altsollten Attribut _usually_ auch enthalten sein).

Das heißt, Ihre HTML5-Seite wird wahrscheinlich wie beabsichtigt angezeigt, da Browser Ihr HTML so umschreiben oder interpretieren, wie es Ihrer Meinung nach gemeint ist. Das kann bedeuten, dass ein Tag beispielsweise von
<div />in verwandelt wird <div></div>. Oder vielleicht ignoriert es einfach den letzten Schrägstrich <img ... />.
Siehe 2016: HTML5 als XHTML 5.0 für die Legacy-Validierung bereitstellen.
siehe: 2011 Diskussion und zusätzliche Links hier, obwohl sich im Laufe der Zeit einige Bits geändert haben können

Dies liegt zum Teil daran, dass Browser sich sehr bemühen, Fehler zu korrigieren. Auch, weil es viel Verwirrung über selbstschließende Tags und leere Tags gibt. Schließlich hat sich die Spezifikation geändert oder war nicht immer klar, und Browser versuchen, abwärtskompatibel zu sein.

Während Sie wahrscheinlich mit einer der drei Optionen davonkommen können, entspricht
nur die erste dem HTML5-Standard und besteht garantiert einen HTML5-Validator.

Eine vernünftige Strategie könnte sein:

Schreiben Sie neuen Code ohne den abschließenden Schrägstrich.
Aktualisieren Sie beim Re-Factoring von Code Bild-Tags in der Nähe, während Sie auf sie stoßen.
Sorgen Sie sich nicht zu sehr um Tags in Legacy-Dateien, die Sie nicht berühren, es sei denn, es besteht ein besonderer Bedarf.

Hier ist eine Liste von Tags, die in HTML5 nicht geschlossen werden sollten :

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

— SherylHohman
quelle

1

Dies ist technisch nicht korrekt. Ein selbstschließendes void-Element ist in HTML 5 vollkommen gültig. Siehe html.spec.whatwg.org/#start-tags, das <img src='stackoverflow.png' />in jeder Version von XHTML und HTML 5 gültig wäre .

— Robert McKee

1

@ RobertMcKee Nein, es ist technisch korrekt. Während die Verwendung des schließenden Schrägstrichs zulässig ist und nicht als Fehler gekennzeichnet wird, wird in keiner HTML-Spezifikation angezeigt, dass er als zu verwendend angegeben ist. Es ist zulässig, ältere Websites, die auf XHTML / XML basieren, nicht zu beschädigen. Nirgendwo finden Sie jedoch eine HTML-Spezifikation, die anhand von Wörtern oder Beispielen die Verwendung eines abschließenden Schrägstrichs für die Tags zeigt, für die sie vom W3C angegeben wurden oder WAS.

— Rob

@Rob Gemäß dem WHATWG-Dokument, das ich oben in Abschnitt 12.1.2.1.6 verlinkt habe -

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 ist ein nichtiges Element gemäß Abschnitt 12.1.2

— Robert McKee

1

@ RobertMcKee Ja. Dies ist (ein Teil) der Spezifikation, in der dargelegt wird, warum der Schrägstrich zulässig ist (aus den Gründen, die ich in meinem vorherigen Kommentar angegeben habe). Sie sollten sich jedoch die tatsächliche Spezifikation für dieses Element ansehen - in diesem Fall img -, die anhand von Worten und Beispielen deutlich zeigt, dass kein abschließender Schrägstrich erforderlich oder angegeben ist. In der Tat bedeutet eine weitere Lektüre in diesem Abschnitt, dass der schließende Schrägstrich keine Bedeutung hat, nichts tut und Browser ihn ignorieren müssen. Es ist also nutzlos und sinnlos und bringt uns zu meinem ursprünglichen Kommentar zurück: Der abschließende Schrägstrich wird nicht verwendet.

— Rob

1

@Rob Ja, dies ist optional, aber vollständig gültig. Das macht die Aussage Actually, only the first one is valid in HTML5technisch falsch. Der zweite ist auch in HTML5 gültig. Nicht erforderlich, aber gültig. Niemand argumentiert, dass es erforderlich ist. Nur das gemäß den Spezifikationen verwendete, selbstschließende Formular des Tags ist in allen aktuellen Formen von XHTML und HTML gültig.

— Robert McKee

2

Die beste Verwendung von Tags, die Sie verwenden sollten:

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

Sie können auch in HTML5 verwenden:

<img src="" alt="">

Diese beiden sind in HTML5 vollständig gültig. Wählen Sie eine davon aus und bleiben Sie dabei.

— Md. A. Barik
quelle

Das erste ist nicht das beste, da es in keinem HTML-Standard angegeben ist, während das zweite ist. Der erste ist nur aus historischen Gründen erlaubt! (Kompatibilität mit XHTML / XML-Verwendung in älteren Websites, die brechen würde, wenn Browser dies nicht zulassen.)

— Rob

Ich bin nicht sicher, was Rob hier zu sagen versucht, aber die HTML-Spezifikation gibt an, dass die erste gültig ist.

— Robert McKee

2

Beides die richtige Antwort. HTML5 folgt strengen Regeln und in HTML5 können wir alle Tags schließen. Es hängt also von Ihnen ab, HTML5 oder HTML zu verwenden und eine entsprechende Antwort zu befolgen.

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

Die zweite Eigenschaft ist angemessener.

— PLB
quelle

Falsch. Der erste ist der einzige, der in einer HTML-Spezifikation angegeben ist. Die zweite ist nur aus historischen Gründen zulässig, aber auch hier nicht als erforderlich angegeben.

— Rob

1

-Das Tag ist leer und enthält nur Attribute. -Das Tag hat kein "Closing" -Tag.

So,

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

beide sind auch in HTML5 korrekt.

— PLB
quelle

Das erste ist richtig! Die zweite ist nur aus historischen Gründen erlaubt. (Kompatibilität mit XHTML / XML-Verwendung in älteren Websites, die brechen würde, wenn Browser dies nicht zulassen.)

— Rob

1

Es ist hilfreich, das schließende Tag zu haben, wenn Sie jemals versuchen werden, es mit einem XHTML-Parser zu lesen. Könnte ein Randfall sein, aber ich mache es die ganze Zeit. Es schadet nicht, es zu haben, und ich weiß, dass wir eine Reihe von XML-Readern verwenden können, die nicht umkippen, wenn sie auf ein nicht geschlossenes Tag treffen.

Wenn Sie niemals versuchen werden, den Inhalt zu analysieren, ignorieren Sie das Schließen.

— AmateurD
quelle