The basic structure of an HTML5 document

Author：Chuan Chen 阅读数：32074人阅读分类： HTML

The basic structure of an HTML5 document is the foundation of web page construction. Understanding its components and writing standards is crucial for developers. From the document type declaration to the nesting relationships of various elements, every detail affects how a web page is rendered and how its functionality is implemented.

Document Type Declaration

The document type declaration in HTML5 is extremely concise, requiring only one line of code at the beginning of the document:

<!DOCTYPE html>

This declaration informs the browser that the current document uses the HTML5 standard. Compared to HTML4.01 or XHTML1.0, the HTML5 DOCTYPE declaration is much simpler and does not require referencing a DTD (Document Type Definition).

The Root `html` Element

After the DOCTYPE declaration, the root html element follows, which wraps the entire document content:

<html lang="zh-CN">

The lang attribute specifies the primary language of the document, which is important for search engines and screen readers. Chinese web pages are typically set to "zh-CN" (Simplified Chinese) or "zh-TW" (Traditional Chinese).

The `head` Element

The head element contains the document's metadata, which is not directly displayed on the page:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
</head>

Key components include:

meta charset: Specifies the character encoding; UTF-8 supports multiple languages.
viewport meta: Controls mobile viewport behavior.
title: Defines the title displayed on the browser tab.
link: Imports an external CSS stylesheet.
script: Imports a JavaScript file; the defer attribute indicates deferred execution.

The `body` Element

The body element contains all visible content:

<body>
    <header>
        <h1>Website Main Title</h1>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <h2>Article Title</h2>
            <p>Here is the article content...</p>
        </article>
    </main>
    
    <footer>
        <p>© 2023 Company Name</p>
    </footer>
</body>

HTML5 introduces semantic elements to make the document structure clearer:

header: The page header, usually containing the logo and navigation.
nav: Navigation links.
main: The main content of the document.
article: An independent content block.
footer: The page footer, containing copyright information, etc.

Complete HTML5 Document Example

Combining the above sections, a complete HTML5 document structure looks like this:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Web Page</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section id="home">
            <h2>Home Content</h2>
            <p>This is the main content area of the website...</p>
        </section>
        
        <article id="about">
            <h2>About Us</h2>
            <p>Company profile information...</p>
        </article>
    </main>
    
    <aside>
        <h3>Related Links</h3>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
        </ul>
    </aside>
    
    <footer>
        <p>© 2023 My Company. All Rights Reserved.</p>
    </footer>
    
    <script src="js/main.js"></script>
</body>
</html>

Importance of Semantic Structure

HTML5's semantic elements not only make the code more readable but also improve accessibility and SEO:

<section>
    <h2>Product Features</h2>
    <figure>
        <img src="product.jpg" alt="Product Image">
        <figcaption>Our Flagship Product</figcaption>
    </figure>
    <details>
        <summary>Detailed Specifications</summary>
        <p>Size: 10x20cm</p>
        <p>Weight: 500g</p>
    </details>
</section>

section: Defines a section or segment in the document.
figure: Contains self-contained content like images or charts.
details: Creates expandable/collapsible detailed content.
time: Machine-readable date and time.

Multimedia Elements

HTML5 natively supports multimedia content:

<video controls width="640">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    Your browser does not support HTML5 video.
</video>

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Your browser does not support HTML5 audio.
</audio>

Form Enhancements

HTML5 adds new input types and attributes for forms:

<form>
    <label for="email">Email:</label>
    <input type="email" id="email" required>
    
    <label for="date">Date:</label>
    <input type="date" id="date">
    
    <label for="range">Volume:</label>
    <input type="range" id="range" min="0" max="100">
    
    <input type="submit" value="Submit">
</form>

New input types include email, url, tel, number, date, etc., and browsers automatically validate their formats.

Basics of Responsive Design

HTML5 structure is closely related to responsive design:

<picture>
    <source media="(min-width: 1200px)" srcset="large.jpg">
    <source media="(min-width: 768px)" srcset="medium.jpg">
    <img src="small.jpg" alt="Responsive Image">
</picture>

The picture element allows loading different image resources based on device characteristics.

Microdata and Structured Data

HTML5 supports marking up content with microdata:

<div itemscope itemtype="https://schema.org/Person">
    <h2 itemprop="name">John Doe</h2>
    <p itemprop="jobTitle">Web Designer</p>
    <p>Phone: <span itemprop="telephone">123-456-7890</span></p>
</div>

This markup helps search engines better understand the page content.

做个网站！

本站部分内容来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn

上一篇：HTML5的未来发展趋势

下一篇：HTML5的标签语法规则