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.

The Basic Structure of All Web Pages

<!DOCTYPE html>
<html>
<head>
<title>Your Web Page Title</title>
</head>

<body>
The contents of your web page.
</body>

</html>

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.

<!DOCTYPE>

The !DOCTYPE tag is not actually a tag, but it is the first part of your web page and it tells the web browsers what type of file to expect (and more specifically what version of html is used).

Different versions of html have slightly different rules, and it’s important to declare the correct doctype to ensure your page looks right.

<html>

After the !DOCTYPE, the html tag is the first and last tag of the web page. It includes your entire document. People rarely put anything outside of the html tag accidentally.

<head>

The head tag appears at the top of a web page, and includes all references to stylesheets and javascript files, and also includes important meta data like your page’s description.

It is very common for people to insert these important pieces of their web page in other parts of the page (like in the body), but this makes it harder for the browsers to ensure the web page is loaded correctly, and it’s a risky but easily avoidable habit.

<title>

The title tag goes inside of the head tag, always, and tells the web browser what to display in the bar atop your browser, and is also the link text most search engines use when your site is listed.

This is an important tag for including keywords for your site, and it should be placed correctly.

<body>

The body tag holds the “meat” of your web page, and will include your page’s content. It holds all of your div, img, p, etc tags. Commonly, people also insert styles and stylesheet or javascript references in the body instead of the head.

Others

The tags listed above provide the basic structure of the web page, and most of the other tags should be included in the body to structure your website content.

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.

About The Author

Website Help Author Zachary Coyne Zachary Coyne is a freelance website designer and developer in Tucson, Arizona. Zach has been designing, developing, fixing and updating websites for the better part of a decade. He enjoys helping people learn how to fix and update their websites, and offers one on one website help by the hour.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*