Web page layout is very important before you learn how to create your own web page, you need to learn what all the parts of the web site do, and what they are there for. We covered some of these in the Basics of HTML tutorial, but I am going to mention those again and a few more you need for a basic HTML web page. All web pages are written with a mix of content and code, and you must learn how to mix these elements correctly for your web site to come out looking correctly.
Basic Web Page Layout Example
Every web page you create should have four basic elements.
<html> <head> <title>My First Web Site</title> </head> <body> This is my first web site. I hope you enjoy it! </body> </html>
The HTML Tags
The <html> and </html> tags wrapped around the text tells you this is an HTML document. They signify the start of the web page and the end of the web page.
The Head Tags
The <head> and </head> tags wrapped around the title tags tell the web browser this is where you can get specific information about this page, and how it is displayed. The head tags must be at the top of the page, after the first HTML tag.
The Title Tag
The <title> and </title> tags tells the browser that what is in between here is the title for the web page. It will be shown (in most browser) at the top of the menu and on the tab you are browsing from.
The Body Tags
The <body> and </body> tags wrapped around the text tells you this is the “body” of the web page, where the content you want displayed in the browser goes.
Remember to Close Your Tags
You might have noticed that these tags come in pair. One of these tags is used to start the command to the web browser, and the other is used to end or close it. For example, when you use the <title> tag, you are telling the web browser, “Hey, this is the web page’s title here, pay attention!”. Now, you need to tell the web browser that you are done telling it the title of your page. You use the </title> tag to say, “Ok, done telling you what the title is – move along!”
What Have You Learned About the Basic Parts of a Web Page?
Now, take a look back at what this page has taught you:
- Each web page is made up of four primary parts.
- The HTML tags show you where the web page starts and ends.
- The head tags are used to display important information about the web page, that will not be seen by the end user.
- The title tags are used to tell the browser what the title of the page is.
- The body tags tell the web browser where your web page’s content starts and ends.
- If you start a tag, remember to close it.