h2 tag style is interfering with other styles

Question

I have a h2 tag within a P and a div tag and somehow it is making the styles of my paragraphs not work correctly. In below example, the first paragraph, without the h2 tag behaves as expected. But as soon as I put an h2 tag in the rest of the paragraphs, it breaks my styles.

.column-4-layout .left-column P h2 {
  display: inline-block;
  padding: 0;
  margin: 0;
  color: yellow;
}
.column-4-layout .left-column P {
  width: 470px;
  margin-top: 50px;
  color: red;
}
.column-4-layout .left-column P img {
  width: 227px;
  padding-right: 15px;
  padding-bottom: 5px;
  float: left;
}
.column-4-layout .right-column P {
  width: 470px;
  margin-top: 50px;
}
.column-4-layout .right-column P img {
  width: 227px;
  padding-right: 15px;
  padding-bottom: 5px;
  float: left;
}

<div class="column-4-layout">

  <div class="left-column">

    <P>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/sample-image.jpg" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id erat ultrices metus ornare elementum vel vitae odio. Vivamus feugiat eros sit amet aliquet efficitur. Vestibulum massa ligula, ullamcorper vitae malesuada et, viverra nec metus. Integer
      at felis non odio interdum finibus sed ac purus. Vestibulum gravida lorem a augue faucibus, eget auctor lorem porta. Fusce vitae nibh laoreet, ultrices orci cursus, suscipit diam. Praesent vestibulum tellus ornare, gravida diam vel, sodales elit.
      Sed lacus augue, pulvinar vel ornare vel, molestie nec diam. Sed vestibulum sed odio in vulputate. Suspendisse ut lacus sit amet dui porttitor convallis. Vestibulum mattis laoreet nulla luctus facilisis. Nunc efficitur ligula sagittis lectus commodo
      molestie. Maecenas fringilla ipsum at est venenatis suscipit. Suspendisse quis pellentesque ligula. Sed quis ante nulla.</P>

    <P>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/sample-image.jpg" />
      <h2>Subgroup title</h2> Nullam euismod bibendum eleifend. Aliquam pulvinar rhoncus elit et ullamcorper. Proin vel nisl ligula. Quisque pellentesque, ipsum sollicitudin finibus faucibus, massa orci luctus purus, sed interdum odio leo ut dui. Phasellus a mi non tellus faucibus
      mattis. Morbi iaculis ac lorem lobortis elementum. Nunc sagittis libero et orci consequat iaculis. Duis magna arcu, consequat vel mollis non, elementum nec lacus. Etiam commodo in arcu sit amet ultrices. Sed massa magna, luctus in lacinia vel, congue
      a elit. Integer lacinia ornare ligula, ut ultricies metus elementum ut. Quisque placerat arcu id metus congue egestas. Curabitur mollis sem vel tortor convallis consectetur.</P>

    <P>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/sample-image.jpg" />
      <h2>Subgroup title</h2> Curabitur rhoncus tellus a pulvinar consequat. In sagittis gravida erat, id finibus est molestie non. Mauris dignissim pretium elementum. Sed a arcu vel lectus facilisis viverra. Vestibulum faucibus risus nec lorem scelerisque eleifend. Donec et
      consectetur tellus. Vestibulum in dictum ligula, ut commodo quam. In in justo a nisl pretium faucibus non sit amet lacus. Morbi pharetra vestibulum tristique. Sed sem lorem, egestas a pharetra quis, aliquam quis sem. Integer fermentum est nisl,
      eu finibus tellus gravida nec. Etiam egestas tincidunt justo, et auctor tellus interdum sed. Sed in orci id metus sollicitudin accumsan at ut neque. Ut lacinia ultrices justo, ac dictum sapien luctus non. Etiam blandit congue accumsan.</P>

    <P>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/sample-image.jpg" />
      <h2>Subgroup title</h2> Nullam nulla ante, eleifend at lectus id, ultrices vehicula lorem. Pellentesque vel tempor massa. Praesent pulvinar sem ultricies nibh tincidunt tincidunt. Vestibulum sapien mauris, porta in semper sit amet, fermentum vel elit. Nullam sapien magna,
      faucibus eu elit eu, congue suscipit est. Sed vitae gravida turpis, pretium finibus ex. Suspendisse lacinia condimentum erat, id condimentum erat molestie et. In rutrum luctus condimentum. Sed lacinia congue neque eget suscipit. Integer sed massa
      luctus, efficitur ante et, sagittis est. Cras efficitur neque sed libero euismod cursus. Phasellus ac tincidunt metus. Fusce et turpis nisl. Ut in mattis ipsum. Donec ornare pharetra neque.</P>


  </div>



  <div class="right-column">
    <P>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/sample-image.jpg" />
      <h2>Subgroup title</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id erat ultrices metus ornare elementum vel vitae odio. Vivamus feugiat eros sit amet aliquet efficitur. Vestibulum massa ligula, ullamcorper vitae malesuada et, viverra nec metus. Integer
      at felis non odio interdum finibus sed ac purus. Vestibulum gravida lorem a augue faucibus, eget auctor lorem porta. Fusce vitae nibh laoreet, ultrices orci cursus, suscipit diam. Praesent vestibulum tellus ornare, gravida diam vel, sodales elit.
      Sed lacus augue, pulvinar vel ornare vel, molestie nec diam. Sed vestibulum sed odio in vulputate. Suspendisse ut lacus sit amet dui porttitor convallis. Vestibulum mattis laoreet nulla luctus facilisis. Nunc efficitur ligula sagittis lectus commodo
      molestie. Maecenas fringilla ipsum at est venenatis suscipit. Suspendisse quis pellentesque ligula. Sed quis ante nulla.</P>

    <P>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/sample-image.jpg" />
      <h2>Subgroup title</h2> Nullam euismod bibendum eleifend. Aliquam pulvinar rhoncus elit et ullamcorper. Proin vel nisl ligula. Quisque pellentesque, ipsum sollicitudin finibus faucibus, massa orci luctus purus, sed interdum odio leo ut dui. Phasellus a mi non tellus faucibus
      mattis. Morbi iaculis ac lorem lobortis elementum. Nunc sagittis libero et orci consequat iaculis. Duis magna arcu, consequat vel mollis non, elementum nec lacus. Etiam commodo in arcu sit amet ultrices. Sed massa magna, luctus in lacinia vel, congue
      a elit. Integer lacinia ornare ligula, ut ultricies metus elementum ut. Quisque placerat arcu id metus congue egestas. Curabitur mollis sem vel tortor convallis consectetur.</P>

    <P>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/sample-image.jpg" />
      <h2>Subgroup title</h2> Curabitur rhoncus tellus a pulvinar consequat. In sagittis gravida erat, id finibus est molestie non. Mauris dignissim pretium elementum. Sed a arcu vel lectus facilisis viverra. Vestibulum faucibus risus nec lorem scelerisque eleifend. Donec et
      consectetur tellus. Vestibulum in dictum ligula, ut commodo quam. In in justo a nisl pretium faucibus non sit amet lacus. Morbi pharetra vestibulum tristique. Sed sem lorem, egestas a pharetra quis, aliquam quis sem. Integer fermentum est nisl,
      eu finibus tellus gravida nec. Etiam egestas tincidunt justo, et auctor tellus interdum sed. Sed in orci id metus sollicitudin accumsan at ut neque. Ut lacinia ultrices justo, ac dictum sapien luctus non. Etiam blandit congue accumsan.</P>

    <P>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/sample-image.jpg" />
      <h2>Subgroup title</h2> Nullam nulla ante, eleifend at lectus id, ultrices vehicula lorem. Pellentesque vel tempor massa. Praesent pulvinar sem ultricies nibh tincidunt tincidunt. Vestibulum sapien mauris, porta in semper sit amet, fermentum vel elit. Nullam sapien magna,
      faucibus eu elit eu, congue suscipit est. Sed vitae gravida turpis, pretium finibus ex. Suspendisse lacinia condimentum erat, id condimentum erat molestie et. In rutrum luctus condimentum. Sed lacinia congue neque eget suscipit. Integer sed massa
      luctus, efficitur ante et, sagittis est. Cras efficitur neque sed libero euismod cursus. Phasellus ac tincidunt metus. Fusce et turpis nisl. Ut in mattis ipsum. Donec ornare pharetra neque.</P>


  </div>

