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.
HTML 5: Is it br , br/ , or br / ?
Simply <br> is sufficient.
The other forms are there for compatibility with XHTML; to make it possible to write the same code as XHTML, and have it also work as HTML. Some systems that generate HTML may be based on XML generators, and thus do not have the ability to output just a bare <br> tag; if you're using such a system, it's fine to use <br/>, it's just not necessary if you don't need to do it.
Very few people actually use XHTML, however. You need to serve your content as application/xhtml+xml for it to be interpreted as XHTML, and that will not work in old versions of IE - it will also mean that any small error you make will prevent your page from being displayed in browsers that do support XHTML. So, most of what looks like XHTML on the web is actually being served, and interpreted, as HTML. See Serving XHTML as text/html Considered Harmful for some more information.
Do we still need forward slashes when closing void elements in HTML5?
img tags are Void Elements so they do not need an end tag.
Void elements
area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr
...
Void elements only have a start tag; end tags must not be specified for void elements.
W3C | WHATWG
That being said it's not strict parsing in HTML5 so it won't do any major harm.
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.
Can I have attributes on closing tags?
The answer is no for most tags. However, you could argue that tags like "img" that can be self-closing, are able to have attributes in them. But these self-closing tags are taking the place of an opening tag and a closing tag, so it's not the same as having an attribute in a closing tag. To be honest, there is really no need for this, it would just create more for the browser to have to read and make the page size bigger.
Expected corresponding JSX closing tag for input Reactjs
You need to close the input element with a /> at the end.
<input id="icon_prefix" type="text" class="validate" />
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.
Can SVG markup in HTML5 omit self-closing tags?
Below are some rules I found out in the W3 SVG and MathML elements in HTML documents documentation
- SVG and MathML elements whose start tags have a single "/" character before the closing ">" character are said to be marked as
self-closing.- SVG and MathML elements must either have a start tag and an end tag, or a start tag that is marked as self-closing, in which case they
must not have an end tag.- SVG and MathML elements whose start tag is marked as self-closing, can’t have any contents.
- The contents of an SVG or MathML element whose start tag is not marked as self-closing are any elements, character data, comments, and
CDATA sections that it contains, with the restriction that any
character data it contains must be normal character data.
I think the second point enforces svg elements to have a explicit closing tag or a self-closing tag.