Why Is the <Img> Tag Not Closed in HTML

Why is the img tag not closed in HTML?

Historically, HTML has been based on SGML which allows tags to be omitted under certain conditions.

Since the <img> element cannot have any child nodes, it is defined as EMPTY and the end tag is forbidden (as it would serve no purpose).

XHTML is HTML expressed in XML, and XML does not support optional or forbidden tags (although it allows a self-closing tag to substitute for a start+end tag pair), so it has to be explicitly closed there.

HTML 5 is backwards compatible with versions of HTML that were SGML based.

How to close img tag properly?

<img src='stackoverflow.png' />

Works fine and closes the tag properly. Best to add the alt attribute for people that are visually impaired.

Do I need a / at the end of an img or br tag, etc.?

The / is only required for XHTML & XML.

If you're using a HTML5 doctype, then there's no need to terminate self-closing tags in this way.

This applies to <img src="img.png" />, <br />, <hr /> etc.

I.e. Just use <img src="img.png">, <br> and <hr>.

If you need an empty element (like a div), don't use <div />, instead use <div></div>. This is important since in HTML5, the slash is ignored and <div /> is interpreted as <div> without a closing tag.

How to close img tags using javascript?

It's not clear what your question is. I read it one way, but I think Quentin's right that I should have read it another way.

The way I read it

...was that you wanted to know how to write an img tag in XHTML.

I want to close the image tags for a standard XHTML format.

In XHTML, void elements like img are written with a solidus (/) with a space in front of it prior to the > in the tag:

html = '<html><body><img src = ""  style = "" /></body></html>';
// ------------------------------------------^^

(Note I changed to ' for the outer quotes, so that would be a syntactically-valid string.)

Since XHTML is XML and the spec doesn't impose any further syntax restrictions over XML's own, presumably you could also write <img ...></img>. However, the XHTML 1 spec says you should use <img ... /> instead because of "...uncertain results in many existing user agents."

Doing the <img ... /> thing in HTML (not XHTML) is tolerated, but unnecessary. <img src = "" style = ""> is perfectly correct in HTML. (Note that this is only for void elements. The XHTML <div /> is correctly written <div></div> in HTML, because div is not a void element; <div /> would be treated exactly like <div> in HTML.)

Or possibly you meant...

...that you have a string with HTML in it, and want to modify it to be XHTML. If so, you want to use an HTML parser to parse the string, and then an XHTML serializer to turn it back into a string.

Why we get error when we add any tag in between img/ tag in ReactJS?

The reason is because the img tag can not have any child elements.

To get the result you are looking for you may want to wrap both the img and span in a wrapper div like this.

<div style={{position: "relative"}} />
    <img src="any demo images here" alt="Nadeem">   
    <span style={{position:"absolute", bottom: "0px", margin: "0px auth"}}>adeem</span> 
</div>

(I am not sure if this is what you are looking for but assuming so from your question)

Close all HTML unclosed IMG tags

(<img[^>]+)(?<!/)>

will match an img tag that is not properly closed. It requires that the regex flavor you're using supports lookbehind (which Ruby and JavaScript don't but most others do). Backreference no. 1 will contain the match, so if you search for this regex and replace by \1/> you should be good to go.

If you need to account for the possibility of > inside attributes, you could use

(<img("[^"]*"|[^>])+)(?<!/)>

This will match, e.g.,

<img src="image.gif" alt="hey, look--->">
<img src="image/image.gif">

and leave

<img src="image/image.gif" />

alone.

Syntax of img tag

img tag is a self-closing tag so it's a good practice to write it like <img /> (more XHTML style) although it's absolutely fine and valid to leave it without that slash.

Image tag closing

As per this HTML5 standard: http://www.w3.org/TR/html-markup/syntax.html#void-element

Start tags consist of the following parts, in exactly the following
order:
A "<" character.
The element’s tag name.
Optionally, one or more attributes, each of which must be preceded by one or more space characters.
Optionally, one or more space characters.
Optionally, a "/" character, which may be present only if the element is a void element.
A ">" character.

The img is a void element and hence the part #5 would apply with a caveat that "a '/' character, which may be present..."

<img id="..." src="..." />

And so, you may omit the part #5 i.e. the closing "/", and hence this is also valid:

<img id="..." src="..." >

Further down the spec says:

Void elements only have a start tag; end tags must not be specified
for void elements.

So, no end tag is required.

Why Is the <Img> Tag Not Closed in HTML