Еще в 2008 году я опубликовал подробную разбивку набора тегов, которые вы должны включать как минимум в каждый HTML-документ. Как вы можете видеть, в то время было много чего:
В наши дни потребности доступности, поисковой оптимизации, согласованности документов для манипулирования JavaScript и поддержки международных символов — все это требует большего количества нашего HTML. Минимальный HTML-документ стал намного больше.
С тех пор рабочая группа HTML5 много думала об уменьшении этого минимального набора тегов. Оказывается, все основные браузеры согласны с несколькими ярлыками, которые могут сократить код, и спецификация HTML5 теперь позволяет использовать эти ярлыки в допустимом коде.
Поскольку все браузеры (даже старые, например IE6) полностью поддерживают ярлыки, которые стандартизированы в HTML5, мы можем использовать их сегодня; это несмотря на то, что большинство новых функций HTML5 остаются недоступными, пока браузеры не догонят их.
С этими ярлыками в действии, вот тот минимум, который должен содержать HTML-документ, при условии, что с ним связаны CSS и JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<!-- page content -->
</body>
</html>Читайте ниже для полного описания каждой строки этого минимального документа.
Разрушение
Каждый HTML-документ должен начинаться с объявления <!DOCTYPE> которое сообщает браузеру, в какую версию HTML написан документ. Требуемый для документов HTML5 <!DOCTYPE>
<!DOCTYPE html>
Как и все эти ярлыки, этот код был специально разработан для того, чтобы «обмануть» существующие браузеры (которые еще не поддерживают HTML5), чтобы рассматривать документ как полнокровный документ HTML4. Версии браузера, начиная с Internet Explorer 6, будут отображать страницу в наиболее совместимом со стандартом режиме рендеринга.
Далее мы помечаем начало документа открывающим <html> . Этот тег должен указывать основной язык для содержимого документа с атрибутом lang :
<html lang="en">
Далее идет <head> , который запускает заголовок документа:
<head>
Первый бит в заголовке должен быть <meta> который определяет кодировку символов страницы. Обычно кодировка символов объявляется веб-сервером, который отправляет страницу в браузер, но многие серверы не настроены для отправки этой информации. Если вы укажете здесь, документ будет отображаться правильно, даже если он загружен прямо с диска, без обращения к серверу.
Еще раз, HTML5 значительно сокращает этот тег по сравнению с его эквивалентом в HTML4, но, как и прежде, этот ярлык использует преимущества существующего поведения обработки ошибок во всех современных браузерах, поэтому его безопасно использовать сегодня:
<meta charset="utf-8">
С установленной кодировкой мы можем безопасно написать первый фрагмент фактического контента на странице — title страницы:
<title>title</title>
Если вы хотите связать CSS-файл со страницей, чтобы контролировать ее внешний вид (что вы обычно делаете), <link> на этом этапе поможет:
<link rel="stylesheet" href="style.css">
Атрибут type="text/css"
Если вы хотите связать сценарий JavaScript со страницей, и сценарий предназначен для вызова из заголовка, вставьте <script> на этом этапе. В отличие от <link><script></script>
<script src="script.js"></script>
Атрибут type="text/javascript"
Это как раз делает это. Вы можете закончить заголовок, а затем начать тело страницы с <body> . Содержание страницы зависит от вас, но поскольку мы говорим о минимальном документе, никакого основного содержания вообще не требуется:
</head>
<body>
<!-- page content -->
</body>
</html>
Как это выглядит для вас? Есть сюрпризы?
Если вы похожи на меня, некоторые из представленных здесь ярлыков заставляют вас чувствовать себя немного неловко с первого взгляда. Действительно ли безопасно использовать объявление HTML5 <!DOCTYPE>
Как ни странно, что кажется, что он принимает код из еще не поддерживаемой спецификации, HTML5 был разработан, чтобы быть принятым именно таким образом. Ярлыки, подобные представленным выше, — это не функции нового стандарта, а более эффективное использование функций синтаксического анализа HTML, которые уже давно встроены в браузеры.
Теперь, когда W3C HTML Validator поддерживает HTML5, он будет проверять документы, содержащие эти ярлыки; на самом деле больше нет причин делать это долго.
И если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, таким как HTML5 и CSS3 для реального мира .
Комментарии к этой статье закрыты. У вас есть вопрос о HTML5? Почему бы не спросить об этом на наших форумах ?