What are H1, H2 & so on in web design?

They have: 3 posts

Joined: Dec 2008

Sorry for the stupid question, but I notice that we talk about a lot about the importance of have the right words or title in H1 or H2. What exactly does this mean what is the relevance of it? I’m trying to build my own web site but don’t have much experience in the field.

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

They are html tags to format the enclosed content (text usually) according to Header 1 and Header 2 style rules (there are 6 headers available in standard html with 1 the largest and 6 the smallest).

The tags have a default style assigned in the web browser that renders the web page, and they can be customized with css

The h1 and h2 tags are important for SEO

http://www.w3schools.com/html/html_headings.asp

http://www.google.com/search?hl=en&q=h1+and+seo

Title is the document title as displayed at the top of the browser window, also crucial for SEO. Title can be a static tag in the head of the document or manipulated dynamically.

http://www.w3schools.com/html/html_head.asp

He has: 629 posts

Joined: May 2007

What you are talking about is HTML. A Web page has up to three types of code. HTML adds semantic meaning to the content of a page; CSS is used to affect the appearance (on a screen, printer, or whatever); JavaScript is mostly used to add dynamic properties, like a calendar date-picker, for example.

Most browsers have CSS built in. Those H tages you mention are usually bold, for example. But there are substantial differences between the way browsers display the content of these tags, so most of us use a lot of CSS to make things show up the way we want. We can often get away without JavaScript, although it's nice to know about.

There is an excellent set of short, carefully explained tutorials at dev.opera.com. You may like to start with these Basics of HTML.

Hope this helps. Good luck. Let us know when you need help. Wink

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

They have: 39 posts

Joined: Jan 2009

When using h1 - h6 tags, I use this code on a web page:

< h1 >Website Design Bury St Edmunds< /h1 > - nb take out spaces after "<" and before ">" - I had to put them in to make the code show.

then I define the format of the h1 tag in my style sheet:

h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: x-large;
color: #000000;
}

Obviously, in the above example I use the h1 tag to target the keyword phrase "website design bury st edmunds".

On each page, I target my main keyword phrase for that page with an h1 tag (Google gives most weight to this tag)and then use the h2 - h6 tags to target variations on a theme - eg "Welcome to Web Design Bury St Edmunds" or "Web Design for Small Businesses in Bury St Edmunds Area". Personally, I am happy to have all of my subheadings as h2 headings - that way they all look the same. Don't overdo the keywords or you might be penalised for spam - that's why I sometimes include a h2 subheading that doesn't include the keywords or that uses them out of order as per my last example.

Hope this helps.

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

jj1 wrote:
< h1 >Website Design Bury St Edmunds< /h1 > - nb take out spaces after "<" and before ">" - I had to put them in to make the code show.

use the code tags, third icon from the right on the toolbar:

<h1>Website Design Bury St Edmunds</h1>

jj1 wrote:
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: x-large;
color: #000000;
}

it is also possible to set font-size: 1em; font-weight: normal; so that the h1 tag displays as normal text but still highlights the keywords for SEO. This is considered an acceptable white-hat practice.

He has: 8 posts

Joined: Feb 2009

forum seems to be giving me some hard problems in seeing the attached images. None the less I am sure it's just a temporary thing, probably a small bug.

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

@azmir

there are no images attached in this thread

what kid of problem are you having?

when you attach an image to your post, you get an error message that you can safely ignore (Jeeves Confused ) then when you attach another image, it looks like they go away, but they are still there - click on "Preview comment" and you will see the images are attached but not listed.. you need to check the boxes to list them before you "Post comment" -- (any ideas, Jeeves (Mr. Fixit)) Confused

if you then want to display the attached image in the post, you need to copy the url listed by the attached image and use the image tool (2nd icon from right in the toolbar) and use the url to display that image in the post.

Example:

(code) <img src="http://www.webmaster-forums.net/files/lolcat_0.jpg" alt="an attached image" />

an attached image

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.