HTML Document Structure

Master HTML with Coddy

Learn HTML through interactive, bite-sized lessons. Build real websites and see your code come to life instantly.

The HTML document structure forms the foundation of every web page. It provides a standardized framework for organizing content and ensuring proper rendering across different browsers.

Basic Structure

An HTML document consists of several key elements:





    
    Page Title

DOCTYPE Declaration

The <!DOCTYPE html> declaration informs the browser that this is an HTML5 document. It should always be the first line of your HTML file.

HTML Element

The <html> element is the root element of an HTML page. It wraps all the content and typically includes the lang attribute to specify the language of the document.

Head Section

The <head> section contains meta-information about the HTML page. It includes:

<meta> tags for character encoding and viewport settings
<title> tag for the page title
Links to external resources like CSS stylesheets

For more details on the head section, refer to the HTML Head guide.

Body Section

The <body> element contains the visible content of the web page, such as text, images, and other HTML Elements.

Example with Content

Here's a more comprehensive example of an HTML document structure:





    
    
    My First Web Page
    


    
        Welcome to My Website
    
    
        
            Home
            About
            Contact
        
    
    
        This is the main content of my web page.
    
    
        © 2023 My Website. All rights reserved.

Best Practices

Always include the DOCTYPE declaration
Use semantic HTML5 Semantic Elements for better structure and accessibility
Include essential meta tags for proper rendering and SEO
Keep the structure clean and well-organized
Validate your HTML using online tools to ensure compliance with standards

Understanding the HTML document structure is crucial for creating well-formed web pages. It sets the stage for adding more complex HTML Elements and implementing HTML Responsive Web Design techniques.

Related Concepts

To deepen your understanding of HTML, explore these related topics:

By mastering the HTML document structure, you'll have a solid foundation for building more complex and feature-rich web pages.