<html> - the root element of an HTML document
<html> is the root element of an HTML document, and all other elements must be nested within it. It defines the beginning and end of the document and carries metadata (such as <head>) and content (such as <body>). Understanding the attributes and usage of <html> is fundamental to building valid web pages.
Basic Structure of <html>
A standard HTML document must start with the <html> tag and end with the </html> tag. Its basic structure is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!-- Page content -->
</body>
</html>
The <!DOCTYPE html> declaration specifies the document type as HTML5, while <html> wraps the entire document content. The lang attribute specifies the primary language of the document (e.g., en for English).
Core Attributes of <html>
<html> supports several global attributes, but the following are particularly important:
-
lang
Defines the language of the document, affecting search engines and screen readers. For example:<html lang="zh-CN"> <!-- Simplified Chinese --> -
dir
Controls text direction, with possible values ofltr(left-to-right) orrtl(right-to-left):<html dir="rtl"> <!-- Right-to-left languages like Arabic --> -
xmlns
Declares the XML namespace in XHTML (usually omitted in HTML5):<html xmlns="http://www.w3.org/1999/xhtml">
<html> and the Document Type Declaration
The <!DOCTYPE> must precede <html> and cannot be omitted. It ensures the browser renders the page in standards mode. For example:
<!DOCTYPE html> <!-- HTML5 document type -->
<html>
<!-- Content -->
</html>
Omitting <!DOCTYPE> may cause the browser to enter quirks mode, leading to styling and layout issues.
Child Elements of <html>
<html> can only contain two direct child elements:
-
<head>
Contains metadata (e.g., title, charset, CSS/JS links):<head> <meta charset="UTF-8"> <title>Example Page</title> </head> -
<body>
Contains the visible page content:<body> <h1>Welcome</h1> <p>This is a paragraph.</p> </body>
Practical Examples
Multilingual Site
Dynamically modify the lang attribute of <html> for language switching:
<html lang="ja"> <!-- Japanese -->
<body>
<button onclick="document.documentElement.lang='zh'">Switch to Chinese</button>
</body>
</html>
Responsive Design
Use CSS's :root pseudo-class (which targets <html>) to define global variables:
:root {
--primary-color: #3498db;
}
body {
color: var(--primary-color);
}
Common Errors and Validation
-
Missing Closing Tag
The following code will cause a parsing error:<html> <body> <!-- Content --> </body> <!-- Missing </html> --> -
Incorrect Nesting
<html>must be the outermost element of the document and cannot be nested within other tags:<!-- Incorrect Example --> <div> <html></html> </div> -
Duplicate Tags
Only one<html>tag is allowed per document:<!-- Incorrect Example --> <html></html> <html></html>
Extended Uses of <html>
-
JavaScript Manipulation
Access the<html>element viadocument.documentElement:// Change background color document.documentElement.style.backgroundColor = "#f0f0f0"; -
CSS Scoping
Use<html>to scope styles:html.dark-mode { background: #333; color: white; }Toggle themes with JS:
document.documentElement.classList.toggle("dark-mode");
本站部分内容来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn
上一篇：-文档类型声明
下一篇：<head>-文档头部容器
