Структура html файла: HTML — Урок 2. Структура html

Если какой-либо из вышеперечисленных вариантов больше соответствует вашему эстетическому вкусу, смело используйте его. Хотя, если вы предпочитаете последний вариант, предлагаю сначала вздремнуть. Вашим глазам явно нужен отдых! 😃

Раньше это объявление выглядело довольно сложно. Конечно, не так уж много людей смогли бы напечатать их без использования копирования/вставки.

Хочешь увидеть некоторые из них? Вот парочка:

О ужас! 😱

Как бы то ни было, современный HTML все изменил. Теперь декларация настолько проста, насколько это возможно. Все, что он делает, это сообщает браузеру, что он должен подготовиться к отображению HTML.

Что еще было бы, если бы не HTML?

Хороший вопрос! Кажется странным объявлять HTML-документ… как HTML-документ, не так ли?!

Да, это так, потому что эта декларация действительно во многом историческая.

Когда стандарты HTML только стали популярными, в Интернете было полно страниц, не соответствующих этим стандартам. Чтобы помочь браузерам правильно отображать эти страницы, браузеры использовали объявление doctype для различения несовместимых и совместимых страниц. Несоответствующие страницы обрабатывались в так называемом режиме quirks , а совместимые страницы обрабатывались в так называемом стандартном режиме .

Это все историческое. Однако сегодня вам нужно знать, что если вы пропустите объявление HTML-страницы, это будет сигналом для браузера, что он должен рассматривать вашу страницу как страницу , не соответствующую стандарту HTML . Браузер отобразит вашу страницу в причуды режима . Как ни странно это звучит! 😁

Макет страницы будет работать не совсем правильно, и стили, которые вы применяете, будут работать немного… ну, причудливо .

Итак, итог такой:

Всегда используйте простое объявление типа документа HTML.

Элемент

Сразу после объявления doctype следует тег . Работа элемента html заключается в том, чтобы быть контейнером всех других элементов в документе HTML, и поэтому он известен как корневой элемент .

Элемент html содержит обе части документа: часть, видимую пользователю, и метаданные о документе.

Головка

Большая часть метаданных о документе находится внутри элемента head . Термин метаданных буквально означает данные о данных . В нашем случае это данные о HTML-документе.

Этот раздел head позволяет указать, какие стили CSS использовать в HTML-документе, авторское описание страницы, заголовок страницы, какой Javascript выполнять, а также различные теги, которые указывают такие вещи, как кодировка символов , в которой был написан документ.

Я расскажу о значении кодировки символов в другой статье. Однако в настоящее время общепринятой практикой является использование кодировки символов utf-8 .

Подводя итог, наш HTML-код будет выглядеть примерно так:

 
 
 
 
 
 1
2
3
4
5
6
 
 

<голова>
  <мета-кодировка="utf-8">


 
 Обратите внимание, что метатег   является автономным тегом.  нет закрывающего тега .
 Название 
  Элемент
 Раздел  head  нашего документа по-прежнему  недействителен  . Хотя объявление кодировки символов — хорошая идея, это не обязательно. Однако  требует , чтобы элемент  head  содержал элемент  title . Без присутствия элемента  title  страница недействительна.
 Давайте добавим элемент  title  в:
 
 
 
 
 
 1
2
3
4
5
6
7
 
 

<голова>
  <мета-кодировка="utf-8">
  


 
 Корпус 
  Элемент
 Тег   является корнем всего контента, который  виден пользователю  . Его часто называют 9.0009 окно просмотра  .
 Никакие другие теги не допускаются между закрывающим тегом    и закрывающим тегом  . Это означает, что за закрывающим тегом   должен сразу же следовать закрывающий тег  . Как обычно, пробелы на самом деле не считаются содержимым, поэтому вы можете поместить закрывающий тег   на новую строку и отделить его от пробела, однако он будет выглядеть более читабельным для вас.
 Давайте объединим все это в полноценную (но простую) HTML-страницу:
 
 
 
 
 
 1
2
3
4
5
6
7
8
9
10
 
 

<голова>
  <мета-кодировка="utf-8">
  

<тело>
  Контент КОРОЛЬ!


 
 Сохраните этот файл как  simple-document.html  , помня, в каком каталоге вы его сохранили.
 После этого откройте браузер, например Google Chrome. Нажмите на  Файл  меню и выберите  Открыть файл...  . Перейдите в каталог, в котором вы сохранили файл  simple-document. html , и выберите его, нажав кнопку  Открыть . Вы должны увидеть что-то вроде следующего:
 Как видите, текст, который я разместил внутри тега 

<тело>
  
Контент КОРОЛЬ
!


 
 Обратите внимание, что закрывающие теги 
  и    расположены в неправильном порядке.
 Скопируйте этот код в валидатор, выполнив шаги, описанные выше, и нажмите кнопку 9.0023 Подтвердить кнопку  еще раз. Вот результат:
 Прочитайте эти сообщения. Ясно, что наш код смутил бы браузер.
 Исправление простое: поменяйте местами закрывающие теги 
  и    (  fixed-invalid-document.html  ):
 
 
 
 
 
 1
2
3
4
5
6
7
8
9
10
 
 
  <голова> <мета-кодировка="utf-8">