proper use and placement of <H1> tag...where and how?

[spewn]

i have decided to add the header tag(s) into my document...my question is where to put it?

i have this bit of html:

<td>mywebsite.com<img src=spacer.gif><span style='text-decoration:none;font-size:10;'>We have the best and baddest offers online!</span></td>

is this the proper use of the <H1> tag?

<td>mywebsite.com<img src=spacer.gif>[b]<h1 style='text-decoration:none;font-size:10;'>[/b]We have the best and baddest offers online![b]</h1>[/b]</td>

it seems to work, except that it adds lines above and below the header...so, if the above is okay, should i do this?

<td>[b]<h1>[/b]mywebsite.com<img src=spacer.gif><span style='text-decoration:none;font-size:10;'>We have the best and baddest offers online!</span>[b]</h1>[/b]</td>

also, how do i get rid of the top and bottom lines the header adds?

any ideas?

- g

 

[Vragabond]

Lets see. h1-h6 stands for headings. Is the text you mention heading? Then the usage is appropriate. If it is a smaller heading, maybe h2 or h3 should be used. It all depends on how your site is organized.

Every element can be restyled to bits and pieces with css. What you are doing is less beneficial than letting it be. By default, spans or h* elements do not have any text decoration, so specifying it again is just a waste of space and added confusion. As for the font size, you lack units. How is the browser to know if you want 10 pixels, 10 inches, 10 points or maybe 10 ems. It can't and that leads to inconsistent results.

Finally, spans and divs are inline and block level elements (respectivelly) that have no styling applied to them by default. And they have no meaning -- one is a text selector, the other is a division maker. Other html elements have semantic meaning to them: headings (h*) are for titles, paragraphs hold text, tables hold tabular data, forms hold form controls etc. All these elements have a certain style by default that can be altered via css. For headings it is margins on top and bottom. If you add margin: 0; to your style of heading elements, the margins should go away.

Hope this helps.

 

[Foamcow]

Try

<h1>We have the best and baddest offers online!</h1>

Then using CSS (as you have partially done) make that <h1> tag look and behave as you want it to.

So...

<h1 style="font-size:10px;line-height:10px;margin:10px 0 5px 0;padding:0;">We have the best and baddest offers online!</h1>

Might look something like how you want it. Better still, put the style rules into an external CSS file and apply them to your heading via dependencies.

You can use links within the <h1>.

<h1 style="font-size:10px;line-height:10px;margin:10px 0 5px 0;padding:0;"><a href="myPage.html" title="my page">We have the best and baddest offers online!</a></h1>

You may even use a <span> but you really don't need to in this case (at least going on what you show here).

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[spewn]

cool...got it. but should it be:

<h1><td><a></a></td></h1>

or

<td><h1><a></a></h1></td>

any ideas?

- g

 

[Vragabond]

Since element <td> must be direct child of the <tr> element and since <tr> element must have <td> (or <th>) as a child element, your first idea will not work. to add the <tr> to the effect:

<tr>
 <td><h1><a></a></h1></td>
</tr>