HTML Page Structure Lesson

posted: category: web-design


HTML Page Structure Lesson

In this article I will break down the different HTML tags that make up a standard page. Focusing on just the basics allows you to quickly learn how to set up a page and move on to styling later.

First, some terminology:

Tags: The name for specific types of information <html> , <head> , <title> , <body>etc.

Opening and closing tags: Most HTML tags require you to have an opening and closing tag.

<head> - Opening Tag

</head> - Closing Tag

Elements: An element is everything enclosed in a set of tags.

<title> This is my title</title> Is an element. From opening tag to closing tag.

Here is the basic structure (Start with this):

<!DOCTYPE html>
<html>
<head>
<title>This is the title of your page</title>
</head>

grow your small business

learn more about the creation of a business blog


style="background-color:#D3D3D3"><body>
What is visible on your page
</body>
</html>

You will notice that most of these HTML tags have a opening and closing tag. <title> </title>

Except for <!DOCTYPE html> . Which does not require one. There are more that you will learn about later.

Description of the basic html tags:

<!DOCTYPE html> This must always be at the very top of your page. DOCTYPE is not actually an html tag, it is a declaration telling the web browser what TYPE of DOCument this file is. The example shown is for HTML 5. There is a series of codes that can be entered after html that tell the browser what version of HTML this page was written for. For a complete list of how to specify which version of HTML, visit W3 Schools page on this. Here is an example of one:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> - Specifies HTML 4.01 Transitional. Allows depreciated HTML tags.

<html> </html> All of your code goes between opening and closing<html> </html>tags. Basically you are telling the browser that all of your html code is inside these tags.

<head> </head> Information enclosed inside these tags is read by the browser and contains information from title, meta data to styling and script references. The browser uses the information enclosed but this is not visible to a user looking at your page.

<title> </title> The title is exactly what it appears. This is the title of your page. Titles are used in search engine results and by your browser. Displayed on your browser tabs. If you look at the tab for this page on your browser it should read Basic HTML Page Structure.)

<body> </body> Everything else will go inside the <body> </body> tags. For the most part, everything inside the <body> </body> tags is what will be visible to people looking at your page.

Here again, is an html page at its most basic:

<!DOCTYPE html>
<html>
<head>
<title>This is the title of your page</title>
</head>
<body>
What is visible on your page
</body>
</html>

That is the basic structure of an HTML page. Next you will learn how to add content to the page and begin styling it.

comments powered by Disqus

About the Author

Jeff K.

Jeff K.

Jeff is a web designer and graphic artist. In addition to web design, Jeff enjoys other forms of art, including pencil sketching and illustration.

If you are looking for affordable web design services for your business, Cloudy Mouse provides timely personalized service. Our focus is creating great looking responsive website designs for small businesses without breaking their bank.

Take a look at our Web Design Services and discover how we can get your business into the cloud.