Начало работы с HTML. Основы семантической верстки на HTML5
Зачастую веб-разработчики даже не подозревают о существовании определенных стандартов кодирования в HTML. Однако в период с 2000 по 2010 годы многие веб-разработчики перешли с HTML на XHTML. При этом XHTML вынудил разработчиков писать валидный и "хорошо сформированный" код. HTML5 же, когда дело доходит до валидации кода, допускает некоторую небрежность.
Тем не менее, единообразие по стилю облегчит другим понимание вашего HTML кода.
Возможно, когда-нибудь программам, вроде программ чтения XML данных, потребуется прочитать ваш HTML код. Таким образом, использование хорошо сформированного, близкого к XHTML синтаксиса будет вполне разумным подходом.
Всегда следите, чтобы ваш код был аккуратным, чистым и хорошо сформированным.
Используйте корректный тип документа
На первой строке всегда декларируйте тип документа:
Если вы хотите соблюдать последовательность с написанием тегов в нижнем регистре, то вы можете использовать следующее определение типа документа:
Имена элементов пишите маленькими буквами
HTML5 допускает одновременное использование в именах элементов больших и маленьких букв. Однако, лучше всегда использовать только маленькие буквы. Это объясняется следующими соображениями:
- Смешение больших и маленьких букв в именах тегов считается плохой практикой
Это параграф текста.
Очень плохо:
Это параграф текста.
Это параграф текста.
Закрывайте все HTML элементы
В HTML5 вы не обязаны закрывать все элементы (например, элемент
Это параграф текста.
Это параграф текста.
Это параграф текста. Это параграф текста. В HTML5 закрывать или нет пустые элементы зависит от желания веб-разработчика. Допустимо:
Также допустимо:
Тем не менее, закрывающая косая черта (/) ОБЯЗАТЕЛЬНА в XHTML и XML. Если ожидается, что к вашей веб-странице будут обращаться XML приложения, то в пустых HTML элементах лучше использовать закрывающую косую черту! В HTML5 при написании имен атрибутов можно смешивать большие и маленькие буквы.
HTML5 допускает написание значений атрибутов без кавычек. Однако мы рекомендуем всегда заключать значения атрибутов в кавычки, потому что Очень плохо: Это не будет работать, потому что в значении есть пробелы
При определении изображений всегда используйте атрибут "alt". Этот атрибут важен, когда изображение по какой-то причине не отображается. Также, всегда определяйте ширину и высоту изображения. Это уменьшает слом макета страницы, так как браузер будет резервировать место для изображения еще на этапе загрузки страницы.
HTML5 допускает пробелы вокруг знака равно. Однако, когда пробелов нет, то такой код легче читать, и это лучше группирует сущности.
При использовании HTML редактора, неудобно читать HTML код, если приходится прокручивать окно влево или вправо. Следует стараться, чтобы строка кода в длину не превышала 80 символов. Не следует без веских причин добавлять пустые строки. Для лучшей читабельности пустые строки следует добавлять только для разделения больших и логически единых блоков кода. Также, для лучшей читабельности добавляйте два пробела отступов. Не используйте для этого табуляцию. Не используйте ненужные пустые строки и отступы. Нет необходимости ставить отступ перед каждым элементом. Необязательно:
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.
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.
По стандарту HTML5 тег и тег Следующий код согласно стандарту HTML5 считается валидным:
Это абзац текста. Элемент - это корень документа. Это рекомендованное место для определения языка страницы:
Декларация языка страницы важна как для специализированных приложений (например, программ чтения с экрана), так и для поисковых систем. Кроме этого, если не написать тег или тег Согласно стандарту HTML5 тег По умолчанию, браузеры будут добавлять все элементы, расположенные перед открывающем тегом Вы можете снизить сложность структуры HTML, пропустив тег
Это текстовый абзац. Элемент
Чтобы обеспечить правильную интерпретацию и корректное индексирование страницы поисковыми системами, определение языка и кодировки символов страницы необходимо декларировать как можно раньше:
"Вьюпорт" - это видимая пользователю область веб-страницы. Эта область разница от устройства к устройству и на мобильных телефонах будет меньше, чем на экране компьютера. В HTML5 был введен метод, позволяющий веб-дизайнерам контролировать вьюпорт при помощи тега . Следует всегда использовать элемент управления вьюпортом в следующей форме на всех веб-страницах:
Данный элемент управления вьюпортом предоставляет браузеру инструкцию, как контролировать размеры и масштабирование страницы. Часть width=device-width
устанавливает ширину страницы в соответствии с шириной экрана текущего устройства (которая будет разной в зависимости от используемого устройства). Часть initial-scale=1.0
устанавливает начальный уровень увеличения, когда страница впервые загружается браузером. Ниже вы можете увидеть пример веб-страницы на экране смартфона с установленным мета тегом вьюпорта и без него: Страница с мета тегом вьюпорта
Короткий комментарий должен писаться на одной строке:
Последнее обновление: 08.04.2016 Элементы являются кирпичиками, из которых складывается документ html5. Для создания документа нам надо создать простой текстовый файл, а в качестве расширения файла указать
*.html
Создадим текстовый файл, назовем его index
и изменим его расширение на .html
. Затем откроем этот файл в любом текстовом редакторе, например, в Notepad++. Добавим в файл следующий текст:
Для создания документа HTML5 нам нужны в первую очередь два элемента: DOCTYPE и html. Элемент doctype
или Document Type Declaration
сообщает веб-браузеру тип документа. указывает, что данный документ является документом html и что используется html5, а не html4 или какая-то другая версия языка разметки. А элемент html между своим открывающим и закрывающим тегами содержит все содержимое документа. Внутри элемента html мы можем разместить два других элемента: head
и body
.
Элемент head содержит метаданные веб-страницы - заголовок веб-страницы, тип кодировки и т.д., а также ссылки на внешние ресурсы - стили, скрипты, если они использутся.
Элемент body собственно определяет содержимое html-страницы. Теперь изменим содержимое файла index.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 мы увидим в основном поле браузера. Статья, которая повествует об основах создания структуры документа в HTML 5.
Структура документа играет очень важную роль для понимания того, как устроена веб-страница. Она определяет то, как контенты организованы и взаимосвязаны между собой в документе, а также их относительную важность. Если воспользоваться схемой документа, то можно увидеть, как более просто стало просматривать информацию. Правильно спроектированная структура придаёт содержимому страницы смысл, делает его более лёгким для чтения, которое осуществляется поисковыми системами и другими пользовательскими агентами. На сайте, в котором правильно спроектирована структура, проще ориентироваться и находить нужную информацию. Перед изучением процесса создания структуры документа в HTML 5, желательно познакомиться с тем, как это осуществлялось в предыдущей версии языка и с какими проблемами веб-разработчику при этом приходилось сталкиваться. Создание структуры документа в 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 и с проблемами при её реализации можно в следующей статье. Стратегия создания структуры документа в HTML5 значительно изменилась. Теперь она не определяется только одними заголовками, т.к. это всегда для большинства веб-разработчиков выглядело как-то нелепо. Заголовки позволяют определить структуру документа, но они не группируют контент. До HTML 5 авторы группировали контент с помощью элементов div , а затем использовали атрибуты классов или id атрибуты для того, чтобы присвоить этим разделам более семантически верное значение. К счастью в HTML5 появилась новая группа элементов sectioning, которые позволяют авторам создавать описание (структуру) документа. К этой группе относятся элементы article , aside , nav и section . Их основное назначение сделать код HTML более семантическим, добавить в него смысл с помощью разметки. Для создания структуры документа в HTML 5 используются заголовочные элементы (h1 , h2 , h3 , h4 , h5 и h6) и элементы nav , aside , section и article из группы sectioning. Данные элементы в отличие от заголовков предназначены для создания явных разделов и установления этим разделам некоторого смысла. Для того чтобы было более просто понять основные принципы структурирования документа в HTML 5 будет считать, что элементы body , nav , aside , section и article создают секции (явные разделы), а элементы h1 , h2 , h3 , h4 , h5 и h6 - обычные разделы (неявные разделы). Процесс разработки структуры документа рассмотрим посредством пошаговых инструкций. В HTML 5 создание структуры документа начинается с элемента body . Данный элемент создаёт основную секцию (раздел на уровне документа).
После этого обычно переходят к созданию секций внутри 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 .
Например, создадим неявные разделы в секции section и aside:
1. Article title Взглянув на нее, вы, возможно, справедливо заметите, что заголовки, находящиеся в боковой колонке и подвале не должны зависеть от заголовка статьи. Хорошо, но давайте отвлечемся на время. В данном случае мы имеем четкую структуру страницы, сформированную заголовками, в которой название статьи является заголовком высшего уровня Ну что ж, давайте возьмем за основу HTML 4.01
структуру и при помощи секционных элементов преобразуем ее в новую, полностью отвечающую HTML5
стандарту. В большинстве обучающих пособий и статей для этих целей мне рекомендовалось сделать следующее: Article content. More content. More content. Для обеспечения обратной совместимости я не стал менять все заголовки документа на 1. Footer heading Что вы скажите на этот раз? Как же получилось так, что находящийся в элементе Для начала давайте разберемся с подвалом. Элемент Так какой же выход из создавшейся ситуации? Мы можем «изолировать» находящийся в подвале заголовок при помощи секционного элемента, и после этого он уже не будет интерпретироваться как заголовок документа в целом: Такой способ решения проблемы можно расценивать как некий хак, и с его помощью мы действительно заставляем интересующий нас заголовок занять правильное место в структуре документа. Но теперь возникает другая проблема – элемент 1. Untitled BODY В результате у нас появилось два безымянных раздела. То, что касается элемента Честно говоря, для меня не совсем понятно почему элемент Для того, чтобы не оставить сам документ, то есть его корневой элемент И если это действительно так, то можно сделать заключение, что элемент На мой взгляд, существует несколько различных способов решения проблемы. Исключение секционных элементов из документа предотвращает возникновение данной проблемы. Структура будет формироваться по старым правилам. Единственный очевидный недостаток в этом случае, это то, что если браузеры однажды все-таки начнут поддерживать эти элементы, то вы не сможете воспользоваться их гипотетическими преимуществами. Звучит не убедительно, неправда ли? То есть, дублирование главного заголовка с последующим скрытием его при помощи CSS
лишь с целью его корректного расположения в структуре документа? Я думаю, что это плохая идея. Взгляните на эту ситуацию с точки зрения доступности документа (его прочтения при помощи специальных программ) или с колокольни SEO
. Существует мнение, что в качестве главного заголовка документа можно использовать имя сайта, компании или содержимое логотипа. Я лично не разделяю его, так как считаю, что именно название текущей страницы имеет принципиально важное значение при ее просмотре. А как насчет того, чтобы всё-таки применять секционные элементы, но именно в одностатейных документах не заключать их содержание в рамки элемента Article content. More content. More content. В результате структура будет выглядеть так: 1. Article title Здесь уже наблюдается некоторое улучшение. Единственная проблема заключается в том, что порядок, в котором представлены пункты структуры документа, не соответствует тому, как они располагаются в его разметке. И это может стать реальной проблемой для тех пользователей, которые перемещаются по странице, ориентируясь по ее заголовкам, представленным в том порядке, в котором их располагает браузер, формируя структуру документа. И я не имею ни малейшего понятия, действительно ли такие инструменты как программы чтения с экрана будут поступать именно таким образом, если они начнут поддерживать HTML5
спецификацию. Поэтому не могу утверждать, что данная проблема будет напрямую отнесена к вопросу юзабилити . Другой путь решения этой проблемы – использование имени сайта в качестве заголовка высшего уровня Которые приведут к такой структуре: 1. Site title etc. На мой взгляд это самый приемлемый вариант из всех предыдущих. Но я по-прежнему придерживаюсь того мнения, что если структура документа не включает в себя имя сайта, то она дает более четкое представление о содержании текущей страницы. Поэтому в своей разметке я придерживаюсь варианта, который исключает наличие имени сайта в качестве главного Во время написания данной статьи у меня сложилось впечатление, что сам алгоритм формирования HTML5
структуры документа испытывает некоторые трудности в том случае, если документ содержит секционные элементы. Возможно, что для полного понимания данного вопроса должно пройти некоторое время, но уже на данный момент наличие определенных проблем очевидно, по крайней мере в тех случаях, когда вам необходимо исключить наличие безымянных разделов в структуре документа. Вполне допустимо, что я не верно понял или упустил из виду какие-либо нюансы, в этом случае буду рад вашим замечаниям и поправкам. При создании сайта первое, что нужно представлять — это то, как формируется веб-страница. Это, своего рода, «фундамент» в сайтостроении. Поэтому прежде чем, углубляться в изучение более сложных технологий создания сайтов, рекомендуется иметь хотя бы базовые сведения о HTML. В данном уроке мы познакомимся с HTML
, разберем структуру документа HTML
и на практических примерах закрепим полученные знания. HTML
расшифровывается, как язык разметки гипертекста (от англ. HyperText Markup Language). Данный язык отвечает за то, как именно будет отображаться гипертекст на страницах сайта. Теперь давайте разберемся, что же такое гипертекст? Не секрет, что отдельная веб-страница может содержать много разнотипной информации, будь то текст, какие-то таблицы, графики, видеоролики, аудио и т.д. Так вот, всю эту информацию можно назвать одним словом — гипертекст. Отметим, что HTML является именно языком разметки, а не языком программирования. В данном языке нет никаких логических функций и произвести какие-либо математические расчеты на нем невозможно. Страницы HTML имеют расширение .html
или .htm
и обрабатываются браузерами — IE, Mozilla Firefox, Google Chrome, Yandex Chrome, Opera и др. Теперь давайте разберемся как же браузер понимает, что и каким образом отображать на веб-странице? Это очень просто. Язык разметки гипертекста HTML имеет встроенные команды, их называют тегами. Именно по ним браузер и ориентируются. Любой HTML документ (веб-станица) должен иметь определенную структуру. Это позволит избежать возможных проблем при открытии страниц в браузерах. В качестве примера давайте рассмотрим страницу, которая содержит следующих HTML код: Разберем по порядку, что входит в данную структуру: 1. Первое, что идет в документе HTML — указание версии (первая строка). Для корректной работы следует указывать данную строку при верстке веб-страницы. 3. Затем идет область для верхней части сайта (шапки). Для этого служит тег 4. Мета-тег «description» — краткое содержание страницы, предназначен для поисковых систем. Данный тег является важным для поисковой оптимизации и его необходимо заполнять. 5. Мета-тег «keywords» — ключевые слова, которые могут встречаться на странице. Данный тег также предназначен для поисковиков. В настоящее время этот тег редко используется. 6. Тело страницы открывается тегом Таким образом, мы ответили на вопрос, что такое HTML и изучили структуру документа HTML. Полученная в данном уроке информация — это базовые понятия, без них не обойтись. О более сложных вещах мы поговорим в других уроках.Закрывайте пустые HTML элементы
В именах атрибутов используйте маленькие буквы
Заключайте значения атрибутов в кавычки
Атрибуты изображений
Пробелы и знак равно
Избегайте длинных строк кода
Пустые строки и отступы
Famous Cities
Tokyo
Famous Cities
Tokyo
Name
Description
A
Description of A
B
Description of B
Пропускать или нет и ?
Это текстовый заголовок
Пропускать ли тег ?
Текстовый заголовок
Метаданные
Установка вьюпорта (окна просмотра)
HTML комментарии
Семантика и структура документа в HTML 5
Создание структуры документа до HTML 5
Как образуется структура документа в HTML 4
Проблемы при реализации структуры документа
Создание структуры документа в HTML 5
Элементы, предназначенные для создания структуры в HTML 5.
Процесс создания структуры документа в HTML5
A
B
C
D
E
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
1. Article sub-heading
1. Article sub-sub-heading
2. Sidebar heading
1. Sidebar sub-heading
3. Footer heading
. Теперь нам необходимо сохранить положение вещей после приведения структуры к виду HTML5
стандарта.
HTML5 структура документа.
Site title etc.
Article title
Article sub-heading
Article sub-sub-heading
элементы, как это рекомендуется делать в HTML5
спецификации, а оставил прежние уровни для всех заголовков (тем более, что в нашем случае тотальная замена заголовков на
ни как не повлияет на структуру документа HTML5
стандарта). В результате мы получим структуру совершенно идентичную той, которая была в предыдущем HTML 4.01
примере. Именно ее и формирует браузер, не использующий новый алгоритм HTML5
стандарта. Но в том случае, если вы используете инструмент, подобный HTML5 outliner , который как раз таки и применяет вышеупомянутый алгоритм, то в результате вы увидите следующую структуру:
1. Untitled NAV
2. Article title
1. Article sub-heading
1. Article sub-sub-heading
3. Sidebar heading
1. Sidebar sub-headingЧто, заголовок и подвал поменялись местами?
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Создание навигационных разделов
Main navigation
Как быть с Untitled BODY?
Не используйте секционные элементы.
Повторно указывать заголовок статьи за рамками всех секционных элементов.
Установить название сайта в качестве заголовка документа высшего уровня.
Не используйте элементы
Site title etc.
Main navigation
Article title
Article sub-heading
Article sub-sub-heading
1. Main navigation
2. Article sub-heading
1. Article sub-sub-heading
3. Sidebar heading
1. Sidebar sub-heading
4. Footer heading
документа. Тогда в элементе
Site title etc.
Main navigation
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
заголовка одностатейного документа.
Я полагаю, что вы тоже запутались.
Что такое HTML?
Структура документа HTML