CODEWITHSUNDEEP
htmlcssseo
menardmam
menardmam

Reputation: 9986

h1 tag class (alternate)

I know that h1 tag is important for SEO, so all my title is H1 (bravo!)

Now, I need to have a title (as the first line of a text ) a little different on some pages.

Usually, I just duplicate h1 as h2 and alternate.

The question: Is it possible to add a class to the title tag... (I have try without success)

Upvotes: 8

Views: 134174

Answers (8)

David Spector
David Spector

Reputation: 1671

Consider the two selectors .myClass and h1.myClass when the HTML is <h1 class=myClass>...</h1>.

There is an important difference in how these two selectors work. I only realized this after years of using both as synonyms.

In the first case, the rules for .myClass take priority over any rules for h1. In the second case, the rules for h1 (if any) take priority over the rules in h1.myClass (unless they are marked !important). "Take priority" means that if the same property is in both rules, the rule that has priority applies. The other rule is ignored.

Upvotes: 0

user8925959
user8925959

Reputation: 1

<div class='row' id='content-wrapper'>
  <div class='clear'/>
  <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
  <div id='error-wrap'>
      <h1 class='error-item'>404</h1>
      <h2>Page Not Found!</h2>
      <p>Sorry, the page you were looking for in this blog does not exist.</p>
      <div class='clear'/>
    <a class='homepage' expr:href='data:blog.homepageUrl'><i class='fa fa-home'/> Go To Home</a>
  </div>

Upvotes: 0

Greg
Greg

Reputation: 321698

You can style a header like this:

h1 { color: red; }

Or like this:

<h1 class="fancy">Fancy</h1>

.fancy { font-family: fantasy; }

If it's not working:

  • Check you don't have an old stylesheet cached (ctrl-F5 to reload)
  • Check you don't have any rules overriding your class (inspecting with Firebug or similar is very helpful here).
  • Check for typos in the HTML and CSS

Edit:

It sounds like you had h1 .myClass instead of h1.myClass - there's an important distinction:

h1 .myClass { } /* any element with class="myClass" within an <h1> */
h1.myClass  { } /* any <h1> with class="myClass" */

Upvotes: 21

Guffa
Guffa

Reputation: 700432

It sounds like you are using h1 for all titles on the page. Typically you would have a single h1 tag on the page for what the page contains (with text at least partly matching the title of the page), and lesser header tags for headlines of different parts of the content. That way you give most information to the search engines about what's important on the page. There are of course pages that doesn't fit into this model, but many do.

There are many different ways that you can specify a style for headers. For example:

For all h1 tags:

h1 { font-weight: bold; }

For all h1 and h2 tags:

h1, h2 { margin: 10px; }

For all h1 tags inside an element with id="main":

#main h1 { background: #ccc; }

For all h2 tags with class="Info":

h2.Info { color: #000; }

For all h3 tags inside an element with class="More":

.More h3 { text-decoration: underline; }

Upvotes: 9

Gus Melo
Gus Melo

Reputation: 322

The following should work:

<html>
<head>
<style type="text/css">
h1.custom {
    color: red;
    font-size: 16px;
}
</style>
</head>
<body>

<h1 class="custom"> test </h1>
</body>
</html>

Upvotes: 1

Joseph
Joseph

Reputation: 25523

The < title > tag is in your < head > section, so it wouldn't really make sense to add a class to it.

You can add a class to your < h1 > tag, though.

<h1 class="title">

Upvotes: 0

Gumbo
Gumbo

Reputation: 655369

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.

Upvotes: 14

Asaph
Asaph

Reputation: 162811

You can add a class to an <h1> tag. Like this:

<h1 class="myclass"> ... </h1>

You can easily style it like this:

<style type="text/css">
.myclass { color : green }
</style>

Upvotes: 3

Related Questions