Adding H1 tags in Blog

[Shopguy]

I've been playing with the 3dCart blog a lot lately. Making small changes here and there. One change I made to the template yesterday was to include H1 and H2 tags. I know H tags aren't as important as they once were but it was an easy change. I thought I would share how I decided to go about it and maybe get some feedback.


<!--END: CATEGORY_HEADER-->
<tr>
<td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><table width="98%" border="0" cellspacing="0" cellpadding="0">
<tr><h1><span style="font-size: 36px;">Your Store Blog</span></h1></tr>
<tr>
<td><!--START: blog_post-->
<div width="100%"> <h2><span style="font-size: 26px; line-height: 26px;">[subject]</span></h2>


You can see where I added the tags. This isn't a stock template so other things may be a bit different.

I'm still pretty much a noob. Did I go about it right? Is it worth doing?

[celebra1]

Heading Tags

I use heading tags on my blog posts. Many of my blog posts come up in searches. As for how you set up yours, there is no need for the span. Heading tag sizes are either in proportion to your set font size - automatic, or set up in your styles. The latter is my preferred method because you can assign not only size, but color, and possibly font-family changes.

Change:
<tr><h1><span style="font-size: 36px;">Your Store Blog</span></h1></tr>

to:
<tr><h1>Your Store Blog</h1></tr>

in your styles > Advanced

h1, .h1 {font-size:24px; color:#000;}
h2, .h2 {font-size:18px; color:#000;}
h3, .h3 {font-size:16px; color:#900;}
h4, .h4 {font-size:14px; color:#060;}

*** You can change the colors to any hexidecimal web safe color. ***

[Shopguy]

Celebra, thanks for the suggestion. I might give that a try. When I initially made that change I was afraid of affecting things elsewhere in the store.

My css file doesn't include any h tag formatting that I can find. I should be able to add it easy enough but I worry that somewhere else in the store they are using the automatic sizing and this would override it?

[celebra1]

Stylesheet

Your stylesheet is nothing more than a set of directions. When a style is set in the stylesheet, as it should be, those directions/styles are applied site-wide. If you want a style to apply differently, you could create a new style. You may need to add a style if you have a link within the heading tags, since those revert to the link settings. EX: (link within a heading tag)

h3 a:link, h3 a:hover, h3 a:visited {font size:16px; color:#369;}

You would need that since your body styles refer to site links being smaller.

You should NOT create sizes for your heading tags that are out of proportion to your regular text!

Within the frame, the style assigned closest to the tag "wins"/overrides any style assigned before it.

[Shopguy]

Thanks again for the advise!

So I'm taking a stab at setting up formatting specifically for the blog:

.blog{font-family: Verdana, Geneva, sans-serif;color: #5f5d5e;font-size: 20px;line-height: 22px;}

A.blog {font-family: Verdana, Geneva, sans-serif;color: #5f5d5e;font-size: 20px;font-style: normal;font-weight: normal;text-decoration:underline;}

A.blog:hover {color: #73850f;text-decoration:underline;}

A.blog:visited {font-family: Verdana, Geneva, sans-serif;color: #5f5d5e;font-size: 20px;font-style: normal;font-weight: normal;text-decoration:underline;}

A.blog:visited:hover {color: #73850f;text-decoration:underline;}

h1.blog{font-family; Verdana, Geneva, sans-serif;color: #5f5de5e;font-size: 36px; line-height:36px;}
h1.blog{font-family; Verdana, Geneva, sans-serif;color: #5f5de5e;font-size: 26px; line-height:26px;}

I haven't tried it yet as I'm not sure that it's correct. Does it look right? I'm trying to minimize the amount of code that has to be put into a blog post.