Titles and <h1> tags

Posts: 410 · Posted: Thu Nov 11, 2004 1:42 pm

Rather than this getting lost in the tread about css, webweaver6 wrote:

There is one things that might help with search engines when you change to css. That is making your heading at the top of each page into a h1 tag. You can define the style and that tag is one that the search engins like for keywords.

This advice echoes everything I've read in the past, but I never checked to see how my titles were coded. Webweaver noticed it however. I've been assuming Google knew my -- font size="5" -- title was a title. Maybe Google does, maybe not. At any rate, none of my titles are designated <h1>, <h2>, <h3>, etc.. But since everyone talks about the importance of an <h1> title, I thought webweaver's advice is worth sharing. Like I have, maybe others have overlooked this.

My bad habits are catching up to me I guess... I have just been typing out my titles and resizing them, without thought of the tags. Embarassed

As to the <h1> tags, I can't get my css file to override my Windows xp about what size <h1> should be, which is 24... because I like size 18 for my titles. I could use <h2> I suppose, which is 18, but if people say Google prefers <h1> for a title... why do it another way? Does anyone know how to change the windows default setting? Or can you?

Posts: 101 · Posted: Thu Nov 11, 2004 2:55 pm

Allen,

I'm not sure why you don't see a change with the css file. Here's a sample of what I do.

Code:

h1 {
font: 14pt Arial, Helvetica, sans-serif;
text-align: center;
}

and my css is usually in it's own file which is attached to the pages with

Code:

Can you post your example so we can try to find why it's not working?

Posts: 410 · Posted: Thu Nov 11, 2004 5:01 pm

Sure, thank you...

Between the <head> </head> on my text page I first used:

then I tried this one (which is the current one):

Okay, on my-- stylesheet1.css -- I now have this (I've tried other variations too):

body { text-align: justify; font-size: 12pt; font-weight: normal; font-style:normal; font-variant:normal; font-weight:normal }

h1 { font-size: 18pt; text-align: center }
h2 { font-size: 14pt; text-align: left }

Now, of that above, my computer added this part:

font-weight: normal; font-style:normal; font-variant:normal; font-weight:normal

I wasn't trying to get that fancy yet, I just am trying to get the basics, you know... font, font size and align for the headings. I thought I should leave in what the computer put in.

The only thing working for <h1> is the align part, I'm not sure yet on the font because I'm not interested in changing from times (the default font). I might add that I managed to reduce the regular text (in the body) by adding size 12 in (body). (when I first looked at this test page, everything was size 24).

Posts: 410 · Posted: Thu Nov 11, 2004 5:40 pm

P.S. to the above:

I just tried yours or:

h1 {
font: 14pt Arial, Helvetica, sans-serif;
text-align: center;
}

and it didn't change anything, my <h1> title is still size 24 (in fact, it didn't change a single thing... and my font is still 'times')

(I saved the change before checking)

Previous to this change, I even tried seeing if it would change font colors so I added color: red (within the brackets) but the color wouldn't change. Like I said, the only thing which I know is working (for h1) is align. (before I began any of this, I first activated (turned on) css for that single test page)

I originally began with this but it didn't work either:

