seo Question posted in
Some basic information to get you started with this can be found here.

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

What styles do I need to add to my heading classes to make any element behave like heading tags…

.h1, .h2, .h3, .h4, .h5, .h6 {
  // make akin to h tags
}

I might be using them on div or span or li etc… so need a fairly robust reset. I am thinking things like display: block; but don’t really know what the definitive set of required rules are.

Edit: clarification

Although already answered for me – I thought I would clarify my use case as I seem not to have articulated it well.

I need to change some h1, h2 etc… tags into div or span or li tags on a large site where I don’t control all of the HTML. I want the new tag, whatever it may be, to behave exactly like it did when it was a heading tag. It must work cross browser, and I was hoping for a definitive, one rule fits all solution that is easy to maintain and has no significant pitfalls (in terms of SEO and accessibility etc…).

Tags:

3

Answers


  1. 0

    Well the standard CSS rules are different per browser.

    More information in this answer:

    Browsers' default CSS for HTML elements

    Login or Signup to reply.
  2. 0

    As Bert Vermeire stated it’s different for each browser.

    That’s why it’s better to create some reboot/reset css file which contains the span.h1 to h6, p.h1 to h6, … (as for divs, not sure how you intended to use that) which cancels all margins, paddings, line-heights, font-weights, and so on.

    Here is a sample of one of my projects:

    h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: normal;
  line-height: 1.1;
  color: inherit;
  margin-bottom: 0.5rem !important;
  margin-top: 0 !important; }

h1,
.h1 {
  font-size: 2.5rem; }

h2,
.h2 {
  font-size: 2rem; }

h3,
.h3 {
  font-size: 1.75rem; }

h4,
.h4 {
  font-size: 1.5rem; }

h5,
.h5 {
  font-size: 1.25rem; }

h6,
.h6 {
  font-size: 1rem; }

    Be careful though, as rem sizes aren’t supported on every browser. Use em, px, … instead

    Login or Signup to reply.
  3. 0

    The properties can be:

    .h1, .h2, .h3, .h4, .h5, .h6 {
  display: block;
  font-size: 25px;
  font-weight: bold;
  margin: 10px 0 15px; /*the heading tag gets it by default but not the other tags*/
  color: #333333;
  border-bottom: 1px solid #848484; /*if your heading includes a bottom line*/
  padding: 0 0 0 30px; /*if your heading includes any icon on its left side*/
  text-align: center; /*if heading text needs to be center*/
  background-color: #ffffff;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search