<img src='stackoverflow.png'>
<img src='stackoverflow.png'></img>
<img src='stackoverflow.png' />
Which one(s) of them is correct?
<img src='stackoverflow.png'>
<img src='stackoverflow.png'></img>
<img src='stackoverflow.png' />
Which one(s) of them is correct?
This one is valid HTML5 and it is absolutely fine without closing it. It is a so-called void element:
<img src='stackoverflow.png'>
The following are valid XHTML tags. They have to be closed. The later one is also fine in HTML 5:
<img src='stackoverflow.png'></img>
<img src='stackoverflow.png' />
<img src='stackoverflow.png'>
(if it matters to you).
<img src="about:logo" alt="about:logo">
tag in firefox 76's about:logo
page! Although document.body.innerHTML
shows <img src=\"about:logo\" alt=\"about:logo\">
... Very good answer...
Apr 21, 2020 at 11:53
<img src='stackoverflow.png' />
Works fine and closes the tag properly. Best to add the alt
attribute for people that are visually impaired.
<img />
is valid in [X]HTML/XML, though the use of XHTML is very rare nowadays and if your server is serving the pages as text/html
all you have to worry about is writing valid HTML. The odds to have to migrate an HTML app to XHTML is close to nil.
Feb 13, 2013 at 21:00
<img src='stackoverflow.png'>
(if it matters to you).
Actually, only the first one is valid in HTML5
<img src='stackoverflow.png'>
Only the last two are valid in XHTML
<img src='stackoverflow.png'></img>
<img src='stackoverflow.png' />
(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
<div />
into <div></div>
. Or maybe it just ignores the final slash on <img ... />
.
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:
Here is a list of tags that should not be closed in HTML5:
<br> <hr> <input>
<img> <link> <source>
<col> <area> <base>
<meta> <embed> <param>
<track> <wbr> <keygen> (HTML 5.2 Draft removed)
<img src='stackoverflow.png' />
valid in any version of XHTML and HTML 5.
Nov 18, 2019 at 21:32
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 is a void element per section 12.1.2
Dec 1, 2019 at 4:06
Actually, only the first one is valid in HTML5
technically incorrect. The second one is valid in HTML5 as well. Not required, but valid. Noone is arguing that it is required. Only that per the specifications, using the self-closing form of the tag is valid in all current forms of XHTML and HTML.
Dec 2, 2019 at 4:48
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.
The best use of tags you should use:
<img src="" alt=""/>
Also you can use in HTML5:
<img src="" alt="">
These two are completely valid in HTML5 Pick one of them and stick with that.
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.
<img src='stackoverflow.png'>
<img src='stackoverflow.png' />
The second property is more appropriate.
-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.
Unfortunately the above solutions did not work in my case - maybe because a put the button inside a form-tag. This code ...
<input class="button" type="submit" value=" ">
<img src="../assets/logo.png" alt="test" />
</input>
... 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.
<input class="button" type="submit" value=" " />
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("../assets/logo.png") ;
background-repeat: no-repeat;
background-size: 6em;
background-position: center;
border: 0;
border-radius: 3em;
}