Структура HTML документа и его элементов

HTML документ представляет из себя обычный текстовый документ с расширением .html. Подобные документы создаются и редактируются в обычном текстовом редакторе. В качестве такого редактора может использоваться даже блокнот. Но я советую использовать текстовые редакторы с подсветкой синтаксиса, такие как «Sublime Text», «Atom», «Brackets», «Visual Studio Code» и другие, т.к. ориентироваться в написанном коде, где каждая синтаксическая единица подсвечена своим цветом, гораздо проще. Не столь важно, каким редактором вы будете пользоваться. Главное, чтобы вам было удобно в нём работать. Все мои примеры мы будем рассматривать в редакторе «Sublime Text 3». Также советую обратить внимание на редактор «Visual Studio Code», который появился не так давно (на момент написания книги). Данный редактор поддерживает базовые возможности IDE и является легковесным решением для написания кода на языках JavaScript, C++, C#, PHP, Python, Java, Objective C, Swift, HTML, CSS, LESS, SASS и др. после установки соответствующего расширения.

Теперь поговорим о синтаксисе языка HTML. HTML полностью состоит из элементов. Каждый элемент выделяется тегами. Теги - это синтаксическая единица языка HTML, которая выделяет или создаёт элемент. По сути, это специальный набор символов, с помощью которого браузер понимает, где элемент создаётся, начинается и заканчивается. Теги выглядят так:

1. <...>Элемент</...>
2. <...>

То, что вы видите на первой строке, называется двойным тегом. Он показывает начало и конец элемента. Начало элемента обозначается открывающим тегом<...> , а конец элемента закрывающим тегом</...>. В данном случае, содержимым элемента является текст «Элемент». Для одних тегов закрывающий тег обязателен к использованию, для других тегов не обязателен, однако рекомендуем не лениться и закрывать теги всегда, дабы избежать появления ошибок. Пример двойного тега:

1. <h1>...</h1>

На второй строке - одинарный тег. Он создаёт элемент. Пример одинарного тега:

1. <hr>

Для лучшего понимания рассмотрим отрывок кода:

1. <h1>Title</h1>
2. <p>Helloworld!!!</p>
3. <hr>
4. <ahref="http://google.com">Link</a>
5. <imgsrc="http://the-center.it/img/logo.png">

В данном коде используются следующие теги:

• <h1>...</h1> - Заголовок первого уровня

• <p>...</p> - Текстовый абзац

• <hr> - Добавление горизонтальной линии

• <a>...</a>да - Добавление ссылки

• <img> - Добавление изображения

Стоит отметить, что названия этих тегов можно писать как в верхнем, так и в нижнем регистрах. Но хорошим тоном считается использование именно нижнего регистра. Такой код проще читается и наиболее распространён на данный момент.

Разберем каждый из этих тегов.

Тег <h1> выделяет заголовок. Это двойной тег. Обычно его используют для названия статьи. Всего существует 6 уровней заголовочных тегов: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Они идут по порядку убывания веса (значимости) в структуре документа. Из этих тегов составляют иерархию страницы (заголовки, подзаголовки, пункты подзаголовка и т.д.). По умолчанию браузеры обычно их выделяют полужирным и в зависимости от уровня заголовка устанавливают высоту текста (чем выше уровень, тем высота текста больше). По аналогии, в редакторе MS Word вы можете найти инструменты для добавления заголовков различных уровней.

Тег <p> выделяет абзац. Каждый абзац начинается с новой строки, и к каждому из них добавляются отступы сверху и снизу. Используется для добавления текста на страницу. В MS Word для добавления абзацев достаточно просто ввести обычный текст. Каждый новый абзац в это редакторе создаётся при нажатии на клавишу Enter.

Тег <hr> добавляет горизонтальную черную линию. Это одинарный тег. В MS Word также есть средства для добавления горизонтальной линии.

Тегом <a> добавляются ссылки. По умолчанию сама ссылка для пользователя выглядит как подчеркнутый текст “Link” синего цвета. Если ссылку уже посетили, то она становится фиолетового цвета. Путь, к которому ведет ссылка, добавляется с помощью атрибута href. Собственно весь HTML состоит лишь из тегов и их атрибутов. Атрибутами можно задавать какие-то дополнительные параметры тегов, которые будут влиять на их действие, стиль отображения, и т.д. В редакторе MS Word для создания ссылки необходимо выделить текст и воспользоваться инструментом для добавления ссылок, вписав туда адрес, на который будет ссылаться данная ссылка.

Тег <img> добавляет изображение. Это одиночный тег. Атрибут src позволяет указать путь до прикрепляемого изображения. <img> поддерживает форматы изображений jpeg, png и gif. В редакторе MS Word для добавления изображения необходимо воспользоваться инструментом для вставки изображений или же просто скопировать и вставить изображение в документ.

При дальнейшей разработке веб-страниц примите во внимание тот факт, что при интерпретации браузером HTML кода любая последовательность пробелов, переносов и символов табуляции заменяется одним пробелом. Т.е. если вы заключите в тег, например <p> или <h1>, какой-то текст, в котором подряд будет содержаться несколько пробелов (переносов, символов табуляции или их комбинация), то в браузере вы увидите всего один пробел. Также не пытайтесь использовать символ переноса на следующую строку при форматировании текста. Он будет также интерпретирован как пробел. Если вам необходимо отобразить уже отформатированный текст с пробелами, переносами и табуляцией, то для этого нужно использовать специальный тег, о котором мы поговорим позже.

