HTML Lesson 4: Structure of an HTML document

When you create a new HTML file on NeoCities, you’ll see something like this:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>

But what exactly is this, and what does it mean?

This is called an HTML skeleton. It is the basic supporting structure of an HTML document. But what do all of these parts actually do?

Let’s break down the first tag; <!DOCTYPE html>
This line specifies the document type as well as the version of HTML being used. Its purpose is to ensure that the browser can render the page properly. Without it, the rendering and layout could be negatively affected. Notice that it is an empty tag- it does not need a closing tag.

Let’s look at the next tag; <html>
This html element is the root element where we will enclose all of our content for the web page. If it were missing, the browser may run into unexpected issues. It’s an important practice to include this element, as this will ensure your HTML is valid.

Next, we have the tag: <head>
This element contains metadata about our document, things that are hidden from the user. This includes things such as our title and links to external sources. Without this element, search engine optimization might be affected, as well as character encoding.

The next tag is the <meta charset=“UTF-8”> tag. This is an empty element just like the doctype element. Notice how it is nested within the <head> tags- this is because it works behind the scenes and is used by the browser. This tag specifies the character encoding for the document. Without it, special characters and international text would likely be displayed incorrectly.

Next, we see the <title> tags. The title element specifies the name of your document and can be seen on the browser tab when the page is visited. Without it, the page will have an empty name, which could be confusing to people visiting your site.

Lastly, we have the <body> section. This element is where you’ll put all of the content that the user will see. Without it, the page would be empty and there would be nothing to display.

Lesson recap:

  1. HTML documents need structure, and that structure is called an HTML skeleton.
  2. <!DOCTYPE html> specifies the document type (html) and the version of HTML being used.
  3. <html> is the root element where we will put all of our webpage's content.
  4. <head> contains metadata that is mostly hidden from the user and is used by the browser.
  5. <meta charset="UTF-8"> specifies the character encoding for the webpage and ensures all characters are recognized properly.
  6. <title> contains the title of your webpage, which can be viewed in a tab.
  7. <body> contains everything you want to display on your webpage- it will be visible to anyone visiting your site.

In the next lesson, we’ll take a quick look at a few programs you can write HTML in, such as text editors and code editors.