1

What is the difference/Better between -

< Some Code /> eg- <meta charset="UTF-8" />, <link href="style.css" type="text/css"/>

&

< Some Code > eg- <meta charset="UTF-8">, <link href="style.css" type="text/css">
user2615947
  • 155
  • 7
  • 5
    http://www.w3.org/MarkUp/2004/xhtml-faq#need – Adrift Jul 26 '13 at 21:22
  • 2
    The first form is simply for brevity. – Robert Harvey Jul 26 '13 at 21:23
  • 1
    @RobertHarvey The second form is shorter. –  Jul 26 '13 at 21:24
  • 1
    Please read next question [thread][1] [1]: http://stackoverflow.com/questions/7366344/do-we-still-need-end-slashes-in-html5 – falinsky Jul 26 '13 at 21:24
  • @hvd well, those are probably not very good examples, as the second one does not have closing tags. – Robert Harvey Jul 26 '13 at 21:27
  • Jens Erat Yes Thank you..and sorry i didn't find that duplicate question – user2615947 Jul 26 '13 at 21:27
  • @RobertHarvey In HTML, for elements that do have closing tags, the self-closing form is invalid. You can't have `
    `, for example. In XHTML, you can, but this question is about HTML. Because of that, the form without the slash will always be shorter. (Actually, I'm not sure if `
    ` is invalid, or if it just means `
    `. I know it doesn't mean `
    `, at any rate.)
     –  Jul 26 '13 at 21:28
  • @hvd didn't really mean to get into a semantical argument about this, so I'll rephrase. Self closing tags exist for one reason, and one reason only: brevity. – Robert Harvey Jul 26 '13 at 21:31
  • @RobertHarvey Sorry, but for HTML, that is just wrong. Self-closing tags were added to XML for brevity. They were added to HTML for compatibility with XHTML. There is no valid HTML at all that uses the self-closing form that is shorter than the valid HTML that does not use the self-closing form. –  Jul 26 '13 at 21:34
  • 1
    Why are we still talking about this? – Robert Harvey Jul 26 '13 at 21:35
  • 1
    Because one of you MUST be wrong and we can't leave the Internet until we know which one! – Erik Noren Jul 26 '13 at 21:39
  • Erik Noren & Robert Harvey - Guys can i ask you one off topic question ?? Is there any online/app that covert the php to java script because i have a php submit form i want to convert into ajax so page doesn't refreshes – user2615947 Jul 26 '13 at 21:49
  • Ask in one of the chat rooms. But i suspect the answer is no. – Robert Harvey Jul 26 '13 at 21:52

4 Answers4

5

HTML isn't XML (except XHTML) so both are equivalent to most browsers.

From an XML perspective the /> is a self-closing tag. It's a short-hand.

<img src="..." />
<input type="text" />
<textarea>
</textarea>

These are all semantically correct and XML valid. HTML will usually validate (though it's no longer recommended) if you removed the ending from img and input.

<img src="..." >
<input type="text" >
<textarea>
</textarea>

This is semantically the same to HTML but is no longer XML valid.

Edit: To partially address the comments regarding textarea below, input and img are tags which never have child elements. These would be syntactically invalid with them. That's why it doesn't really matter (with regards to HTML validation) whether they properly close. They never wrap children therefor the browser isn't looking for a closing tag. Conversely textarea does have the ability to have child html (that's how rich text boxes are implemented in HTML) and needs a closing tag.

Erik Noren
  • 4,279
  • 1
  • 23
  • 29
  • Note that you can't actually short-hand the textarea tag. It's a special sort of form control because it allows much more broad content than a simple input control and it goes between the open and close tags. Without an explicit content area between those two tags, you don't have a valid `textarea`. – Erik Noren Jul 26 '13 at 21:27
  • I believe you can shorthand textarea in XHTML. HTML ignores those slashes, however. – John Dvorak Jul 26 '13 at 21:28
  • I've had trouble using `textarea` without explicit open and close tags along with jQuery for dynamic content. Perhaps this is more a limitation of jQuery or a quirk of the particular browser at the time and once we figured out why it wasn't working, I just always follow this format to ward off compatibility problems! – Erik Noren Jul 26 '13 at 21:30
  • 2
    Most likely you weren't actually running in XHTML mode. XHTML is driven by slashes (a trailing slash always closes a node, HTML is driven by the DTD (images are self-closing, scripts need an explicit closing tags, `/>` is not recognised) – John Dvorak Jul 26 '13 at 21:38
3

/> is a self closing tag. Which would typically have attributes to specify its characteristics. And it also means that there's no possible child elements to this.

Example:

<input type=button/> - here I am not expecting any child elements

></> usually allows child elements.

Example:

<span><p>Hello</p></span> - here span allows the child element(s)

So there's no concept of better one between these two.

SaravananArumugam
  • 3,680
  • 6
  • 33
  • 45
2

/> is used in self-closed element that does not have any child elements. Example:

<img src='bla.jpg' />

< > always should be used with a closing tag </ > e.g.

<h1>Hello</h1>
Yuriy Galanter
  • 38,833
  • 15
  • 69
  • 136
2

/> is a self closing tag. Meaning its not followed by a closing element. For example, <a href="#"></a> compared to <img src="#" />. You need to know which tags are self-closing and which are not (you'll pick this up quickly): http://xahlee.info/js/html5_non-closing_tag.html

In HTML 5, it is valid to not have the closing slash on self-closing tags (<br>). In xHTML you need to have the closing slash (<br />): https://stackoverflow.com/a/3558200/703229

Community
  • 1
  • 1
Sam
  • 20,096
  • 2
  • 45
  • 71