Статья, которая повествует об основах создания структуры документа в HTML 5.
Семантика и структура документа в HTML 5
Структура документа играет очень важную роль для понимания того, как устроена веб-страница. Она определяет то, как контенты организованы и взаимосвязаны между собой в документе, а также их относительную важность. Если воспользоваться схемой документа, то можно увидеть, как более просто стало просматривать информацию. Правильно спроектированная структура придаёт содержимому страницы смысл, делает его более лёгким для чтения, которое осуществляется поисковыми системами и другими пользовательскими агентами. На сайте, в котором правильно спроектирована структура, проще ориентироваться и находить нужную информацию.
Создание структуры документа до HTML 5
Перед изучением процесса создания структуры документа в HTML 5, желательно познакомиться с тем, как это осуществлялось в предыдущей версии языка и с какими проблемами веб-разработчику при этом приходилось сталкиваться.
Как образуется структура документа в HTML 4
Создание структуры документа в HTML 4 осуществляется с помощью 6 элементов (h1 , h2 , h3 , h4 , h5 , h6). Эти элементы, при их размещении на странице, создают неявные разделы. Данные разделы называются неявными, потому что автор их в документе явно не создаёт. Они образуются автоматически, как только user agent встречает один из этих элементов в документе. Впоследствии из всех созданных user agent-ом разделов образуется структура документа.
Проблемы при реализации структуры документа
Модель структуры документа, использованная в HTML 4, имеет существенные ограничения, которые связаны с тем, что автору доступны для её создания всего 6 элементов h1 , h2 , h3 , h4 , h5 и h6 . С помощью этих элементов веб-разработчик не может спроектировать структуру документа, которая одновременно обеспечивала бы логическую взаимосвязь между разделами и отвечала критериям SEO.
Более подробно познакомиться с процессом создания структуры документа в HTML 4 и с проблемами при её реализации можно в следующей статье.
Создание структуры документа в HTML 5
Стратегия создания структуры документа в HTML5 значительно изменилась. Теперь она не определяется только одними заголовками, т.к. это всегда для большинства веб-разработчиков выглядело как-то нелепо. Заголовки позволяют определить структуру документа, но они не группируют контент. До HTML 5 авторы группировали контент с помощью элементов div , а затем использовали атрибуты классов или id атрибуты для того, чтобы присвоить этим разделам более семантически верное значение. К счастью в HTML5 появилась новая группа элементов sectioning, которые позволяют авторам создавать описание (структуру) документа. К этой группе относятся элементы article , aside , nav и section . Их основное назначение сделать код HTML более семантическим, добавить в него смысл с помощью разметки.
Элементы, предназначенные для создания структуры в HTML 5.
Для создания структуры документа в HTML 5 используются заголовочные элементы (h1 , h2 , h3 , h4 , h5 и h6) и элементы nav , aside , section и article из группы sectioning. Данные элементы в отличие от заголовков предназначены для создания явных разделов и установления этим разделам некоторого смысла.
Процесс создания структуры документа в HTML5
Для того чтобы было более просто понять основные принципы структурирования документа в HTML 5 будет считать, что элементы body , nav , aside , section и article создают секции (явные разделы), а элементы h1 , h2 , h3 , h4 , h5 и h6 - обычные разделы (неявные разделы).
Процесс разработки структуры документа рассмотрим посредством пошаговых инструкций.
В HTML 5 создание структуры документа начинается с элемента body . Данный элемент создаёт основную секцию (раздел на уровне документа).
--> Вышеприведённый пример будет создавть следующую структуру документа: Untitled
После этого обычно переходят к созданию секций внутри body (основной секции). Например, создадим секции nav , section и aside . Эти секции будут являться дочерними по отношению к body .
Каждая из секций (nav , aside , section , article) в свою очередь тоже может содержать секции. Таким образом, в HTML 5 получается структура документа. Т.е. одни секции вкладываются в другие. Секции, которые расположены непосредственно в body , имеют 2 уровень. А секции, которые расположены непосредственно в секциях 2 уровня будут уже иметь 3 уровень и т.д.
Например, создадим в section 3 секции article .
Элементы h1 , h2 , h3 , h4 , h5 и h6 в HTML5 применяются для указания названия секции (т.е. выступают в качестве заголовка секции) и для создания неявных разделов внутри секции. Причём взаимосвязь между неявными разделами осуществляется только в пределах одной секции. Т.е. заголовочные элементы, находящиеся в одной секции, не связаны с заголовочными элементами, находящимися в другой секции. Другими словами неявные разделы одной секции изолированы от неявных разделах другой секции. В качестве заголовка секции выступает заголовочный элемент, находящийся в этой секции и имеющий самый высокий ранг (уровень). Если секция не содержит заголовочный элемент, то она не имеет названия (Untitled).
Внимание: В HTML 4 в отличие от HTML 5 взаимосвязь между неявными разделами осуществлялась в пределах всего документа, а не в пределах секции (body , nav , aside , section , article). В HTML 4 нет элементов для создания секций.
Например, создадим названия для всех секций кроме nav .
A
B
C
D
E
Например, создадим неявные разделы в секции section и aside:
A
B
C
D
E
B-R1
B-R2
B-R3
--> Вышеприведённый пример будет создавать следующую структуру документа: A Untitled B C D E B-R1 B-R2 B-R3 F F-R1 F-R2 F-R3 F-R4 F-R5
Здравствуйте! В этом уроке вы НЕ найдете для себя ничего полезного, если УЖЕ знакомы с формированием структуры HTML документа. Для тех, кто НЕ знаком, я покажу правильную (валидную) структуру HTML веб-документа, в том числе для сайта WordPress.
Общая правильная структура HTML документа
В первую очередь, без долгих предисловий – общая структура любого HTML документа должна быть такой:
/*Указывает тип текущего документа DTD*/ /*Показывает начало документа*/ /*Показывает начало заголовка (шапки)*/Если убрать пояснения, которые я показывал после каждого тега, то простая структура HTML документа выглядит так
Тип текущего документа DTD
Тип текущего документа (Document Type Definition, DTD ) необходим, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь язык HTML существует в нескольких версиях.
Кроме этого есть другие языки разметки отличные от HTML, например XHTML.
Примечание: XHTML это EXtensible HyperText Markup Language, что переводим, как расширенный язык разметки гипертекста.
XHTML похож на HTML, но отличается синтаксисом. Чтобы браузер не путался языки и нужно показать ему в первой строке кода, тип текущего документа DOCTYPE .
Понятие тега в HTML
Вы обратили внимание, что вся структура HTML документа задается определенными тегами – некими словами, заключенными в угловые скобки.
Слово, заключенное в угловые скобки HTML документа называется тегом. Каждый тег имеет свой смысл, определенный правилами разметки.
- Тег означает заголовок html документа. В тегах head хранится информация для браузеров и поисковых систем. В том числе в виде мета-тегов;
- Тег означает основное содержание html документа. Именно текст, изображения, скрипты Java Script и т.д.;
- Тег [p] это блочный элемент, всегда начинается с новой строки. Он означает абзац основного содержания html документа.
Важно! Все теги html разметки должны быть парными. То есть, открывающий тег <тег> , должен быть закрыт закрывающим тегом, с косой чертой .
Теги заголовков и подзаголовков h1-h6
Для улучшения структурирования текста документа, а также улучшения SEO веб-страниц, существуют дополнительные теги основного содержания. Они называются теги заголовков и подзаголовков от h1 до h6, всего 6 штук.
Они так же как теги [p] -обзаца, который, позволяет выделить смысловые участки текста, позволяют поделить текст на смысловые участи, дав каждому участку свой заголовок.
Теги h1 —h6 имеют подчиненную зависимость, нижний уровень этой подчинённости абзац.
Важно отметить, что нарушение подчиненной зависимости тегов h1 —h6 —p не нарушит отображение и валидность документа, а лишь ухудшит его оптимизацию для поисковых систем.
Пример развитой структуры HTML документа
Приведу академический пример более развитой структуры HTML документа:
Основной заголовок
Основной заголовок
Первый подзаголовок
Основной заголовок
Второй подзаголовок
Первый второстепенный подзаголовок
Структура HTML 5
В версии HTML 5 должна быть такая структура документа:
Это декларация которая показывает, что этот документ в HTML5 ;
это корневой элемент HTML страницы;
Элемент, с мета-тегами о документе;В элементе head определено два элемента:
элемент title представляет заголовок страницы
элемент meta определяет метаинформацию страницы. Для корректного отображения символов предпочтительно указывать кодировку. В данном случае с помощью атрибута charset="utf-8" указываем кодировку utf-8.
В пределах элемента элемента body используется только один элемент - div , который оформляет блок. Содержимым этого блока является простая строка.
Поскольку мы выбрали в качестве кодировки utf-8, то браузер будет отображать веб-страницу именно в этой кодировке. Однако необходимо чтобы сам текст документа также соответствовал выбранной кодировке utf-8. Как правило, в различных текстовых редакторах есть соотвествующие настройки для установки кодировки. Например, в Notepad++ надо зайти в меню Кодировки и в открывшемся списке выбрать пункт Преобразовать в UTF-8 без BOM :
После этого в статусной строке будет можно будет увидеть UTF-8 w/o BOM, что будет указывать, что нужная кодировка установлена.
Сохраним и откроем файл index.html в браузере:
Таким образом, мы создали первый документ HTML5. Так как мы указали в элементе title заголовок "Документ HTML5", то именно такое название будет иметь вкладка браузера.
Так как указана кодировка utf-8, то веб-браузер будет корректно отображать кириллические символы.
А весь текст, определенный внутри элемента body мы увидим в основном поле браузера.
Дата создания: 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 помещают служебную информацию: кодировка, заголовок страницы, описание, ключевые слова и многое другое, с чем мы познакомимся в последующих уроках. Давайте посмотрим, как будет выглядеть страница со служебной информацией:
Тег title хранит заголовок страницы. Именно этот текст будет отображаться при выдаче результатов поисковых систем.
Тег meta не нужндается в закрывающем теге. Он состоит из двух атрибутов. Первым атрибутом могут быть: charset, name, http-equiv.
Я думаю, что с описанием и ключевыми словами всё понятно, единственное, ключевые слова могут вводиться как через запятую, так и через пробел. А вот на кодировке мы остановимся подробнее.
Кодировка html-документа
Указание кодировки необходимо, чтобы браузер смог правильно определить, какие символы создатель использовал при написании страницы.
Сейчас повсеместно используется юникод, а в интернете юникод представлен utf-8 (есть и другие представления). Юникод позволяет использовать символы разных языков.
Более ранние кодировки позволяют использовать только символы латинницы и ещё какой-нибудь одной письменности. Например, для использования кириллицы можно использовать вот такой код:
Но тогда вы не сможете на своих страницах использовать символы никаких других письменностей кроме латинницы и кириллицы. Поэтому всегда используйте utf-8. Это позволит браузерам без проблем отображать, например, вот такой текст:
Hello! Привет! नमस्कार।
Более подробно (исчерпывающе, я бы сказал) кодировки обсуждаются в других уроках сайта.
Для того чтобы юникод правильно отображался, страницы должны быть сохранены в utf-8.
body
Именно в теге body выводится всё видимое содержимое страницы.
Итак, финальный HTML-документ выглядит вот так:
В следующем уроке мы приступим к наполнению страницы.
Просмотр html-кода страницы
Кстати, вы можете просмотреть исходный код любой страницы. Например, в Опере можно щёлкнуть правой кнопкой мыши в любом пустом месте (не на картинке/ссылке) и выбрать "Исходный код". Вот так выглядит исходный HTML-код одной из страниц сайта shatalov.su:
