SPECIAL TOPICS > Website Building - Best Practices
H1 & H2
Ed:
What are H1 and H2 meta tags? How do they differ from keywords, page descriptions, and other tags?
Samrc:
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: ---<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>
--- End code ---
--- Code: ---<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>
--- End code ---
Ed:
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.
Samrc:
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
--- End quote ---
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: ---<h1>Dragonflies of North America</h1>
--- End code ---
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: ---<|<h1>Dragonflies of North America</h1>|>
--- End code ---
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⟁
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
Ed:
Very good examples. Thanks.
Sami, I loaded the 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:
Navigation
[0] Message Index
[#] Next page
Go to full version