Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 67 additions & 1 deletion docs/html/html-basics/document-structure.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,70 @@ tags: [html, web-development, document-structure]
description: In this tutorial, you will learn about the structure of an HTML document and how to create a basic HTML document.
---

<AdsComponent />
An HTML document consists of several parts that define the structure and content of the web page. Understanding the structure of an HTML document is essential for creating well-formed and valid web pages. In this tutorial, you will learn about the structure of an HTML document and how to create a basic HTML document.

<AdsComponent />

An HTML document typically consists of the following parts:

<div style={{border: "1px solid #ccc", padding: "1rem", marginBottom: "1rem"}}>

&lt;!DOCTYPE html&gt;

&lt;html&gt;

<div style={{border: "1px solid #ccc", padding: "1rem", margin: "0.5rem", marginBottom: "0.5rem"}}>

&lt;head&gt;

<div style={{border: "1px solid #ccc", padding: "1rem", margin: "0.5rem", marginBottom: "1rem"}}>

&lt;meta charset="UTF-8" /&gt;

&lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;

&lt;title&gt;My First Page&lt;/title&gt;

</div>

&lt;/head&gt;

&lt;body&gt;

<div style={{border: "1px solid #ccc", padding: "1rem", margin: "0.5rem", marginBottom: "0.5rem"}}>

&lt;h1&gt;Hello, World!&lt;/h1&gt;

&lt;p&gt;This is my first HTML page.&lt;/p&gt;

</div>

&lt;/body&gt;

</div>

&lt;/html&gt;
</div>

<br />

1. **Document Type Declaration (`<!DOCTYPE html>)`:** The document type declaration specifies the version of HTML used in the document. It is required at the beginning of an HTML document to ensure that the browser renders the page correctly.
2. **HTML Element (`<html>)`:** The root element of an HTML document that contains all other elements on the page.
3. **Head Element (`<head>)`:** The head element contains metadata about the document, such as the page title, character encoding, and links to external resources.
4. **Meta Elements (`<meta>)`:** Meta elements provide information about the document, such as the character encoding and viewport settings.
5. **Title Element (`<title>)`:** The title element sets the title of the document, which is displayed in the browser tab.
6. **Body Element (`<body>)`:** The body element contains the visible content of the document, such as headings, paragraphs, images, and links.
7. **Content Elements:** These elements define the structure and content of the web page, such as headings (`<h1>-<h6>`), paragraphs (`<p>`), lists (`<ul>`, `<ol>`, `<li>`), and other HTML elements.
8. **Comments (`<!-- -->`):** Comments are used to add notes or descriptions to the HTML code that are not displayed in the browser.
9. **Whitespace:** Whitespace, such as spaces, tabs, and line breaks, is used to format the HTML code for readability. It does not affect the rendering of the web page.
10. **Attributes:** Attributes provide additional information about HTML elements and are used to modify the behavior or appearance of elements. For example, the `lang` attribute specifies the language of the document.
11. **Nested Elements:** HTML elements can be nested inside each other to create a hierarchical structure. For example, a paragraph element (`<p>`) can be nested inside a div element (`<div>`).
12. **Closing Tags:** Most HTML elements have opening and closing tags to enclose the content of the element. For self-closing elements, such as images (`<img>`), the closing tag is optional.

Understanding the structure of an HTML document is essential for creating well-organized and semantically correct web pages. By following the standard structure of an HTML document, you can ensure that your web pages are compatible with different browsers and devices. In the next sections, we will explore each part of an HTML document in more detail and learn how to create and customize HTML elements.

<AdsComponent />

## Conclusion

In this tutorial, you learned about the structure of an HTML document and the different parts that make up an HTML page. By understanding the role of each element in an HTML document, you can create well-formed and valid web pages that are compatible with modern browsers and devices. In the next tutorials, we will explore each part of an HTML document in more detail and learn how to create and style HTML elements for building web pages.
Loading
Loading