HTML Tutorial 07 – page anatomy

1. Let’s look at each section of a typical HTML page. We’ll see what the code means and what it does.

2. Much of this might seem pretty boring at first – but you will realise later why it can be important.

3. First of all, here is the absolute basic minimum HTML page.




                Page title




                Here is the page content



4. You can see that the structure of the page is a HEAD section, which contains the TITLE, and a BODY section, which contains the contents of what will appear on the page.

5. The first item is actually the <HTML>. This tells the browser “What follows is going to be an HTML page”. Like all the other tags, it is enclosed in angled brackets.

6. The next item is the <HEAD>. This section of the page can contain all sorts of technical data – which we’ll come to in a moment. For now, we’ll notice that it contains the TITLE of the page.

7. The <TITLE> does not appear on the page – so don’t look for it there. It appears at the top of your browser window – saying something like “Page title – Mozilla Firefox” or “Page title – Windows Internet Explorer”.

8. Next comes the <BODY> section. This contains the information you wish to appear in your page. It could be text, graphics, audio files, or even movie clips.

9. Note that each one of these tags must be opened – then closed. Otherwise, the page will not show up in your browser.

10. And that’s it! Those are the basic elements of a web page. But now let’s look at some of the additional features which might appear. For this we go back to the top of the page.

11. The other item which commonly appears in the HEAD section of the page is META data. That is, information about the content of the page. This is usually a DESCRIPTION of the page, and KEYWORDS which summarise its most important topics.

12. This information does not appear in your browser window. It is intended for search engines. They visit your pages [maybe] and want to know how to categorise them and what they contain.

13. Another thing you might see at any point in a web page is COMMENTS.

<!– these are comments –>

14. Anything which appears between <! and > will not show up when you view the page in a browser.

15. What use are these? Many designers use comments to mark special sections of their pages – as in the following example. They make editing easier at a later date.

<!– ######## START OF MAIN TOPIC ######## –>

16. There are many other elements you might find in a typical HTML page – but these are the most basic. Just remember that unless you open and close all your tags correctly, the page may not show up in your browser.

See the page of common problems for examples.

© Roy Johnson 2002



  • Writing Essays 3.0 (.html)Writing Essays 3.0

    Writing Essays 3.o covers every aspect of essay writing – from note-taking and making essay plans to referencing and avoiding plagiarism. Learn how to write good introductions, use quotations effectively, and construct persuasive arguments. Suitable for all students in further and higher education. Includes a wide range of sample essays in humanities and social sciences. […]

    Order Writing Essays 3.0 Writing Essays 3.0 @ £4.95

Buy from Amazon US     Buy from Amazon UK

You can leave a response, or trackback from your own site.

If you found this article interesting you might want to Tell-A-Friend.

Tell A Friend
  1. (required)
  2. (valid email required)
  3. (required)
  4. (valid email required)

cforms contact form by delicious:days

Leave a Reply


Powered by eShop v.6