Welcome! Today, we’ll delve into the HTML structure of a web page, essential knowledge for anyone in the web hosting Canada industry.
As part of the web hosting Canada scene, we often encounter questions about modifying websites or adding forms. This tutorial provides a fundamental understanding of web page structure, critical for anyone looking to enhance their online presence.
Basic Structure
A website is essentially a text file, much like the old WordPerfect 5.1. Web pages are crafted using HTML (Hypertext Markup Language).
Here’s a basic HTML document structure:
<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 Header
The document’s header contains metadata, helping search engines understand your content. For example, the title tag within the header defines the page’s name and aids Google in interpreting your site.
<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 Body
The body section contains everything visible on the screen. It includes various tags, such as headers and paragraphs.
Paragraphs
Paragraphs are defined using the <p> tag. For instance:
<p>This is some text inserted inside a paragraph</p>
Headers
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
Understanding HTML structure is fundamental to creating effective web pages, especially for web hosting Canada. Stay tuned for more tutorials in our “Web Basic 101” series.
