Lesson Outcomes
After completing this lesson, learners will be able to:
- Define an HTML document.
- Identify the basic structure of an HTML document.
- Explain the purpose of key HTML elements such as
<html>,<head>, and<body>. - Differentiate between tags and elements.
- Understand the role of the DOCTYPE declaration.
Overview
An HTML document is the foundation of every web page. It defines the structure and content that a web browser displays.
Understanding the structure of an HTML document is essential because it ensures that web pages:
- Display correctly in browsers
- Follow proper standards
- Are easy to read and maintain
HTML documents use a structured format made up of elements, tags, and attributes that work together to organise content.
1. What is an HTML Document?
An HTML document is a file used to create web pages.
It contains:
- Text content
- HTML tags
- Elements that define structure
Key characteristics include:
- Uses markup (tags) to structure content
- Can include text, images, links, and multimedia
- Is interpreted by web browsers
HTML documents form the backbone of websites and allow users to view content online.
2. Basic Structure of an HTML Document
An HTML document follows a standard structure.
The main parts include:
<!DOCTYPE html><html><head><body>
Example Structure
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is a simple HTML page.</p>
</body>
</html>This structure ensures that browsers correctly interpret and display the content.
3. Key HTML Elements
3.1 <html> Element
- The root element of the document
- Wraps all content on the page
- Indicates that the document is an HTML file
3.2 <head> Element
- Contains metadata about the page
- Not visible to users
- Used for:
- Page title
- Character encoding
- Linking stylesheets
3.3 <body> Element
- Contains all visible content
- Displays:
- Text
- Images
- Links
- Media
Everything users see on a web page is inside the <body> element.
4. Tags vs Elements
Understanding the difference between tags and elements is important.
4.1 Tags
Tags are used to define elements.
Examples include:
<p><h1><a>
Tags are written inside angle brackets.
4.2 Elements
An element includes:
- Opening tag
- Content
- Closing tag
Example:
<p>This is a paragraph</p>Key Difference
- A tag is the label
- An element is the complete structure
5. DOCTYPE Declaration
The DOCTYPE declaration appears at the top of the HTML document.
Example:
<!DOCTYPE html>Purpose of DOCTYPE
- Defines the HTML version
- Ensures proper rendering in browsers
- Helps maintain consistency across platforms
It is an essential part of every HTML document.
6. Structure of Content in HTML
HTML uses elements to organise content.
Common elements include:
- Headings (
<h1>to<h6>) - Paragraphs (
<p>) - Links (
<a>) - Images (
<img>)
These elements help create a logical structure for web pages.
Key Notes
- An HTML document defines the structure of a web page.
- It includes elements such as
<html>,<head>, and<body>. - The DOCTYPE declaration defines the HTML version.
- Tags are used to create elements.
- Elements include opening tags, content, and closing tags.
- Proper structure ensures correct display in browsers.
- HTML is used to organise and present web content.