Why can't I use a heading tag inside a p tag and style it with CSS?

Question

Here is my code:

<html>
    <head>
        <style>
              div p h1 {
                  background-color: red;
              }
       </style>
    </head>
    <body>
        <div>
            <p><h1>hello2</h1></p> 
        </div>
    </body>
</html>

This is basic HTML (or any other markup language). You should separate the paragraph from the heading element. If you want to put a sub heading below your main heading, I suggest you do something like `
Main heading
Sub heading
` It's important to CLOSE the html elements before creating new ones. Unless it's a div, span or section, which is meant for gathering topically similar elements. A lot more could be said, but I suggest you read more about HTML and markup language. — chrisv, Aug 11 '16 at 09:10
but I can add a
tag inside tag, like
hello
, I thought reverse was also possible — Bisu, Aug 11 '16 at 09:28
Added a new answer with some more details and some good references / reading material for you (and for everyone else visiting this question)! Take a look, and I hope it helps. :) — chrisv, Aug 11 '16 at 12:13

score 14 · Answer 1 · answered Aug 11 '16 at 09:09

14

I think thats why:

The <p> tag can only contain inline elements. The header tags are block-level elements, and cannot go inside <p> tags even when you style them to display inline.

answered Aug 11 '16 at 09:09

mtch9

298
2
11

but I can do something like
h1
– Bisu Aug 11 '16 at 09:32
1

Actually you can't. According to the: https://www.w3.org/TR/html-markup/h1.html#h1 You can only use [Phrasing elements](https://www.w3.org/TR/html-markup/common-models.html#common.elem.phrasing) inside h tags – mtch9 Aug 11 '16 at 09:35

score 3 · Answer 2 · edited May 23 '17 at 12:01

This is basic HTML (or any other markup language). You should separate the paragraph, <p></p> from the heading, <h1></h1> element.

If you want to put a sub heading below your main heading, I suggest you do something like

<div>
    <h1>Main heading</h1>
    <h2>Smaller heading</h2>
    <p>Some information or a quote</p>
</div>

It's important to CLOSE the html elements before creating new ones. Unless it's a div, span or section which is meant for gathering topically similar elements.

A lot more could be said, but I suggest you get ahead and read more about HTML and markup language. A good place to start is http://www.w3schools.com/html/html_basic.asp and http://www.w3schools.com/html/html_elements.asp …

If you specifically wonder what elements can be nested inside a paragraph check out the answer on this question: List of HTML5 elements that can be nested inside P element?

Closing `` tags are completely optional. It's not important to close them. The spec says that they are implicitly closed whenever a new block-element is opened. — recursive, Sep 12 '16 at 20:27
That's true, but since he/she is still in the semantic syntax phase of HTML, I thought it was best to keep it out from the answer. It's still best practice to close all elements even though browsers will display it correctly, so I would still recommend OP to close the paragraph. ;) — chrisv, Sep 13 '16 at 06:56

score 0 · Answer 3 · answered Aug 11 '16 at 09:11

Having a H1 element inside a p element is invalid mark-up. When the browser encounters this mark-up, it tries to fix it automatically by moving the H1 outside of the p. Once this has occurred, the selector no longer matches anything.

Use the W3C markup validator to ensure the validity of your document

score 0 · Answer 4 · edited Sep 12 '16 at 20:20

0

<div>
   <h1>hello2</h1>
   <p>im the best</p> 
</div>

Because your header is like the title of an article - you don't put the title in a paragraph. Using the <p> tags, you're just writing the content for the article, so you wont be able to style a header tag in a p tag as you will most likely be styling your header and content differently

edited Sep 12 '16 at 20:20

danwellman

9,068
8
60
88

answered Aug 11 '16 at 09:13

Mohamed

75
8

score -1 · Answer 5 · answered May 25 '18 at 13:08

If you are having issue with HTML Structure See the Lynda HTML5 course really worth Your Time It Clarifies how to structure your document. Along with reasons why. You will have a better understanding of What is Style and what is structure which most people struggle with I would include myself.

Also has links to the official web standards "World Wide Web Consortium", Yes I know it's a paid for service but it help me avoid or understand why HTML and CSS react the way it does when you move element in to invalid place.

Understand that h1-h6 Tag are not meant for styling as I previously thought from my earlier days in HTML. Yes we used them because it seemed to make since or easyer to target with CSS. But the h1-h6 are more to structure of importance off the section or content on the page. I would use a div if it's or a span or Bold tag.

Great resource is developer.mozilla.org

https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure Here is a good example: Of structure from the link above!

<body>
     <!-- Main header used across all the pages website -->
        <header>
          <h1>Header</h1>
        </header>
        <nav>
          <ul>
            <li><a href="#">Home</a></li>
          </ul>
           <form>
             <input type="search" name="q" placeholder="Search query">
             <input type="submit" value="Go!">
           </form>
         </nav>
        <!-- Here is our page's main content -->
        <main>
          <!-- It contains an article -->
          
          <article>

<!-----------***** As you can see the h1-h6 is for structure not style****** -->
            <h2>Article heading              Rank2</h2>
              <p>This is Paragraph</p>

                <h3>subsection               Rank3</h3>
                   <p>This is Paragraph </p>
                   <p>This is Paragraph </p>

                    <h4>Another subsection   Ranked</h4>
                       <p>This is Paragraph </p>

                <h3>Another subsection       Ranked</h3>
                   <p>This is Paragraph </p>
                   <p>This is Paragraph </p>
          </article>
          <aside>
            <h2>Related</h2>

            <ul>
              <li><a href="#">beside the seaside</a></li>
              <li><a href="#">beside the sea</a></li>
            </ul>
          </aside>

        </main>

        <!-- main footer that is used across all the pages of site -->

        <footer>
          <p>©Copyright 2050 by nobody. All rights reversed.</p>
        </footer>

But really Check out the Lynda HTML 5 Essentials Tutorials! When a document it's structured correctly it's readable and more applications and devices. Like Readers.

Why can't I use a heading tag inside a p tag and style it with CSS?

Main heading

5 Answers5

Linked

Related