Why <h1> nested inside another <h1> is larger than the usual <h1> which isn't nested inside another <h1> in JSX

JavaScript
1 
function App() {
  const name = "john";
  const isNameShowing = false;
  return (
    <div className="App">
      <header className="App-header">
      {name}
        <h1>Hello, React!</h1>{" "}
        <h1> Hello {isNameShowing ? name : "someone else"}</h1>
        <h1>
          {isNameShowing ? (
            test
          ) : (
              <h1>test</h1>
              <h2>There is no name</h2>
          )}
        </h1>
      </header>
    </div>
  );
}

export default App;

The output for the above code is being displayed as below

image
image1130Ă—1190 18.9 KB

As you can see, the <h1>test</h1> <h2>There is no name</h2> which was nested inside another <h1> tag are larger in size than the <h1>Hello, React!</h1>{" "} <h1> Hello {isNameShowing ? name : "someone else"}</h1> where <h1> isn’t nested inside another <h1>

2
  • remove “outer” h1 element, otherwise its styling both as “h1” as you can see
  • also what is your expected outcome from this? what is it that you want from this “code snippet” say more

happy coding :slight_smile:

3

Why would you nest an h1 and an h2 inside an h1? That’s not semantic/necessary/desirable.

4

Agree with the above replies. Also, I think your test simply reveals that those tags are relative and not absolute. They increase the font by an amount, not set it to a specific value.

You can see the default values of H1 https://www.w3schools.com/tags/tag_hn.asp:

h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}

Using em is relative “1em is equal to the current font size.” https://www.w3schools.com/css/css_font_size.asp

So H1 will double the font size every time you nest it.

6

it’s not styling both as <h1>. The nested ones are larger than the usual <h> elements.

In the below image, the right one is when one is <h1> and the other is <h2>

The left one is when both are <h1>

imgonline-com-ua-twotoone-q6TvxcT8Fx
imgonline-com-ua-twotoone-q6TvxcT8Fx2671Ă—968 103 KB

I combined both into one image since FreeCodeCamp won’t allow me to upload two separate images as my account is new

I know putting an <h1> or <h2> inside another <h1> isn’t semantically correct. But my question is in this case when done so, why the nested (inside another <h1>) <h1> and <h2> are larger than the usual <h1> and <h2>

7

I know this was marked as solved and hopefully the answer makes sense. But I have a bit of an objection to how w3schools is wording this. I’m not sure “current font size” really explains it.

If we look at MDN instead it is better explained as relative to the parent font size.

MDN: CSS values and units

Unit Relative to
em Font size of the parent, in the case of typographical properties like font-size, and font size of the element itself, in the case of other properties like width.
rem Font size of the root element.