ссылки:

https://htmlacademy.ru/

Конспект «Структура HTML-документа»

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



Простейшая HTML-страница состоит как минимум из трёх тегов: ,  и . 

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

А в теге  хранится содержание страницы, которое отображается в окне браузера.

Для подключения стилей к странице существует тег . 
Для этого у него есть атрибут href в котором задаётся адрес стилевого файла, 
а значение stylesheet атрибута rel говорит браузеру, что мы подключаем именно стили, а не что-то другое.


  


Ещё один элемент, который располагается в  — это тег 


Ещё один важный тег, располагающийся внутри  это тег . 
Он одиночный, то есть не требует парный закрывающий тег в конце. 
С помощью  можно сообщать браузеру, поисковому роботу или другому устройству различную служебную информацию (или метаинформацию) о вашем сайте: 
кодировку текста, описание контента и так далее. 
Для этого используются теги  с разными атрибутами и их значениями.

Кодировка текста HTML-страницы указывается с помощью атрибута charset:

Самая распространённая современная кодировка — utf-8.

Перечень ключевых слов задаётся тегом , у которого атрибут name имеет значение keywords. 
Ключевые слова (самые важные слова из содержания страницы) перечисляются в атрибуте content через запятую:


Краткое описание (или аннотация) страницы задаётся похожим образом, только значение атрибута name меняется на description:


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

Тег 
 содержит вводную часть страницы, которую чаще называют «шапкой», а тег 

пример index.html

  
    
    
    
  

  
    

      Контакты в шапке
    

    

      
Неопознанный Енот
      
Junior верстальщик
    

    

      
Давайте познакомимся
      
Пара слов о себе
      
Текст с парой слов о себе.
      
Чем могу быть полезен
      
Текст о том, чем могу быть полезен.
    

    

      
Мои работы

      
Сайт инструктора Кекса
      
Небольшой лендинг о школе для начинающих.

      
Блог начинающего верстальщика
      
Статический блог про обучение HTML и CSS.
    

    
  

пример index.css

html,
body {
  margin: 0;
  font-family: "Arial", sans-serif;
  font-size: 14px;
  line-height: 20px;
}

body {
  min-width: 430px;
  border: 2px dashed #c7e4ff;
}

html::before,
body::before,
header::before,
footer::before,
main::before {
  color: #7fc1ff;
}

main,
header,
footer {
  background-color: #f3faff;
  border: 2px solid #7fc1ff;
}

nav,
section,
article,
aside {
  background-color: #f9f7ff;
  border: 2px solid #9779ec;
}

nav::before,
section::before,
article::before,
aside::before {
  color: #9779ec;
}

h1,
h2,
h3 {
  font-size: 18px;
  background-color: #ffffff;
  border: 2px solid #ff994f;
}

h1::before {
  content: "h1";
  color: #ff994f;
}

h2::before {
  content: "h2";
  color: #ff994f;
}

h3::before {
  content: "h3";
  color: #ff994f;
}

p {
  background-color: #ffffff;
  border: 2px solid #f36dff;
}

p::before {
  color: #f36dff;
  content: "p";
}

* {
  position: relative;
  padding: 25px 25px 20px;
  margin: 0;
  border-radius: 4px;
}

*:not(:last-child) {
  margin-bottom: 20px;
}

*::before {
  position: absolute;
  top: 8px;
  left: 10px;
  font-weight: 700;
  font-size: 11px;
  line-height: 10px;
  letter-spacing: 0.04em;
}

html::before {
  content: "html";
}

body::before {
  content: "body";
}

main::before {
  content: "main";
}

header::before {
  content: "header";
}

footer::before {
  content: "footer";
}

section::before {
  content: "section";
}

article::before {
  content: "article";
}

aside::before {
  content: "aside";
}

nav::before {
  content: "nav";
}