Using HTML5 and CSS to Create a Website

Planning the Content of Your Website

You cannot organize your content unless you have completed your KEYWORD research.

This will meant that you've decided on your website theme and have accumulated a long list of keywords and phrases related to the content of your web pages.

The most important part of any website is the page content.

No matter how cool or impressive your website looks, if the content isn't right, Your Website Will Fail!!

Before you begin writing copy for your web pages, create an outline.

YES, this is a lot of extra work, but the end result will be a better website.

Each Main Topic of your outline will be a separate page.

See the example below to learn how to properly structure the content of a web page

II Main Topic 1 (Page Title and H1 tag)
A Sub topic 1 (H2 tag)
  • Paragraph 1 on sub topic (paragraph tag)
  • Paragraph 2 on sub topic (paragraph tag)
B Sub topic 2 (H2 tag)
  • Paragraph 1 on sub topic 2 (paragraph tag)
II Main topic 2 (Page Title and H1 tag)

The display on the left shows a typical outline and how its various entities might relate to HTML tags used to build a web page.

The corresponding HTML code is shown below.

 

HTML Code for Page Structure

<head><title>Main Topic 1</title></head>
<body>
<h1>Main Topic 1</h1>
<p>Optional introductory paragraph containing keywords on main topic.</p>
<h2>Sub Topic 1</h2>
<p>Paragraph containing keywords on sub topic 1.</p>
<h2>Sub Topic 2</h2>
<p>paragraph containing keywords on sub topic 2.</p>
</body>

For a better understanding you may want to skim the tutorials on Header Tags and Paragraph Tags in our HTML tutorial.

New HTML5 Elements

HTML5 introduces several new elements for authors that need heavier content structuring features.

Study these web page elements if you are building a term paper, thesis, biography or something that requires heavy foot noting and complicated structure:
article, section, header, footer and related attribute.

The Title

The actual Title of a document is placed in the head section of an HTML page between the title tags. <title>Title Here</title> The title is a very important.

First it is a key element used by search engines to index your page.

Second most search engines will place it on the search results page.
It should contain keywords, but should also be written to appeal to human readers.

Using Header Tags

h1 will be the main heading of your page. Repeat or rephrase the title. Be sure to use the same keywords in both your title and your main heading.

h2 will be the sub headings of your page which introduce your paragraphs. There may be more than one.
Use more of your keywords here.

Structuring your pages properly with header tags is important. Always use an h2 after an h1. Don't skip from h1 to h3.

Paragraphs

To save time on your outline, you may want to jot down a brief description of the paragraph that will appear under the header tag, instead of the actual content.

When adding actual paragraphs to your web page make them short. Don't place one 300 word paragraph on your web page. Break it up into short paragraphs that are separated by white space. This will not only make your page look better, but also make it easier to read.

Be sure to include keywords when you start writing actual content.
(Total visible words on a web page will be 500 or less)

Note: If the tool that you use to build your web pages doesn't include a spelling checker, you may want to build your content in a word processor and then paste it into your pages. Nothing detracts more from the credibility of a website than bad spelling.

Make a similar outline of each page you think might be included in your website. Write the names of pictures or images that will appear on that page on the back of the document.

If you don't have an editor yet it's time to find one that is easy to use. Check out some of the many free ones on the net.

Next Stop

How to Build Your Website Template