Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Treehouse Club: CSS My First Web Page What's New in Your HTML

Ian Johnson
Ian Johnson
2,749 Points

Why don't meta tags require a closing tag?

Many thanks in advance for anyone taking the time to read this...

So, to my understanding; a meta tag comments on/describes the content of a html page, but what is the significance with it having/not having to have a closing tag - as asked in one of the track's questions?

Does leaving a meta tag unclosed - so to speak, allow it cover the lines of code below it, or something along those lines? Also, is a tag that doesn't require being closed off, classed as a singleton tag?

3 Answers

Does leaving a meta tag unclosed - so to speak, allow it cover the lines of code below it, or something along those lines?

I realize that I didn't properly answer this question. The <meta> tag doesn't haven't a closing tag, that's why it is a singleton tag. If you add a "closing tag", i.e., </meta>, the browser will simply ignore it. If you think about it, there is no reason to have a closing tag since the <meta> tag isn't marking any content, or applying some style to any content. Its purpose is to describe a page, and since there is only a few very exact ways to describe a page, this purpose can be satisfied by the use of attributes. On the other hand, a <h1> is telling the browser: this content is special, treat it differently (by applying some styling). Since the content can be of any length, and by itself doesn't mean anything to the browser (i.e., it doesn't tell the browser what to do like attributes do), the browser has to know where it starts and where it ends. Hence, the need for an opening and a closing tag.

Ian Johnson
Ian Johnson
2,749 Points

Awesome.

Thanks very much for re-replying & great job at explaining that Montazar Al-Jaber

While the closing meta tag is not standard confirmative, your browser is (hopefully) clever enough to ignore the invalid closing tag. You can verify this for yourself. Open a workspace where you have (or add) a closing meta tag, and then open the Inspector in the preview page. In the Elements tab, you'll find that the browser has ignored the closing meta tag. However, you should not rely on this behavior since not all web browsers are equal, and some may not render your page at all.

By definition, the meta tag is classified as a singleton tag since it doesn't have a closing tag.

Interesting read.

Ian Johnson
Ian Johnson
2,749 Points

Thank you for responding Montazar Al-Jaber.

I tried this; "Open a workspace where you have (or add) a closing meta tag, and then open the Inspector in the preview page." a few ways [probably both incorrectly]:

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

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

The first attempt simply added charset="utf-8" as a comment above the body, the second attempt doesn't seem to have done anything different to when not trying to close the tag - so I guess I see what you mean by the browser ignoring it on the second attempt.

Thank you also for the further reading!

The browser tries its best to guess what you're trying to do. In this case, since <meta> is a valid singleton element, it kept the first <meta> tag but removed the </meta> since that closing tag isn't valid HTML, and removed the content since <meta> doesn't expect any content (only attributes). However, if you used an invalid tag, e.g., <cc> which doesn't exist in HTML, the browser is clever enough to remove that tag altogether: opening and closing tag, and content.

The bottom-line is that although the browser is very clever one should not rely on it too much to figure out what you mean.