A standard HTML document structure consists of DOCTYPE declarations and html tags, which contain two parts: head and body. 1. Each HTML page should start with , followed by tag wrapping content; 2. The
part should include page title, character set declaration, viewport settings, CSS file introduction and SEO-related tags; 3. The part stores user-visible content, and it is recommended to use semantic tags such as header, nav, main, section, footer to organize layouts; 4. The current mainstream is HTML5, which is simpler than the old version and supports more semantic tags, ensuring the clear document structure and facilitating subsequent styles and functions.
A standard HTML document structure is actually not complicated, but it is the basis for web content display and subsequent function expansion. If you open the source code of any web page, you can see some basic and common tag combinations.
1. The most basic HTML structure
Each HTML page should start with , which tells the browser that the current document is using the HTML5 standard. Next is the <code> tag, which wraps the contents of the entire page.
A simplest complete structure is as follows:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is the title</h1>
<p>This is the content of the paragraph. </p>
</body>
</html> Among them, <head> part mainly stores meta information, such as page title, character encoding, style sheet link, etc.; while <body> is the part that users can really see and interact with.
2. What are the common contents of head?
Many people only remember to add a title, but in fact, there are some key elements in <head> that cannot be missing:
- Character set declaration :
<meta charset="UTF-8"> is generally used to ensure multi-language support in Chinese and other languages. - Viewport settings : Especially when adapting to the mobile terminal, it is important to add
<meta name="viewport" content="width=device-width, initial-scale=1.0"> . - Introduce CSS files : Import the style files in via
<link rel="stylesheet" href="style.css"> . - SEO related tags : For example,
<meta name="description" content="這是一個示例頁面"> can help search engines understand your page content.
Although these are not displayed directly on the page, they have a great impact on the functionality and performance of the website.
3. Basic layout structure in body
In <body> , you can put various HTML elements, such as titles, paragraphs, pictures, links, etc. In modern web development, semantic tags are often used to organize content, such as:
-
<header> means page header -
<nav> for navigation bar -
<main> contains main content -
<section> and <article> divide different blocks -
<footer> Put footer information
This writing is not only clear in structure, but also conducive to SEO and barrier-free access.
For example, you might see a structure like this:
<body>
<header>Website header</header>
<nav>Navigation Menu</nav>
<main>
<section>Main content area</section>
</main>
<footer>Bottom information</footer>
</body> 4. The difference between different HTML versions (simple)
HTML has undergone multiple versions of development, and the mainstream uses HTML5. Previous versions such as HTML4 or XHTML require more complex DOCTYPE declarations and also introduce DTD (document type definition). And now it only takes one to get it done, it is simple and compatible.
In addition, HTML5 has introduced many new tags, such as the aforementioned <article> , <section> , <canvas></canvas> , etc., which also makes it easier for developers to write semantic structures.
Basically that's it. The structure of HTML looks very simple, but if you lay this foundation, you will be more smooth after adding styles and interactions.
The above is the detailed content of What is the basic structure of an HTML document?. For more information, please follow other related articles on the PHP Chinese website!