Хотя эта ссылка призвана обеспечить полную разбивку различных элементов HTML и их соответствующих атрибутов, вам также необходимо понять, как эти элементы вписываются в общую картину. Веб-страница структурирована следующим образом.
Доктип
Первым элементом, который появляется в исходном коде веб-страницы, является объявление doctype . Это предоставляет веб-браузеру (или другому пользовательскому агенту) информацию о типе языка разметки, на котором написана страница, что может влиять или не влиять на способ отображения содержимого браузером. На первый взгляд это может показаться немного пугающим, но хорошая новость заключается в том, что большинство веб-редакторов WYSIWYG автоматически создают для вас тип документа после того, как вы выбрали в диалоговом окне тип создаваемого документа. Если вы не используете пакет веб-редактирования WYSIWYG, вы можете обратиться к списку типов документов, содержащихся в этой ссылке, и скопировать тот, который вы хотите использовать.
Тип документа выглядит следующим образом (как видно из очень простой страницы HTML 4.01 без содержимого):
<! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title> Название страницы </ название> </ голова> <тело> </ тело> </ HTML>
В приведенном выше примере тип документа относится к HTML 4.01 Strict. В этой ссылке вы увидите примеры HTML 4.01, а также XHTfML 1.0 и 1.1, идентифицированные как таковые. Хотя многие элементы и атрибуты могут иметь одинаковые имена, между различными версиями HTML и XHTML существуют некоторые четкие синтаксические различия. Вы можете узнать больше об этом в разделах, озаглавленных HTML и XHTML, а также синтаксис HTML и XHTML .
Дерево документов
Веб-страница может рассматриваться как дерево документов, которое может содержать любое количество ветвей. Существуют правила относительно того, какие элементы может содержать каждая ветвь (они подробно описаны в ссылках на каждый элемент в разделах «Содержит» и «Содержится») , Чтобы понять концепцию дерева документов, полезно рассмотреть простую веб-страницу с типичными функциями содержимого наряду с ее древовидным представлением, как показано на рисунке 1 .
Если мы посмотрим на это сравнение, то увидим, что html элемент на самом деле содержит два элемента: head и body . head имеет две подветвления — meta и title . Элемент body содержит несколько заголовков, абзацев и block quote .
Обратите внимание, что существует некоторая симметрия в способе открытия и закрытия тегов. Например, абзац, который гласит «У него много прекрасного контента…», содержит три текстовых узла, второй из которых обернут в элемент em (для акцентирования). Абзац закрывается после того, как закончился контент, и до того, как начинается следующий элемент в дереве (в данном случае это blockquote ); размещение закрывающей </p> после blockquote приведет к нарушению структуры дерева.
html
Сразу после doctype появляется элемент html — это корневой элемент дерева документа, и все, что следует за ним, является потомком этого корневого элемента.
Если корневой элемент существует в контексте документа, который идентифицируется его типом документа как XHTML, то для элемента html также требуется атрибут xmlns (пространство имен XML) (это не требуется для документов HTML):
<html xmlns = "http://www.w3.org/1999/xhtml" >
Вот пример переходной страницы XHTML:
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns = "http : //www.w3.org/1999/xhtml "> <head> <title> заголовок страницы </ title> </ head> <body> </ body> </ html>
Элемент html разбивает документ на две основные части: заголовок и body .
head
Элемент head содержит метаданные — информацию, которая описывает сам документ или связывает его со связанными ресурсами, такими как скрипты и таблицы стилей.
Простой пример, приведенный ниже, содержит обязательный элемент title , который представляет заголовок или имя документа — по сути, он определяет, что это за документ. Содержимое внутри title может использоваться для предоставления заголовка, который появляется в строке заголовка браузера, и когда пользователь сохраняет страницу в качестве избранного. Это также очень важная информация с точки зрения предоставления содержательного резюме страницы для поисковых систем, которые отображают содержание title в результатах поиска. Вот title бездействия:
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns = "http : //www.w3.org/1999/xhtml "> <head> <title> заголовок страницы </ title> </ head> <body> </ body> </ html>
Помимо элемента title также может содержать:
-
определяет baseURL для ссылок или ресурсов на странице и целевые окна, в которых открывается связанный контент
-
относится к какому-либо источнику, чаще всего к таблице стилей, которая содержит инструкции о том, как стилизовать различные элементы на веб-странице.
-
предоставляет дополнительную информацию о странице; например, какой символьной кодировкой пользуется страница, краткий обзор содержимого страницы, инструкции для поисковых систем о том, следует ли индексировать контент, и в ближайшее время
-
представляет универсальный многоцелевой контейнер для медиа-объекта
-
используется либо для встраивания, либо для ссылки на внешний скрипт
-
предоставляет область для определения встроенных (специфичных для страницы) стилей CSS
Все эти элементы являются необязательными и могут появляться в любом порядке в head . Обратите внимание, что ни один из перечисленных здесь элементов на самом деле не отображается на отображаемой странице, но они используются для воздействия на содержимое страницы, все из которых определены внутри элемента body .
body
Это где большая часть страницы содержится. Все, что вы можете видеть в окне браузера (или в окне просмотра), содержится внутри этого элемента, включая абзацы, списки, ссылки, изображения, таблицы и многое другое. Элемент body имеет свои уникальные атрибуты, которые все устарели, но, кроме этого, об этом элементе мало что можно сказать. Как будет выглядеть страница, будет полностью зависеть от содержимого, которым вы решите ее заполнить; обратитесь к алфавитному списку всех элементов HTML, чтобы выяснить, каким может быть это содержимое.