which of the h1 tag code is correct?

Question

I want to know which of the following code is correct... among all the three...

<h1><span class="bold">realestate</h1>
<h1>realestate</h1>
<h1 class=bold>realestate</h1>

Please let me know about that...

Answer 1

The first is not correct, since the span element has no end-tag:

<h1><span class="bold">...</span></h1>

The second and third are both correct (but the doublequotes are missing in the third example).

---

But if you want to use which one to use, I'd say use the second one and define the bold style for the h1 element, e.g:

<style>
h1 { font-weight: bold; }
</style>

Answer 2

The best would be option 4:

<h1 class="main-heading">realestate</h1>

You should give your classes semantic meaning - a main heading will always be a main heading, but what if the designer decides they would look better underlined? You'd end up with this:

.bold { font-weight: normal; text-decoration: underline; }

Which is confusing at best!

Answer 3

The third option certainly seems to me to be the cleanest option, except the attribute value should be enclosed in quotes, assuming you are using XHTML:

<h1 class="bold">realestate</h1>

It doesn't really make sense to enclose the entire contents of the <h1> tag in another tag. It would make more sense to enclose just the part of the tag that should be different to the rest of the <h1>, but not completely different, e.g:

<h1>Real <span class="bold">Estate</span></h1>

Think of the <span> tag as the inline equivalent of the <div> tag.

Answer 4

It depends on what you are trying to do.

Are you trying to make all your h1's bold. In that case, use #2 and use CSS to style all h1 elements accordingly.

CSS

h1 {
  font-weight: bold;
}

HTML

<h1>realestate</h1>

If you are trying to make only a select few h1's bold, use #3 and use CSS to style all h1 elements that have the bold class.

CSS

h1.bold {
  font-weight: bold;
}

HTML

<h1 class="bold">realestate</h1>

The first one is really only useful if for some reason you wanted part of h1 to be bold

CSS

.bold {
  font-weight: bold;
}

HTML

<h1><span class="bold">real</span>estate</h1>

Also, in general from your samples, watch out for quotes and end tags.