The Basic Parts of a Web Page (head, title, body, etc)

Most website design novices determine whether or not they’ve set up a web page correctly by how it appears in their web browser. This is natural, however, often times incorrect tags are used (or missing), which leads to poor web page performance.

Understanding the basic parts of a web page can give you much more control over how your content appears, and give you a boost in the search engine department, as well.

DOM: The Basic Structure of Your Web Page

All web pages, whether they’re created by hand-coded html, Dreamweaver or WordPress, using PHP, ASP or simply html, are all fundamentally the same. They have the same basic parts.

These basic parts are known as the “DOM Tree” (Document Object Model). It may sound confusing, but it’s just a very basic standard that allows us to organize our websites in a systematic way.

The Parts of Your Web Page

The different parts of your (and most every other) web page are organized using tags. Tags typically have a beginning and an end and look like this: <tag></tag>. Let’s take a closer look at what each tag means.

Using Tags Correctly in Your Web Page

When you’re coding the content of your web page, it’s important to wrap the different pieces of your page in the correct tags, so that they display correctly and so that the search engines can make sense of your website. Here are some commonly used (and misused) tags:

Heading

A web page is similar to the page in a book, and typically there is one main heading and at times many subheadings. This is where a lot of people go wrong. They type their heading in plain text and use a website editor to make it appear larger and bold, without actually putting it into a heading tag.

While this can make the text appear large and bold, like a heading to the eye, it doesn’t tell the search engines that this is an important heading, nor does it make it easy to keep all of your headings consistently sized.

Your main web page heading should be placed in the <h1>Level 1 Heading Tag</h1>, and your subheadings should be placed in the <h2></h2>,< h3></h3>,< h4></h4>, etc tags, corresponding to their level of importance to the page.

Paragraph

This is another place people go wrong. Just because text appears on the page, doesn’t mean it’s in the right place. Page text should be placed in <p>paragraph tags</p> to let web browsers and search engines know that this is website content, and also to help your pages appear with consistent formatting.

List

If you have a list (of items, services, etc) on your website, you should employ the use of an ordered or unordered list tag. Again, just because you can hit enter in your website editor to make the next item in your list appear on a new line doesn’t make this a correctly coded list.

Here are correct unordered and ordered lists, respectively (the difference is that the ordered list in numerical and … has an order to it):

Unordered List

<ul>
<li>Item in your list</li>
<li>Item in your list</li>
<li>Item in your list</li>
<li>Item in your list</li>
</ul>

Ordered List

<ol>
<li>Item in your list</li>
<li>Item in your list</li>
<li>Item in your list</li>
<li>Item in your list</li>
</ol>

Div

A lot of web pages use <div>div tags</div> to separate content, but often they’re placed where they shouldn’t be. Placing a div inside of another element incorrectly can make your web page appear okay in some browsers and incorrectly in others.

This is due to the fact that browsers do their best to render the pages correctly, and will try to make sense of even incomplete or broken code. That said, when you leave it up to the browsers to “guess” how it’s supposed to be, they often guess different from one another.

Table

In the old days before CSS, people used <table><tr><td>tables</td></tr></table> to arrange the content of their page. That was fine then, but it’s considered bad practice now. While it’s often the easiest way for a novice to visually arrange a block of text next to an image or menu in Dreamweaver, tables are actually intended to hold tabular data (such as a table of products).

Why You Should Care To Use The Right Tags

There are numerous reasons why you should take the time to learn the basic structure of a website and familiarize yourself with the correct usage of the most common tags.

Consistent formatting

First of all, it helps ensure your website will have consistent formatting throughout. If some text is in a paragraph tag, while other text is inserted into a table or has no tag wrapped around it, each text block may end up having different spacing, alignment and size. Using headings for headings and paragraphs for text keeps all of these elements consistently sized, spaced and aligned throughout your website.

Search engine optimization

It’s also much better for the search engines. Putting important keywords in your page headings, and making sure your title tag, meta description and page content are all in the right place makes it’s easier for Google to make sense of your website and give you ranking for the keywords you’re targeting.

Organization

Lastly, it’s the easiest way to keep your code clean and website well organized. While throwing together tables and using buttons in Dreamweaver that seems to increase font size for headings may be the quickest way to achieve what you want in the short term, it’ll make a mess of your website in the long term. As with most things, taking a little bit of time to do it the right way from the start will make your life easier (and your website better) in the long run.