HTML Document Structure

1. Document Structure (<!DOCTYPE html>, <html>, <head>, <body>)

This is the basic structure of an HTML document, including the document type declaration and the main tags used to organize the content.

HTML Example:


<!DOCTYPE html>
<html lang="en">
<head>
    <!-- The <meta> tag defines metadata about the HTML document, such as character encoding, author, and viewport settings. -->
    <meta charset="UTF-8">
    <meta name="description" content="A brief description of the webpage content.">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="author" content="Your Name">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- The <title> tag defines the title of the webpage, which appears on the browser tab. -->
    <title>My Webpage</title>

    <!-- The <link> tag is used to link external resources like CSS files to the HTML document. -->
    <link rel="stylesheet" href="styles.css">

    <!-- The <style> tag contains internal CSS, which allows you to add styles directly within the HTML document. -->
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }
        h1 {
            color: #333;
        }
    </style>

    <!-- The <script> tag is used to include JavaScript code or link to external JavaScript files. -->
    <script>
        function displayMessage() {
            alert("Welcome to my webpage!");
        }
    </script>
</head>
<body onload="displayMessage()">
    <!-- The <body> tag contains all the content of the webpage, such as text, images, and links. -->
    <h1>Hello, World!</h1>
    <p>This is a simple webpage example.</p>
</body>
</html>

Explanation:

<!DOCTYPE html>: This declaration defines the document type and version of HTML (in this case, HTML5). It ensures that the browser correctly interprets the document.
<html>: This is the root element of an HTML document. The lang attribute defines the language of the document.
<head>: This element contains meta-information about the document, such as the title, character set, linked stylesheets, and scripts. It does not display content directly on the webpage.
<meta>: These tags provide metadata about the HTML document, which is used by browsers and search engines. For example, charset="UTF-8" specifies the character encoding, while viewport controls how the page is displayed on different devices.
<title>: This tag sets the title of the webpage, which is displayed on the browser tab and used by search engines.
<link>: This tag is used to link external resources like CSS files to the document. The rel="stylesheet" attribute specifies the relationship between the current document and the linked file.
<style>: This tag allows you to write internal CSS directly in the HTML document. It is useful for adding quick styles without linking an external stylesheet.
<script>: This tag is used to include JavaScript code, which can be written directly within the tag or linked from an external file using the src attribute.
<body>: This element contains all the visible content of the webpage, such as headings, paragraphs, images, and more. The onload attribute in this example runs a JavaScript function when the page is loaded.

Rendered Example:

Hello, World!

This is a simple webpage example.