Статьи

Минимальный HTML-документ

Апрель 21, 2019

Меня часто удивляет, сколько профессиональных сайтов разработано в виде неполных HTML-документов. Однако, чтобы быть справедливым, объем кода, требуемого даже для пустого HTML-документа, значительно вырос за эти годы.

Одно время HTML-документ должен был содержать только объявление <!DOCTYPE><title> Из рекомендации HTML 3.2 :

На практике начальные и конечные теги HTML, HEAD и BODY могут быть опущены в разметке […]

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

 
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
  <TITLE>A study of population dynamics</TITLE>

В то время, когда HTML 3.2 был рекомендованной спецификацией, очень немногие веб-дизайнеры беспокоились о <!DOCTYPE>

В наши дни потребности доступности, поисковой оптимизации, согласованности документов для манипулирования JavaScript и поддержки международных символов — все это требует большего количества нашего HTML. Минимальный HTML-документ стал намного больше.

Вот тот минимум, который должен содержать документ HTML 4, при условии, что с ним связаны CSS и JavaScript: 

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
		
  </body>
</html>

Если вы хотите иметь возможность обрабатывать ваш документ как XML, тогда этот минимальный документ XHTML 1 должен быть вашей отправной точкой: 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
		
  </body>
</html>

Читайте ниже для описания каждой строки этих минимальных документов.

Разрушение

Каждый (X) HTML-документ должен начинаться с объявления <!DOCTYPE> который сообщает браузеру, в какую версию (X) HTML написан документ. На практике это говорит браузерам, таким как Internet Explorer и Firefox, использовать их большинство стандартов. совместимый (и, следовательно, кросс-браузер-совместимый) режим рендеринга. Точная форма объявления <!DOCTYPE> 

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Далее мы помечаем начало документа открывающим <html> . Этот тег должен указывать основной язык для содержимого документа с атрибутом lang : 

 <html lang="en">

В документе XHTML вы также должны указать пространство имен XML по умолчанию (используя атрибут xmlnsxml:lang 

 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

Далее идет <head> , который запускает заголовок документа: 

   <head>

Первым в заголовке должен быть <meta> который определяет кодировку символов страницы. Обычно кодировка символов объявляется веб-сервером, который отправляет страницу в браузер, но многие серверы не настроены на отправку этой информации, и ее указание здесь гарантирует, что документ отображается правильно, даже если он загружен непосредственно с диска, без консультирование сервера: 

     <meta http-equiv="content-type" content="text/html; charset=utf-8">

В документе XHTML теги <meta> 

     <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

С установленной кодировкой мы можем безопасно написать первый фрагмент фактического контента на странице — title страницы: 

     <title>title</title>

Если вы хотите связать CSS-файл со страницей, чтобы контролировать ее внешний вид (что вы обычно делаете), <link> на этом этапе поможет: 

     <link rel="stylesheet" type="text/css" href="style.css">

Опять же, версия XHTML этого тега нуждается в конце, чтобы указать, что он пуст: 

     <link rel="stylesheet" type="text/css" href="style.css"/>

Если вы хотите связать сценарий JavaScript со страницей, и сценарий предназначен для вызова из заголовка, вставьте <script> на этом этапе. Независимо от того, является ли документ HTML или XHTML, вы должны включить закрывающий тег </script> 

     <script type="text/javascript" src="script.js"></script>

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

 </head>
<body>
		
</body>
</html>

Итак, как продвигается ваша последняя работа? Вы включили все элементы, обсужденные выше? Распространенные упущения, такие как атрибут langcontent-type<meta>

Мне бы очень хотелось услышать ваши мысли об основных элементах HTML, обсуждавшихся выше, или о любых других элементах, которые вы абсолютно всегда включаете в свои страницы. Оставьте комментарий и дайте мне знать!

37
Share: