Structure - HTML Tutorial
The previous section showed you how to create a simple web page. If you haven’t saved this example on your computer as simple.html, do that now.
<html>
<head>
<title>A Simple Webpage</title>
</head>
<body>
This is a simple webpage.
</body>
</html>If you open simple.html in your browser, you’ll see the words “This is a simple webpage” on a plain background. What happened to all the other parts of the page? And what are those words in angle brackets?
A Brief Introduction to Elements
The file simple.html uses these HTML elements: html, head, title, and body.
- Elements are enclosed in angle brackets (
<>). - Elements are usually invisible - they provide instructions to the browser rather than appearing directly on the page. They can format text, create links, add images, and more.
- An element usually has an opening tag (
<element>) and a closing tag (</element>). Some elements are self-closing and don’t require a closing tag.
We’ll go into more detail about elements and their properties in “Elements”. For now, let’s focus on the elements in our “Simple Webpage” example.
Structure of the Simple Webpage
Even though the “Simple Webpage” looks minimal, its elements are essential for all HTML documents. Here’s a breakdown of their roles:
-
<html>: Marks the beginning of an HTML document.This element tells the browser that the file is an HTML document.
-
<head>: Contains meta-information about the document.The head can include information for browsers or search engines, links to stylesheets, scripts, and more. Its content is not displayed directly in the main browser window.
We’ll explore the head more thoroughly in Chapter 2.
-
<title>: Defines the page title (inside the head).When you view
simple.html, the browser’s title bar or tab shows “A Simple Webpage.”Try changing it to “My First Webpage”, save the file, and refresh your browser to see the change.
Titles are important for usability and SEO. If omitted, browsers and search engines will generate one automatically - usually not ideal.
Note
The
titleelement is nested inside thehead. Many HTML elements can contain other elements, and nesting like this is common throughout HTML. -
<body>: Contains the content that appears in the main browser window.The sentence “This is a simple webpage” appears in the browser because it is inside the body element.
So why do we only see “This is a simple webpage” in the browser? Because elements like html, head, and title provide structure and instructions - only the body content is rendered visibly.
In the next section, we’ll experiment with our webpage to see how changes affect it. After that, we’ll cover elements and their properties in more depth.