Is It Alright to Use Multiple H1 Tags on the Same Page, But Style Them Differently

Is it alright to use multiple h1 tags on the same page, but style them differently?

In my opinion, you don't need to worry, its ok to do it like this.

H1 designates part of your contents to be a first level heading. So if you have a first level heading in your navigation div (e.g. <H1>Navigation Menu</H1>), of course that should be #nav h1.

If you should have several H1s within your contents depends: If you have a blog and every entry has its own heading, those would be H1s. However, if your blog itself has a heading (e.g. <H1>My Blog!</H1>), the blog entry heading should be an H2.

But that is only theory. Go for what is readable, semantic markup. You can best decide on that by looking at your html and asking yourself: 'Is it readable? Would the readability improve if I did it the other way?' The answer will vary from project to project.

Two different styles in the same h1 tag

SEO-wise - each web page should contain one H1 tag.
A possible solution for what I believe you're trying to achieve is adding span tags in your H1 enabling you to style each part of your H1 differently:

HTML:

<h1>
  <span class="smallerFont">First half</span>
  <span class="bigFont">Second half</span>
</h1>

CSS:

h1 {
  color: #fff;
}

.smallerFont {
  font-size: 34px;
  margin-bottom: 10px;
}

.bigFont {
  font-size: 88px;
}

Use of H1 Class for other H tags

The primary purpose of heading tags when it comes to SEO is to indicate the most important content in a hierarchy (h1 tags indicating the most important content). However, the more of a certain heading tag you use, especially for h1 tags, the less weight they will carry in SEO.

That is why if you want big text, for say, a button, but the text is not relevant to your website, it is better to use or

and style it with CSS because giving the text an h1 tag would indicate that it is highly relevant to your website.

The CSS styling itself won't have any bearing on SEO, so to answer your question, no, having the h1 class for multiple h2 tags would not have any SEO implications and is actually the best move compared to using h1 tags instead of h2 to get the formatting you want.

Why is size of H1 different inside a section element?

JSFiddle.

It's just about the DOM structure.

because the different element has different default style to inherit.

This link form MDN.

<h1>Text A</h1>

<header>
     <h1>Text A</h1> 
</header>
<section>
    <header>
         <h1>Text A</h1>

    </header>
</section>
<article>
    <header>
         <h1>Text A</h1>
          <section>
              <header>
                  <h1>Text A</h1>
              </header>
          </section>
    </header>
</article>

whats the correct approach to this css

If this web page is part of a web site (and not a stand-alone document), you probably don't want to use h1 for the main content heading.

Even if you don't use the sectioning elements (section, article, aside, nav), your headings still create an outline. This outline should represent the structure of your page, similar to a ToC.

So let's think of a simple website with: a) site header, b) main content, c) site navigation

If you use h1 for the heading of your main content, the site-wide header and the site-wide navigation would be in the scope of this main content:

But this is not correct. "Privacy Policy" is part of "My cool website", not the other way around. And "Navigation" is not a sub-part of "Privacy Policy". So your outline should look like:

My cool website
1. Privacy Policy
2. Navigation

So the solution is: use h1 for your site-wide heading (typically the name of your company/project/person/etc.). All scopes of your page are "dominated" by this heading. This is what unites your pages to a site.

Note: if you would use sectioning elements, you could use h1 for each sectioning content.

whats the correct approach to this css

If this web page is part of a web site (and not a stand-alone document), you probably don't want to use h1 for the main content heading.

So let's think of a simple website with: a) site header, b) main content, c) site navigation

If you use h1 for the heading of your main content, the site-wide header and the site-wide navigation would be in the scope of this main content:

But this is not correct. "Privacy Policy" is part of "My cool website", not the other way around. And "Navigation" is not a sub-part of "Privacy Policy". So your outline should look like:

My cool website
1. Privacy Policy
2. Navigation

Note: if you would use sectioning elements, you could use h1 for each sectioning content.

How to write both h1 and h2 in the same line?

Keyword float:

<h1 style="text-align:left;float:left;">Title</h1> 
<h2 style="text-align:right;float:right;">Context</h2> 
<hr style="clear:both;"/>

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/.

Is It Alright to Use Multiple H1 Tags on the Same Page, But Style Them Differently