Logo
Tutorials Articles Code Playground
Sign In Get Started
Module: HTML Basics

HTML document structure

HTML Basics: HTML Document Structure

Every HTML document follows a basic structure. Understanding this structure is fundamental to writing valid and well-organized HTML. Here's a breakdown:

1. <!DOCTYPE html>:

  • This declaration is not an HTML tag. It's an instruction to the web browser about the version of HTML being used.
  • <!DOCTYPE html> tells the browser to expect HTML5. It should be the very first thing in your HTML document.

2. <html>:

  • This is the root element of the entire HTML page. All other HTML elements are descendants of this tag.
  • It has a start tag <html> and a closing tag </html>.
  • Often includes the lang attribute to specify the language of the document (e.g., <html lang="en">).

3. <head>:

  • Contains meta-information about the HTML document. This information isn't displayed directly on the page itself, but is used by browsers, search engines, and other web services.
  • Key elements within <head>:
    • <title>: Specifies a title for the HTML page (which is shown in the browser's title bar or tab). Required.
    • <meta>: Provides metadata like character set, description, keywords, author, and viewport settings. Crucial for SEO and responsiveness.
      • Example: <meta charset="UTF-8"> (sets character encoding to UTF-8, supporting most characters)
      • Example: <meta name="description" content="A brief description of your webpage.">
    • <link>: Defines the relationship between the current document and an external resource, most commonly used to link to CSS stylesheets.
      • Example: <link rel="stylesheet" href="style.css">
    • <style>: Used to embed CSS styles directly within the HTML document (generally not recommended for larger projects).
    • <script>: Used to embed client-side scripts (JavaScript) within the HTML document or link to external JavaScript files.

4. <body>:

  • Contains the visible page content. Everything you want the user to see on the webpage goes inside the <body> tag.
  • This includes text, images, links, tables, lists, and all other visible elements.
  • Common elements within <body>:
    • <header>: Typically contains introductory content, navigation, or a logo.
    • <nav>: Defines a section for navigation links.
    • <main>: Represents the main content of the document.
    • <article>: A self-contained composition in a document, page, application, or site.
    • <section>: A thematic grouping of content, typically with a heading.
    • <aside>: Content that is tangentially related to the main content.
    • <footer>: Typically contains information about the author, copyright, contact information, etc.
    • <p>: Paragraph
    • <h1> - <h6>: Headings (levels 1-6)
    • <a>: Links
    • <img>: Images
    • <ul>, <ol>, <li>: Unordered and ordered lists, and list items.
    • <div>: A generic container for flow content.
    • <span>: A generic inline container for phrasing content.

Example HTML Document Structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Webpage</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Welcome to My Website!</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <p>This is the main content of my webpage.</p>
  </main>

  <footer>
    <p>&copy; 2023 My Website</p>
  </footer>
</body>
</html>

Key Takeaways:

  • The structure is hierarchical: <html> contains <head> and <body>, and so on.
  • Proper nesting of tags is crucial for valid HTML.
  • The <head> provides information about the page, while the <body> contains the content of the page.
  • Understanding this structure is the foundation for building more complex and well-organized web pages.