Теперь рассмотрим основную структуру документа HTML:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <metacharset="utf-8">
5. <title></title>
6. </head>
7. <body>
8.
9. </body>
10. </html>

Остановимся на каждом теге подробнее.

Первый тег <!DOCTYPE> указывает на используемую версию HTML. Это одинарный тег. В данном случае, поскольку мы используем 5-ю версию языка HTML, этот тег выглядит как <!DOCTYPE html>. Если бы мы использовали HTML 4.01, то этот тег выглядел бы вот так:

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Данный тег не является элементом. Он лишь говорит браузеру, какая версия языка HTML используется в данном документе. Указывать <!DOCTYPE> в документе обязательно, поскольку браузер не увидев этот тег может перейти в режим совместимости (если не определит версию языка) и поведение браузера может быть непредсказуемым.

Второй тег <html>, который открывается в строке 2 и закрывается в строке 10. Это двойной тег. В нём содержатся весь HTML документ. Это корневой элемент, в котором содержатся остальные элементы.

Внутри тега <html> вложены теги <head> (двойной, открывается в строке 3, закрывается в строке 6) и <body> (двойной, открывается в строке 7, закрывается в строке 9).

В теге <head> хранится заголовочная информация о документе. Туда пишут кодировку документа, заголовок, который отображается как название страницы в браузере, подключаются стилевые файлы и скрипты. Стилевые файлы говорят браузеру о стилях отображения элементов в документе (цвет, размер, расположение и т.д.), а скрипты добавляют интерактивности странице (с помощью скриптов, например, пишут онлайн калькуляторы, назначают действия кнопкам, добавляют различные эффекты, вроде всплывающих окон, меню и т.д.).

Тег <head> не отображается на странице. Его цель — сказать браузеру дополнительную информацию о странице. Таммогутнаходитсятолькотеги<base>, <basefont>, <bgsound>, <link>, <meta>, <script>, <style>, <title>. Акцентировать внимание на названия этих тегов пока не стоит. О некоторых из них мы поговорим позже. Однако разместив внутри тега <head> любые другие элементы, кроме разрешённых, не думайте, что они не отобразятся. Вместо этого они будут вырезаны браузером из тега <head> и вставлены в тег <body>.

В теге <body> размещается весь контент страницы, который вы в итоге видите в браузере. Как пример, содержимым этого тега может быть тот отрывок кода, который мы рассматривали ранее. Также, как и в теге <head> там могут размещаться скрипты.

Вложенность тегов

Очень важно соблюдать правильную вложенность тегов. Теги можно представить в виде коробок, в которые мы складываем какие-то предметы. Также в коробки мы можем складывать другие коробки, а те, в свою очередь, могут содержать другие коробки с предметами.

Рассмотрим примеры правильной вложенности тегов:

1. <p>...<em>...</em>...<p>

2. <p>...<em>...</em><span>...</span><a>...</a>...</p>

3. <div>...<p>...<span>...</span>...</p>...</div>

В первой строке в тег <p> вложен тег <em>.

Во второй строке в теге <p> содержатся сразу 3 тега: <em>, <span> и<a>. Обратите внимание на то, что эти теги стоят рядом и не пересекаются между собой.

В третьей строке в тег <div> вложен тег <p>, a в теге <p> лежит тег <span>.

Теперь как вкладывать теги нельзя:

1. <p>...<em>...</p>...</em>

2. <div>...<span>...</div>

В первой строке теги пересекаются. В тег <p> был вложен тег <em>, который не был закрыт. В место него закрывается тег </p>, а закрывающий тег </em> располагается после, когда в нём уже смысла нет.

Во второй строке в тег <div> был вложен тег <span>, который является двойным. Тег <span> не был закрыт.

Семантика

Цель языка HTML заключается в обеспечении смысла и структуры контента. Этот язык не предназначен для создания инструкции о том, как должен выглядеть контент документа (его представления), однако в нём пока присутствует такая возможность.

Очень важно подобрать для каждого элемента такой тег, который наиболее точно его бы описывал, не заботясь о том, как это будет выглядеть, т.к. оформление можно легко изменить с помощью стилей. Семантическая разметка наделяет контент смыслом, что облегчает поисковикам анализировать ваши страницы. Правильная HTML верстка поможет вам привлечь пользователей, через поисковые системы.

Возьмем для примера заголовочные теги <h1>, <h2>, <h3> ..., которые мы рассматривали ранее. Поисковики смотрят на структуру заголовков, и создают смысловую иерархию контента, благодаря которой поисковик решает какие страницы выводить в первую очередь, а какие в последнюю. Тег <h1> они интерпретируют как что-то важное, например как название статьи, а <h2> как что-то менее важное, например как заголовки и т.д.

Также есть теги, которые отделяют основной контент от чего-то совершенно не важного, например от навигации по сайту, рекламы, дополнительной информации никак не относящееся к основному контенту и связанная, скорее, с дизайном сайта. Это теги <main>(выделяет основной контент), <header> (шапка сайта), <footer> (подвал), <nav> (навигация) и т.д. С точки зрения внешнего представления они ничем между собой не отличаются и их можно было бы заменить тегом <div> который не имеет никакого семантического значения. Отличаются они лишь семантическим значением, которое помогает поисковикам отделить нужное и важное для поиска от неважного.