<meta> self-closing tags?

**rhgiant** · Jul 22, 2011 23:52

Hello,

Would both be correct, or is one better than the other?

Code:

<meta charset="utf-8">
<meta charset="utf-8" />

Cheers.

**ralph.m** · Jul 23, 2011 00:13

The first one is the standard for HTML5, used like so:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>

The second would be used for XHTML5:

Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title></title>
</head>

**rhgiant** · Jul 23, 2011 00:26

Would it be ok to close it in standard html5?

**ralph.m** · Jul 23, 2011 00:30

No, I don't think so. The closing slash like that always was invalid HTML—but something the browsers have tolerated.

**xhtmlcoder** · Jul 23, 2011 02:24

HTML5 is like a complete slut; it allows both methods it swings both ways so you could use either for 'text/html' version (obviously the first version being more correct). Though obviously you need the closing slash version for XHTML5 to conform within well-formedness constraints.

So yes actually BOTH methods can be used in the HTML version! Whereas only version two is allowed for the XHTML version.

**C. Ankerstjerne** · Jul 23, 2011 09:39

Originally Posted by xhtmlcoder

So yes actually BOTH methods can be used in the HTML version!

Are you sure abuot this? It is my understanding that this is simply because browsers generally doesn't understand null end tags (as in HTML 4.01 and below), not because it's actually valid.

**xhtmlcoder** · Jul 24, 2011 02:31

Originally Posted by C. Ankerstjerne

Are you sure about this? [...]

Yes, for the new void elements it is the case. Obviously you cannot do something like: <p /> or <br></br> for Fred 'text/html'.

We digress as we are only looking at the META or other VOID elements only for this thread. Like I said it is "bad practice" for the 'text/html' version but legal.

For you reading pleasure: http://www.w3.org/TR/html-markup/syn...yntax-elements

Off Topic:

I believe that SP Book has some outstanding errata waiting regarding certain wording upon p54. ;-)

**rhgiant** · Jul 23, 2011 04:33

Is it the same for <link rel=...>?

**Gar onn** · Jul 23, 2011 07:13

yes,
you can omit the trailing slash from all elements that have no content

**rhgiant** · Jul 23, 2011 09:39

My question was rather: can I add it (in html5)?

**oddz** · Jul 23, 2011 11:50

Originally Posted by C. Ankerstjerne

Are you sure abuot this? It is my understanding that this is simply because browsers generally doesn't understand null end tags (as in HTML 4.01 and below), not because it's actually valid.

It is correct, the new book by Sitepoint on HTML5 covers this and other "forgiving" aspects in comparison to HTML4. Though I will be leaving out the trailing slash for the time being with HTML5. Mainly because I write HTML4, validate against it then swap the doctype, but thats another story.

Originally Posted by rhgiant

My question was rather: can I add it (in html5)?

You can either use a trailing slash or omit it. Good practice though is to omit it when writing HTML5 just as you were writing HTML4.

**Stomme poes** · Jul 23, 2011 14:33

Would it be ok to close it in standard html5?

Who knows, maybe some day the Web Standards Evangelical Army's black-clad jack-booted storm troopers will come into your bedroom in the night-time and stuff you in a sack and drag you away for closing EMPTY elements in "standard" HTML5. But I doubt it. No browser cares, that's for sure.

**felgall** · Jul 23, 2011 15:47

The space in front of the slash is unnecessary unless you still need to support Netscape 4.