h1 { font-variant: small-caps; text-align: center }
body { font-size: 9pt }
h2 { }
h3 { }
a { text-decoration: none }
a:link { color: #06f }
a:visited { color: #93c}
a:active { color: green }
a:hover { color: red }
html { font-size: 9pt; font-family: Verdana, Arial, "MS Sans Serif", "Sans Serif", Helvetica, Geneva, Swiss, SunSans-Regular }
title { font-size: large; horizontal-align: center }

The above I borrowed from cpnet's website (only the top portion of his css file), and it apparently works for him... but not for me

Now, I have both the test page and the css file within the same folder, but this folder is in "my documents". Perhaps it is not the most appropriate place but it seems to be working... in part anyway.

Excuse me cpnet, I wasn't trying to get away from you, I just started this thread for title and <h1> for informational purposes. It just all gravitated back to css it looks like. I just thought my browser was over-riding the designated <h1> size I had in my css file.

Posts: 101 · Posted: Thu Nov 11, 2004 6:31 pm

The impression I'm getting is that your html file and the css file are not talking to each other. If this doesn't work on your computer, what if you put the test files up on the web? Or, what happens when you put the css code into the head instead of an external file? Also, when you tried cpnet's code in the css file, did anything else change (link color, etc...) ?

Posts: 135 · Posted: Thu Nov 11, 2004 7:26 pm

Allen,

Have a look at http://www.sevolution.com/allen/test.htm. You can see the source (in Internet Explorer), but right-clicking anywhere on this page and selecting "View Source"). You can also use "File | Save As..." in Internet Explorer to save this web page to your hard drive. You can also go to http://www.sevolution.com/allen/test.css to download the corresponding .css file that this page is using. If you put both test.htm test.css into the same folder on your hard drive, then open the test.html in Internet Explorer from your harddrive (NOT http://www.sevolution.com/allen/test.htm) (use "File | Open"), you should see the .css working.

What's different between what I've got here, and what's in your files?

Also notice that the text "Here's an example of the .css file style being partially overridden" uses the same .css style class as the text, "Here's the title in 24pt", however, they don't have the same font size. This is because while, "Here's an example of the .css file style being partially overridden" uses the same class, it also has it's style attribute set, which will override any conflicting styles set by the class attribute. Maybe some things aren't showing up for you because certain styles are being overridden?

Make sure you're not mixing the old HTML-style formatting with .css formatting. You should not use the <font> tag anywhere (for example) when you're using .css because it may interfere with the .css formatting, and it'll get confusing to figure out what is in control of the formatting.

Posts: 410 · Posted: Thu Nov 11, 2004 7:26 pm

EDIT NOTE: the following was posted before I saw cpnet's entry

Okay, I deleted everything in the css file, deleted the reference to it in my test page, and TRIED to add what was once in my css file within the <head> section of my test page, but as I 'saved' it, FrontPage would kick it out of the head section and put in the body section. Three times it did this so it was obviously purposeful.

Being in the body section however, it just appeared on my normal viewing page as written text so I corraled these css instructions between <script> </script>. So now the entire <head> section looks like this:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Matrix 2</title>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">

<meta name="Microsoft Theme" content="refined 1011">
<meta name="Microsoft Border" content="tlb, default">

</head>

<body>

<script>
h1 {
font: 14pt Arial, Helvetica, sans-serif;
text-align: center;
}
</script>
<h1>The Real Matrix Steps Forward... </font></h1>

--- the rest is body text---

As far as cpnet code doing anything, I think it only reduced the size of all the text somewhat (I've tried too many things since then to remember for sure). I know it didn't change any colors tho.

Another downside to all of this too is that I see my <a name="top"></a> has disappeared, and so has all my italics I used. This css is going to cause me a ton of work putting all this stuff back in.

Posts: 135 · Posted: Thu Nov 11, 2004 7:39 pm

As far as Google knowing that <font size="5"> is a title - it won't. It may give priority to stuff that's in bigger font (but likely not). The idea behind .css is that your HTML defines the content, and the .css defines the style (formatting) for your pages. You should try to avoid formatting/style in your HTML as much as possible.

An <h1> tag, just says, "the content that I'm containing is the most important heading there is". The <title> tag says, "this is a title". But, <H1> and <Title> don't really explain how to format the heading or title. They just identify the text as a heading or title. It's the .css file that says how to format headings or titles.

When Google looks at your page, it uses the <title> and <h1> etc. tags to identify what sort of information all of the content on your page is. It doesn't really care about formatting. It just needs to know what the titles are, and the main headings etc.

You've seen my <link> element

Code:

that includes a "media" attribute of 'screen'. That tells the browser that the stylesheet contains information about how to format the page for display on a screen. You could have an additional link element that would provide a different stylesheet of sorts, but the media would be "braille". A braille device could use your .htm page with your braille 'stylesheet' to 'display' your page for a blind person using braille. Another option for "media" is 'aural'. A speech processor could actually speak your page, using the 'aural' 'stylesheet' to know which items to give emphasis to when speaking. Hopefully this clarifies the reason for the separation between your content in the HTML, and the formatting in the style sheet. The HTML is your information. You may have many different ways to present/format that same information (TV, computer screen, braille, speech synthesis), so you need to be able to provide multiple ways of formatting the HTML content. This is done by keeping all formatting in (possibly multiple) external style information files (i.e. .css files). Typically, we only provide a .css stylesheet for display of an HTML page on a computer screen, but we could provide other things if we wished.

Posts: 135 · Posted: Thu Nov 11, 2004 7:51 pm

Code:

needs to be

Code:

This puts the .css stuff in a comment so that non-css supporting browsers will just ignore it. Browsers that do handle .css know to use commented HTML that's in a <style> tag.

You should replace your existing formatting (i.e. <i> and <b>) with .css-style formatting - even though it may be a lot of work. You shouldn't use <i> and <b> any more, but rather <em> (emphasis) and <strong> respectively. You can change the formatting for <em> and <strong> in your stylesheet. Again, these new tags mark text as being important, and google will give priority to such text. You can use for stylesheet to format them however you want, but by default, <strong> will have the same formatting as <b> and <em> will have the same formatting as <i>.

Posts: 410 · Posted: Thu Nov 11, 2004 7:51 pm

I forgot to mention my last attempt above didn't work at all. And cpnet, as to http://www.sevolution.com/allen/test.htm. , it was a dead link although http://www.sevolution.com/allen/test.css was okay. Interesting looking code, it looks like you're trying to tell it what it can do with its danged size 24 font. Smile

Posts: 135 · Posted: Thu Nov 11, 2004 7:54 pm

Allen wrote:

I forgot to mention my last attempt above didn't work at all. And cpnet, as to http://www.sevolution.com/allen/test.htm.

http://www.sevolution.com/allen/test.htm IS there. It's just that the forum added a "." to the end of the URL which is why it wasn't working. I'll fixed the URL in my 1st post, so try again. Just make sure you're going to "http://www.sevolution.com/allen/test.htm" and not "http://www.sevolution.com/allen/test.htm."!

Posts: 410 · Posted: Thu Nov 11, 2004 7:57 pm

It Worked !! The following worked...

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Matrix 2</title>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">

<meta name="Microsoft Theme" content="refined 1011">
<meta name="Microsoft Border" content="tlb, default">

</head>

<body>

<style type="text/css">

</style>

<h1>The Real Matrix Steps Forward... (revised 2/20/04)</font></h1>

Posts: 410 · Posted: Thu Nov 11, 2004 8:07 pm

Yeah, okay, I found that link and saw what you mean. Anyway, I'll stay with this code for the time-being (if not forever) and play with it. This means however, I would doing everything page by page. But actually, I was leaning towards that idea anyway. Thanks again cpnet and thank you too webweaver!!! Another FrontPage obstacle overcome!!!

Posts: 410 · Posted: Thu Nov 11, 2004 8:26 pm

Yep, it's me again... Shocked

Anyone want to comment on how this works?:

font-family: "Arial, Helvetica, sans-serif";

I only use 'times new roman' for my text and headings but occasionally I will use 'courier new -size 10' for my verse. This verse (poetry) is only on a few pages tho, so I guess I could do that manually... but do I need to list it anyway?

Posts: 101 · Posted: Thu Nov 11, 2004 8:43 pm

To change your font to the courier 10pt, you could do something like

Code:

.cstyle {
font: 10pt "Courier New", Courier, monospace;
}

I used cstyle to mean courier style and the "Courier New", Courier, monospace; is the font family just as "Arial, Helvetica, sans-serif" is a family. If someone doesn't have Arial, the computer will use Helvetica, then a sans-serif font that is found on the compter.

It's great that you have the css working but it certainly would be helpful if you could link to the style sheet. If you put your test files up on the web, does it work there?