That's invalid HTML. `
` tags can't contains `` tags. Most good browsers will attempt to correct that and close the paragraph before the opening heading element. Inspect your code and you'll see. — j08691, Apr 09 '15 at 13:12
@j08691 is that actually in the specification? It makes sense, but I've never heard of it before :O — m0meni, Apr 09 '15 at 13:14
Read this: http://stackoverflow.com/questions/15656785/should-a-heading-be-inside-or-outside-a-p/ — dowomenfart, Apr 09 '15 at 13:14
Assuming this is HTML5, it's not strictly invalid: a `
` tag is implicitly closed when a block level element is encountered. (The extraneous `
` tags do make it invalid though.) @AR7 This is well described in the specs. — JJJ, Apr 09 '15 at 13:16

score 2 · Answer 1 · answered Apr 09 '15 at 13:14

2

p elements can contain phrasing content only.

If you look at the console log for this Snippet, you'll see "This is a" only:

console.log(document.querySelector('p').innerHTML);

<p>This is a <h2>test</h2>.</p>

answered Apr 09 '15 at 13:14

Rick Hitchcock

35,202
5
48
79

score 0 · Answer 2 · answered Apr 09 '15 at 13:25

If you read this article https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p you see that an h2 tag isn't allowed inside a p tag. In fact if you inspect the HTML with a browser you can see that the p tag is closed just before the h2 element. Try changing the paragraphs with DIVs

MCHAppy · Answer 3 · 2015-04-09T13:55:51.900

0

You're misusing the header tags. Actually, according to the W3C, the P element can only contain other elements as listed here: Phrasing Elements.

This is something that search engines (especially Google) frown upon. It wouldn't be the most blatant black hat technique, but the feeling is that nothing should be subversive on your page, e.g. a header should be a header, not part of your paragraph.

edited Apr 09 '15 at 13:55

answered Apr 09 '15 at 13:26

MCHAppy

1,012
9
15

Since the end tag for p elements is optional, having an h2 there is perfectly valid. The end tag for the p element is invalid and will be silently dropped. – Quentin Apr 09 '15 at 13:37
@Quentin If we add some text before `
`, then `
test
Subgroup title
Nullam euismod bibendum eleifend... `, now `` can't be dropped ?? – MCHAppy Apr 09 '15 at 13:41

h2 tag style is interfering with other styles

3 Answers3

`, then `

Subgroup title