Why Can't I Use a Heading Tag Inside a P Tag and Style It with CSS

Is it valid to have paragraph elements inside of a heading tag in HTML5 (P inside H1)?

Actually, no. This markup is not correct according to W3C. You should avoid using this.

It is stated that the correct content for header elements is a "phrasing content", which is phrasing elements intermixed with normal character data.

In other words you can use the following convenient elements inside of a header tag in HTML5: a, em, strong, code, cite, span, br, img. See the full list here.

The W3C validator will give you the following error if you will try to validate this markup: Element p not allowed as child of element h1 in this context.

The one major drawback of using this markup that you should consider is that search engines can incorrectly parse your heading tag and miss important data. So this practice can be bad for SEO.

If you would like a better SEO results it is a good practice to include only textual data inside of a heading elements. But, if you also need to apply some styles, you can use the following markup and CSS:

<h1>
    <span class="major">Major part</span>
    <span class="minor">Minor part</span>
</h1>

<style type="text/css">
    h1 span {
        display: block;
    }
    h1 span.major {
        font-size: 50px;
        font-weight: bold;
    }
    h1 span.minor {
        font-size: 30px;
        font-style: italic;
    }
</style>

See the jsfiddle for this.

As stated before, span tag is perfectly valid inside of a header elements (h1-h6). And you can apply "display: block;" style to it to make it render as a block level element (each on a different line). It will save you a br tag.

Of course you will need to change this CSS selectors according to your use case.

And yes, as stUrb said it's not semantically correct to use paragraphs inside of a headings. The most important idea behind HTML is that it must be a semantics first, presentation later.

Should a heading be inside or outside a p?

It is impossible to put a heading element inside a p element in HTML markup, not just formally but because browsers implicitly terminate an open p element when they encounter a heading. So the question is meaningless: an element that cannot exist in a certain context cannot have any meaning (semantics) within that context.

Instead of using p to group text and headings together, you can use the div element or, with the usual caveats, HTML5 novelties like section and article.

Can't seem to put h1 tag on the same line as a p tag

You can align two block elements by using flexbox. Assign to your div which wrapped the h1 and p tag a class like for example .line.

.line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap:20px;
}

in you html

<body>
  <div class="line"> <!-- <<<<< add this class -->
    <h1> Dealer:<span id="dealer-sum"></span> </h1>
    <p>Balance: <span id="balanceAmt">50</span>$ </p>
  </div>

Small note to your code:
you use this in your tags: display="inline". that has no effects. if you want inline styling then you have write: style="display:inline;".

body {
    text-align: center;
    font-family: sans-serif;

}

.cards {
    height: 175px;
    width: 125px;
    margin: 1px;
}

.hitButton {
    width: 100px;
    height: 50px;
    font-size: 20px;
}
.resetButton {
    width: 125px;
    height: 50px;
    font-size: 20px;
}
.standButton {
    width: 100px;
    height: 50px;
    font-size: 20px;
}

.slidecontainer{
    text-align: center; 
}

.line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap:20px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>first js website</title>
  <link rel = "stylesheet" href="style.css"> 
  <script src="app.js"></script>
</head>
<body>
  <div class="line">
    <h1> Dealer:<span id="dealer-sum"></span> </h1>
    <p>Balance: <span id="balanceAmt">50</span>$ </p>
  </div>
  <div id="your-cards">  </div>
    <h1 class="center">Player:<span id="player-sum"></span></h1>
    <div class="slidecontainer">
      <p>You will bet: <span id="betAmt">0</span>$. Next round</p>
      <input type="range" min="0" max="100" value="0" class="slider" id="betSlider" oninput="updateSlider()">
    </div>
  <div>

    <br>
      <button class="hitButton" id="hitId" onclick="hit()">Hit</button>
      <button class="standButton" id="stanId" onclick="stand()">Stand</button>
      <button class="resetButton" id="resetId" onclick="resetGame()">Deal Cards</button>
  </div>
  <h1 id="result"></h1>
</body>
</html>

Why can't the p tag contain a div tag inside it?

An authoritative place to look for allowed containment relations is the HTML spec. See, for example, http://www.w3.org/TR/html4/sgml/dtd.html. It specifies which elements are block elements and which are inline. For those lists, search for the section marked "HTML content models".

For the P element, it specifies the following, which indicates that P elements are only allowed to contain inline elements.

<!ELEMENT P - O (%inline;)*            -- paragraph -->

This is consistent with http://www.w3.org/TR/html401/struct/text.html#h-9.3.1, which says that the P element "cannot contain block-level elements (including P itself)."

H1 tag and P tag on the same line?

So if you had:

<div id="containerIntro">
    <h1>Headline</h1>
    <p>And here the text right after...</p>
</div>

Your CSS would have to look something like this:

#containerIntro h1,
#containerIntro p {
    display: inline;
    vertical-align: top;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 28px;
}

See http://jsfiddle.net/F3Bcd/3/.

Using div inside p tag loses my styles

I'd like to suggest you to use a span instead of a div, div are block elements in the other hand spans are inline elements and fit better in the context you want to use it.

And as someone mentioned above, you have an extra ; inside the div's class

How do I put a p and an a tag inline in html?

Could you specify which elements in your example code you want inline?

Generally using display: inline and display: inline-block will make elements flow as if they were text. They will sit next to each other and jump to new lines when their container width gets too narrow. Browsers commonly apply display: block to <p> elements by default.

Assuming we are talking about the contents of your <header>, I added the following rule to your existing CSS. Check it out in action.

header p {
  display: inline-block;
}

EDIT: Based on further comments, here is a solution to what you are looking for.

First of all I've wrapped your menu items in a nav element and made your main title a h1 element. Search engines like this better. A h1 element is also displayed inline by default and respects text-align properties on its parent container (which in this case is header).

<h1>SaHa</h1>
<nav>
  <a href="#">Menu</a>
  <a href="#">Thing</a>
  <a href="#">Stuff</a>
</nav>

On the CSS side I've made two crucial changes.

First, I've center-aligned your header text. This centers the new h1 element. Additionally I've set position: relative because we will need it in the next step.

header {
  text-align: center;
  position: relative;
}

Second, to position your menu to the right side of the screen I've lifted it from the regular flow of content with position: absolute. Now, by specifying either a top or bottom and left or right, we can position the menu anywhere in the header. Why the header? Because it is the nearest parent to nav that has a relative position. This is why we set it earlier!

nav {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

Try changing the values for right and bottom in this Codepen example. Try changing right to left and see what happens. What happens if you remove position: relative from .header?