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

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

HTML

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
  </head>
  <body>

  </body>
</html>

Да, знаю и верю, что многое непонятно, давайте разбираться

Зачем эти <!DOCTYPE> и <html>, почему заголовок находится в <head>, а сама кнопка — в <body>? Будем разбираться вместе.

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

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

Назовём видимое телом, а скрытое — тем, что в голове. Происходящее в голове определяет внешний вид.

Мы удалили из кода все теги основной структуры страницы, оставили только заголовки, абзацы и картинку. Кажется, страница выглядит как и раньше, но браузеру приходится додумывать многие важные вещи. Нужно будет восстановить удалённое, чтобы браузер не выдумал что-то неправильное и пользователи видели сайт таким, как мы его задумали.

У веб-страницы есть обязательная структура. В самом начале файла <!DOCTYPE html> сообщает браузеру о предстоящей работе с HTML-документом. Сразу после этого внутрь тегов <html></html> размещают всё содержимое веб-страницы.

Начиная с первой строки, перед уже написанным кодом, добавьте такие строки:

<!DOCTYPE html>
<html>

</html>

Не торопитесь переносить теги заголовков, абзацев и изображения в тег <html></html>. Это вы сделаете позже.

 <h1></h1> 
 <h2></h2> 
 <p><a target="_blank" href=""</p> 
 <p></p> 

 <img 
  src="https://img.freepik.com/free-photo/starry-sky-night-with-landscape-mountains_23-2151614846.jpg?semt=ais_hybrid" 
  alt="Ночные горы" 
  width="220"
 />

Этого шага не минует ни один разработчик. Вы создали каркас страницы, но ещё не весь: не хватает уже названных <head> и <body>. Между тегами <html></html> создайте элементы <head></head> и <body></body>. Они всегда находятся внутри общего элемента <html>: <head> идёт перед <body>, <body> идёт после <head>.Верхняя часть кода до <h1></h1>, должна выглядеть вот так:

<!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
</html>

 
 <!DOCTYPE html>
<html>

</html>
 <h1></h1> 
 <h2></h2> 
 <p><a target="_blank" href=""</p> 
 <p></p> 

 <img 
  src="https://img.freepik.com/free-photo/starry-sky-night-with-landscape-mountains_23-2151614846.jpg?semt=ais_hybrid" 
  alt="Ночные горы" 
  width="220"
 />

Пока выглядит не очень аккуратно

Зато вы создали структуру! Некоторые элементы пока лежат за её пределами, исправим это.

Заголовки, абзацы, изображения, видео, геометрические фигуры — это видимые пользователю элементы. Их место внутри <body>, но только не в <head>.

Всё, что написано после закрывающего тега </html>, поставьте между <body> и </body>.

<!DOCTYPE html>
<html>
  <head>

  </head>
  <body>
   <h1></h1> 
   <h2></h2> 
   <p><a target="_blank" href=""</p> 
   <p></p> 
 
   <img 
    src="https://img.freepik.com/free-photo/starry-sky-night-with-landscape-mountains_23-2151614846.jpg?semt=ais_hybrid"
    alt="Ночные горы" 
    width="220"
    />
  </body>
</html>

/>

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

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

Всё это лежит внутри элемента <head>.

Название веб-страницы заключается в теги <title></title>. Оно отображается на вкладке.

Инструкции, которые страница передаёт браузеру, называются метаданные (то есть «данные о данных»). Они заключены внутри метатегов — тегов с именем <meta>.

Одиночный метатег <meta charset="UTF-8"> подключает к HTML-документу алфавиты всех живых языков Земли. Без него браузер может неверно отобразить иероглифы, буквы кириллицы и вообще символы, которые не входят в базовый латинский алфавит.

В <head> можно задать favicon — иконку для вкладки браузера. Для этого используется тег <link>. Он содержит ссылку на внешний файл и назначение подключаемого файла.

<link rel="icon" href="favicon.ico"> 
<!— rel — назначение (от англ. relation, отношение). Здесь это иконка --> 
<!— href — уже знакомый атрибут адреса -->

Элемент <link> даёт возможность подключить не только иконку, но и файлы других типов и другого назначения, например — таблицы стилей.

Ещё нужно обязательно указать у тега <html> атрибут lang. Хотя фактически мы вышли за пределы «головы» страницы, но эта настройка не менее важна, чем все остальные. Если правильно указать язык на сайте, то браузер, например, предложит перевод тем пользователям, которые могут не знать этого языка. И в выдаче ваш сайт будет показан с учётом указанного языка.

Пора уложить все эти знания и в вашей голове. Дополним разметку новыми тегами

Поместите в <head> элемент <title>. Назовите проект I Developer. Это название отобразится на вкладке браузера, в которой открыт сайт.

Попробуем предусмотреть ошибки, связанные с выводом текста, чтобы на странице внезапно не появились кракозябры. Используя метатег, укажите кодировку страницы UTF-8.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>I Developer</title>
  </head>
  <body>
    <h1></h1>
    <h2></h2>
    <p><a target="_blank" href=""</p>
    <p></p>
    <!— Добавьте в тег ниже атрибут альтернативного текста -->
    <img
      src="https://img.freepik.com/free-photo/starry-sky-night-with-landscape-mountains_23-2151614846.jpg?semt=ais_hybrid"
    />
  </body>
</html>

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

Добавьте вашему HTML-проекту иконку для вкладки браузера.

Вместе с тегом <link rel="icon"> укажите для иконки атрибут href, чтобы она загружалась с адреса https://img.fortawesome.com/1ce05b4b/start-illustration.svg А чтобы увидеть новую иконку и заголовок, нужно запустить html файл в браузере.

Осталось добавить для тега <html> атрибут lang со значением ru, потому что наш сайт на русском языке.

В итоге получится:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href=" https://img.fortawesome.com/1ce05b4b/start-illustration.svg">
    <title>I Developer</title>
  </head>
  <body>
    <h1></h1>
    <h2></h2>
    <p><a target="_blank" href=""</a></p>
    <p></p>
    <img
      src="https://img.freepik.com/free-photo/starry-sky-night-with-landscape-mountains_23-2151614846.jpg?semt=ais_hybrid"
    />
  </body>
</html>

ссылка на доки: https://doka.guide/