Best way to display the sitename

I've searched this forum (and others) for an answer to this question but have yet to find a good answer, so here goes:

I have a website built in HTML/CSS using a free template. However, it uses multiple H1 and H2 tags for the sitename and the site message/strapline. I would like to reserve the use of H1 and H2 tags for the content headers on the page. E.g.

Current website:

[h1]Widgets-R-Us[/h1] - Website/company name
[h2]Widgets are great[h2] - website strapline
[h1]Our widgets are the best ever[/h1] - website message
[h1]The new X1 widget outperforms X2 widget[h1] - content heading
[p]content content content [/p]

New website:

[?]Widgets-R-Us[?] - Website/company name
[?]Widgets are great[?] - website strapline
[?]Our widgets are the best ever[?] - website message
[h1]The new X1 widget outperforms X2 widget[h1] - content heading
[p]content content content [/p]



I want to use something other than H tags to display the website name, strapline and message. What is the best way to acheive this with HTML/CSS? Note that I am using text for the sitename rather than a gif/jpg logo.

Apologies if this seems like a dumb question, my experience with CSS is limited.

 

Update - I'm thinking that its maybe best to just put the sitename inside some [div] and [span] tags? It's a simple answer, but is it the best way?

 

To be honest, I'm not sure why you wouldn't want to use heading tags for the company name, and such. It's the best choice for both semantic markup and even SEO. The current Web site markup is on the right track, except that you should really only have one h1 tag, and then h2s and h3s for the rest of the content.

However, if you really don't want to use heading tags, then you could use <p> and/or <div> tags as you mentioned. You can then style the font properties in the CSS to control size, family (font type), line-height, and so on.

May not be much help, but hopefully it gives you a little info. Take care.

 

This is how I would lay out the webpage:

[h1]Widgets-R-Us[/h1] - Website/company name
[span]Widgets are great[span] - website strapline
[h2]Our widgets are the best ever[/h2] - website message
[h3]The new X1 widget outperforms X2 widget[/h3] - content heading
[p]content content content [/p]

I never go beyond three headings and only use one type of heading per page

When I write span, what I mean is something like this <p span="title">Title here</p>, the span is then used as a class - .title

 

You should pay attention to the hierarchy, to the structure. Let <h1> be for your header and then increase the number as you "go down". So:

<h1> - header
<h2> - post titles
<h3> - ...

Wish you good luck.

 

i culd'nt understand it

 

Thanks to everyone for the feedback and suggestions. I've decided to go with using div and span for website name and reserved the H1 tag for the content title, with H2 and H3 being used for the subheadings.

 

Example of span -

<p>This <span class="boldword"> elephant </span> is hightlighted</p>

So the css would read

.boldword {
font-weight : bold;
}

The word elephant would be bold but the rest of the sentence wouldn't be

It's a good way of playing around with text within a sentence or where ever

 

John:

I used to use h1's for company names, and sometimes still do. But you are correct to use the h1 for the name/title of the page.

Now on the index/landing page of a site, that often IS the company name. So here's something I've done (I'm doing it on the local fire dept site I'm building):

Main page uses h1's for the name, because the index page is Blah Fire Dept.
<h1>Blah Fire Dept</h1>

Sometimes even something like this (yes, it's legal and I think appropriate use of this tag):
<h1>Blah Fire Dept <small>Fighting fires and picking stupid cats out of trees since 1649</small></h1>



On all other pages, though, the h1 is whatever that page is: Youth Fire Brigade, Agenda, Corps Info, Contact, etc.

For the name then, I use a p.

<p id="name">Blah Fire Dept.</p>
<p id="tagline">Fighting fires and picking stupid cats out of trees since 1649</p>

I keep them in the same place etc, in the header.

h1, #name {
styles for the header text;
}
h1 small, #tagline {
display: block;
font-size: .7em;
font-style: italic;
text-indent: 2em;
}
(yeah the #tagline's already a block but it doesn't hurt, I'm saving a declaration by letting it sit with the small)

This has worked very well for me. I recommend the p over the div and span because a P really does refer to text with information whereas div and span are rather meaningless wrapping tags (as they are meant to be).