Are H1,H2,H3,H4 tags block or inline elements?

Question

Is it correct HTML to change the color of text inside a H1, H2, H3 or H4 element? Are they block level?

For example

Answer 1

They are block elements.

If you look at the HTML 4.01 strict DTD:

<!ENTITY % heading "H1|H2|H3|H4|H5|H6">

<!ENTITY % block
     "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
      BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">

So, they are all defined as %heading entities, which in turn are part of the %block entities.

As for the question regarding if you can change the color - that's just styling and is fine, though I would do so in a CSS file, not inline:

H1, H2, H3, H4, H5, H6
{
 color: #ccccc;
}

Answer 2

yes headers are block level.

on another note, #ABAB is not a valid color :)

Answer 3

Yes, a span within a h1 tag is allowed. As you can see on the W3C Reference page for the h1 tag:

Permitted contents: phrasing content

And phrasing content is normal text as well as your span element (and several other elements as can be seen on this reference page for phrasing content.

Oh yeah, and the heading tags are block elements.

Answer 4

The easiest way to find out whether an element is block level or inline element is to put a border around it.

HTML

<h1> Heading 1 </h1>
<span> Span </span>

CSS

h1 {
   border: 2px solid green;

}

span {
   border: 2px solid blue;
}

More examples on jsFiddle.

Answer 5

Color alters font color, not background color, so technically it's equally correct. However, doing it that way means that for every header you want with this style you must specify a span tag inside like you've done.

Better solution if you want to always have it in effect for h1 tags might be to include a stylesheet with the following code:

h1 {
  color: #ABABAB
}

Answer 6

The best pracktace is first create CSS style in stylesheet.

h1 { 
font-family: Georgia, "Times New Roman", Times, serif; 
font-size: 18px; 
font-weight: bold; 
color: #000000; 
}