How to do Headings in Web Studio

If you are not familiar with web studio refer to the instruction page

What are H1 Headings for?

The H1 heading for this page is "How to do Headings in Web Studio"
An H1 heading defines the main content of the page and is the most important sentence
A search engine will use it to determine how relevant the page is and helps
with the ranking of the page or where it shows up in search engine results.
Try to use only use one H1 heading on a page.

Web Studio Next

Every little bit helps to keep this site up and running, thank-you.

<style type="text/css"> H1, H2, H3, H4, H5, H6 {margin:0;} </style>

Go to the HTML tab in Insert Page HTML select Inside Head
copy/paste this


These effects are not officially part of Web Studio
If you have questions see the custom coding page

A note about H2 to H6 Headings

They aren't as important as the H1 heading and they do need to be used properly which isn't too hard, it's just like a magazine article with sub-headings but the way Web Studio lays out a page you could end up with an H2 tag in a totally seperate part of the html document then where the paragraph for it is.
That can actually hurt so it's better just to use bold and larger text unless you know how to code the heading to the content within the document.

What can you do with an H1 Heading to help page rank?

When someone performs a search they use what are called keywords.
See the Basic SEO page for more about search engine optimization
You will have keywords in your page meta TITLE so use some of the keywords in your H1
The first thing you put on web studio page goes to the top of the HTML
so put your H1 on the page first or use "Back" in the Page Layout tab

1:08 minute Google Video: More than one H1 on a page: good or bad?

H1 with just the web studio built-in

You may know there is a built in way to add an H1
In the text tab there is a tiny graphic "increase heading" in paragraph
The problem is you don't know what heading it is and more important
it will jump around in different browsers and you won't what size it will be
since all the browsers treat the H1 tag differently.

<H1 style="FONT-SIZE: 30px">

Go to the Text tab in Clipboard select Edit HTML
copy/paste this and replace the top H1 tag with it

Step one - stop it from moving

This may be enough for you, put the code below in the HEAD and it stops it
from moving in different browsers.
Use the built in heading and check with "edit html" to see if it's an H1
The problem there is you won't know what size it will end up being so you'll need
to leave room around it and make the text object wider.

IE has different sizes between versions, most other browsers are consistant

Step Two - Now to make the H1 stay the same size

To keep this easy we'll still use the built in heading so we can use Web Studio
to make the font, and the color but we will add some css to it so we
will control what size it will be.

The reason for this if you are interested is Web Studio puts the
css style in the division instead of the H1 tag

"edit html"

So when you edit the H1 tag you start with this

and you end up with this

Now you can make it any size you like and it will stay in place and stay the size you want