Are heading elements block or inline elements?

Question

Is it correct to change the color of text inside an H1, H2, H3, H4, H5, or H6 element? Are they block-level elements?

For example:

<h1><span style="color:#ABAB">#500</span> Hello world</h1>

score 74 · Accepted Answer · edited Jun 23 '23 at 13:40

74

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;
}

edited Jun 23 '23 at 13:40

Kevin M. Mansour

2,915
6
18
35

answered Oct 28 '10 at 10:15

Oded

489,969
99
883
1,009

3

i liked the way you have added html DTD to explain the answer.GR8 – sushil bharwani Oct 28 '10 at 10:18
I was just trying to keep the example simple so used inline CSS. I did try some googling first but I couldn't find my answer from skimming http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.5 – Chris S Oct 28 '10 at 10:25
@Chris S - no problem. I can only go on what is in the question though ;) – Oded Oct 28 '10 at 10:26
Great answer btw and it's interesting they've got tokens for categories of other elements inside the block definition – Chris S Oct 28 '10 at 10:27

score 6 · Answer 2 · edited Jun 23 '23 at 13:38

6

Yes, this is the correct way, if you want to use inline CSS. Otherwise, use a class attribute say:

<h1 class="title"><span>#500</span> Hello world</h1>

Now the CSS is:

h1.title span {
   color: #ababab;
}

Again, yes <h1> to <h6> are block-level elements.

edited Jun 23 '23 at 13:38

Kevin M. Mansour

2,915
6
18
35

answered Oct 28 '10 at 10:17

Soarabh

2,910
9
39
57

score 5 · Answer 3 · edited Jun 23 '23 at 13:42

5

The easiest way to find out whether an element is a 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.

edited Jun 23 '23 at 13:42

Kevin M. Mansour

2,915
6
18
35

answered Jul 30 '14 at 13:21

Antonija Šimić

162
2
8

score 4 · Answer 4 · edited Jun 23 '23 at 13:43

4

Yes, all headers are block-level elements.

On another note, #ABAB is not a valid color.

edited Jun 23 '23 at 13:43

Kevin M. Mansour

2,915
6
18
35

answered Oct 28 '10 at 10:15

red-X

5,108
1
25
38

score 3 · Answer 5 · answered Oct 28 '10 at 10:21

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.

score 1 · Answer 6 · edited Jun 23 '23 at 13:45

1

The best practice is first to create a CSS style in a stylesheet file.

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

edited Jun 23 '23 at 13:45

Kevin M. Mansour

2,915
6
18
35

answered Oct 28 '10 at 10:16

Saifal Maluk

63
2
12

score 0 · Answer 7 · answered Oct 28 '10 at 10:18

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
}

Are heading elements block or inline elements?

7 Answers7

Linked