Welcome, today we will talk about the HTML structure of a web page.
When working in the web site hosting business, we often have to respond to the same question. How can I modify my web site, how can I add an online form, etc. So I’ve decided to write an online tutorial so everyone could have a basic understanding of the web page structure.
To start width, one must understand that a website is mostly a text file like the one we had in the past (for those of you that can remember it’s similar to the old WordPerfect 5.1). Each web page is created with the HTML language (Hypertext Markup Language).
Basic Structure
An HTML document is usually composed of two sections: the header and the content. Let’s start with an example:
<html>
<head>
<title>My Web Site</title>
</head>
<body>
Hi World!
</body>
</html>At this point you might be slightly confused (and it’s OK!) but the truth being, it’s actually quite simple to understand what’s going on. Each HTML document must start with the “” tag and must end with the . This way, you tell your internet browser that he’ll be expecting a HTML document. Each (or almost) HTML tags will need to be closed, when you close a HTML tag you must add the character “/” in front of the HTML tag.
Let take a closer look at the two main blocks in a web page. To start with, we have the head of the document. In this section you’ll be able to include a lot of useful information that will help search engine understand what content you are placing in your site. In the above example, we’ve only included the title of the page. You can note how we’ve close the tag after on title.
The Title
The title tag has more than one usage; at first, it will define the name that will be shown on the top of the page, secondly, Google will use this information in order to understand what you site is trying to show.
<title> My Web Site</title> The second section of the HTLM is the body. Everything you’ll see on screen will be inside the body tag. You can insert multiple tags into the body, but today we will only take a look at the header and paragraph tag.
The Paragraph
Let’s start with the paragraph. Those tag will enable you in insert block of text into you screen, the must be surrounded by the “p” tag. Here an example:
<p>This is some text inserted inside a paragraph</p>It’s one thing to have paragraphs, but its better in you can insert some titles on screen! In the HTML world, you’ll find six type of header which is defined by following tags: “h1”, “h2”, “h3”, “h4”, “h5” and “h6”. By importance, the smaller the digit is, the most important the header is (Note: Its strongly suggested that each page has only one “h1” tag and that tag must contain relevant keyword important for your site. They will have a strong impact on Google).
Finally, let’s take a look at our web page with everything we’ve saw so far:
<html>
<head>
<title>My Web Site</title>
</head>
<body>
<h1>My Incredible Web Site </h1>
<h2>Introduction</h2>
<p>I’m happy to welcome you ion our website!</p>
<h2>See you Soon…</h2>
<p>Come back soon, it was a pleasure to see you!</p>
</body>
</html>Here is the course on youtube
It’s that simple, now you have the basic understanding on the structure of a HTML page.
