confused to use h, p, span or div

i have no idea what to really do to be honest

[ezyid]

okey i understand h is for the heading right?
and span, p, div, are for the main content.
but due to my "noobyness" i have formatted my text using all h,
h1-h7 or whateva
i mean does it effect anything in anyway to do this? i mean its easy just to put a h1 for my heading a h2 for my content..
but one crazy thing i picked up is changing my td, as i put a script on my page and nothing would format the script unless i copyed what the actual website did and changed their whole td tags.
the script is an asp input and really i dont know how else to do it.

now back to my flufed up formatting here is some of what i have done.. is this just plane stupid or what i mean i kinda feel embarassed now :)

BODY { background-color: white }

td { font: normal 80% arial, verdana, helvetica, sans-serif; color: 000000; }

h1 { font: normal bold 115% arial, verdana, helvetica, sans-serif; color: #000000; }

h2 { font: normal bold 150% arial, verdana, helvetica, sans-serif; color: red; }

h3 { font: normal bold 100% arial, verdana, helvetica, sans-serif; color: 000000; text-align: left; }

h4 { font: normal 80% arial, verdana, helvetica, sans-serif; color: 000000; text-align: center; }

h5 { font: normal 65% arial, verdana, helvetica, sans-serif; color: 000000; text-align: center; }

h6 { font: normal 80% arial, verdana, helvetica, sans-serif; color: 000000; text-align: center; }

h7 { font: normal bold 100% arial, verdana, helvetica, sans-serif; color: 000000; text-align: left; }

#Mail { font-family: arial, verdana, helvetica, sans-serif; background: #FFFFFF color: 000000; font-size: 100%; }

.standardtext { font-family: arial, verdana, helvetica, sans-serif;
background: #FFFFFF color: 000000; font-size: 100%;}

a:link { color: #000000; }

a:visited { color: #000000; }

a:hover { background-color: #FFFFFF; color: #CCCCCC; }

a:active { color: #000000; }

h1, h2, h3 {display: inline;}

thankyou guys. i love the help i have been getting.. i realy feel that i should be paying you guys for this help!
i will pay for WebmasterWorld oneday for all the help you guys have given me!
steve.

[SuzyUK]

ezyid..

i mean does it effect anything in anyway to do this?

No not strictly speaking, but it may well be seen by SE's as "spammy" overuse of heading elements

You can use CSS to format any element in the same way as the styles you have set up for the heading elements at present

CSS can be used to format/target any HTML element so you can worry about the formatting later, don't write the HTML to suit the appearance, write the HTML first [w3schools.com], without formatting, if the page makes sense with no styling applied that's a good start! then add CSS to suit ;)

e.g. Think of a written (word) document

<h1>Main Page Heading here<h1>
<div class="article">
<h2>Article Heading here<h2>

<h3>Sub heading</h3>

<p>paragraphs of text..blah blah</p>
<p>paragraphs of text..blah blah</p>

<h4>List heading perhaps</h4>
<ul>

• <li>list item</li>
  
• <li>list item</li>
  
• <li>list item</li>

</ul>

<p class="hilite">more paragraphs of text in a different color perhaps</p>
</div>

<div id="footer"><p>some footer text here</p></div>

You can format all the h1, <p>, <ul> elements as required font size, weight, family, margins etc..

If you want to target just the <p> inside the article itself because you have wrapped a logical page divisions inside a div with the classname "article" you can differentiate those <p> elements from all the other <p>'s on the page

example:
plain <p> formatting = targets all <p> elements on the page:
p {font-size: 14px; color: #000;}

but to target the <p> elements inside the article division, say you want to make it a little smaller you would target it more specifically in the CSS:

div.article p {font-size: 12px;}

only targets <p> elements that have a div element with the classname "article" in their ancestry.

You can set the overall defaults in the main body, <p>, <td> rules then only change them where required by either wrapping a whole DIVision of text in a div, and targetting them like the CSS above (like article and footer in my pseudo example) or if you want to single out a particular line or singular element like [red]<p class="hilite"> you would then target it..

p.hilite {color: red;}

in the CSS which will only target <p> elements that explicity have the classname "hilite"

Classes and ID's
You would only use an ID once per page, e.g. a footer is something you only have once on a page so it is <div id="footer"> (CSS: div#footer} whereas you might have more than one article per page so you make that a class <div class="article"> {CSS: div.article}

That's a very quick overview ;) but simply put if you are writing a heading then use a heading element, if you are writing a paragraph, use a paragraph element, there are many ready made HTML elements [w3.org] and it's generally good practice to use the right one for the job if it's available.

<div> is a generic block level container, and should be used to wrap a logical division of a page: e.g. header, navigation, footer..

while <span> is a generic inline wrapper and if you use the other inline elements, <b> <em>, <strong>, <i> to their potential you shouldn't really need to use spans all that often..

Suzy