Что такое HTML? Анатомия HTML5 документа

Have a question? Ask in chat with AI!

htmlЭта вторая статья из небольшого цикла статей для новичков в мире веб-разработки. В первой статье Что такое HTML? Возвращаемся к основам мы узнали фундаментальные основы языка HTML, что такое язык разметки, что такое теги и какими они бывают и как HTML взаимодействует с другими технологиями, такими как CSS. Сегодняшняя статья будет посвящена анатомии документа на HTML5. Мы узнаем из каких блоков состоит документ HTML, что идет в начале HTML документа и какова структура HTML документа.

[adsense]

DOCTYPE

Самое первое, что вы видите в любом HTML документе это объявление DOCTYPE. До принятия стандарта HTML5 объявление DOCTYPE выглядело примерно так:

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

Параметров было много и каждый сообщал браузеру или читателю какие-либо данные. DOCTYPE HTML PUBLIC говорит о том, что документ доступен, DTD отвечает за определение типа документа (Document Type Definition), который в свою очередь определяет используемую версию HTML; последняя секция содержит в себе ссылку на DTD.

DOCTYPE в HTML5

Есть несколько вариантов DOCTYPE, из которых новые разработчики могут выбрать. К счастью, HTML5 сильно упрощает объявление DOCTYPE:

< !DOCTYPE HTML>

Вы заметили разницу? Это приятное нововведение.

Зачем нужен DOCTYPE?

Мы посмотрели как выглядит тег DOCTYPE, но так и не узнали за что он отвечает. Ответ будет таким: DOCTYPE сообщает браузеру какой стандарт HTML использовать и от этого будет зависит рендеринг страницы браузером. Когда вы углубитесь в веб-разработку, вы узнаете, что есть определенные стандарты разработки. Суть стандарта в том, чтобы следовать определенным правилам и стандартам. Использование стандарта упрощаем чтение чужих кодов и работу с ними. Это лучше для разработчиков, лучше для браузеров и в конечном счете лучше для пользователей.
Изначально DOCTYPE был создан для переключения браузера в «режим стандартов», что давало возможность использовать более новые стандарты. Для страниц, написанных с использованием старых стандартов возможен режим совместимости, в котором старые техники будут работать в нормальном режиме.

Новый, простой вариант объявление DOCTYPE в HTML5 поддерживается большинством браузеров и переключает их на работу в режим стандартов. DOCTYPE так же позволяет пройти валидацию кода, суть которой определить соответствие кода стандартам. Каждая страница, которую вы создаете должна содержать DOCTYPE и максимально соответствовать стандартам.

Основной элемент

После DOCTYPE, начинается основной код HTML. Индикатором служит тег <html>. Если вы представите структуру HTML в виде дерева, то этот тег является корнем. Вот пример использования тега <html>:

< !DOCTYPE HTML>
  

Имейте ввиду, что корневой элемент содержит атрибут языка, в нашем случае Русский. Всегда старайтесь указывать язык для страницы, которую создаете. Все, что мы хотим добавить на нашу страницу будет находиться внутри корневого элемента. Единственным исключением является DOCTYPE.

Элемент HEAD

Следующее с чем вы столкнетесь в HTML документе будет секция «head». Тэг <head> имеет следующий синтаксис:

  

Код, который располагается в секции head несет больше информативный характер как для разработчика, так и для браузера. Секция head содержит данные о странице такие как заголовок, кодировка и т.д. Так же в секции head обычно подключаются важные внешние библиотеки и файлы. Давайте по-порядку рассмотрим некоторые важные вещи, которые присутствуют в секции head.

Мета теги

Как вы могли догадаться мета теги содержат информацию о странице. Метаданные могут содержать данные о ключевых словах, об авторе, описание страницы и т.д. Вот несколько основных видов метаданных.

