Структура страницы html

Структура HTML-документа определяет базовый каркас будущего сайта. Давайте рассмотрим структуру самой простенькой страницы html и разберём, из чего она состоит и как её сделать. Потом перейдем к более сложному варианту.

Простой пример структуры html страницы

Общая схема страницы выглядит так:


<html>
<head>
<title>Заголовок</title>
</head>
<body>
Текст
</body>
</html>

<html>

<head>

<title>Заголовок</title>

</head>

<body>

Текст

</body>

</html>

Страница представляет собой html-документ, который заключается между тегами <html> и </html>. В контейнере head мы указали только заголовок страницы (title). В текстовом контейнере body у нас прописано слово «Текст».

Теперь скопируем этот код в любой текстовый редактор и посмотрим, что получится.

Как создать файл html

Откроем стандартный системный блокнот и скопируем в него этот код.

После этого этот файл надо сохранить с любым именем и расширением .html.

Покажу этот процесс в картинках.

И так, после вставки кода в блокнот в меню Файл выбираем пункт Сохранить как… Откроется окошко, в котором выберите место для сохранения этого файла. Можно заранее создать отдельную папку, в которую и загрузите этот файл. Обратите внимание на нижнюю часть окошка:

Изначально в блокноте сохранение файлов настроено на формат .txt, а нам нужен формат.html Для этого раскройте строку Тип файла и выберите Все файлы:

Далее в строке Имя файла прописываете название файла и его расширение, ну например index.html

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

Пример развитой структуры html страницы сайта

Теперь разберем более сложный пример html страницы — какой она бывает на сайте.


<!DOCTYPE html> <!-- Объявление формата документа -->
<html lang="ru"> <!-- Определение языка документа -->

<head> <!-- Техническая информация о документе -->
<meta charset="UTF-8"> <!-- Определяем кодировку символов документа -->
<title>...</title> <!-- Задаем заголовок документа -->
<meta name="description" content="Описание страницы" />
<link rel="stylesheet" type="text/css" href="style.css"> <!-- Подключаем внешнюю таблицу стилей -->
<link rel="icon" href="/img/favicon.png"> <!-- Указываем путь к фавикону сайта -->
<script src="script.js"></script> <!-- Подключаем сценарии -->
</head>

<body> <!-- Основная часть документа -->

<header> <!-- Шапка сайта -->
<nav> </nav> <!-- Меню навигации -->
</header>

<main>
<section>
<h1>Заголовок страницы</h1>
Основная часть
</section>
</main>
<aside> Боковая колонка (сайдбар) </aside>
<footer> Подвал </footer>

</body>
</html>

<!DOCTYPE html>

</head>

</header>

<main>

<h1>Заголовок страницы</h1>

Основная часть

</section>

</main>

<aside> Боковая колонка (сайдбар) </aside>

<footer> Подвал </footer>

</body>

</html>

Чтобы не усложнять пример, все, что входит в , рассмотрим отдельно:


<!DOCTYPE html>
<html>
<head>
<title>...</title>
</head>
<body>
<h1>Основной заголовок</h1>
<p>Абзац</p> 
<p>Абзац</p>
<h2>Первый подзаголовок</h2>
<p>Абзац</p> 
<p>Абзац</p>
<h3>Первый второстепенный подзаголовок</h3>
<p>Абзац</p>
<p>Абзац</p>
<h2>Второй подзаголовок</h2>
<p>Абзац</p> 
<p>Абзац</p>
<h3>Первый второстепенный подзаголовок</h3>
<p>Абзац</p>
<p>Абзац</p>
<h4></h4>
<p>Абзац</p> 
<p>Абзац</p>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Основной заголовок</h1>

<p>Абзац</p>

<h2>Первый подзаголовок</h2>

<p>Абзац</p>

<h3>Первый второстепенный подзаголовок</h3>

<p>Абзац</p>

<h2>Второй подзаголовок</h2>

<p>Абзац</p>

<h3>Первый второстепенный подзаголовок</h3>

<p>Абзац</p>

<p>Абзац</p>

</body>

</html>

Расшифровка структуры html

Разберем подробно основные теги и атрибуты, использованные в примере:

<!DOCTYPE HTML> – указание браузеру, как интерпретировать данную страницу, к какой версии принадлежит HTML-документ. В нашем случае подразумевается стандарт HTML5.

<html lang=”ru”> – контейнер для всего содержимого страницы с указанием языка сайта.

<head> – технический контейнер, направленный на составление информации о странице, подключения стилей и скриптов.

<meta charset=”UTF-8″> – кодировка сайта.

<title> – название страницы. Отображается, например, на вкладке браузера, в результатах поиска, когда вы сохраняете страницу в качестве закладки и т.д.

<meta name=”description” content=”” /> – мета-описание документа.

<link rel=»stylesheet» type=»text/css» href=»» /> – подключение файла каскадных таблиц стилей (CSS) для стилизации и оформления элементов.

<link rel=»icon» href=»»> – иконка сайта, отображаемая в браузере.

<script type=»text/javascript» src=»»> – подключение внешней библиотеки JQuery последней версии.

<body> – тело документа, включающее теги, атрибуты, текст и изображения. Отображается в браузере.

<header> – шапка сайта.

<nav> – навигация по ресурсу непосредственно в шапке. Может быть также использован как в aside, так и в footer.

<main> – основной контент документа.

<section> – секция для одного типа содержания. Допустимо наличие несколько одноименных тегов.

<h1> – заголовок страницы.

<aside> – боковая колонка, также именуемая как «сайдбар».

<footer> – подвал сайта.

Элементы <h1-h6> — заголовки разделов. Эти теги имеют ранг, определяемый числом в их имени. Элемент <h1> имеет наивысший ранг, элемент <h6> имеет наименьший ранг, а два тега с одинаковым именем имеют одинаковый ранг. Используйте ранг элементов заголовка, чтобы создать схему документа.

Элементы, находящиеся внутри элемента <html>, образуют дерево документа, так называемую объектную модель документа, DOM (document object model). При этом элемент <html> является корневым элементом.

Статья была полезной?