Структура HTML файла

Типичный HTML файл представляет собой текстовый файл с набором тегов. Теги - это особые команды, которые помогают браузеру отображать страницу. Благодаря тегам браузер понимает, в каком месте текст должен быть выделен жирным или курсивом, какой заголовок будет у страницы и как отображать таблицу. Их содержание не будет отображаться на странице браузера.

Далее будут рассмотрены примеры содержания HTML файлов. Если вы не знаете, как создать HTML файл, то посмотрите статью "Как создать HTML файл".

Существует большое количество тегов, часть из которых мы постараемся разобрать в курсе.

Рассмотрим пример упрощённого HTML файла, страницы сайта:

<!DOCTYPE html>
<html>
   <head>
      Свойства страницы, правила отображения, стили, скрипты, подключаемые файлы
   </head>
   <body>
      Содержание страницы
   </body>
</html>

Всё, что написано латиницей и заключено в скобки < > - это теги. Разберём пример по сторкам:

<!DOCTYPE html> - эта строчка говорит о том, что документ является html файлом. Следовательно, браузер сможет показать его как html страницу.

<html> ... </html> - это парный тег (у него есть открывающая часть <html> и закрывающая </html>, которые различаются наличием слеша "/"). Внутри него заключено всё тело html документа.

<head> ... </head> - всё, что находится внутри этого тега не выводится на экран. Но в нём содержится важная информация, которая поможет браузеру правильно показать страницу. К примеру, в этом теге могут находиться указание кодировки и языка страницы, правила отображения, стили и скрипты.

<body> ... </body> - этот тег, внутри которого находится отображаемая область страницы.

Пример html страницы

Теперь разберём усложнённый пример html страницы, в котором будут добавлены несколько дополнительных тегов относительно предыдущего примера:

<!DOCTYPE html>
<html lang="ru">
   <head>
      <meta charset="utf-8">
      <title>Про мышей</title>
   </head>
   <body>      Тише, мыши, кот на крыше,<br>
      а котята ещё выше.<br>
      Кот пошёл за молоком,<br>
      а котята кувырком.<br>
      Кот пришёл без молока,<br>
      а котята ха-ха-ха.    </body>
</html>

Относительно предыдущего примера в новом появилось несколько изменений: во второй строке стоит <html lang="ru">. У этого тега появился атрибут lang="ru". Обратите внимание, что атрибут ставится внутри скобок тега < >. Как можно догадаться из названия, он указывает на то, что страница использует русский язык. Современные браузеры практически все могут безошибочно определить язык, поэтому в этом атрибуте нет особой необходимости, но привели его в качестве примера атрибута, которым может обладать тег.

Второе изменение касается содержания тега <head> ... </head>. Здесь в первой строчке появилось указание на кодировку текста <meta charset="utf-8">. Тег "meta" называется метатегом.

Если сохранить html файл с одной кодировкой, а в "meta" написать другую, то все буквы в документе будут отображаться браузером как непонятные значки.

В блоке <head> ... </head> также появилась строчка <title>Про мышей</title>. Этот тег указывает, какой заголовок будет у страницы браузера (у вкладки).

Внутри тега <body> ... </body> появился текст стихотвориения. Каждая строчка этого стиха заканчивается на тег <br>, который говорит браузеру о том, что должна начаться новая строка. Если убрать все теги <br>, то браузер отобразит стихотворение как одну длинную строку без переносов. Обратите внимание, что тег <br> не имеет закрывающей пары по аналогии с <body> ... </body> или <head> ... </head>.

Ради практики создайте файл на своём компьютере с любым названием и расширением ".html". К примеру, "page.html". Затем откройте его любым текстовым редактором и вставьте в него код из примера выше. Сохраните файл. Кликните на файл два раза и он откроется в браузере. Теперь измените что-либо в файле, сохраните и перезагрузите страницу в браузере.

Комментарии в HTML коде

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

<!DOCTYPE html>
<html>
   <head>
      <!-- Комментарий в разделе head -->
   </head>
   <!-- Комментарий между блоками head и body-->
   <body>
      <!-- Комментарий в теле страницы -->
   </body>
</html>

Комментарий может находиться в любой части сайта.

Комментировать можно всё, включая теги. Можно скрывать целые части страниц - ограничений нет.