Структура html-документа

Теги

Язык HTML состоит из тегов. Каждый тег является элементом разметки гипертекста, и выполняет свою определенную функцию. Одни теги нужны для создания структуры html-документа, указания различной информации о веб-странице, другие – для форматирования и создания элементов на веб-странице, например, чтобы создать кнопку, необходим тег <button>Кнопка</button>, а чтобы перенести текст на новую строку – тег <br>.

Теги бывают парными, например тег <button>...</button>, и одиночными, например, тег <br>. Парные теги состоят из начального или открывающего тега, и конечного или закрывающего тега. Закрывающий тег записывается со слэшем.

Каркас html-документа

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Название веб-страницы</title>
    </head>
    <body>
        
    </body>
</html>

Тип документа

В первой строке html-документа принято указывать тип документа. Делать это нужно обязательно, потому что существует несколько версий языка html, и у каждой есть свои правила и стандарты. Если браузеру не сообщить о версии HTML, то он не будет знать какому стандарту нужно следовать при отображении веб-страницы, что может привести к ее некорректному отображению.

При вёрстке веб-страниц мы будем использовать пятую версию языка – HTML5. Для этой версии тип документа записывается таким образом: <!doctype html>.

Теги верхнего уровня

Каркас html-документа образуют теги верхнего уровня <html>, <head>и <body>.

Теги <head>и <body>определяеют заголовок и тело html-документа.

Теги заголовка документа

В заголовке документа размещается различная информация о веб-странице: кодировка, название, описание, ключевые слова, пути к файлам со стилями, скриптами и т.д. Эта информация, кроме названия, на веб-странице не отображается.

Кодировка html-документа

<meta charset="utf-8">

Кодировку html-документа указывают при помощи тега <meta>и его атрибута charset.

Атрибуты тегов записываются как пара, состоящая из имени и значения. Значения атрибутов записываются в кавычках. У тега может быть несколько атрибутов, в этом случае они записываются через пробел.

В качестве значения атрибута charset, мы будем использовать кодировку utf-8, так как она включает в себя символы всех языковых групп.

Обратите внимание! Если вы указали в качестве кодировки веб-страницы значение utf-8, то и сохранить html-документ необходимо в этой кодировке.

Название html-документа

Название или заголовок html-документа записывается между тегами <title>. Данный тег является обязательным, а также очень полезным как для пользователей, так и для самой веб-страницы.

Содержимое тега <title>отображается:

  • на вкладках веб-страниц
    Заголовок веб-страницы
  • в списке закладок
    Заголовок веб-страницы
  • в названии файла при сохранении веб-страницы на жесткий диск;
  • в списке результатов поискового запроса на сайтах популярных поисковых систем (Google, Yandex) первыми отображаются сайты, содержащие слова вашего запроса именно в заголовке.

Теги тела документа

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


Видео к уроку

Комментарии