HTML <html> Tag

The HTML <html> tag is the root element of an HTML document. It defines the beginning and end of an HTML document and acts as a container for all other elements, including the <head> and <body> tags. Every HTML document starts with the <html> tag and ends with </html>.

The <html> tag provides essential information about the document, such as the language of the content through attributes, and lays the foundation for the structure of a webpage.

Basic Syntax of HTML <html> Tag

The basic structure of an HTML document with the <html> tag is:

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        Document metadata goes here.
    </head>
    <body>
        Visible content goes here.
    </body>
</html>

The <html> element contains two main sections:

  • <head>: Includes metadata about the document, such as the title, character encoding, styles, and scripts.
  • <body>: Contains the visible content of the webpage, such as text, images, and interactive elements.

Attributes of HTML <html> Tag

  • lang: Specifies the language of the document’s content. For example, lang="en" for English.
  • dir: Defines the text direction for the content. Common values include:
    • ltr: Left-to-right (default, used for languages like English).
    • rtl: Right-to-left (used for languages like Arabic or Hebrew).
  • Global Attributes: Supports all global attributes, such as id, class, and style.

Basic Example of HTML <html> Tag

Here’s a simple example of a complete HTML document:

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My First HTML Document</title>
    </head>
    <body>
        <h1>Welcome to My Website</h1>
        <p>This is a sample HTML document.</p>
    </body>
</html>
Basic Example of HTML <html> Tag

Explanation: This example defines a basic HTML document with a title, language, and visible content in the body.

Using the lang Attribute

The lang attribute specifies the language of the document’s content. This helps search engines and screen readers process the content correctly:

index.html

</>
Copy
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>Bienvenue</title>
    </head>
    <body>
        <h1>Bienvenue sur mon site Web</h1>
        <p>Ceci est un exemple de document HTML en français.</p>
    </body>
</html>

Explanation: The lang="fr" attribute indicates that the content is in French, improving accessibility for French-speaking users.

Using the dir Attribute in <html> tag

The dir attribute specifies the text direction of the content. Here’s an example using right-to-left text direction:

index.html

</>
Copy
<!DOCTYPE html>
<html lang="ar" dir="rtl">
    <head>
        <meta charset="UTF-8">
        <title>مرحبا بكم</title>
    </head>
    <body>
        <h1>مرحبا بكم في موقعي</h1>
        <p>هذا مثال على مستند HTML باللغة العربية.</p>
    </body>
</html>
Using the dir Attribute in <html> tag

Explanation: The dir="rtl" attribute makes the text flow from right to left, suitable for languages like Arabic and Hebrew.

Styling the HTML Document in <html> tag

You can apply CSS to the entire document by styling the <html> tag:

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en" style="background-color: #f0f000; color: #333;">
    <head>
        <meta charset="UTF-8">
        <title>Styled Document</title>
    </head>
    <body>
        <h1>Hello, World!</h1>
        <p>This document has a light gray background and dark text color.</p>
    </body>
</html>
Styling the HTML Document

Result: The document background appears light gray, and the text color is dark, as defined in the inline style of the <html> tag.

Practical Applications of the <html> Tag

  • Root Element: Acts as the root container for all HTML content in the document.
  • Language and Direction: Sets the document’s language and text direction using lang and dir attributes.
  • Styling: Provides a base for applying global styles to the entire webpage.
  • Structure: Ensures that the document is well-structured and adheres to HTML standards.