Базовая структура документа

<!DOCTYPE html>
<html lang="ru">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Сайт про веб!">
    <meta name="author" content="Vadim">

    <title>Заголовок Сайта</title>

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="main.css">

    <script src="main.js"></script>

    <meta property="og:title" content="Сайт про веб!">
    <meta property="og:description" content="Лучший сайт в рунете">
    <meta property="og:image" content="ya.ru/img.jpg">
    <meta property="og:image:alt" content="тут картинка web-vm">
    <meta property="og:locale" content="ru_Ru">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://www.web-vm.ru">
  </head>

  <body>
    <h1>Контент страницы</h1>
  </body>

</html>

<!DOCTYPE html>

DOCTYPE позволяет указать браузеру, какой тип документа ему предстоит разбирать, т.е, какие требования нужно выполнять при обработке гипертекста.

Тег html

Тег html является контейнером, заключающий в себе всё содержимое веб-страницы, включая теги head и body. Тег html идет в документе вторым, после определения типа документа <!DOCTYPE>. Используя атрибут lang="ru", можно задать язык всей страницы, что полезно для индексации сайта поисковыми системами. Закрывающий тег html должен всегда быть самым последним в документе.

Тег head

Тег head не отображается на странице в веб-браузере. Он хранит служебную информацию, включая заголовок страницы, ссылки на сторонние стили, подключенные скрипты, favicon и метаданные о странице. CSS стили добавляют на страницу через элемент link, а скрипты - через элемент script .

Метаданные - данные, которые описывают данные (да-да), записываются в тегах meta с большим количеством атрибутов. Чаще всего у элементов meta есть два атрибута - name - тип элемента (т.е. какие именно метаданные он содержит) и content - сами метаданные.

  • meta charset="UTF-8" - основная кодировка страницы
  • meta http-equiv="X-UA-Compatible" content="IE=edge" - для нормального режима отображения страниц в браузерах IE
  • meta name="viewport" content="width=device-width, initial-scale=1.0 - name="viewport" сообщаем браузеру, что нас интересует именно viewport, content="width=device-width, initial-scale=1.0" - определяет размер окна по устройству (ширина видимой области страницы равна CSS ширине устройства), а изначальный масштаб равен 100%
  • meta name="description" content="Сайт про веб!" - уникальное описание страницы , примерно 160 символов, учитывается поисковыми системами, важно для SEO
  • meta name="author" content="Vadim" - автор веб-страницы
  • title - уникальный заголовок страницы (название всего HTML-документа, а не заголовок его содержимого), важен для SEO
  • link rel="shortcut icon" href="favicon.ico" type="image/x-icon" - добавить уникальную иконку сайта
  • link rel="stylesheet" href="./main.css" - подключение стилей
  • script src="./main.js"></script - подключение скрипта (лучше это делать в конце документа перед закрывающим тегом body!)

Протокол Open Graph - собственный формат метаданных от Facebook, созданный для предоставления сайтам дополнительных возможностей использования метаданных.

  • meta property="og:title" content="Сайт про веб!" - заголовок в формате Open Graph для соцсетей
  • meta property="og:description" content="Лучший сайт в рунете" - описание в формате Open Graph для соцсетей
  • meta property="og:image" content="ya.ru/img.jpg" - ссылка отображаемой картинки
  • meta property="og:image:alt" content="тут картинка web-vm" - описание картинки в формате Open Graph
  • meta property="og:locale" content="ru_Ru" - основной язык страницы в формате Open Graph
  • meta property="og:type" content="website" - тип контента website
  • meta property="og:url" content="https://www.web-vm.ru" - адрес страницы в формате Open Graph

Тег body

Тег body предназначен для хранения контента веб-страницы, отображаемого в окне браузера. (текст, ссылки, картинки, медиа, таблицы, списки и т.д.). В документе может быть только один элемент body.

#basics #html
openImgPic