The Basic Structure of an HTML Document
Learn the key HTML tags that form the structure of a web page and how they work together.
We'll cover the following...
To start with web development, let's begin with understanding the fundamental structure of an HTML document. HTML (HyperText Markup Language) is the standard markup language used to create web pages. At its core, an HTML document provides the structure of content on the web, allowing browsers to interpret and display text, images, and other multimedia elements.
The elements of an HTML document
Every HTML document starts with a declaration and a set of essential tags that define its structure:
The <!DOCTYPE html> declaration
At the very top of our HTML file is the <!DOCTYPE html> declaration that informs the browser that the document type is HTML5. This declaration ensures that the browser renders the page correctly, adhering to modern web standards. It doesn’t have a closing tag and is a critical component for compatibility.
The <html> tag
Following the doctype declaration, the <html> tag encapsulates all the content of our web page. It signifies the beginning and the end of an HTML document. The entire structure of our web page, including both visible content and metadata, is contained within this tag:
<html><!-- The web page content goes here --></html>
The <head> section
Nested within the <html> tag, the <head> section contains meta-information about the document that doesn’t appear directly on the web page. This includes the page title, character set declarations, links to
<head><title>My First Web Page</title></head>
The <title> tag in the above code sets the title of the web page, which appears on the browser tab or window title bar.
The <body> section
Also within the <html> tag, the <body> section holds all the content that will be displayed to users when they visit our page. This includes text, images, links, tables, and other multimedia elements:
<body><h1>Welcome to My Web Page</h1><p>This is where the content goes.</p></body>
The child element in HTML
A child tag refers to an HTML element that is directly nested within a parent tag. For example, if one tag is enclosed within another, the enclosed tag is the child.
<div><p>This is a child tag of the div.</p></div>
In this example, the <p> tag is a child of the <div> tag.
Creating your first HTML file
With an understanding of these basic tags, we’re now ready to create our first HTML document. A sample code snippet is provided below. Feel free to change the code and play around.
Explanation
Line 1: The
<!DOCTYPE html>declaration tells the browser to expect an HTML5 document.Line 2: The
<html>tags enclose the entire document content.Lines 4–6: Inside
<head>, the<title>tag sets the page title.Lines 8–11: The
<body>contains a heading (<h1>) and a paragraph (<p>), which will be displayed on the web page.
Saving the file:
HTML documents are saved with a
.htmlextension, such asindex.html.When saving the document, ensure that “All Files” in the “Save as type” drop-down list is selected to prevent the editor from adding a
.txtextension.Use a simple text editor like Notepad (Windows) or TextEdit (Mac). Avoid using word processors like Microsoft Word, as they add extra formatting unsuitable for HTML.
View the file in a web browser
We can also download the file and navigate to the download location file to open it with a web browser like Chrome, Firefox, or Safari. We should see the heading and paragraph displayed, confirming that the HTML page works.
By understanding and utilizing these fundamental tags, we’ve established the basic structure of an HTML document. This foundation will allow us to build more complex web pages as we continue our journey into web development.
Quick Quiz
Which declaration informs the browser that the document is HTML5?
<!DOCTYPE html>
<head>
<body>
<html>