CODEWITHSUNDEEP
htmlcss
Bisu
Bisu

Reputation: 101

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

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>

Upvotes: 9

Views: 19568

Answers (5)

Geovanni Petty
Geovanni Petty

Reputation: 9

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.

Upvotes: -1

chrisv
chrisv

Reputation: 725

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?

Upvotes: 3

Mohamed
Mohamed

Reputation: 75

<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

Upvotes: 0

danwellman
danwellman

Reputation: 9253

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

Upvotes: 2

mtch9
mtch9

Reputation: 308

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.

Upvotes: 15

Related Questions