Div Confusion

[Shaggy Hiker]

I'm just getting into Razor pages, which is probably unrelated to this question, but I'm new to both Razor and pretty much new to HTML. I did do a bit of work in it a few years back, and have now forgotten much, so I'm not quite sure where this confusion is arising from.

I have a page that has a menu on it, and I was adding a hero image above that menu. This is in the _layout.cshtml page, such that the image is on all pages.

At first, I created a div with a hero-image class like so:

<div class="hero-image">

</div>

I did it this way thinking that I'd put something else in there, such as text, but then I realized that I just wanted the image (which happens to have text on it already, but that's irrelevant). Therefore, I thought I could simplify by changing the above to this:

<div class="hero-image" />

To my surprise, this greatly altered the appearance. In fact, the image was now below the menu (which is some <nav> tags immediately below this div). Changing it back to the way I had it before restored it as I wanted it. I always thought the second example was just a shorthand way of restating the first example. Apparently, I was wrong, but what am I not understanding here?

[OptionBase1]

Some tags aren't valid when "self-closed". Div is one of them AFAIK. I think the rule of thumb is if it is a container you should have an explicit closing tag.

[sapator]

And self closing div does not make sense, have a look here:
https://stackoverflow.com/questions/...iv-and-div-div

[Shaggy Hiker]

Makes sense to me...though it's clearly not valid. It's a container, but in this case it contains nothing, and is really just a host for the background image of the class.

Still, I see that it isn't legal html, so that's the answer.

[OptionBase1]

Makes sense to me...though it's clearly not valid. It's a container, but in this case it contains nothing, and is really just a host for the background image of the class.

In my book I call that not nothing.