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

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

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

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

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

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

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

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

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

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

Сохранить файл

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

Тип файла

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

Имя файла

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

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

Теперь разберем более сложный пример 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> является корневым элементом.

 

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