Introduction
In this chapter, you will learn about the structure of an HTML document. Understanding the structure is crucial for creating well-organized and functional web pages. By the end of this chapter, you will be familiar with the main components of an HTML document and their roles.
Simple Structure of HTML Document
<!DOCTYPE html>
|
|-- <html lang="en">
|
|-- <head>
| |
| |-- <meta charset="UTF-8">
| |
| |-- <meta name="viewport" content="width=device-width, initial-scale=1.0">
| |
| |-- <title>Document Title</title>
|
|-- <body>
|
|-- <h1>Heading 1</h1>
|
|-- <p>This is a paragraph.</p>
|
|-- <!-- More content can be added here -->
Explanation
<!DOCTYPE html>
This declaration defines the document type and version of HTML. It helps the browser understand that the document is an HTML5 document.
<html lang="en">
This is the root element of the HTML document. The lang attribute specifies the language of the document (in this case, English).
<head>
The head section contains meta-information about the document. It includes elements like meta tags, the title of the document, and links to external resources such as stylesheets or scripts.
<meta charset="UTF-8">
This meta tag specifies the character encoding for the document, ensuring that the text is displayed correctly.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This meta tag ensures the webpage is responsive by controlling the layout on different devices.
<title>
The title element sets the title of the document, which is displayed in the browser’s title bar or tab.
<body>
The body section contains the actual content of the document, such as headings, paragraphs, images, links, and other elements that will be visible to the user.
<h1>
This heading element defines the main heading of the document. There are six levels of headings (<h1> to <h6>), with <h1> being the highest level.
<p>
This paragraph element is used to define a block of text. It is commonly used to display content on the web page.
Comments
HTML comments (<!-- comment -->) are used to leave notes within the code. Comments are not displayed in the browser.
Conclusion
Understanding the structure of an HTML document is essential for creating well-organized and functional web pages. This basic structure serves as the foundation for more complex HTML documents. As you continue to learn and practice, you’ll become more comfortable with these components and how they work together to build web pages.