Что такое HTML? Структура документа HTML. HTML5 - Основы создания структуры документа
Теперь мы готовы к тому, чтобы запачкать наши руки в типографской краске. Почувствуйте себя верстальщиком в типографии середины 20-го века. Ритмичный шум печатных станков, запах свежей печати, щелчки задвигаемых на своё место латунных буковок. Большие рулоны девственно чистой газетной бумаги, ожидающие получить на себя порцию тиражной информации. И вы, сидящий за наборным станком, укладываете в нужное место информационный блок …
Как хорошо, что придумали компьютеры. Вы можете создать себе нужную атмосферу, чтобы в спокойной обстановке начать творить. Собственно этим мы сейчас и займёмся.
Для выполнения заданий вам потребуются (будет повод обновиться):
Если интересно, вы можете проверить на сколько ваш веб-браузер поддерживает стандарт HTML5
. Пройдите по ссылке http://html5test.com , там вы увидите баллы, сумма которых формируется по количеству поддерживаемых пунктов из стандарта. На момент написания статьи, на моей машине (Ubuntu10.10), Opera11.10 набирала 258 баллов, а FireFox4 всего лишь 240. Интересно, что у вас?
В этом тьюториале, мы:
создадим с вами страницу по стандарту HTML5
воспользуемся новыми семантическими элементами,
немного порисуем,
проверим как выводится видео на нашей странице,
проверим работу новых элементов формы.
Для работы нам будет достаточно создать один HTML-файл
index.html
и один CSS-файл
styles.css
. В странице по ходу выполнения заданий появятся скрипты, так что будьте готовы, к тому что ваш браузер предупредит вас об этом. Нужно будет разрешить выполнение скриптов на странице.
Готовим каркас страницы
Браузер должен знать страницу в лицо! Если вы не расскажите ему кто она такая и откуда, то он включит режим совместимости и вам придётся гадать — “как слово ваше отзовётся” в браузере клиента. Чтобы до такого не дошло, вам необходимо записывать в самом начале страницы правильный тип документа, соответствующий коду страницы.
Видимо, услышав мольбы верстальщиков, парни из W3C
сжалились, и для стандарта HTML5 сделали коротенький тег
. Любая веб-страница, поддерживающая последний стандарт, должна начинаться с него. А помните как было раньше … public
… transitional
или strict
… ещё и адрес файла описания типа документа, ну ооочень длинно.
Приступим. Создайте себе папку на рабочем столе, в ней будет лежать наша сладкая парочка HTML и CSS файлы. Создайте простой текстовый файл index.html, в кодировке utf-8. Эта кодировка символов уже давно стала стандартной для всех не англоязычных текстов.
Первая строка — пишем тип документа.
Вторая — открываем главный тег всего документа html и указываем параметр lang, записав там базовый язык страницы — русский.
Переходим к заголовку.
Первое что укажем — кодировка символов документа.
Затем заголовок, для окна браузера.
Потом, не долго думая, подключим файл стиля.
И, под конец, добавим пустой контейнер тела документа.
Всё что мы здесь описали есть в листинге №1:
Листинг 1. Базовая структура документа HTML5
Инвесторы видят перспективу
Обращаем ваше внимание на то, что большинство тегов теперь стали не такими длинными как ранее. Тегу
больше ничего не нужно кроме lang
. Для метатега достаточно написать charset
. Кроме того, для тега link
не нужно указывать type
.
Каркас готов, но страницу в браузер нам пока рано выставлять. Идём далее — семантические элементы страницы.
Делаем разметку контента
Разместим на каркасе семантические блоки
Теперь давайте поточнее определимся с тем, что у нас будет размещаться на странице. Будем исходить из следующего: нам нужно по максимуму использовать новые семантические элементы HTML5.
Наша страница будет служить для показа полного текста новости о компании, которой посвящён сайт. На неё будет происходить переход либо с главной страницы, где размещаются последние новости, либо из архива новостей.
Разместим блоки в контейнере
. Будем придерживаться следующей последовательности этих элементов:
В начале, у нас будет блок — заголовок страницы. с группой заголовков, говорящих о сайте. Затем семантический блок для меню. Ссылки в меню сделаем фиктивными. После этого начинается статья, обозначенная соответствующим семантическим блоком. В ней блок заголовка для записи названия статьи и даты публикации. Далее идёт содержимое статьи, к которой добавлены собственные выводы автора, написавшего новость. Это добавка оформляется в виде секции, также сопровождается блоком заголовка и контентом. В заключении страницы идёт блок footer
, в котором мы разместим дополнительную информацию о контенте наших страниц.
Всё что мы с вами здесь описали представлено в Листинге №2. Мы не приводим полный код страницы, а только то, что должно быть между тегами
…
.
Листинг 2. Размещение семантических блоков HTML5
ООО Рога и копыта
Полный текст новости
Инвесторы видят перспективу
Ничто не мешает людям воспользоваться рогами зайцелопа. Однако копыт у него нет.
Что думает общественность
В реальности существует только Ubuntu с таким странным именем "Зайцелоп".
Теперь страницу можно рассмотреть в браузере. Однако, она пока выглядит невзрачно. Но мы ведь не зря уже позаботились и подключили файл со стилями.
Покрасим фасад
У нашей страницы пока унылый и не привлекательный вид. Сделаем ей мэйкап. Реализуем его в нашем файле стилей styles.css
Первое, что мы сделаем — это определимся со шрифтом для всего документа. Если кто не знает, то скажем, проводились исследования какой шрифт лучше воспринимается с экрана монитора, выяснилось — тот, у которого нет засечек. Такие шрифты называют sans-serif
— без засечек. К ним относятся, например: Arial, Helvetica, Verdana
. Идём дальше, будем по порядку определять правила для оформления всех элементов нашей страницы. Для того, чтобы не забегать сильно вперёд, воспользуемся пока несколькими фишками — тенями и закруглёнными краями у блоков.
Большинство из того, что мы здесь накодим было доступно ещё в ранних стандартах CSS. Новенькие фичи мы перечислим.
box-shadow
Данный параметр указывается для блочного элемента страницы, и создаёт тень вокруг него. Первые четыре числа это линейные параметры тени, соответственно указываются либо в пикселах px
, либо других линейных единицах (em
, pt
), либо без них, в случае нулевого размера. Первое число означает — горизонтальное отбрасывание тени вправо, хотите сделать влево — ставьте отрицательное число. Следующий — вертикальное вниз, чтобы сделать вверх — ставьте отрицательное число. Далее — величина размытия тени, затем — разброс тени. После линейных размеров указывается цвет тени, и если вы хотите внутреннюю тень то ключевое слово inset
. Если вам мало одной тени, то реализуйте свои теневые фантазии через запятую.
text-shadow
Этот параметр по своим настройкам похож на предыдущий, отличие только в отсутствии разброса тени и внутренней тени. И вам также никто не мешает фантазировать на счёт количества теней, через запятую.
border-radius (-moz-border-radius, -webkit-border-radius)
Радиус скругления у блоков. Углов у блока может быть четыре, соответственно и элементов у этого параметра может быть столько же. Перечисляются по часовой стрелки начиная от верхнего левого угла. Указанные в скобке названия параметров, используются в браузерах семейства Mozilla и на движке Webkit (Chrome, Safari). Так что дублируйте в правиле настройки, указанные для border-radius
ещё и в эту парочку параметров.
Придуманное и закодированное нами оформление будет выглядеть так, как показано в Листинге №3. Этот код, вам нужно поместить в файл styles.css
.
Листинг 3. CSS для новых семантических элементов HTML5
Если вы откроете свою индексную страничку сейчас, то она уже будет выглядеть, не так уныло, посмотрите на Рисунок 1. По сравнению с предыдущим видом, она будет просто СУПЕР
Рисунок 1. Вид стилизованой страницы
Если страница выглядит по-другому, значит вы открыли её не в том браузере. Под “не в том” я подразумеваю браузер отличный от Mozilla4+, Chrome11.0+, Opera11.10+, они показывают страницу одинаково — проверено.
Примечание: Если кому-то непонятны записи правил в листинге, например, вам непонятно зачем нужно использовать >
в селекторе? Тогда пишите свои вопросы в комментариях.
Взглянув на нее, вы, возможно, справедливо заметите, что заголовки, находящиеся в боковой колонке и подвале не должны зависеть от заголовка статьи. Хорошо, но давайте отвлечемся на время. В данном случае мы имеем четкую структуру страницы, сформированную заголовками, в которой название статьи является заголовком высшего уровня
. Теперь нам необходимо сохранить положение вещей после приведения структуры к виду HTML5
стандарта.
HTML5 структура документа.
Ну что ж, давайте возьмем за основу HTML 4.01
структуру и при помощи секционных элементов преобразуем ее в новую, полностью отвечающую HTML5
стандарту. В большинстве обучающих пособий и статей для этих целей мне рекомендовалось сделать следующее:
Site title etc.
Article title
Article content.
Article sub-heading
More content.
Article sub-sub-heading
More content.
Для обеспечения обратной совместимости я не стал менять все заголовки документа на
элементы, как это рекомендуется делать в HTML5
спецификации, а оставил прежние уровни для всех заголовков (тем более, что в нашем случае тотальная замена заголовков на
ни как не повлияет на структуру документа HTML5
стандарта). В результате мы получим структуру совершенно идентичную той, которая была в предыдущем HTML 4.01
примере. Именно ее и формирует браузер, не использующий новый алгоритм HTML5
стандарта. Но в том случае, если вы используете инструмент, подобный HTML5 outliner , который как раз таки и применяет вышеупомянутый алгоритм, то в результате вы увидите следующую структуру:
Что вы скажите на этот раз? Как же получилось так, что находящийся в элементе
Что, заголовок и подвал поменялись местами?
Для начала давайте разберемся с подвалом. Элемент
Так какой же выход из создавшейся ситуации? Мы можем «изолировать» находящийся в подвале заголовок при помощи секционного элемента, и после этого он уже не будет интерпретироваться как заголовок документа в целом:
Такой способ решения проблемы можно расценивать как некий хак, и с его помощью мы действительно заставляем интересующий нас заголовок занять правильное место в структуре документа. Но теперь возникает другая проблема – элемент
и документ как таковой остался без заголовка, и его структура выглядит вот так:
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
Создание навигационных разделов
В результате у нас появилось два безымянных раздела. То, что касается элемента
Честно говоря, для меня не совсем понятно почему элемент
является секционным. Да, действительно, навигационные списки зачастую лишь выигрывают от того, что для них устанавливают соответствующие заголовки. Но теперь, учитывая то, что элемент
является секционным, мы должны для каждого раздела, созданного с его помощью указывать заголовок, чтобы не получить в результате безымянные разделы в структуре документа. Что ж, давайте так и сделаем:
Для того, чтобы не оставить сам документ, то есть его корневой элемент
безымянным разделом структуры, необходимо установить заголовок, который не будет относиться ни к одному секционному элементу. В этом случае мы тоже сталкиваемся с проблемой, а именно – это не позволяет нам заключить само содержание страницы в рамки элемента
и в тоже время, созданный нами заголовок будет интерпретироваться как заголовок всего документа, то есть наивысшего уровня, а не только как заголовок блока контента, что не всегда допустимо.
И если это действительно так, то можно сделать заключение, что элемент
целесообразно применять только в тех случаях, когда одна страница содержит несколько статей, которые помимо своих индивидуальных заголовков представлены одним общим, главным заголовком высшего уровня. Примером такого случая может быть домашняя страница сайта или страница, содержащая архив блога. Но в том случае, если документ включает в себя одну единственную статью (как, например, страница на которой вы сейчас находитесь), то использование в нем секционного элемента
бессмысленно.
На мой взгляд, существует несколько различных способов решения проблемы.
Не используйте секционные элементы.
Исключение секционных элементов из документа предотвращает возникновение данной проблемы. Структура будет формироваться по старым правилам. Единственный очевидный недостаток в этом случае, это то, что если браузеры однажды все-таки начнут поддерживать эти элементы, то вы не сможете воспользоваться их гипотетическими преимуществами. Звучит не убедительно, неправда ли?
Повторно указывать заголовок статьи за рамками всех секционных элементов.
То есть, дублирование главного заголовка с последующим скрытием его при помощи CSS
лишь с целью его корректного расположения в структуре документа? Я думаю, что это плохая идея. Взгляните на эту ситуацию с точки зрения доступности документа (его прочтения при помощи специальных программ) или с колокольни SEO
.
Установить название сайта в качестве заголовка документа высшего уровня.
Существует мнение, что в качестве главного заголовка документа можно использовать имя сайта, компании или содержимое логотипа. Я лично не разделяю его, так как считаю, что именно название текущей страницы имеет принципиально важное значение при ее просмотре.
Не используйте элементы в одностатейных документах.
А как насчет того, чтобы всё-таки применять секционные элементы, но именно в одностатейных документах не заключать их содержание в рамки элемента
, что приведет к тому, что заголовки самих публикаций будут одновременно представлять корневой элемент документа
. Что-то вроде этого:
Здесь уже наблюдается некоторое улучшение. Единственная проблема заключается в том, что порядок, в котором представлены пункты структуры документа, не соответствует тому, как они располагаются в его разметке. И это может стать реальной проблемой для тех пользователей, которые перемещаются по странице, ориентируясь по ее заголовкам, представленным в том порядке, в котором их располагает браузер, формируя структуру документа. И я не имею ни малейшего понятия, действительно ли такие инструменты как программы чтения с экрана будут поступать именно таким образом, если они начнут поддерживать HTML5
спецификацию. Поэтому не могу утверждать, что данная проблема будет напрямую отнесена к вопросу юзабилити .
Другой путь решения этой проблемы – использование имени сайта в качестве заголовка высшего уровня
документа. Тогда в элементе
необходимо сделать следующие изменения:
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
структуры документа испытывает некоторые трудности в том случае, если документ содержит секционные элементы. Возможно, что для полного понимания данного вопроса должно пройти некоторое время, но уже на данный момент наличие определенных проблем очевидно, по крайней мере в тех случаях, когда вам необходимо исключить наличие безымянных разделов в структуре документа.
Вполне допустимо, что я не верно понял или упустил из виду какие-либо нюансы, в этом случае буду рад вашим замечаниям и поправкам.
Зачастую веб-разработчики даже не подозревают о существовании определенных стандартов кодирования в HTML. Однако в период с 2000 по 2010 годы многие веб-разработчики перешли с HTML на XHTML. При этом XHTML вынудил разработчиков писать валидный и "хорошо сформированный" код. HTML5 же, когда дело доходит до валидации кода, допускает некоторую небрежность.
Тем не менее, единообразие по стилю облегчит другим понимание вашего HTML кода.
Возможно, когда-нибудь программам, вроде программ чтения XML данных, потребуется прочитать ваш HTML код. Таким образом, использование хорошо сформированного, близкого к XHTML синтаксиса будет вполне разумным подходом.
Всегда следите, чтобы ваш код был аккуратным, чистым и хорошо сформированным.
Используйте корректный тип документа
На первой строке всегда декларируйте тип документа:
Если вы хотите соблюдать последовательность с написанием тегов в нижнем регистре, то вы можете использовать следующее определение типа документа:
Имена элементов пишите маленькими буквами
HTML5 допускает одновременное использование в именах элементов больших и маленьких букв. Однако, лучше всегда использовать только маленькие буквы. Это объясняется следующими соображениями:
Смешение больших и маленьких букв в именах тегов считается плохой практикой
Это параграф текста.
Очень плохо:
Это параграф текста.
Это параграф текста.
Закрывайте все HTML элементы
В HTML5 вы не обязаны закрывать все элементы (например, элемент
Это параграф текста.
Это параграф текста.
Это параграф текста.
Это параграф текста.
Закрывайте пустые HTML элементы
В HTML5 закрывать или нет пустые элементы зависит от желания веб-разработчика.
Допустимо:
Также допустимо:
Тем не менее, закрывающая косая черта (/) ОБЯЗАТЕЛЬНА в XHTML и XML.
Если ожидается, что к вашей веб-странице будут обращаться XML приложения, то в пустых HTML элементах лучше использовать закрывающую косую черту!
В именах атрибутов используйте маленькие буквы
В HTML5 при написании имен атрибутов можно смешивать большие и маленькие буквы.
Смешение больших и маленьких букв в именах атрибутов считается плохой практикой
Разработчики обычно используют маленькие буквы (как в XHTML)
Написание в нижнем регистре выглядит чище
В нижнем регистре легче писать
Заключайте значения атрибутов в кавычки
HTML5 допускает написание значений атрибутов без кавычек. Однако мы рекомендуем всегда заключать значения атрибутов в кавычки, потому что
Смешение больших и маленьких букв в значениях считается плохой практикой
Значения в кавычках легче читать
Вы ДОЛЖНЫ заключать в кавычки, если в значениях есть пробелы
Очень плохо:
Это не будет работать, потому что в значении есть пробелы
Атрибуты изображений
При определении изображений всегда используйте атрибут "alt". Этот атрибут важен, когда изображение по какой-то причине не отображается.
Также, всегда определяйте ширину и высоту изображения. Это уменьшает слом макета страницы, так как браузер будет резервировать место для изображения еще на этапе загрузки страницы.
Пробелы и знак равно
HTML5 допускает пробелы вокруг знака равно. Однако, когда пробелов нет, то такой код легче читать, и это лучше группирует сущности.
Избегайте длинных строк кода
При использовании HTML редактора, неудобно читать HTML код, если приходится прокручивать окно влево или вправо.
Следует стараться, чтобы строка кода в длину не превышала 80 символов.
Пустые строки и отступы
Не следует без веских причин добавлять пустые строки.
Для лучшей читабельности пустые строки следует добавлять только для разделения больших и логически единых блоков кода.
Также, для лучшей читабельности добавляйте два пробела отступов. Не используйте для этого табуляцию.
Не используйте ненужные пустые строки и отступы. Нет необходимости ставить отступ перед каждым элементом.
Необязательно:
Famous Cities
Tokyo
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
Famous Cities
Tokyo
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
Name
Description
A
Description of A
B
Description of B
London
Paris
Tokyo
Пропускать или нет и ?
По стандарту HTML5 тег и тег
могут не использоваться.
Следующий код согласно стандарту HTML5 считается валидным:
Заголовок страницы
Это текстовый заголовок
Это абзац текста.
Элемент - это корень документа. Это рекомендованное место для определения языка страницы:
Декларация языка страницы важна как для специализированных приложений (например, программ чтения с экрана), так и для поисковых систем.
Кроме этого, если не написать тег или тег
, то это может сломать структуру DOM и XML приложения. А пропуск тега к тому же может привести к ошибками в старых браузерах (IE9).
Пропускать ли тег ?
Согласно стандарту HTML5 тег
может не использоваться.
По умолчанию, браузеры будут добавлять все элементы, расположенные перед открывающем тегом
внутрь созданного ими элемента .
Вы можете снизить сложность структуры HTML, пропустив тег
:
Заголовок страницы
Текстовый заголовок
Это текстовый абзац.
Метаданные
Элемент
является обязательным в HTML5. Заголовок страницы должен быть наполнен значением:
Чтобы обеспечить правильную интерпретацию и корректное индексирование страницы поисковыми системами, определение языка и кодировки символов страницы необходимо декларировать как можно раньше:
Стандарты синтаксиса и кодирования в HTML5
Установка вьюпорта (окна просмотра)
"Вьюпорт" - это видимая пользователю область веб-страницы. Эта область разница от устройства к устройству и на мобильных телефонах будет меньше, чем на экране компьютера.
В HTML5 был введен метод, позволяющий веб-дизайнерам контролировать вьюпорт при помощи тега .
Следует всегда использовать элемент управления вьюпортом в следующей форме на всех веб-страницах:
Данный элемент управления вьюпортом предоставляет браузеру инструкцию, как контролировать размеры и масштабирование страницы.
Часть width=device-width
устанавливает ширину страницы в соответствии с шириной экрана текущего устройства (которая будет разной в зависимости от используемого устройства).
Часть initial-scale=1.0
устанавливает начальный уровень увеличения, когда страница впервые загружается браузером.
Ниже вы можете увидеть пример веб-страницы на экране смартфона с установленным мета тегом вьюпорта и без него:
Страница с мета тегом вьюпорта
HTML комментарии
Короткий комментарий должен писаться на одной строке:
Статья, которая повествует об основах создания структуры документа в 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 .
--> Untitled
Untitled
Untitled
Untitled
Каждая из секций (nav , aside , section , article) в свою очередь тоже может содержать секции. Таким образом, в HTML 5 получается структура документа. Т.е. одни секции вкладываются в другие. Секции, которые расположены непосредственно в body , имеют 2 уровень. А секции, которые расположены непосредственно в секциях 2 уровня будут уже иметь 3 уровень и т.д.
Например, создадим в section 3 секции article .
--> Вышеприведённый пример будет создавать следующую структуру документа:
Untitled
Untitled
Untitled
Untitled
Untitled
Untitled
Untitled
Элементы 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
--> Вышеприведённый пример будет создавать следующую структуру документа:
A
Untitled
B
C
D
E
F
Например, создадим неявные разделы в секции 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
Дата создания: 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: