* HTML Document Structure :
An HTML document is structured using a specific set of elements that define the document's content and layout. Here's a basic outline of an HTML document structure
* OUTPUT :
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="A brief description of the page content">
- <title>Document Title</title>
- <link rel="stylesheet" href="styles.css"> <!-- Link to external CSS file -->
- </head>
- <body>
- <header>
- <h1>Page Title</h1>
- <nav>
- <ul>
- <li><a href="#section1">Section 1</a></li>
- <li><a href="#section2">Section 2</a></li>
- <li><a href="#section3">Section 3</a></li>
- </ul>
- </nav>
- </header>
- <main>
- <section id="section1">
- <h2>Section 1</h2>
- <p>This is the first section of the document.</p>
- </section>
- <section id="section2">
- <h2>Section 2</h2>
- <p>This is the second section of the document.</p>
- </section>
- <section id="section3">
- <h2>Section 3</h2>
- <p>This is the third section of the document.</p>
- </section>
- </main>
- <footer>
- <p>© 2024 Your Name. All rights reserved.</p>
- </footer>
- <script src="script.js"></script> <!-- Link to external JavaScript file -->
- </body>
- </html>
Page Title
Section 1
This is the first section of the document.
Section 2
This is the second section of the document.
Section 3
This is the third section of the document.
* Explanation of the Elements :
<!DOCTYPE html>: Declares the document type and version of HTML being used.<html lang="en">: The root element of the HTML document, with thelangattribute specifying the language.<head>: Contains meta-information about the document, such as its title, character set, and links to external resources like CSS files.<meta charset="UTF-8">: Sets the character encoding for the document.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures the page is responsive on different devices.<meta name="description" content="A brief description of the page content">: Provides a description of the page for search engines.<title>Document Title</title>: Sets the title of the document, which appears in the browser tab.<link rel="stylesheet" href="styles.css">: Links to an external CSS file for styling.
<body>: Contains the content of the document that is displayed to the user.<header>: Typically contains introductory content or navigational links.<h1>Page Title</h1>: Main heading of the page.<nav>: Defines a section for navigation links.<ul>: Unordered list of navigation links.<li><a href="#section1">Section 1</a></li>: List item containing a link to another section of the document.
<main>: Main content of the document.<section id="section1">: Defines a section with a unique ID for navigation.<h2>Section 1</h2>: Subheading of the section.<p>This is the first section of the document.</p>: Paragraph of text within the section.
<footer>: Contains footer information like copyright or contact info.<p>© 2024 Your Name. All rights reserved.</p>: Paragraph with copyright notice.
<script src="script.js"></script>: Links to an external JavaScript file for additional functionality.
This structure ensures that the HTML document is well-organized, accessible, and easy to maintain.