The Components Of a Web Page – The Key Tags to Know About

Current Progress
Current Progress
Current Progress
Current Progress

You may be surprised at just how simple a web page can be

The left side shows html (which, by the way, stands for HyperText Markup Language). The right side shows how this would be displayed in your web browser.

You can right click on a web page and select View page source:

Chances are you will see a page of what looks like gobbledegook. It varies from website to website.

If you see a page that looks like this:

As opposed to this:

This means the page has not been optimised for speed. Optimised pages (covered in a later lesson) have all the white space (which make it easy for humans to read) removed because web browsers don’t need it and it is redundant extra data in transmission.

In both cases, though, you will still find those basic <html>, <head>, <title> and <body> elements in there. Use Ctrl-F to find them.

You do need to know about these basic elements because they are relevant for other lessons and purposes. The various tracking scripts that I cover later on the course have to be inserted in specific locations (usually before the ending </head> tag) in your web pages. When you are installing tracking code in your website’s pages, you will need to do a View page source as described above in order to check it is present and in the right place for it to work correctly.

The HTML <head> Element

This is a container for metadata (metadata is data about data). It has to be positioned between the <html> tag <body> tags.

HTML metadata is data about the HTML document, the metadata isn’t displayed.

Metadata is used to define the document title, its character set, styles, scripts, and other meta information.

The HTML <title> Element

This defines the title of the document. It must be text-only. Title text is displayed in the browser's tab:

The <title> element is required in HTML documents.

Page titles are very important for search engine optimization (SEO), which is covered later in the course. The page title is used by search engine algorithms to determine the order in which search results are displayed.

Hence, it is important to make the title as accurate and meaningful as possible.

The <body> Element

The body is where a page’s content resides.

  • 👍 If you want explore and learn about the different elements on a web page, I highly recommend taking a look at https://www.w3schools.com/ - a great place to learn about many different subjects. The really great feature is that you can try things out right there on the page.

Recommended Resources

  • Free Tools

W3Schools is an educational website for learning coding online. Content includes tutorials and references relating to HTML, CSS, JavaScript, JSON, PHP, Python, AngularJS, React.js, SQL, Bootstrap, Sass, Node.js, jQuery, XQuery, AJAX, XML, Active Server Pages, R, Raspberry Pi, C++, C# and Java.

Join Our Facebook Group

Our community is filled with awesome, like-minded individuals who love to share ideas and resources!

Take the Lesson Quiz

Current Progress
Current Progress
Current Progress
Current Progress
{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
Pen
>