Кодировка — Charset
Здесь все достаточно просто, так как сейчас чаще всего используется кодировка UTF8. Ваша страница должна содержать индикатор того какую кодировку браузеру использовать. Не забывайте про charset, т.к. это то, что вы должны всегда использовать в своих шаблонах. Вот как выглядит синтаксис в HTML5:


Это еще одна вещь, которая стала намного проще в HTML5. Вот вам образец того как кодировка задавалась в HTML 4.01:


Еще два часто используемых мета тега это description(описание) и author(автор). Ниже синтаксис эти метатегов:
Описние — Description


Автор — Author


Title — Заголовок

Еще один из тегов, который вы будете часто использовать в секции head это тег <title>. Вот отрывок кода, который позволяет задать заголовок вашей страницы:

Что такое HTML? Анатомия HTML5 документа | RusDigi.org

Заголовок обычно показывается посетителю сайта в верхней части браузера или в названии текущей вкладки.

Теги link и script

Последнее, что нам осталось разобрать применительно к секции head это возможность подключения внешних ресурсов. На самой простой веб-страницы обычно используются такие вот конструкции:

Код приведенный выше подключает к странице файл со стилями CSS и JavaScript библиотеку jQuery. Если эти файлы физически есть на серверы, но не подключены в секции head, то они не будут работать. Так же следует учесть, что файл может быть как и локальным (пример сверху) так и подгружаться из удаленного источника — в данном случае надо указать полный путь до него.
Тег link указанный в примере подключает файл css. Тег использует link relation (ссылочные отношения), в данном случае rel=”stylesheet” — это сообщает браузеру, что файл является файлом со стилями. О других возможных значениях тега rel вы можете прочитать в статье Атрибут rel. Ссылочные отношения. Link relations.

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


 

Элемент BODY

Ну и основным элементом любой HTML страницы будет элемент body. Все, что содержится внутри тега body определяет контент и структуру вашей страницы. Все что было написано до элемента body чаще всего выносится в шаблон — на это тратиться небольшой промежуток времени. Все оставшееся время вы потратите на работу с тем, что внутри элемента body:

  

HTML5 документ

Теперь, когда мы прошлись по отдельным частям HTML5 документа, давайте соберем все воедино:

< !DOCTYPE HTML>
	Design Shack

Структуру HTML документа можно представить схематично. Выглядеть это будет так:
дерево DOM
Такая структура HTML документа называется DOM — Document Object Model (Объектная модель документа).

На этом сегодняшнюю статью заканчиваю. Следующая статья будет об основах CSS, а вскоре мы более подробно разберем основы HTML5.

Если вам срочно нужны вебмани, то кредит webmoney вам поможет — низкие процентные ставки, понадобиться только персональный аттестат, суммы до 10000 WMZ.


7 комментариев для “0

  1. Спасибо за статью. Не могли бы объяснить почему тег meta закрывается только после вложенного в него link и script? Ведь во втором случае, например, тег мета был введён для описания страницы (description). Почему бы сразу его не закрыть? Так же и тег link 🙂
    То есть одна из частей шаблона должна выглядеть вот так по-моему (если вообще к тегам мета и линк нужны закрывающие теги):

    1. прощу прощения — в листингах были ошибки. закрывающие теги для meta и link не нужны, достаточно заканчивать тэг обратным слэшэм

  2. какая-то не понятная статья.. походу с опечатками.. да еще и оригинал не указывате.. что же вы чужой труд не уважаете?

    1. большая часть статьи — это перевод. не считаю нужным указывать ссылки на зарубежные источники. если вам так интересен источник, то гугл вам поможет.

      1. Нет, ну а как же авторские права и т.п. Да и вообще, если бы я увидел ссылку на зарубежный ресурс, с которого вы переводили эту статью, мне было бы очень интересно по нему пройтись! 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Предыдущая запись Что такое HTML? Возвращаемся к основам
Следующая запись Атрибут rel. Ссылочные отношения. Link relations