HTML Tag: The Root of Document

Learn about html the <html> tag, the root element, and the lang attribute.

Introduction

<html> is the root element of every HTML page. Let's learn about it!

What You Will Learn

  • What the <html> tag does
  • Basic usage
  • The lang attribute
  • Best practices

What is <html>?

<html> is the root element:

  • Contains all other elements
  • Everything is a parent <head> and <body>
  • Itself <html> → <head> and <body>

Basic Syntax

<!DOCTYPE html>
<html>
    <head>
        <!-- Metadata -->
    </head>
    <body>
        <!-- Content -->
    </body>
</html>

The lang Attribute

Always add the **language attribute!

<html lang="en">

This tells:

  • Browsers the page language
  • Search engines
  • Screen readers
  • Translation tools

Common Language Codes

| Code | Language | |------|----------| | en | English | | es | Spanish | | fr | French | | de | German | | zh | Chinese | | ja | pt | Portuguese | | ar | Arabic | | hi | Hindi |

Regional Variations

<html lang="en-US">  <!-- US English -->
<html lang="en-GB">  <!-- British English -->
<html lang="es-MX">  <!-- Mexican Spanish -->

Why lang Benefits

✅ Accessibility: Screen readers use correct pronunciation ✅ SEO: Search engines know language ✅ Translation: Auto-translate works better ✅ Spell check: Browser spell checks correctly ✅ Typography: Better typography for language

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page</title>
</head>
<body>
    <h1>Hello!</h1>
</body>
</html>

Other Attributes (Rarely Used)

dir - Text Direction

<html lang="ar" dir="rtl">  <!-- Right-to-left for Arabic/Hebrew -->
<html lang="en" dir="ltr">  <!-- Left-to-right (default) -->

Best Practices

✅ Always include <html> tag ✅ Always add the lang attribute ✅ Use correct language code ✅ Keep it the doctype first ✅ <html> is the second element (after doctype)

Common Mistakes

❌ Forgetting <html> tag

<!DOCTYPE html>
<head>...</head>
<body>...</body>

❌ Forgetting lang attribute

<html>  <!-- Missing lang attribute -->

❌ Putting content directly in <html>

<html>
    <p>Wrong!</p>  <!-- No! Put in <body>!
    <head>...</head>
    <body>...</body>
</html>

FAQs

**Q: <html> mandatory? A: Technically browsers often work it's always include for clarity and standards compliance.

**Q: What the lang attribute? A: Accessibility tools SEO might not work well, search engines won't know language.

**Q: Can change lang later? A: Yes, but set it from the start.

Related Topics

  • Doctype HTML
  • Head Tag
  • Body Tag

Summary

<html> is the root element always has <head> and <body>. Always include the lang attribute for accessibility and SEO!

Next Topic

Let's learn about Head Tag!

← Back to Syllabus