Структура html документа для любого сайта
Всем доброго времени суток. В этой статье мы разберем то как правильно создаётся структура html документа сайта! Она будет не большой, зато в ней буде минимум воды и максимум полезной информации. И так поехали!
1. Главные html элементы любого сайта
Когда мы с вами открываем сайт, то происходит загрузка элементов сайта. Этими элементами являются html – теги, css – стили, а также скрипты. Абсолютно любой сайт состоит из обязательных элементов, этими элементами являются <!DOCTYPE html>, <html>, <head>, <body>. Каждый из этих элементов мы разберем по отдельности и в каком порядке их нужно записывать!
1.1. Элемент <!DOCTYPEhtml> и <html></html>
Для начала нужно записать элемент <!DOCTYPE html>, он всегда записывается первым и служит для того что бы определить версию html документа. Вторым элементом является парный тег <html></html>, он содержит в себе элементы которые нужны для функционирования сайта и элементы которые видим мы, обычные пользователи.
1.2. Элементы тега <html></html>
Теперь рассмотрим какие элементы содержит в себе тег <html></html>. Первым элементом является парный тег <head></head>. Он содержит html теги которые подключают css – стили, шрифты, различные метатеги и скрипты. После него записывается тоже парный тег <body></body>, в который записывают разметку будущего сайта.
1.3. Элементы тега <head></head>
Теперь подробнее рассмотрим базовые элементы которые должны присутствовать в теге <head></head>.
- <meta charset="UTF-8" /> - этот метатег нужен для того чтобы указать браузеру в какой кодировке будет html документ, если не указать кодировку, то в итоге весь текст может выглядеть как на скриншоте
Кракозябры из-за неправильной кодировки utf-8 структура html документа сайта - <meta http-equiv="X-UA-Compatible" content="IE=edge" /> - этот метатег нужен для того что бы подключить поддержку всеми любимого нами браузера Internet Explorer;
- <meta name="viewport" content="width=device-width, initial-scale=1.0"> - этот метатег необходим для того что бы сайт хорошо отображался как на больших экранах мониторов так и на маленьких экранах смартфонов;
- <title>Ваш сайт</title> - этот тег необходим для того что бы во вкладке браузера отображалось название нашего сайта или же любая другая необходимая информация;
- <link rel="icon" href="img/icon_logo7.png" type="icon/x-icon"> - этот элемент нужен для того что бы во вкладке браузера отображалась маленькая картинка вашего сайта;
- <link rel="stylesheet" href="style/style.css"> - Этот элемент нужен для подключения внешних стилей css.
1.4. Особенности подключения скриптов
Теперь осталось разобраться в том как и куда подключать наши скрипты. Скрипты можно подключать и в тег <head ></head>, и в тег <body ></body>. При подключении скриптов в тег <head ></head>, они будут грузиться максимально быстро. Но есть одно “но”, если этот скрипт по какой-то причине не загрузится, то наш сайт может не полностью загрузиться или же вовсе перестанет работать. Что бы обезопасить себя от таких случаев, скрипты можно подключать в самом низу сайта перед закрывающим тегом боди </body>. В таком случае сначала грузится сайт, а потом в самом конце будут подгружаться скрипты. Конечно скорость загрузки скриптов уменьшается, но зато в случае ошибки со скриптом, сайт будет загружен полностью.
После всех выше указанных манипуляций получится вот такая базовая структура html сайта
<!DOCTYPE html>
<html>
<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">
<title>Сайт</title>
<link rel="icon" href="img/icon_logo7.png" type="icon/x-icon">
<link rel="stylesheet" href="путь вашего файла стилей css">
</head>
<body>
<script src=”путь вашего js файла”></script >
</body>
</html>
На этом пожалуй все. Теперь вы будете знать как правильно создаётся структура html документа. Если вам понравилась данная статья, вы можете подписаться на новости блога что бы не пропускать новые, еще более интересные статьи!
Также подписывайтесь на мой instagram и telegram, там вы сможете найти много полезной информации, а также познакомится с людьми которые только начинают или уже начали свой путь верстальщика.
Не забывайте оставлять свои комментарии, а также если у вас есть интересная тема для следующей статьи, то вы можете написать ее в комментариях и я постараюсь ее для вас сделать. Всем спасибо за внимание и пусть баги будут фичами!
комментарии (0)
написать комментарийкомментариев нет