H1 Tag Class (Alternate)

h1 tag class (alternate)

Sure you can:

<h1 class="someclass">…</h1>

The class attribute is a in the attribute group coreattrs of core attributes that can be used with the h1 element.

Style `.h1` class to be like `h1` tag

Well the standard CSS rules are different per browser.

alternative to h1 element?

You should use a semantic image replacement method: Which makes for the most elaborate design (images, colors ect.. the graphic is your oyster) as well as being completely semantic and accessible.

Otherwise as mentioned above, you can add any element that is an inline element: A, SPAN, ect... inside of your H1... but I would shy away from this if you are interested in semantics and being SEO friendly.:

<style>
  h1{
    background:    url('../path/to/image/image_to_replace_header.jpg') no-repeat top left;  // Sets the BG that will replace your header
    text-indent:   -9999px;  //  Moves the test off screen
    overflow:      hidden;   //  Hides the staggered text for good
    width:         300px;    //  Sets width of block(header)
    height:        100px;    //  Sets height of block(header)
  }  
</style>

<h1>My Awesome Site</h1>

Now your text is still technically there, but you have a pretty photo in its place. Sighted, non sighted, and robot friendly.

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;
}

Alternate character colors in the text of my h1 elements

You can do this with tags. Imagine you have a paragraph

<p> 
    <span class="one">H</span> 
    <span class="one">E</span> 
    <span class="one">l</span>
    <span class="one">l</span>
    <span class="one">o</span>
</p>

In CSS, does a space between a html tag and a class name mean the style is applied to any element within that tag?

Yes, but vertical margin styles won't work on an inline element like <strong>. http://www.w3.org/TR/CSS21/box.html#propdef-margin-top

So your CSS selector will target the correct element but the style you applied will have no effect.

For that to work you can try:

<style>
    h3 .h3nobtmgn {
        display: block;
        margin-bottom:-20px;
    }
</style>

<h3><strong class="h3nobtmgn">Why would I need or want this item?</strong></h3>

Replacing Heading ( h1 , h2 ...) Tags with p Tags and Classes

$content = <<<HTML
<h1 class="heading-title">test1</h1>
<H2 class="green">test2</H2>
<h5 class="red">test</h5>
<h5 class="">test test</h5>
HTML;

$content = preg_replace('#<h([1-6]).*?class="(.*?)".*?>(.*?)<\/h[1-6]>#si', '<p class="heading-${1} ${2}">${3}</p>', $content);

echo htmlentities($content);

Result:

<p class="heading-1 heading-title">test1</p> 
<p class="heading-2 green">test2</p> 
<p class="heading-5 red">test</p> 
<p class="heading-5 ">test test</p>

Note for existing classes:
Even if your element doesn't have an existing class you have to add empty class attribute class="". Instead this will not work as expected. :( Better solution is to use preg_replace_callback. Then you can check if a match exists and create your p tags more accurately.

Why use .h1 instead of actual h1?

You ask:

Why use .h1 instead of actual h1?

Short answer:

The goal is to use both, together.

The usefulness of the .h* classes comes into play when the size of the typography in the design does not correlate with the semantically appropriate heading levels. By splitting the problem in two, we can cleanly solve for both.

The first bit is the element/tag. The '<h*>' takes care of semantics, accessibility and SEO.

The second bit is the class. The '.h*' takes care of visual semantics and typographical hierarchy.

Long answer:

I believe that the origins of these classes come from OOCSS project:

Object-Oriented CSS

The latest iteration of OOCSS has changed a little since I last looked at it, but here's the relevant heading.css file, from an older commit, that has the .h1 - .h6 classes that I'm familiar with:

6e481bc18f oocss / core / heading / heading.css

From the comments:

.h1-.h6 classes should be used to maintain the semantically appropriate heading levels - NOT for use on non-headings

...

if additional headings are needed they should be created via additional classes, never via location dependant styling

Note the emphasis above.

For a good explanation as to why one would use these classes, see:

stubbornella.org: Don’t Style Headings Using HTML5 Sections (Nicole, the author of this post, is the creator of OOCSS)
csswizardry.com: Pragmatic, practical font sizing in CSS
Google Groups › Object Oriented CSS › Headings question: Basic concept/usage? (A question I asked back in September of '12)

Relevant quotes from the above links:

1. stubbornella.org

... [HTML5] Section elements are meant to help the browser figure out what level the heading really is, but not necessarily to decide how to style it.
So, how do we style headings in an HTML5 world?
... We shouldn’t use sectioning elements for styling. We should let them do the job they were designed for, which is sorting out the document tree, and solve styling issues another way that meets our goals better: with simple reusable class names that can be applied to any of our headings no matter how deep they may be in the sectioning content.
I recommend abstracting site wide headings into classes because then they are portable, predictable, and dry. You can call them anything you like.

2. csswizardry.com

Another absolutely stellar nugget of wisdom [Nicole Sullivan has] given us is what I call double-stranded heading hierarchy. This is the practice of defining a class every time you define a heading in CSS.
... By assigning a class along with each heading style we now have those styles attached to a very flexible selector that can be moved anywhere, rather than to a very specific and non-movable one.

3. groups.google.com

Here's a pseudo-html5 usage example (h/t Jamund Ferguson):

<body>
    <div class="main">
        <h1>Main Heading</h1>
        <section>
            <h1 class="h2">Section Header</h1>
        </section>
    </div>
    <aside class="side">
        <article class="widget">
            <h1 class="h3">Sidebar Headings</h1>
        </article>
        <article class="widget">
            <h1 class="h3">Sidebar Headings</h1>
        </article>
    </aside>
</body>

Please read full articles (and thread), via links above, for more detailed information related to this question/topic.

Dilemma in deciding how to create CSS for H1, H2, H3 etc

To me resetting seems wasteful. There must be a clean way to apply the /* lots of style attributes */ to the h1 tags you want it applied to while not having it apply to the h1 within a .titledimage.

Say you had:

<div class="top"><h1>PageName</h1></div>
<div class="leftNavigation"><h1>Cat1</h1><h1>Cat2</h1><h1>Cat3</h1></div>
<div class="rightMarginNote"><h1>Username</h1></div>
<div class="content">
 <h1>CONTENT</h1>
 <div class="titledimage">
  <h1>title</h1>
 </div>
</div>

Then you'd want your CSS a little like:

.top h1, .leftNavigation h1, .rightMarginNote h1, .content > h1 {
  /* lots of style attributes */
}
.similarly h2 { /* lots of style attributes */ }
.similarly h3 { /* lots of style attributes */ }
.titledimage h1 { color:red; bottom-border: 1px solid blue; }

Instead of the alternative

h1 { /* lots of style attributes */ }
h2 { /* lots of style attributes */ }
h3 { /* lots of style attributes */ }
.titledimage h1, .otherCase h1, .anotherCase h1, yetAnotherCase h1 {
  /* lots of style backtracking */
}
.titledimage h1 { color:red; bottom-border: 1px solid blue; }
.otherCase h1 { color:blue; bottom-border: 1px solid blue; }
.anotherCase h1 { color:green; bottom-border: 1px solid blue; }
.yetAnotherCase h1 { color:mauve; bottom-border: 1px solid blue; }

Also group as much of that H1-H5 stuff together as possible, and if you must go with the alernative define a class specifically for the resetting that is applied not to the h1 but to the containing div of any class.

<div class="titledimage hReset"><h1>title</h1></div>

H1 Tag Class (Alternate)