In HTML, the document structure is divided into two main sections: the document head and the document body. Each section serves a distinct purpose and contains specific elements that contribute to the overall structure, content, and functionality of the web page.
1. Document Head: The document head contains metadata and other information about the document, including the title, character encoding, stylesheets, scripts, and viewport settings. It is not directly visible to users but provides essential information to web browsers, search engines, and other agents accessing the document.
Commonly used HTML commands in the document head include:
- <title>: Defines the title of the document, which appears in the browser’s title bar or tab.
Example:
<title>My Website</title>
- <meta>: Specifies metadata about the document, such as character encoding, viewport settings, and authorship information.
Example:
<meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
- <link>: Links external resources, such as stylesheets or favicons, to the document.
Example:
<link rel=”stylesheet” href=”styles.css”>
- <script>: Embeds JavaScript code or links external JavaScript files.
Example:
<script src=”script.js”></script>
2. Document Body: The document body contains the main content of the web page, including text, images, links, forms, and other interactive elements. It is visible to users and defines the structure and layout of the page.
Commonly used HTML commands in the document body include:
- <h1> to <h6>: Defines headings of varying levels, with <h1> being the highest level and <h6> being the lowest.
Example:
<h1>Main Heading</h1> <h2>Subheading</h2>
- <p>: Defines paragraphs of text.
Example:
<p>This is a paragraph of text.</p>
- <img>: Inserts images into the document.
Example:
<img src=”image.jpg” alt=”Image”>
- <a>: Creates hyperlinks to other web pages or resources.
Example:
<a href=”https://example.com”>Link Text</a>
- <div> and <span>: Divides the document into sections or groups of elements, allowing for styling and layout control.
Example:
<div> <p>Text in a div element.</p> </div>
- <form>: Defines a form for user input, including input fields, buttons, and other form elements.
Example:
<form action=”/submit-form” method=”post”>
<input type=”text” name=”username” placeholder=”Username”>
<button type=”submit”>Submit</button>
</form>
These are just a few examples of commonly used HTML commands in the document head and document body. HTML provides a wide range of elements and attributes for structuring and formatting web pages, allowing developers to create rich and interactive user experiences.