HTML-тег <html>

HTML-тег <html> является корневым элементом HTML-документа. Он определяет начало и конец HTML-документа и служит контейнером для всех остальных элементов, включая теги <head> и <body> . Каждый HTML-документ начинается с тега <html> и заканчивается тегом </html> .

Тег <html> предоставляет важную информацию о документе, например, язык содержимого посредством атрибутов, и закладывает основу для структуры веб-страницы.

Базовый синтаксис HTML-тега <html>

Базовая структура HTML-документа с тегом <html> : 

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

Элемент <html> содержит две основные секции:

  • <head>: Включает метаданные о документе, такие как заголовок, кодировка символов, стили и сценарии.
  • <body>: Содержит видимое содержимое веб-страницы, такое как текст, изображения и интерактивные элементы.

Атрибуты HTML-тега <html>

  • lang: определяет язык содержимого документа. Например, lang="en" для английского.
  • dir: определяет направление текста для содержимого. Возможные значения: <ul class="wp-block-list">
  • ltr : слева направо(по умолчанию, используется для таких языков, как английский).
  • rtl : справа налево(используется для таких языков, как арабский или иврит).
  • Глобальные атрибуты: поддерживает все глобальные атрибуты, такие как id , class и style .

    • Базовый пример HTML-тега <html>

    Вот простой пример полного HTML-документа: 

    <!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>
    Базовый пример HTML-тега html

    Пояснение: В этом примере определяется базовый HTML-документ с заголовком, языком и видимым содержимым в теле.

    Использование атрибута lang

    Атрибут lang определяет язык содержимого документа. Это помогает поисковым системам и программам чтения с экрана корректно обрабатывать содержимое: 

    <!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>

    Объяснение: Атрибут lang="fr" указывает, что контент на французском языке, что улучшает доступность для франкоговорящих пользователей.

    Использование атрибута dir в теге <html>

    Атрибут dir определяет направление текста в содержимом. Вот пример с направлением текста справа налево: 

    <!DOCTYPE html>
<html lang="ar" dir="rtl">
    <head>
        <meta charset="UTF-8">
        <title>مرحبا بكم</title>
    </head>
    <body>
        <h1>مرحبا بكم في موقعي</h1>
        <p>هذا مثال على مستند HTML باللغة العربية.</p>
    </body>
</html>
    Использование атрибута dir в теге html

    Пояснение: Атрибут dir="rtl" заставляет текст располагаться справа налево, что подходит для таких языков, как арабский и иврит.

    Оформление HTML-документа в теге <html>

    Вы можете применить CSS ко всему документу, стилизовав тег <html> : 

    <!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>
    Оформление HTML-документа

    Результат: фон документа выглядит светло-серым, а цвет текста — темным, как определено во встроенном стиле тега <html> .

    Практическое применение тега <html>

    • Корневой элемент: действует как корневой контейнер для всего HTML-содержимого документа.
    • Язык и направление: задает язык документа и направление текста с помощью атрибутов lang и dir .
    • Стилизация: обеспечивает основу для применения глобальных стилей ко всей веб-странице.
    • Структура: обеспечивает хорошую структуру документа и его соответствие стандартам HTML.