Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML HTML Forms Text Areas and Selects

When to use closing tag and when not to use?

Sometimes, I am just confused about when to use closing tag and when not to use it. For example - In case of <input type="checkbox" name="foods" value="Grapes">Grapes - we have not use closing tag. However, in rest of the element, closing tag has been used.

Is there any rule for this? Can I have a list of elements which does not require closing tag.

Renu

Hi Renu. You could give Ryan a "Best answer". Some people care about that stuff. I think it looks good on a resume or something.

4 Answers

Ryan S
Ryan S
27,275 Points

Hi Renukumari,

As John said, you'll eventually start remembering which tags are self-closing and it'll become second nature.

But just to add on to this, a simple way of remembering the basic ones is to ask yourself whether the tag is used to surround actual text content or not.

For example, you will separate the text of your website with all kinds of elements: paragraphs, headlines, list items, labels, etc. The thing that all these types of elements have in common is that you will be using them to display (and organize) visible text on your site. So they will need to have opening and closing tags that surround each section of text that you want to display. You'll need to know when the headline ends so that the paragraph can begin.

You'll notice too, that a lot of these types of tags don't require any mandatory attributes to be set inside the opening tag. You will of course set up a lot of classes and id's and stuff like that, but you can still use a raw <p></p>.

But when it comes to self-closing tags, like <link>, <meta>, <img> or <input>, you aren't going to be using them to directly contain visible text. Sure, some of them like <img> will produce visible content on your site, but if you think about it, only the address of the image is required to display it, and the address itself won't be visible as content.

Lot's of these self-closing tags will require mandatory attributes to be set inside them because that is how they will serve their purpose, by either pulling in data from elsewhere to generate content, or by setting up content that isn't plain text.

There are exceptions of course, like <script> or <style> tags, but hopefully this serves as a general guide to help you remember some of them.

And just to address the example in the video. You don't actually need to surround text with tags. It can still be displayed as raw text on its own, but the disadvantage is that it won't be contained and it will be very difficult to style and move around.

In the video, it is a little confusing. The input tag is always self closing but the text that followed was actually just plain uncontained text. But by using the <br> tag right after to force a line break. it became contained.

Brian Jensen
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree seal-36
Brian Jensen
Treehouse Staff

They are known as void elements, I hope this helps! :)

  • area
  • base
  • br
  • col
  • embed
  • hr
  • img
  • input
  • keygen
  • link
  • menuitem
  • meta
  • param
  • source
  • track
  • wbr

Hi, I think you just have to remember which ones are <input type="text"> and which ones are <form></form>. The good news is once you know them, you will know them. The even better news is you can look them up. There may be a way to reason which are which, but I don't know what that is. Someone else may respond that does.

Hi Ryan,

Thanks for the explanation. The below paras from your explanation sums up all -

"But when it comes to self-closing tags, like <link>, <meta>, <img> or <input>, you aren't going to be using them to directly contain visible text. Sure, some of them like <img> will produce visible content on your site, but if you think about it, only the address of the image is required to display it, and the address itself won't be visible as content.

Lot's of these self-closing tags will require mandatory attributes to be set inside them because that is how they will serve their purpose, by either pulling in data from elsewhere to generate content, or by setting up content that isn't plain text.

There are exceptions of course, like <script> or <style> tags, but hopefully this serves as a general guide to help you remember some of them."