Семантическая структура для HTML5 страницы. Семантика в HTML5. Что такое HTML? Структура документа HTML
Основы HTML содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.
HTML-документ - это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот) , так и в специализированном, с подсветкой кода (Notepad++, Visual Studio Code и т.п.) . HTML-документ имеет расширение.html .
HTML-документ состоит из дерева HTML-элементов и текста. Каждый элемент обозначается в исходном документе начальным (открывающим) и конечным (закрывающим) тегом (за редким исключением).
Начальный тег показывает, где начинается элемент, конечный - где заканчивается. Закрывающий тег образуется путем добавления слэша / перед именем тега: … . Между начальным и закрывающим тегами находится содержимое тега - контент.
Одиночные теги не могут хранить в себе содержимого напрямую, оно прописывается как значение атрибута, например, тег создаст кнопку с текстом Кнопка внутри.
Теги могут вкладываться друг в друга, например,
Текст
. При вложении следует соблюдать порядок их закрытия (принцип «матрёшки») , например, следующая запись будет неверной:Текст
.HTML-элементы могут иметь атрибуты (глобальные, применяемые для всех HTML-элементов, и собственные). Атрибуты прописываются в открывающем теге элемента и содержат имя и значение, указываемые в формате имя атрибута="значение" . Атрибуты позволяют изменять свойства и поведение элемента, для которого они заданы.
Каждому элементу можно присвоить несколько значений class и только одно значение id . Множественные значения class записываются через пробел, . Значения class и id должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр.
Браузер просматривает (интерпретирует) HTML-документ, выстраивая его структуру (DOM) и отображая ее в соответствии с инструкциями, включенными в этот файл (таблицы стилей, скрипты). Если разметка правильная, то в окне браузера будет отображена HTML-страница, содержащая HTML-элементы - заголовки, таблицы, изображения и т.д.
Процесс интерпретации (парсинг) начинается прежде, чем веб-страница полностью загружена в браузер. Браузеры обрабатывают HTML-документы последовательно, с самого начала, при этом обрабатывая CSS и соотнося таблицы стилей с элементами страницы.
HTML-документ состоит из двух разделов - заголовка — между тегами … и содержательной части — между тегами … .
Структура веб-страницы 1. Структура HTML-документаЯзык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD) . DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.
DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.
...
Элементы, находящиеся внутри тега , образуют дерево документа, так называемую объектную модель документа, DOM (document object model) . При этом элемент является корневым элементом.
Рис. 1. Простейшая структура веб-страницы
Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо рассмотреть так называемые «родственные отношения» между элементами. Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские.
Предок - элемент, который заключает в себе другие элементы. На рисунке 1 предком для всех элементов является . В то же время элемент является предком для всех содержащихся в нем тегов: ,
, , и т.д.
Потомок - элемент, расположенный внутри одного или более типов элементов. Например, является потомком , а элемент
Является потомком одновременно для и .
Родительский элемент - элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 и . Тег
Является родительским только для .
Дочерний элемент - элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы , ,
И являются дочерними по отношению к .
Сестринский элемент - элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 и — элементы одного уровня, так же как и элементы , и
Являются между собой сестринскими.
1.1. Элемент 1.2. ЭлементРаздел ... содержит техническую информацию о странице: заголовок, описание, ключевые слова для поисковых машин, кодировку и т.д. Введенная в нем информация не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу.
1.2.1. ЭлементОбязательным тегом раздела является тег . Текст, размещенный внутри этого тега, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.
1.2.2. ЭлементНеобязательным тегом раздела является одинарный тег . С его помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTML-документа и прочие свойства метаданных. Элемент может содержать несколько элементов , потому что в зависимости от используемых атрибутов они несут различную информацию.
Описание содержимого страницы и ключевые слова одновременно можно указывать на нескольких языках, например, на русском и английском:
С помощью тега можно запретить или разрешить индексацию веб-страницы поисковыми машинами:
Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh:
Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url:
| charset | Указывает кодировку символов для текущего HTML-документа: |
| content | Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом http-equiv или name , в зависимости от их значения. |
| http-equiv | Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте: default-style указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента , который ссылается на таблицу стилей CSS, или идентификатор элемента , содержащего таблицу стилей. refresh указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка "url=адрес_страницы" . Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд: Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url: |
| name | Ассоциируется со значением, содержащемся в атрибуте content . Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv , charset или itemprop . application-name указывает название веб-приложения, используемого на странице. author указывает имя автора документа в свободном формате. description определяет краткое описание к содержимому страницы, например: generator указывает один из пакетов программного обеспечения, используемого для создания документа, например: . keywords содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например: . Также атрибут name может принимать следующие значения из расширенной спецификации, такие как creator , googlebot , publisher , robots , slurp , viewport , хотя ни одно из них еще не было официально принято. |
Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.
Внутрь этого элемента можно записывать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.
.paper { width: 200px; height: 300px; background-color: #ef4444; color: #666666; }
Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id) присвоить элементу соответствующее название:
...
CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style , например:
1.2.4. Элемент
Задать стили для документа можно также при помощи другого способа - записать их в отдельный файл с расширением.css , например, style.css .
Подключить файл со стилями к веб-странице можно двумя способами:
через
директиву @import url
@import url(style.css);
с использованием элемента . Элемент не требует закрывающего тега. Данный элемент определяет отношение между текущей страницей и другими документами. Таких элементов на странице может быть несколько. Запись будет иметь следующий вид:
| crossorigin | Указывает, должен ли использоваться CORS (технология браузеров, которая позволяет предоставить веб-странице доступ к ресурсам другого домена) при извлечении изображения с сайта. anonymous — в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, содержащий имя домена, с которого осуществлён запрос. Если сервер не ответит CORS-заголовком Access-Control-Allow-Origin: * (или имя домена вместо звёздочки), то загрузка изображения будет заблокирована. use-credentials — если сервер не предоставляет учётные данные с помощью Access-Control-Allow-Credentials: true , то загрузка изображения будет заблокирована. |
| href | Основной атрибут тега, в качестве значения выступает путь к файлу со стилями. |
| hreflang | Определяет язык текста в документе, на который идет ссылка. |
| media | Определяет тип устройства, к которым должен быть применен ресурс ссылки. |
| nonce | Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста. |
| rel | Атрибут определяет отношения между текущим документом и документом, на который идет ссылка. alternate — ссылка на тот же документ, но в другом формате (например, страницы для печати, перевод, зеркало, лента в формате RSS или Atom), . archives — указывает на то, что документ по ссылке представляет исторический интерес. Ссылка может указывать на коллекцию записей, документов и других материалов. author ссылка на страницу об авторе документа или на страницу с контактными данными автора. bookmark ссылка на ближайшего предка статьи, являющегося связующим звеном, или на раздел статьи, наиболее тесно связанных с элементом, если нет предка. external используется для указания того, что страница на которую ведет ссылка не являются частью данного сайта. first указывает ссылку, ведущую на первый документ из последовательности документов. help ссылка на документ со справкой. icon определяет путь к иконке, которая будет использована для текущего документа. last указывает ссылку, ведущую на последний документ в последовательности документов. license ссылка на сведения об авторских правах для документа. next указывает, что этот документ является частью серии, и что ссылка ведет на следующий документ в этой серии. nofollow указывает на то, что ссылка не одобрена автором страницы или что ссылка носит коммерческий характер. noreferrer указывает на то, что заголовок запроса клиента, содержащий url источника запроса, не должен передаваться при переходе по ссылке. pingback указывает адрес пингбэк-сервера, что дает возможность для блога автоматически оповещать сайты, ссылающиеся на него. prefetch указывает, что следует заранее кэшировать файл, на который ведет ссылка. prev указывает, что этот документ является частью серии, и что ссылка ведет на предыдущий документ в этой серии. search указывает, что ссылаемый документ содержит интерфейс поиска и связанных с ним ресурсов. sidebar указывает, что ссылаемый документ, если это возможно, будет показан в дополнительном контексте браузера, и некоторые браузеры при щелчке по гиперссылке открывают окно для добавления ссылки в панель закладок. stylesheet ссылка на внешний файл, который будет использоваться в качестве таблицы стилей для данного документа. tag указывает на то, что метка, на которую ведет гиперссылка, относится к данному документу. up указывает, что страница является частью иерархической структуры, и что гиперссылка ведет на более высокий уровень ресурса в структуре. |
| sizes | Указывает размер иконок для визуального отображения. Атрибут sizes используется только совместно с rel="icon" , и может принимать следующий значения: ширинах высота - определяет список размеров, разделенных пробелами, каждый размер должен быть в формате - ширинах высота (размеры иконки задаются в пикселях), например: ; any - иконка может масштабироваться до любого размера. |
| title | Определяет заголовок ссылки или название набора альтернативных таблиц стилей. Значение атрибута — текст. |
| type | Определяет MIME-тип документа, на который идет ссылка. В данном случае он принимает значение "text/css" . |
| async | Атрибут указывает на то, что сценарий будет выполняться асинхронно с остальной частью страницы (сценарий начнет выполняться одновременно с загрузкой страницы). |
| charset | Определяет кодировку символов |
| crossorigin | Определяет, будет ли использоваться CORS при загрузке внешних скриптов (с использованием атрибута src). anonymous — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, при этом не передаются параметры доступа (cookie, сертификат X.509, логин/пароль для базовой аутентификации по HTTP). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Origin: имя домена, скрипт не будет загружен. use-credentials — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin с указанием параметров доступа (cookie, SSL-сертификат или пары логин/пароль). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Credentials: true , скрипт не будет загружен. |
| defer | Интерпретация сценариев откладывается до окончания отображения документа на устройстве пользователя. |
| nonce | Обеспечивает безопасность, защищая от атак с внедрением межсайтового скриптинга (XSS, cross site scripting). Устанавливает правила использования встроенных скриптов с помощью nonce-значений и хэшей. Во время рендеринга страницы браузер для каждого инлайн-скрипта вычисляет хэши и сравнивает с перечисленными в CSP. Загрузка с ресурсов, не входящих в «белый список», блокируется. |
| src | Указывает на месторасположение файла со сценарием, значение атрибута - это url файла, содержащего JavaScript-программу. |
| type | Используются для объявления языка сценария, использованного при составлении содержимого тега. |
В этом разделе располагается все содержимое документа. Для элемента доступны .
| onafterprint | Событие, срабатывающее после отправки страницы на печать или после закрытия окна печати. |
| onbeforeprint | Событие, срабатывающее перед отправкой страницы на печать. |
| onbeforeunload | Событие срабатывает, когда посетитель инициировал переход на другую страницу или нажал «закрыть окно». Позволяет отображать сообщение в диалоговом окне подтверждения, чтобы сообщить пользователю, хочет ли он остаться или покинуть текущую страницу. |
| onhashchange | Событие срабатывает, когда меняется hash-часть URL, например, когда пользователь перейдет с адреса example.domain/test.aspx#page1 на example.domain/test.aspx#page2 . |
| onmessage | Событие происходит, когда сообщение получено через источник события. |
| onoffline | Событие вызывается браузером в том случае, когда браузер определит, что соединение с интернет пропало. |
| ononline | Событие вызывается браузером в том случае, когда соединение с интернет возобновилось. |
| onpagehide | Событие происходит, когда пользователь покидает страницу посредством навигации, например, нажав на ссылку, обновив страницу, заполнив форму и т.д. |
| onpageshow | Событие происходит, когда пользователь переходит на веб-страницу, после события onload. |
| onunload | Событие срабатывает если страница не загрузилась по каким-либо причинам, либо при закрытии окна браузера. |
1. Article title
1. Article sub-heading
1. Article sub-sub-heading
2. Sidebar heading
1. Sidebar sub-heading
3. Footer heading
Взглянув на нее, вы, возможно, справедливо заметите, что заголовки, находящиеся в боковой колонке и подвале не должны зависеть от заголовка статьи. Хорошо, но давайте отвлечемся на время. В данном случае мы имеем четкую структуру страницы, сформированную заголовками, в которой название статьи является заголовком высшего уровня . Теперь нам необходимо сохранить положение вещей после приведения структуры к виду HTML5 стандарта.
HTML5 структура документа.Ну что ж, давайте возьмем за основу HTML 4.01 структуру и при помощи секционных элементов преобразуем ее в новую, полностью отвечающую HTML5 стандарту. В большинстве обучающих пособий и статей для этих целей мне рекомендовалось сделать следующее:
Site title etc.
- Nav item
Article title
Article content.
Article sub-heading
More content.
Article sub-sub-heading
More content.
Sidebar heading
Sidebar sub-heading
Footer heading
Footer content.
Для обеспечения обратной совместимости я не стал менять все заголовки документа на элементы, как это рекомендуется делать в HTML5 спецификации, а оставил прежние уровни для всех заголовков (тем более, что в нашем случае тотальная замена заголовков на ни как не повлияет на структуру документа HTML5 стандарта). В результате мы получим структуру совершенно идентичную той, которая была в предыдущем HTML 4.01 примере. Именно ее и формирует браузер, не использующий новый алгоритм HTML5 стандарта. Но в том случае, если вы используете инструмент, подобный HTML5 outliner , который как раз таки и применяет вышеупомянутый алгоритм, то в результате вы увидите следующую структуру:
1. Footer heading
1. Untitled NAV
2. Article title
1. Article sub-heading
1. Article sub-sub-heading
3. Sidebar heading
1. Sidebar sub-heading
Что вы скажите на этот раз? Как же получилось так, что находящийся в элементе заголовок определен как самый важный на странице? И почему секция в структуре документа получила статус Untitled (безымянной)?
Что, заголовок и подвал поменялись местами?Для начала давайте разберемся с подвалом. Элемент не делит контент документа на секции (разделы), то есть с его помощью невозможно создать новую секцию. По этой причине, присутствующий в примере заголовок Footer heading является единственным в контексте элемента . А учитывая то, что создает корневую секцию , то алгоритм построения структуры документа присваивает этому заголовку высший уровень, несмотря на то, что он является последним заголовком в документе и реализован с использованием тега .
Так какой же выход из создавшейся ситуации? Мы можем «изолировать» находящийся в подвале заголовок при помощи секционного элемента, и после этого он уже не будет интерпретироваться как заголовок документа в целом:
Footer heading
Footer content.
Такой способ решения проблемы можно расценивать как некий хак, и с его помощью мы действительно заставляем интересующий нас заголовок занять правильное место в структуре документа. Но теперь возникает другая проблема – элемент и документ как таковой остался без заголовка, и его структура выглядит вот так:
1. Untitled BODY
1. Untitled NAV
2. Article title
1. Article sub-heading
1. Article sub-sub-heading
3. Sidebar heading
1. Sidebar sub-heading
4. Footer heading
В результате у нас появилось два безымянных раздела. То, что касается элемента , то он отображается без названия, так как представляет собой секционный элемент и алгоритм построения структуры документа просто создает для него новый раздел и соответствующий ему пункт в структуре документа. А поскольку в элементе отсутствует заголовок, то он отображается как безымянный навигационный раздел Untitled NAV .
Честно говоря, для меня не совсем понятно почему элемент является секционным. Да, действительно, навигационные списки зачастую лишь выигрывают от того, что для них устанавливают соответствующие заголовки. Но теперь, учитывая то, что элемент является секционным, мы должны для каждого раздела, созданного с его помощью указывать заголовок, чтобы не получить в результате безымянные разделы в структуре документа. Что ж, давайте так и сделаем:
Main navigation
Как быть с Untitled BODY?
Для того, чтобы не оставить сам документ, то есть его корневой элемент безымянным разделом структуры, необходимо установить заголовок, который не будет относиться ни к одному секционному элементу. В этом случае мы тоже сталкиваемся с проблемой, а именно – это не позволяет нам заключить само содержание страницы в рамки элемента и в тоже время, созданный нами заголовок будет интерпретироваться как заголовок всего документа, то есть наивысшего уровня, а не только как заголовок блока контента, что не всегда допустимо.
И если это действительно так, то можно сделать заключение, что элемент целесообразно применять только в тех случаях, когда одна страница содержит несколько статей, которые помимо своих индивидуальных заголовков представлены одним общим, главным заголовком высшего уровня. Примером такого случая может быть домашняя страница сайта или страница, содержащая архив блога. Но в том случае, если документ включает в себя одну единственную статью (как, например, страница на которой вы сейчас находитесь), то использование в нем секционного элемента бессмысленно.
На мой взгляд, существует несколько различных способов решения проблемы.
Не используйте секционные элементы.Исключение секционных элементов из документа предотвращает возникновение данной проблемы. Структура будет формироваться по старым правилам. Единственный очевидный недостаток в этом случае, это то, что если браузеры однажды все-таки начнут поддерживать эти элементы, то вы не сможете воспользоваться их гипотетическими преимуществами. Звучит не убедительно, неправда ли?
Повторно указывать заголовок статьи за рамками всех секционных элементов.То есть, дублирование главного заголовка с последующим скрытием его при помощи CSS лишь с целью его корректного расположения в структуре документа? Я думаю, что это плохая идея. Взгляните на эту ситуацию с точки зрения доступности документа (его прочтения при помощи специальных программ) или с колокольни SEO .
Установить название сайта в качестве заголовка документа высшего уровня.Существует мнение, что в качестве главного заголовка документа можно использовать имя сайта, компании или содержимое логотипа. Я лично не разделяю его, так как считаю, что именно название текущей страницы имеет принципиально важное значение при ее просмотре.
Не используйте элементы в одностатейных документах.А как насчет того, чтобы всё-таки применять секционные элементы, но именно в одностатейных документах не заключать их содержание в рамки элемента , что приведет к тому, что заголовки самих публикаций будут одновременно представлять корневой элемент документа . Что-то вроде этого:
Site title etc.
Main navigation
Article title
Article content.
Article sub-heading
More content.
Article sub-sub-heading
More content.
Sidebar heading
Sidebar sub-heading
Footer heading
Footer content.
В результате структура будет выглядеть так:
1. Article title
1. Main navigation
2. Article sub-heading
1. Article sub-sub-heading
3. Sidebar heading
1. Sidebar sub-heading
4. Footer heading
Здесь уже наблюдается некоторое улучшение. Единственная проблема заключается в том, что порядок, в котором представлены пункты структуры документа, не соответствует тому, как они располагаются в его разметке. И это может стать реальной проблемой для тех пользователей, которые перемещаются по странице, ориентируясь по ее заголовкам, представленным в том порядке, в котором их располагает браузер, формируя структуру документа. И я не имею ни малейшего понятия, действительно ли такие инструменты как программы чтения с экрана будут поступать именно таким образом, если они начнут поддерживать HTML5 спецификацию. Поэтому не могу утверждать, что данная проблема будет напрямую отнесена к вопросу юзабилити .
Другой путь решения этой проблемы – использование имени сайта в качестве заголовка высшего уровня документа. Тогда в элементе необходимо сделать следующие изменения:
Site title etc.
Main navigation
Которые приведут к такой структуре:
1. Site title etc.
1. Main navigation
2. Article title
1. Article sub-heading
1. Article sub-sub-heading
2. Sidebar heading
1. Sidebar sub-heading
3. Footer heading
На мой взгляд это самый приемлемый вариант из всех предыдущих. Но я по-прежнему придерживаюсь того мнения, что если структура документа не включает в себя имя сайта, то она дает более четкое представление о содержании текущей страницы. Поэтому в своей разметке я придерживаюсь варианта, который исключает наличие имени сайта в качестве главного заголовка одностатейного документа.
Я полагаю, что вы тоже запутались.Во время написания данной статьи у меня сложилось впечатление, что сам алгоритм формирования HTML5 структуры документа испытывает некоторые трудности в том случае, если документ содержит секционные элементы. Возможно, что для полного понимания данного вопроса должно пройти некоторое время, но уже на данный момент наличие определенных проблем очевидно, по крайней мере в тех случаях, когда вам необходимо исключить наличие безымянных разделов в структуре документа.
Вполне допустимо, что я не верно понял или упустил из виду какие-либо нюансы, в этом случае буду рад вашим замечаниям и поправкам.
Если открыть любую веб-страницу, то она будет содержать в себе типичные элементы, которые не меняются от вида и направленности сайта. В примере 4.1 показан код простого документа, содержащего основные теги.
Пример 4.1. Исходный код веб-страницы
Пример веб-страницы Заголовок
Первый абзац.
Второй абзац.
Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example41.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть файл (Ctrl+O) . В диалоговом окне выбора документа укажите файл example41.html. В браузере откроется веб-страница, показанная на рис. 4.1.
Рис. 4.1. Результат выполнения примера
Элемент предназначен для указания типа текущего документа - DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать .
Существует несколько видов , они различаются в зависимости от версии HTML, на которую ориентированы. В табл. 4.1. приведены основные типы документов с их описанием.
| HTML 4.01 | |
| Строгий синтаксис HTML. | |
| Переходный синтаксис HTML. | |
| В HTML-документе применяются фреймы. | |
| HTML 5 | |
| В этой версии HTML только один доктайп. | |
| XHTML 1.0 | |
| Строгий синтаксис XHTML. | |
| Переходный синтаксис XHTML. | |
| Документ написан на XHTML и содержит фреймы. | |
| XHTML 1.1 | |
| Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Как видите, никакого деления на виды это определение не имеет, поскольку синтаксис один и подчиняется четким правилам. | |
Разница между строгим и переходным описанием документа состоит в различном подходе к написанию кода документа. Строгий HTML требует жесткого соблюдения спецификации HTML и не прощает ошибок. Переходный HTML более «спокойно» относится к некоторым огрехам кода, поэтому этот тип в определенных случаях использовать предпочтительнее.
Например, в строгом HTML и XHTML непременно требуется наличие тега , а в переходном HTML его можно опустить и не указывать. При этом помним, что браузер в любом случае покажет документ, независимо от того, соответствует он синтаксису или нет. Подобная проверка осуществляется при помощи валидатора и предназначена в первую очередь для разработчиков, чтобы отслеживать ошибки в документе.
В дальнейшем будем применять преимущественно строгий , кроме случаев, когда это оговаривается особо. Это позволит нам избегать типичных ошибок и приучит к написанию синтаксически правильного кода.
Часто можно встретить код HTML вообще без использования , веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается в браузере по-разному при использовании и без него. Кроме того, браузеры могут по-своему показывать такие документы, в итоге страница «рассыплется», т.е. будет отображаться совсем не так, как это требуется разработчику. Чтобы не произошло подобных ситуаций, всегда добавляйте в начало документа.
Тег определяет начало HTML-файла, внутри него хранится заголовок ( ) и тело документа ( ).
Заголовок документа, как еще называют блок , может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице, за исключением контейнера .
Тег является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.
Пример веб-страницы
Тег определяет заголовок веб-страницы, это один из важных элементов предназначенный для решения множества задач. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера (рис. 4.2).
Рис. 4.2. Вид заголовка в браузере
Тег является обязательным и должен непременно присутствовать в коде документа.
Обязательно следует добавлять закрывающий тег , чтобы показать, что блок заголовка документа завершен.
Тело документа предназначено для размещения тегов и содержательной части веб-страницы.
Заголовок
HTML предлагает шесть текстовых заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег представляет собой наиболее важный заголовок первого уровня, а тег служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги ... относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.
Некоторый текст можно спрятать от показа в браузере, сделав его комментарием. Хотя такой текст пользователь не увидит, он все равно будет передаваться в документе, так что, посмотрев исходный код, можно обнаружить скрытые заметки.
Дата создания: 2012-03-03 21:08:27
Последний раз редактировалось: 2012-03-03 21:10:19
Сегодня мы поговорим об HTML-документах, т.е. о файлах, содержащих HTML код.
Создание HTML-документовЛюбой HTML-документ представляет из себя простой текстовый файл, а это значит, что его можно прочитать в текстовом редакторе (например, в блокноте).
Создайте в любой папке системы текстовый файл и поменяйте его расширение на html или htm . Теперь, если вы попытаетесь прочитать такой файл, он будет открыт в веб-браузере (который вы используете по-умолчанию).
Я использую Оперу, и вот так будет выглядеть в браузере пустой файл, который я назвал HTML-документ :
Замечание:
Кстати, названия файлов (особенно, если они будут храниться в интернете) лучше писать на латиннице.
Для изменения содержимого файла нужно открыть его через текстовый редактор. Щёлкните правой кнопкой мыши на значке файла в проводнике и выберите Открыть с помощью -> Блокнот . Конечно, лучше использовать текстовый редактор посолиднее. Я вот, например, во всех примерах буду использовать бесплатный Notepad++. Вот как будет выглядеть пустой файл.html в текстовом редакторе Notepad++:
Ну чтож, у нас есть пустой HTML-документ, который уже открывается в браузере. Осталось его заполнить.
Правильно сформированный HTML5-документЛюбой HTML5-документ должен начинаться со строки:
Эта строка предназначена для специальной программы (html-validator), проверяющей соответствие содержимого документа стандарту HTML5. Помещайте эту строку в каждый свой html-файл.
Комментарии HTMLВ HTML предусмотрены комментарии для того, чтобы пометить текст, который не нужно показывать конечному пользователю. Т.е. текст помещённый в комментарий не виден в браузере. Комментарии оформляются так:
Комментарии располагаются между конструкциями .
Комментарии используются для пояснения кода.
html, headПосле DOCTYPE следует корневой тег html:
Всё содержимое страницы должно находиться внутри тега html. У этого тега есть атрибут lang (от lang uage - язык), который влияет, на каком языке видят вашу страницу поисковые системы.
HTML-документ делится на две основные части: head и body:
В тег head помещают служебную информацию: кодировка, заголовок страницы, описание, ключевые слова и многое другое, с чем мы познакомимся в последующих уроках. Давайте посмотрим, как будет выглядеть страница со служебной информацией:
HTML-документ
Тег title хранит заголовок страницы. Именно этот текст будет отображаться при выдаче результатов поисковых систем.
Тег meta не нужндается в закрывающем теге. Он состоит из двух атрибутов. Первым атрибутом могут быть: charset, name, http-equiv.
Я думаю, что с описанием и ключевыми словами всё понятно, единственное, ключевые слова могут вводиться как через запятую, так и через пробел. А вот на кодировке мы остановимся подробнее.
Кодировка html-документаУказание кодировки необходимо, чтобы браузер смог правильно определить, какие символы создатель использовал при написании страницы.
Сейчас повсеместно используется юникод, а в интернете юникод представлен utf-8 (есть и другие представления). Юникод позволяет использовать символы разных языков.
Более ранние кодировки позволяют использовать только символы латинницы и ещё какой-нибудь одной письменности. Например, для использования кириллицы можно использовать вот такой код:
Но тогда вы не сможете на своих страницах использовать символы никаких других письменностей кроме латинницы и кириллицы. Поэтому всегда используйте utf-8. Это позволит браузерам без проблем отображать, например, вот такой текст:
Hello! Привет! नमस्कार।
Более подробно (исчерпывающе, я бы сказал) кодировки обсуждаются в других уроках сайта.
Для того чтобы юникод правильно отображался, страницы должны быть сохранены в utf-8.
bodyИменно в теге body выводится всё видимое содержимое страницы.
Итак, финальный HTML-документ выглядит вот так:
HTML-документ
В следующем уроке мы приступим к наполнению страницы.
Просмотр html-кода страницыКстати, вы можете просмотреть исходный код любой страницы. Например, в Опере можно щёлкнуть правой кнопкой мыши в любом пустом месте (не на картинке/ссылке) и выбрать "Исходный код". Вот так выглядит исходный HTML-код одной из страниц сайта shatalov.su:
