Samisite Webmaster Community Forum

SPECIAL TOPICS => Website Building - Best Practices => Topic started by: Ed on May 17, 2010, 08:24:50 AM

Title: H1 & H2
Post by: hidden on May 17, 2010, 08:24:50 AM
What are H1 and H2 meta tags? How do they differ from keywords, page descriptions, and other tags?
Title: Re: H1 & H2
Post by: hidden on May 17, 2010, 09:59:17 AM
H1, H2, H3, H4, H5, H6 are NOT meta tags.
They are HEADERS, and are put into the body of the web page.

Headers are readable by humans and search engines.Like an outline, headers help to divide and separate sections of the page and give quick reference to the search engine about content  There is only one H1 on a page, but may be more than one of each of the other levels.

H1 is usually the main statement, the main page definition about the web page and should not be used as a welcome statement. Define the topic of the web page and include your most important keyword in the header phrase.  This statement is given more importance than any other statement on the page by the search engines. H1 mimics or supports the <TITLE> tag.

H2 is usually the section title describing the individual topic

H3 is usually the Paragraph title describing the individual paragraph

Example:  You have a page that describes Meta Tags and Keywords
H1 would be something like "Learn to Create useful Meta Tags and Keywords for your website"
H2 would be "All sites need these Meta Tags"
H2 would be "These Meta Tags have been depreciated and can be skipped"


To put a real world picture in your mind to help explain:
- the H1 would be the main bold text of the newspaper headline.
- H2 would be the header/title lines for each of the main stories.

They are NOT required. But are recommended.


Bigger example:  Take this outline of web page and turn it into HTML using header codes.

Dragonflies of North America
1. Regions
...A) North East
...B) South East
...C) Central
...D) North West
...E) South West
2. Life Cycle
3. Gallery

Would look like this in HTML:
Use CSS to define the LOOK of the headers. 
H1 is biggest, H6 is smallest.
Code: [Select]
<STYLE TYPE="text/css">
H1 {font-family: Verdana,Arial,Times New Roman; font-size: 12pt; color: black}
H2 {font-family: Verdana,Arial,Times New Roman; font-size: 10pt; color: black}
H3 {font-family: Verdana,Arial,Times New Roman; font-size: 9pt; color: black}
</STYLE>

Code: [Select]
<h1>Dragonflies of North America</h1>
<p>paragraph text here...blah blah blah</p>
<h2>Regions</h2>
<p>text about regions</p>

...<h3>North East</h3>
...<p>text about species found in North East</p>

...<h3>South East</h3>
...<p>text about species found in South East</p>

...<h3>Central</h3>
...<p>text about species found in Central</p>

...<h3>North West</h3>
...<p>text about species found in North West</p>

...<h3>South West</h3>
...<p>text about species found in South West</p>

<h2>Life Cycle</h2>
<p>text about life cycle of dragonflies</p>

<h2>Gallery</h2>
<p>text about gallery, how images were taken, where...</p>


Title: Re: H1 & H2
Post by: hidden on May 17, 2010, 03:58:17 PM
Sami, thanks for your reply.  :TUP:

Will CSB automatically create e.g. a H1 header if text is bolded?
If CSB does not, and I don't have a program to create CSS, I suppose editing each page's HTML manually is the only way.
Title: Re: H1 & H2
Post by: hidden on May 17, 2010, 09:29:38 PM
Using the FORMAT > STYLES options, you can create different repeating styles for quick application of color/bold/size consistency from page to page. That style options box even lists Header 1, 2  3 but they do not publish with H1, H2, H3 tags.

Quote
I don't have a program to create CSS
You have notepad. That's all that is needed!

But actually, you can just include the css in the top of the page using insert HTML box.  Then where you want to implement the actual header, just insert your code into your page. We do that all the time for some scripts you just didn't realize it. Take a look at this page describing different kinds of links that can be defined with css way from way back: http://www.samisite.com/test-csb2nf/id42.htm

2 ways to insert code into your web page:
1) insert HTML box
Code: [Select]
<h1>Dragonflies of North America</h1>2) PASS THRU method.  Place the code on a line of its own directly on your web page, with <| before it and |> after it  with no spaces between the < and the | like this:
Code: [Select]
<|<h1>Dragonflies of North America</h1>|>  

 
Using external css:
Take a look at this lovely sample posted on the GSF back in 2006.
http://forums.globalscape.com/tm.aspx?m=10051&mpage=1&key=external%2ccss&#10177
He even supplies the css and tlx design file for you to view and play with, along with some valuable notes on his post!
Check out his lovely csb built site here: http://www.ecoterr.com/index.html


Title: Re: H1 & H2
Post by: hidden on May 21, 2010, 08:58:19 AM
Very good examples. Thanks.

Sami, I loaded the http://www.ecoterr.com/index.html (http://www.ecoterr.com/index.html) page, and must let you know that the page elements are not aligned in my browser. I can also not right click which seems to have been disabled. It looks like to me that there are 2 tables, the heading table with the turning globe and another table below. The heading is about half an inch to the left and thus looks awkward. Tried Firefox and Safari.

Thanks for info.  :TUP:

Title: Re: H1 & H2
Post by: hidden on May 21, 2010, 02:08:34 PM
lol...  How about looking at plain ol' IE?
That site is plain CSB with centered tables. renders fine in IE but probably need to be tweaked.
FYI...He's not using external css on that particular site.




 :offtopic:
Check out the GOOGLE logo today...it's PAC MAN... 30th anniversary




Title: Re: H1 & H2
Post by: hidden on May 21, 2010, 04:07:41 PM
Hi Sami,

It does the same on IE8. Maybe it is the wide screen resolution.

Yes, I was surprised when Pacman started playing its sound.
Title: Re: H1 & H2
Post by: hidden on May 22, 2010, 09:34:22 AM
could be. I have reg 1024*768 on both my monitors
Title: Re: H1 & H2
Post by: hidden on July 03, 2014, 06:35:53 PM
What i don't understand is why Simple Machine Forum (SMF) don't have any h1 and h2 tag at all knowing how search engines valued those tags.
Have searched on how to add h1 and h2 tag on smf but still don't find positive answers, but the truth is that smf should do something about it or is it because is a free forum software?
Title: Re: H1 & H2
Post by: hidden on July 04, 2014, 10:45:38 AM
Welcome to the forum.

I don't think SMF and other forums need H1 and H2 tags since they are forum posts that already have searchable titles and are not just paragraphs on pages like plain HTML web pages.