How to close img tag properly

Question

lt img src  stackoverflow png  gt   lt img src  stackoverflow png  gt  lt  img gt   lt img src  stackoverflow png    gt    Which one s  of them is correct

User · Answer

-The tag is Empty and it contains Attribute only. -The tag does not have 'Closing' tag.

So,

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

both are correct in HTML5 also.

User · Answer

lt img src  stackoverflow png    gt    Works fine and closes the tag properly  Best to add the alt attribute for people that are visually impaired

User · Answer

Actually  only the first one is valid in HTML5     lt img src  stackoverflow png  gt      Only the last two are valid in XHTML     lt img src  stackoverflow png  gt  lt  img gt     lt img src  stackoverflow png    gt     Though not stricly required  an alt attribute  usually  should also be included        That said  your HTML5 page will probably display as intended because browsers will rewrite or interpret your html to what it thinks you meant  That may mean it turns a tag  for example  from  lt div   gt  into  lt div gt  lt  div gt   Or maybe it just ignores the final slash on  lt img       gt   see 2016  Serve HTML5 as XHTML 5 0 for legacy validation  see  2011 discussion and additional links here  though over time some bits may have changed  Partly this is because browsers try very hard to error correct   Also  because there has much confusion about self-closing tags  and void tags   Finally  The spec has changed  or hasn t always been clear  and browsers try to be backwards compatible     So  while you can probably get away with any of the three options  only the first adheres to the HTML5 standard  and is guaranteed to pass a HTML5 validator     A sound strategy might be to      Write new code without the closing slash    When re-factoring code  update nearby image tags  as you run across them    Not overly worry about tags in legacy files that you do not touch  unless a particular need arises    Here is a list of tags that should not be closed in HTML5       lt br gt      lt hr gt      lt input gt           lt img gt    lt link gt     lt source gt      lt col gt    lt area gt     lt base gt    lt meta gt   lt embed gt    lt param gt     lt track gt    lt wbr gt     lt keygen gt   HTML 5 2 Draft removed

User · Answer

This one is valid HTML5 and it is absolutely fine without closing it  It is a so-called void element    lt img src  stackoverflow png  gt    The following are valid XHTML tags  They have to be closed  The later one is also fine in HTML 5    lt img src  stackoverflow png  gt  lt  img gt   lt img src  stackoverflow png    gt

User · Answer

The best use of tags you should use    lt img src    alt     gt    Also you can use in HTML5    lt img src    alt    gt    These two are completely valid in HTML5 Pick one of them and stick with that

User · Answer

Unfortunately the above solutions did not work in my case - maybe because a put the button inside a form-tag  This code      lt input class  quot button quot  type  quot submit quot  value  quot   quot  gt       lt img src  quot    assets logo png quot  alt  quot test quot    gt   lt  input gt       always leads to error  with or without the closing slash of the img tag   error  Parsing error  x-invalid-end-tag  vue no-parsing-error    1 problem  1 error  0 warnings   A kind of workaround that did work was to define the image as background-image by means of css  The html snippet describes the button only  The value attribute contains a single blank in order to suppress some browsers presenting unwanted default text   lt input class  quot button quot  type  quot submit quot  value  quot   quot    gt   the CSS defines the button s background image   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  quot    assets logo png quot       background-repeat  no-repeat    background-size  6em    background-position  center    border  0    border-radius  3em

User · Answer

It s helpful to have the closing tag if you will ever try to read it with an XHTML parser  Might be an edge case but I do it all the time  It does no harm having it  and means I know we can use an array of XML readers which won t keel over when they hit an unclosed tag   If you are never going to try to parse the content  then ignore the closing

User · Answer

Both the right answer  HTML5 follows strict rules and in HTML5 we can close all the tags  So  it depends on you to use HTML5 or HTML and follow an appropriate answer    lt img src  stackoverflow png  gt   lt img src  stackoverflow png    gt    The second property is more appropriate

[html] How to close <img> tag properly?

Examples related to html