HTML
and - elements background color not working

Question

I want to create a few span-elements within a p-element. These span-elements should have different background colors than the p-elements.

The code:

<p style="background-color:blue"> <!-- color not working -->
  <span style="background-color:red"><H2>boo-title</H2>  <!-- color not working -->
    <script language="JavaScript">
      document.write("boo");
    </script>
  </span>
  <span style="background-color:green"><H2>foo-title</H2> <!-- color working -->
    <script language="JavaScript">
      document.write("foo");
    </script>
  </span>
</p>

Why is the background-color sometimes working and sometimes not, although it is defined in the same way? And how do i get this to work, when defining it like this?

Check the actual DOM structure created from your code, it might surprise you. Parsing of HTML can be tricky. Also, see this answer: https://stackoverflow.com/a/12015809/2533215 — Ilya Streltsyn, Aug 03 '17 at 06:36
You didn;t regarding DOM element rules, You used `h2` tag inside `span`, the `block` element can not be inside `inline` element. — AmerllicA, Aug 03 '17 at 06:38
P tag is the single paragraph tag, not suppose to use for the divisions, so have to give some div or section tags. if you try to give height for the tag P, it show you the given background color.. — Padma Rubhan, Aug 03 '17 at 06:40
@AmerllicA, it's better to say "The flow content elements can not be where phrasing content is expected". First, HTML5 doesn't use terms "block/inline elements" anymore, it was HTML4 concept. Second, the `p` element is techincally "block" element, but still it can't contain other "block" elements. — Ilya Streltsyn, Aug 03 '17 at 06:44
@IlyaStreltsyn , I know it my love, but you can see that the `p` element can not contain `block` tags, using HTML4 terms is better than implement `div` inside `span` tag. — AmerllicA, Aug 03 '17 at 06:48
@IlyaStreltsyn - "The flow content elements can not be where phrasing content is expected" is still wrong. The set of flow content elements includes the set of phrasing content elements, so *some* flow content elements are fine where phrasing content is expected. Better would be "Non-phrasing content elements such as H2 cannot be where phrasing content is expected" — Alohci, Aug 03 '17 at 06:50
@AmerllicA, even in HTML4 terms, the `p` element [is definitely the block element](https://www.w3.org/TR/html401/sgml/dtd.html#block). So it still is better to use the correct term 'Content model' than to continue with "no blocks in inlines" oversimplification that doesn't help answering why some "blocks" also can contain only "inlines". — Ilya Streltsyn, Aug 03 '17 at 06:58

score 3 · Accepted Answer · answered Aug 03 '17 at 06:32

3

Put span tags inside div tags and avoid p tags.

<div style="background-color:blue"> <!-- color not working -->
  <span style="background-color:red"><H2>boo-title</H2>  <!-- color working -->
    <script language="JavaScript">
      document.write("boo");
    </script>
  </span>
  <span style="background-color:green"><H2>foo-title</H2> <!-- color working -->
    <script language="JavaScript">
      document.write("foo");
    </script>
  </span>
</div>

answered Aug 03 '17 at 06:32

terryeah

583
5
17

Alright, thank you! Can you explain, why these tags behave, like they behave? So why does it make a difference for the `span` tag if there is a `p` tag or a `div` tag in front of it? – Rüdiger Aug 03 '17 at 06:34
You turn the problem description, @Rüdiger wanna use `p` tag and you must use `p` tag, maybe he wanna create semantic DOM, so using `div` turn the problem description, Also @Rüdiger use illegal DOM elements tree rules. – AmerllicA Aug 03 '17 at 06:44
@Rüdiger as @Padma mentioned in his comment, p tag is not for the divisions and if you want to style divisions, `div` is what you should be after as `section` tags are only for dividing the sections. – terryeah Aug 03 '17 at 06:54
@AmerllicA he never said that he has to use p tags. – terryeah Aug 03 '17 at 06:55
1

@JulySFX , read question description exactly, he said: I want to create a few span-elements within a p-element – AmerllicA Aug 03 '17 at 07:02

Minal Chauhan · Answer 2 · 2017-08-03T06:41:41.003

0

It is not valid to have a h2 inside of a p and span. So replace p tag with div

<div style="background-color:blue"> <!-- color not working -->
  <span style="background-color:red"><H2>boo-title</H2>  <!-- color working -->
    <script language="JavaScript">
      document.write("boo");
    </script>
  </span>
  <span style="background-color:green"><H2>foo-title</H2> <!-- color working -->
    <script language="JavaScript">
      document.write("foo");
    </script>
  </span>
</div>

edited Aug 03 '17 at 06:41

answered Aug 03 '17 at 06:35

Minal Chauhan

6,025
8
21
41

It's not valid to have an H2 inside a SPAN either. Maybe you should fix that too. – Alohci Aug 03 '17 at 06:39
You turn the problem description, @Rüdiger wanna use `p` tag and you must use `p` tag, maybe he wanna create semantic DOM, so using `div` turn the problem description, Also @Rüdiger use illegal DOM elements tree rules. – AmerllicA Aug 03 '17 at 06:42

score 0 · Answer 3 · answered Aug 03 '17 at 06:42

Never put block element inside inline element. Follow HTML guideline or w3 standard rules during creating any section.

<div style="background-color:blue"> <!-- color not working -->
  <H2>boo-title</H2><span style="background-color:red">  <!-- color working -->
    <script language="JavaScript">
      document.write("boo");
    </script>
  </span>
  <H2>foo-title</H2><span style="background-color:green"> <!-- color working -->
    <script language="JavaScript">
      document.write("foo");
    </script>
  </span>
</div>

score 0 · Answer 4 · answered Aug 03 '17 at 06:44

      document.getElementById('boospan').innerHTML="boo";
      document.getElementById('foospan').innerHTML="foo";

<div style="background-color:blue">
    <H2>
        <span style="background-color:red">boo-title</span><br/>
        <span id="boospan" style="background-color:yellow"></span>
    </H2>
    <H2>
        <span style="background-color:green">foo-title</span><br/>
        <span id="foospan" style="background-color:orange"></span>
    </H2>
</div>

HTML and - elements background color not working

4 Answers4

HTML
and - elements background color not working