Hoe sluit ik <img> correct taggen?

Welke van hen is correct?

Antwoord 1, autoriteit 100%

Deze is geldige HTML5en het is absoluut prima zonder het te sluiten. Het is een zogenaamd ongeldig element:

<img src='stackoverflow.png'>  

De volgende zijn geldige XHTML-tags. Ze moeten gesloten zijn. De laatste is ook prima in HTML 5:

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

Antwoord 2, autoriteit 35%

<img src='stackoverflow.png' />

Werkt prima en sluit de tag goed. Het is het beste om het kenmerk alttoe te voegen voor mensen met een visuele handicap.

Antwoord 3, autoriteit 2%

Eigenlijk is alleen de eerste geldigin HTML5

<img src='stackoverflow.png'>  

Alleen de laatste twee zijn geldig in XHTML

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

(Hoewel niet strikt vereist, moet _meestal_ ook een alt-attribuut worden opgenomen).

Dat gezegd hebbende, zal uw HTML5-pagina waarschijnlijk worden weergegeven zoals bedoeld, omdat browsers uw html zullen herschrijven of interpreteren naar wat het denkt dat u bedoelde. Dat kanbetekenen dat het een tag verandert, bijvoorbeeld van
<div />in <div></div>. Of misschien negeert het gewoon de laatste slash op <img ... />.
zie 2016: dien HTML5 op als XHTML 5.0 voor legacy-validatie.
zie: discussie uit 2011 en aanvullende links hier, hoewel in de loop van de tijd sommige stukjes zijn veranderd

Gedeeltelijk komt dit omdat browsers erg hun best doen om fouten te corrigeren. Ook omdat er veel verwarring bestaat over zelfsluitende tags en void tags. Ten slotte, De specificatie is veranderd, of is niet altijd duidelijk geweest, en browsers proberen achterwaarts compatibel te zijn.

Dus hoewel je waarschijnlijk met een van de drie opties wegkomt,
alleen de eerste voldoet aan de HTML5-standaard en slaagt gegarandeerd voor een HTML5-validator.

Een goede strategie zou kunnen zijn om:

• Schrijf nieuwe code zonder de afsluitende slash.
• Als u code herberekent, moet u afbeeldingstags in de buurt bijwerken als u ze tegenkomt.
• Maak je niet al te veel zorgen over tags in verouderde bestanden die je niet aanraakt, tenzij er een specifieke behoefte is.

Hier is een lijst met tags die niet mogen worden gesloten in HTML5:

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

Antwoord 4, autoriteit 2%

Beide het juiste antwoord. HTML5 volgt strikte regels en in HTML5 kunnen we alle tags sluiten. Het hangt dus van u af of u HTML5 of HTML gebruikt en een passend antwoord volgt.

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

De tweede eigenschap is meer geschikt.

Antwoord 5

Het beste gebruik van tags die u zou moeten gebruiken:

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

U kunt ook in HTML5 gebruiken:

<img src="" alt="">

Deze twee zijn volledig geldig in HTML5
Kies er een uit en blijf daarbij.

Antwoord 6

Het is handig om de afsluitende tag te hebben als u deze ooit wilt lezen met een XHTML-parser. Misschien een randgeval, maar ik doe het de hele tijd. Het kan geen kwaad om het te hebben, en het betekent dat ik weet dat we een reeks XML-lezers kunnen gebruiken die niet omvallen als ze een niet-gesloten tag raken.

Als je nooit gaat proberen de inhoud te ontleden, negeer dan de afsluiting.

Antwoord 7

-De tag is leeg en bevat alleen een kenmerk.
-De tag heeft geen ‘Closing’-tag.

Dus,

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

beide zijn ook correct in HTML5.

Antwoord 8

Helaas werkten de bovenstaande oplossingen niet in mijn geval – misschien omdat ik de knop in een formuliertag had geplaatst. Deze code …

<input class="button" type="submit" value=" ">
    <img src="../assets/logo.png" alt="test" />
</input>

… leidt altijd tot fouten (met of zonder de afsluitende schuine streep van de img-tag):

error  Parsing error: x-invalid-end-tag  vue/no-parsing-error
✖ 1 problem (1 error, 0 warnings)

Een soort tijdelijke oplossing die wel werkte, was om de afbeelding als achtergrondafbeelding te definiëren door middel van
css.

Het HTML-fragment beschrijft alleen de knop. Het value attribuut bevat een enkele spatie om te voorkomen dat sommige browsers ongewenste standaardtekst presenteren.

<input class="button" type="submit" value=" " />

de CSS definieert de achtergrondafbeelding van de knop:

.button {
  display: block;
  width: 6em;
  height: 6em;
  color: white;
  background-color: #639f59;
  padding: 0.4em 1.2em;
  box-shadow: inset 0 -0.6em 1em -0.35em rgba(5, 122, 11, 0.30),
    inset 0 0.6em 2em -0.3em rgba(255, 255, 255, 0.30),
    inset 0 0 0em 0.05em rgba(255, 255, 255, 0.30);
  cursor: pointer;
  background: url("../assets/logo.png") ;
  background-repeat: no-repeat;
  background-size: 6em;
  background-position: center;
  border: 0;
  border-radius: 3em;
}