In the previous part, we learned about the basics of HTML and CSS. Now, we’ll dive deeper into the structure of an HTML document and the fundamental elements that make up a webpage.
Table of Contents
The Structure of an HTML Document
An HTML document consists of several essential elements that define its structure. These elements include the doctype declaration, the
<html> element, the
<head> element, and the
- Doctype Declaration: At the beginning of an HTML document, you’ll find the doctype declaration. It tells the browser which version of HTML the document is using. For HTML5, the doctype declaration is
<html>element is the root element of an HTML document. It contains all other elements within the document, and it should include a
langattribute to specify the language of the document’s content (e.g.,
<head>element is a container for metadata about the document, such as the title, character encoding, and external resources like stylesheets and scripts. It does not display content on the webpage.
<body>element contains the actual content of the webpage, such as text, images, links, and multimedia. This is what users see and interact with when they visit your website.
Here’s a simple example of an HTML document with the correct structure:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My First Webpage</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Welcome to My Webpage</h1> <p>This is a paragraph of text.</p> <ul> <li>Item 1</li> <li>Item 2</li> </ul> </body> </html>
In this example, we’ve added a
<link> element inside the
<head> section to include an external stylesheet (styles.css). We’ve also added an unordered list (
<ul>) with list items (
<li>) inside the
Now that you understand the structure of an HTML document, try to create a well-structured HTML file based on the example above. You can use the previous exercise’s file or create a new one.
- Add more content to your webpage, such as a navigation menu with links (
<a>elements), an image gallery (
<img>elements), and a footer (
- Organize your content using semantic HTML elements, such as
In the next part of Lesson 1, we’ll learn how to create a simple HTML page from scratch, incorporating the concepts we’ve covered so far.