I would recommend leaving out the slash unless you intend to start serving the page as XHTML as soon as IE8 use falls low enough to ignore (since IE8 and earlier don't support XHTML).

**deathshadow60** · Jul 23, 2011 19:36

I actually prefer the space just for ease of reading. Makes the code clearer to me.

But then I'll often format really long tags as attribute per line indented with the /> on it's own line for clarity. Beats the ever living tar out of the hard to read run-on lines you see in a lot of code.

one of the reasons I prefer XHTML formatting in the first place... with just > you're never sure if it's the end of a tag or the start of one.. with /> it's always clear.

**ralph.m** · Jul 24, 2011 03:23

Originally Posted by deathshadow60

one of the reasons I prefer XHTML formatting in the first place... with just > you're never sure if it's the end of a tag or the start of one.. with /> it's always clear.

I still can't get out of my head that /> is invalid HTML.

**deathshadow60** · Jul 24, 2011 03:48

Originally Posted by ralph.m

I still can't get out of my head that /> is invalid HTML.

While for me, HTML's "formatting rules" (aka WHAT RULES!?!) are so loose, permissive and idiotic that I could give a flying purple fish what it considers valid or invalid... Hence why I like XHTML as it has more consistent rules... and thing HTML5's "just slap together anything" is so much of a colossal step in reverse.

Rules are good. They tend to keep you out of trouble in the first place -- as opposed to just sleazing stuff together any old way... which ever since HTML 3 seems to be 'the norm'. Again, see all the people STILL vomiting up HTML 3.2 and slapping a 4 tranny or 5 lip-service on it.

**C. Ankerstjerne** · Jul 24, 2011 02:03

with just > you're never sure if it's the end of a tag or the start of one.. with /> it's always clear.

When would a tag ever start with a >?

**deathshadow60** · Jul 24, 2011 02:26

Originally Posted by C. Ankerstjerne

When would a tag ever start with a >?

Methinks you failed to grasp what I was saying. there are two types of tags, those that have content, and those that do not... when I say tag I'm referring to the entire element -- the opening and closing of the tag with it's content; basically in the DOM sense of it.

Code:

<label
  for="someBloodyInput"
  id="someBloodyLabel"
  class="error"
>

> means this is a starting tag. </label> would be the end of the tag.

Code:

<input
  type="text"
  id="someBloodyInput"
  class="error"
/>

/> is the close of the tag.

If I've scrolled to where I can't see the opening, using HTML 4 I don't know what tag it is so I can't be sure if it's an opening tag or a self-closing. Always using /> means I can always make that determination even if /> is all I can see... saving me the bother of scrolling up to find out.

A common formatting method if you practice the 76 rule -- which is why real programming languages that have a block structure are CONSISTENT in it's application. Something HTML is a miserable failure at and really the only thing XHTML gives us that's an improvement.

**C. Ankerstjerne** · Jul 24, 2011 06:45

Originally Posted by deathshadow60

Code:

<input
  type="text"
  id="someBloodyInput"
  class="error"
/>

/> is the close of the tag.

Well, yes and no. In XML-based languages, such as true XHTML, you are correct. In HTML, the input tag is closed by the /. The > is content.

**deathshadow60** · Jul 24, 2011 08:58

Originally Posted by C. Ankerstjerne

Well, yes and no. In XML-based languages, such as true XHTML, you are correct. In HTML, the input tag is closed by the /. The > is content.

Uhm... Isn't that backwards?? Well, not backwards, but ... really wrong?

I thought in HTML the / was an invalid character ignored as an unrecognized attribute (since any element inbetween <tagname and > is treated as an attribute -- meaning > is still closing them just like it closes them when the / isn't there in the first place. I'm pretty sure a forward slash doesn't close jack in HTML.

<img src="image.png" alt="test">
Open and close. Valid HTML 4, invalid XHTML.

<img src="image.png" alt="test" />
Open and close, valid XHTML, invalid HTML but still works because the / is treated as a unrecognized attribute... just as you can type in any amount of fantasy land attributes or tag names and HTML plods on as if nothing is wrong... since that's one of the ways HTML maintains backwards compatibility.

<img src="image.png" html5="bloatedBS" / boxed noclub cluck="clucked" dyson="sucks" alt="test">

Invalid HTML 4... will still show the image and still parse the recognized attributes (src and alt).

**afam4eva** · Jul 24, 2011 03:32

You can use either. If it's a tag without a content then the tag is ideal.

**rhgiant** · Jul 24, 2011 04:23

Why would <meta... /> and <link rel... /> be "bad practice" when <img... /> isn't?

Btw, is <link rel... /> to be considered like <meta> in terms of bad practice/self-closing-ness?

**deathshadow60** · Jul 24, 2011 08:50

Originally Posted by rhgiant

Why would <meta... /> and <link rel... /> be "bad practice" when <img... /> isn't?

I think you're really confused and/or totally failing to grasp this, as <meta /> and <link /> are REQUIRED if you want valid code when making XHTML just like <img /> -- no "good or bad practice" involved... in HTML, /> is invalid markup just as > on standlone tags is invalid in XHTML. The syntax rules are consistent within the doctype you choose.

To clarify, "standalone tags" -- that's META, LINK, IMG, BR, HR, INPUT, ISINDEX, BASE, COL, AREA, PARAM and FRAME. (I think that's all of them).

If you're writing XHTML, those tags MUST be closed with />.... if you're writing HTML, those tags should be closed with just >.

**rhgiant** · Jul 24, 2011 10:10

Originally Posted by deathshadow60

I think you're really confused and/or totally failing to grasp this, as <meta /> and <link /> are REQUIRED if you want valid code when making XHTML just like <img /> -- no "good or bad practice" involved... in HTML, /> is invalid markup just as > on standlone tags is invalid in XHTML. The syntax rules are consistent within the doctype you choose.

To clarify, "standalone tags" -- that's META, LINK, IMG, BR, HR, INPUT, ISINDEX, BASE, COL, AREA, PARAM and FRAME. (I think that's all of them).

If you're writing XHTML, those tags MUST be closed with />.... if you're writing HTML, those tags should be closed with just >.

Oh, I finally get it. That was the answer

Thanks.

html5: <img> <meta> <link>
xhtml: <img /> <meta /> <link />

**deathshadow60** · Jul 24, 2011 10:43

Originally Posted by rhgiant

Oh, I finally get it. That was the answer

Thanks.

html5: <img> <meta> <link>
xhtml: <img /> <meta /> <link />

ALMOST.

html4: <img> <meta> <link>
xhtml: <img /> <meta /> <link />
html5: mix and match however you want -- who cares about formatting rules, clear syntax or trying to prevent people from making mistakes in the first place, just vomit it up any old way -- nobody understood the advantages of strict anyways and just wants to sleaze by on as little effort as possible. We want all the gee whiz shiny things now, now, now -- who cares what it costs us in the future. It's the philosophy of most people's spending -- why should coding be any different?

HTML 5 -- explosive diarrhea in the swimming pool on a hot July day.

User Tag List

Thread: <meta> self-closing tags?

Thread Tools

Display

Hybrid View

<meta> self-closing tags?

Bookmarks

Bookmarks

Posting Permissions