Web page basic – HTML structure

Web page basic - HTML structureDuring this tutorial, we will establish basic under-lying structure within an HTML document. You will be surprised just how simple a language HTML is and how quickly it can be adopted.

Let me first of all explain what HTML is. HTML is an acronym for ‘Hyper-Text Mark-up Language’. It is an adaptation of the original ‘Mark-up Language’ found within the first word processors back in the 1980’s. HTML is a few levels higher, allowing for better layout, picture placement and ‘hyper-link’ (links to other internal or external pages).

HTML Structure Example

Type the following in to your source code editor:

<html></html>

This is an example of our first tag. The <html> tag lets a web-browser know for sure that it is dealing with an html based web page. Please note the manner in which the tag is surrounded by chevrons and that the tag is repeated with the inclusion of a ‘/’ to terminate the mark-up. In most instances, you’ll see this same structuring for all manner of tags.

Now within the <html> tags, add a little more code so that it appears as:

<html>
 <head></head>
</html>

We have now added the <head> tag inside of the html tag. The <head> tag is used to hold information about your page, such as a title and description for search engine usage. It is also used to hold links to CSS and Javascript files, etc.

It is worth noting that line breaks (caused by pressing the ‘Enter’ or ‘Return’ key on your keyboard), can be applied to help you easily organise and read your html code. They will not appear in the browser, so do use them.

Now add the following:

<html>
 <head></head>
 <body>This is my first HTML page!</body>
</html>

The <body> tag is where all of your visible page contents will reside. The tag must be below the <head> tag and within the <html> tag.

Conclusion

OK, so you may think that this study of HTML structure is a little complicated, but if you start every page you create with the above structuring, you can’t go wrong. Make a back-up of this example and cut-and-paste from it.

Leave a Reply

Your email address will not be published. Required fields are marked *