Introduction to HTML Structure and Tags

This course will explore the structure of a HTML document and the 'tags' they are made from.

Introduction to HTML

Welcome to the course!

Hello there!

Today you're going to learn how to create your very own HTML template ready for your web development studies. You will also learn exactly what all of the tags used are for.

The framework of HTML

A basic HTML Template

What you're seeing here are the HTML tags needed to start developing in HTML that you might not be used to working with if you've been using a more automated development software like Adobes Dreamweaver. But don't worry! We're going to get you up to speed so you don't have to rely on this when you come to develop on less automated software. More detail on each tag in the following sections!

Understanding tags pt1

The very first tag in a HTML document, although actually not HTML but is a deceleration to the web browser of what HTML version your page is written in.

The second tag in the document is the html tag, this tells the browser the document is HTML and acts as the root and container for all other elements within the document 

The third tag in the document is the head tag, this tag opens the head section of the document which contains things like the document title, externally linked CSS documents and meta information.

Understanding tags pt2

The fourth tag in the document is the meta tag, this sits inside the head section of the document and stores information on things like the type of content the document contains, the type of  character set the document is written in, of which utf-8 is the is preferred for web pages.

The fifth and sixth tags are the title tags, quite simply whatever text is inserted between the title tags (which can be open and closed on the same line as shown in the picture) will appear on the users browser tab and on bookmarks to provide context for the web page.

The seventh tag is the head close, this simply contains the elements placed within the head section of the document. 

Understanding tags pt3

The eighth tag is the body tag, the body acts as a container for the visible element of the web page and once in place you can begin adding HTML content you are familiar with such as text and images

The ninth tag is the body close tag, once you have finished adding content to your web page you will use this tag to close the body section to contain the visible elements of the web page.

The tenth and final tag in this basic HTML template is the html close tag which neatly closes the HTML structure. At this stage you would be ready to start adding content to your web page.

HTML structure challenge.

Try and sort these HTML tags into the right order.

Good luck!

  • <!DOCTYPE html>
  • <html>
  • <head>
  • <meta />
  • <title> </title>
  • </head>
  • <body>
  • </body>
  • </html>

What is the purpose of the <title> </title> tags?

  • Lets you specify the title of your project for developers to see
  • Lets you specify text that will appear on a browser tab as well as bookmarks
  • Lets the author add their name to the document

What are the three purposes of the <html> </html> tags?

  • Gives the document a .html format when saved
  • Tells the browser the page is in HTML
  • Acts as the root of the HTML document
  • Acts as the container for all other elements in the document
  • Lets you give your document a name that can be linked to from other pages

What are three functions of the <head> </head> tags?

  • Containing the document title
  • Containing links to style sheets
  • Containing the top navigation of the web page
  • Containing meta data
  • Storing image locations

What is the function of the <body> </body> tags?

  • Storing text and images to be used throughout the website
  • Containing web content such as text and images
  • Used to type creator notes (comments) which can't be seen by users

What is the <meta /> tag for?

  • Linking to an alternative copy of the web page in case of corruption
  • Storing information about character and content types
  • Storing copyright information regarding use of text and images

What does theĀ <!DOCTYPE html> tag do?

  • A deceleration to the browser as to whether or not the document includes CSS
  • A deceleration to the browser of what version of HTML the document is written in
  • A reminder to developers that the document is written in HTML

Which of the following HTML templates is correct? Click the magnifying glass to see the full image!

Well done!

Well done on making it this far! 

You should now be able to create your very own HTML template in less assisting tools (for your information, the tool used to demonstrate code in this course was Notepad++ and is free to download!)

Be sure to head back to the learning path and see how much you have learned by completing the summative challenge!

Click here to go back to the learning path for the summative test!