Closing Div elements

HTML-CSS
1

Hi everyone! I was wondering, are div elements similar to brackets in calculations? I have just done the “Create a custom heading” task where you have to nest a h2 and image element within a <div class="row"> element and due to the nature of the code I already had one closing </div> tag (i don’t know if tag is the right terminology so sorry if that doesn’t make sense). So anyway, before I could basically close everything up in another </div> tag the code seemed to work.

Basically can two separate opening <div> tags share the same closing </div> tag or should I put two closing div tag next to each other? I don’t know if there is some kind of best practise in this case. Hopefully you can understand this question.

Thanks in advance.

Kind regards
Li-Ming

2

Each opening tag should have a closing tag :slight_smile: There are a few exceptions however, <img> for example is non-closing. This is considered strict, although you can opt to not close certain tags. It depends on how you want your code to read.

http://blog.teamtreehouse.com/to-close-or-not-to-close-tags-in-html5 is a good explanation on this subject.

2 Likes
3

I would say instead of “non-closing” tags that there are self closing tags like <img />, <input />, etc

1 Like
4

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums

For inline code like you were doing, you can just use one backtick. So for example, this is a 'div' and use backticks instead of quotes.

1 Like
5

Aha I think you have just answered a question I had on another post so thanks.

6

So this

<div class="row"><div class="col-xs-8"><h2 class="text-primary text-center">CatPhotoApp</h2></div>

  <div class="col-xs-4"><a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a></div>
</div>

would be better than this

<div class="row"><div class="col-xs-8"><h2 class="text-primary text-center">CatPhotoApp</h2></div>

  <div class="col-xs-4"><a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a></div>
7

So, as a good practice I always close one tag as soon as i open it. If the structure goes too nested i would be sure that all my tags are properly closed.

When debugging html the rule of thumb in case of nested elements is that you go checking if your tags are closed properly from inside out.

2 Likes
8

If you are not closing yourself the tags the way YOU want the browsers will try to close them for you the way i mentioned above.

Just for practice put this code <div class="row"><div class="col-xs-8"><h2 class="text-primary text-center">CatPhotoApp into a codepen and then inspect itwith the devtools to see the structure of the html you get.

1 Like