Which Is More Correct: <H1><A>...</A></H1> or <A><H1>...</H1></A>

Which is more correct: h1 a ... /a /h1 OR a h1 ... /h1 /a

Both versions are correct. The biggest difference between them is that in the case of <h1><a>..</a></h1> only the text in the title will be clickable.

If you put the <a> around the <h1> and the css display property is block (which it is by default) the entire block (the height of the <h1> and 100% of the width of the container the <h1> resides in) will be clickable.

Historically you could not put a block element inside of an inline element, but this is no longer the case with HTML5. I would think that the <h1><a>..</a></h1> approach is more conventional though.

In the case where you want to put an anchor on the header, a better approach than <a id="my-anchor"><h1>..</h1></a> would be to use either the id or the name attribute like this: <h1 id="my-anchor">..</h1> or <h1 name="my-anchor">..</h1>

h1 inside or outside of a ?

As w3 describes the markup A:

An anchor is a piece of text which marks the beginning and/or the end
of a hypertext link.
The text between the opening tag and the closing tag is either the
start or destination (or both) of a link. Attributes of the anchor tag
are as follows.

This means both are correct, and they don't have the exact same effect. So it depends on what you want to make a hyperlink, in case you surround the entire <h1> you need to put it as a parent. This will make the entire block clickable, including the space to the right:

<a href="#"><h1 style="background-color: yellow">Anchor for entire title</h1></a>

The 'h1' tag is not changing its font size despite a value in CSS

Nenad Milosavljevic's answer is right, and I am just adding an explanation.

You might be having a CSS file in your HTML file which is overriding your internal CSS. To override that one, you need to put !important to your properties.

h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 4rem !important;
    Line-height: 1.5;
}

How to center a html.H1 in Dash Plotly

Dash is generating HTML and CSS. You can see the code it produced by right clicking on the heading in your page and using 'Inspect'.

As an example, it turned 'fontSize' into CSS property 'font-size'. The CSS property to position a line of text is 'text-align' (examples). So following the same pattern, when using the 'html' method, you could refer to CSS documentation and convert the dash separated properties into camelCase when setting them in the style dictionary. Then dash will convert it back to a CSS property when rendering.

app.layout = html.Div([       
    html.H1('Hello Dash', style={'textAlign': 'center'})
])

Produces this HTML with inline CSS:

<div>
  <h1 style="text-align: center;">Hello Dash</h1>
</div>

See dash layout docs ('More about HTML' section)

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.

Same font size for h1 and h2 in article

This is by design for <h1> tag to be behave like this i.e. size reduce specially for <article>, <aside>, <nav>, <section> and it will keep on decreasing as structure will become more deep i.e. <article> inside <article> inside <article> then size at each level will reduce.

Below is demo:

<!DOCTYPE html><html>
<head>  <title>Headings</title>  <meta charset="utf-8"></head>
<body>  <span>Default</span>  <h1>This is h1.</h1>  <h2>This is h2.</h2>  <h3>This is h3.</h3>  <h4>This is h4.</h4>  <h5>This is h5.</h5>  <h6>This is h6.</h6>  <hr>  <article>    <span>One level inside article tag</span>
    <h1>This is h1.</h1>    <h2>This is h2.</h2>    <h3>This is h3.</h3>    <h4>This is h4.</h4>    <h5>This is h5.</h5>    <h6>This is h6.</h6>    <hr>    <article>      <span>Two level inside article tag</span>
      <h1>This is h1.</h1>      <h2>This is h2.</h2>      <h3>This is h3.</h3>      <h4>This is h4.</h4>      <h5>This is h5.</h5>      <h6>This is h6.</h6>      <hr>      <article>        <span>Three level inside article tag</span>
        <h1>This is h1.</h1>        <h2>This is h2.</h2>        <h3>This is h3.</h3>        <h4>This is h4.</h4>        <h5>This is h5.</h5>        <h6>This is h6.</h6>        <hr>      </article>    </article>
  </article></body>
</html>

Two lines in h1 tag

Using:

<h1>Line 1 <br/> Line 2</h1>

Center H1 title on a banner

You may easily do this by using flex. It allows us to perfectly align the content of elements as per our wish

.banner{
    position: relative;
    height: 25vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.50)), url("banner3.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner h1{
    color: white;
    font-weight: bold;
}

This will create perfect vertical and horizontal alignment to center;

Which Is More Correct: <H1><A>...</A></H1> or <A><H1>...</H1></A>