Базовая структура HTML файла — Vladimir Shaitan на DTF
Любой HTML файл начинается с базовой структуры. Обычно она включает в себя теги, которые есть в любом HTML файле.
442 просмотров
Пример базовой структуры показан ниже.
Рассмотрим ее подробнее.
<!DOCTYPE html> <html lang=»ru»> <head> <meta charset=»UTF-8″> <title>Моя первая страница</title> </head> <body> </body> </html>
Начнем с тега DOCTYPE
<!DOCTYPE html>
Задача этого тега — указать браузеру стандарт HTML который используется в документе. Этот тег не будет показан на странице, но будет присутствовать в HTML коде страницы.
Так как мы используем последний стандарт HTML, а именно HTML5, то нам нужно использовать именно этот тег.
Вы можете видеть и другие версии этого тега, более объемные, обычно такие теги можно встретить на сайтах сделанных 5 — 10 лет назад.
Тег <html>
Тег <html> — парный, очень важный тег, благодаря ему браузер понимает, где начинается контент который нужно обрабатывать как HTML.
<html></html>
Также тег <html> имеет обязательный атрибут lang, в качестве значения мы указываем язык, на котором должна отображаться страница. Эта информация помогает браузеру считывать специфические символы которые могу встречаться в различных языках.
В качестве значения передаем сокращения языков: ru, en и тд.
Тег <head>
<head></head>
Тег <head> — парный тег, нужен для хранения служебной, внутри него возможны различные сочетания тегов, которые будут указывать браузеру: название страницы, описание, ключевые слова. Эта информация называется ‘метаинформацией‘. Также метаинформация активно используется для продвижения сайта в поисковых системах ( Google, Yandex и тд.
).
Все что находится внутри тега <head> не будет отображено пользователю.
Тег <meta>
<meta>
Тег <meta> — одиночный тег, имеет много различных атрибутов с помощью которых мы можем указывать различную метаинформацию для нашего сайта. С настройкой тега <meta> вы ближе познакомитесь при разработке своих сайтов.
<meta charset=»UTF-8″>
В данный момент одним из важных <meta> тегов, является <meta> в котором указывается кодировка сайта. Кодировка помогает правильно интерпретировать текст. Указываем мы ее потому что у разных пользователей в их системе может быть указана разная кодировка, из-за чего контент сайта может выглядеть не так как мы ожидаем.
Самой универсальной кодировкой является UTF-8, ее мы и указываем.
Тег <title>
<title>Заголовок страницы</title>
<title> — парный тег, располагается внутри тега <head>, внутри него указываем текст который будет выводиться во вкладке нашего сайта.
Тег <body>
<body></body>
<body> — парный тег, располагается внутри тега <html>, после закрывающего тега </head>. Этот тег является телом нашей страницы и внутри него мы описываем HTML структуру нашего сайта которую будет видеть пользователь.
Пример конечной структуры в файле index.html.
Структура HTML-документа — Бесплатный HTML-курс
На самом деле браузер может отображать не только HTML-код, но и другие форматы данных. Поэтому, чтобы браузер точно не сомневался, что перед ним HTML-страница, нужно следовать определённой структуре.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Титул в браузере</title>
</head>
<body>
код страницы
</body>
</html>
Первая строчка <!DOCTYPE HTML>, хоть и выглядит как html-тэг, на самом деле таковым не является.
Это т.н. тип документа, который указывает, что это именно HTML. Это исторический артефакт, который на самом деле нужен для того, чтобы указать ещё и версию HTML-стандарта.
Сейчас мы верстаем просто на HTML, но на самом деле это HTML 5. Раньше были и другие стандарты: HTML 4, 3, XHTML и т.д. Путаница была жуткая, но только так можно было сказать браузеру в каком режиме ему следует отображать страницу (строгий, нестрогий, фреймы…). К счастью, сейчас всё упростилось, но
После этого идёт непосредственный код, который заключается в единственный тэг <html> </html>.
Внутри есть две секции: HEAD и BODY.
Секция HEAD — служебная, где располагается различная мета-информация, например титул страницы, её описание, кодировка, подключаемые файлы стилей, скриптов и прочее. Эта секция никак не отображается браузером, но если ты случайно разместишь в ней какой-то значащий для вывода тэг (например изображение), то браузер автоматически завершит секцию HEAD до этого тэга.
Это позволяет сократить код страницы и не указывать BODY, который является необязательным. Но, с точки зрения качества кода, мы всегда указываем полную структуру html-страницы.
Секция BODY содержит код, который нужен для отображения страницы. Именно здесь и происходит вся вёрстка страницы.
Автор котика: nan dai
Оформление кода
Сразу поговорим о том, как правильно оформлять код. Запомни простое правило — код должен быть читаемым и понятным другим верстальщикам.
Если мы говорим об исходном коде, то есть тот, который ты пишешь в текстовом редакторе, должен быть оформлен так, чтобы его можно было легко понять. Для этого используются «стандарты» кодирования, хотя это больше устоявшаяся практика, чем реальное требование.
Регистр
Все тэги пишутся в нижнем регистре. Для браузера это вообще не имеет никакого значения, но у верстальщиков используется именно нижний регистр. Тоже самое касается и всех атрибутов.
Только нижний регистр.
Отступы
Блоки, которые вложены друг в друга должны отбиваться слева. Вот пример:
<section> <div> <h2>Заголовок</h2> <h3>Подзаголовок</h3> <blockquote>Цитата</blockquote> </div> </section>
Смысл всего этого в том, чтобы визуально сразу видеть вложенность тэгов.
Пробелы или табулятор
Отступ можно делать как табулятором, так и пробелами. В основном кодеры используют пробелы из расчёта 4 пробела — это один табулятор. Табулятор удобен там, где нет автоформатирования (он автоматом расставляет отступы). Но вообще принципиальной разницы нет: если тебе всё равно, то используй пробелы.
Кавычки
Кавычки могут быть одинарные ' и двойные ". Правило для HTML такое: вначале двойные, потом одинарные. Обычно это используется в JavaScript-коде:
<a href="адрес">ссылка</a> <div>Кликни на меня</div>
Слэш в конце одиночных тэгов
Иногда встречается такая форма указания одиночных тэгов:
<img src="адрес" />
То есть используется слэш в конце.
Так делать не нужно, поскольку это пережиток стандарта XHTML, который используется разве что для каких-то автоматических задач.
Порядок атрибутов в тэгах
Пока мы не изучали атрибуты, поэтому ты запомни эту страницу, чтобы вернуться к ней позже.
Для HTML, опять же, без разницы, но для верстальщиков удобней такой вариант: вначале какие-то «особые-особые» атрибуты, потом id (поскольку он уникальный), потом class, а дальше все остальные без разницы. И в конце одиночные атрибуты.
<input v-data type="email" name="my-email" required>
И в заключении отмечу, что Visual Studio Code умеет выполнять форматирование автоматически (после установки соответствующих плагинов). То есть очень часто вообще не приходится об этом задумываться. Даже если получился «ужасный» код, достаточно выбрать пункт «Форматировать документ» и программа приведёт код в приличный вид.
Задание
Найди текст из википедии про Солнце и размести его в отдельном файле с учётом правильной html-структуры документа.
Сделай так, чтобы страница была доступна по адресу http://localhost/sun.
Структура HTML-документа
Эта статья была написана и распространена с целью дать описание основной структуры HTML-документа. Поэтому давайте не будем больше терять время и приступим прямо сейчас.
Следующая диаграмма иллюстрирует основную структуру документа, написанного на HTML.
Структура HTML-документа разбита на две части и изображена на схеме, расположенной выше:
- Деталь «голова»
- Деталь «тело»
Раздел «head» включает всю информацию о веб-странице, а раздел «body» включает фактическое содержимое, которое будет отображается в веб-браузере. Тег «head» — это контейнер для метаданных.
Базовый HTML-документ выглядит так, как показано на рисунке в начале статьи. Теперь давайте напишем HTML-код, содержащий все основные теги HTML.
<голова>
Это название страницы
<стиль>
тело{
цвет фона: перу; цвет: бело-дымчатый;
размер шрифта: 24px; отступ: 8px;
}
<тело>
Основной заголовок
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Подзаголовок
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus odio magnam eligendi.
Вывод, созданный этим кодом HTML, будет выглядеть примерно так:
Вы можете себе представить, что любое содержимое, доступное в разделе «тело», отображается в виде вывода в веб-браузере на основе источника HTML. код и вывод, произведенный им. В то время как содержимое раздела «head» является контейнером для метаданных, мы можем записывать данные о HTML-коде. документа в этом разделе, например название документа, описание документа, его оформление и т. д.
Если вы не знаете, где написать HTML-документ или как получить результат, позвольте мне кратко объяснить. Впрочем, я уже обращался к этому вопросу в начало курса, на первой странице.
Чтобы написать HTML-код, откройте текстовый редактор, например «Блокнот», или другой мультиредактор и программное обеспечение для редактирования кода, например «Visual Studio Code».
После сохранения файла щелкните его правой кнопкой мыши и выберите «открыть с помощью», затем выберите любой веб-браузер, например «Google Chrome», «Mozilla» или «Safari». Какой бы браузер вы ни установили в своей системе, он будет указан там. Итак, откройте любой веб-браузер по вашему выбору, чтобы увидеть тот же результат, что и на снимок как результат кода, приведенного выше. Таким образом, вы должны написать код HTML и наблюдать за его выводом.
Ниже приводится объяснение примера структуры HTML-документа:
- Объявление типа
- Все, что находится между тегами и , считается HTML-документом. Все, что находится внутри этого тега, описывает
HTML-документ.
- Текст между и содержит информацию HTML-документа. Этот тег содержит метаданные HTML документ. Вся информация, стили, скрипты, настройки и т. д. о HTML-документе будет предоставлена в этом разделе.
- Текст между
</b> и <b> служит заголовком документа HTML. - Текст между и описывает видимое содержимое страницы, т. е. содержимое, видимое в браузере.
- Основной заголовок описывается в тексте между и .
- Второй основной заголовок описан в тексте между и .
- Параграф описывается текстом между
и
. - Все коды между используются для определения стиля (внешнего вида) страницы.
Онлайн-тест HTML
« Предыдущий учебникСледующий учебник »
Структура HTML — Бесплатный учебник по изучению HTML и CSS
HTML Следующая статья Предыдущая статья При написании содержимого HTML, такого как абзацы, списки или ссылки, вы указываете , означающее , в тексте .
Но вы можете захотеть группа некоторые из этих элементов вместе .
Например, веб-страницу блога можно разделить на 4 частей:
- заголовок , который одинаков на каждой странице и является основной навигацией веб-сайта
- основной контент, который меняется для каждой страницы: список статей, отдельная статья с комментариями, страница с информацией…
- боковая панель со ссылками на ежемесячные архивы и категории
- a нижний колонтитул для дополнительных ссылок на менее важные страницы
Существует около структурных HTML-элементов , которые можно использовать в качестве контейнеров для других элементов.
Заголовок обычно является первым элементом HTML в коде. Он действует как введение на веб-страницу с логотипом, слоганом и навигационными ссылками.
<заголовок>
<р>
<а>
Классный сайт
<ул>
Классный сайт
<ул>
В отличие от заголовка , нижний колонтитул обычно является последним элементом страницы, где повторяются основные навигационные ссылки и добавляются второстепенные.
<нижний колонтитул>MarkSheet.io | Copyright 2015
<ул>
Основной
Основной элемент содержит, как следует из его названия, самое важное содержимое страницы , которое определяет назначение страницы.
В то время как все веб-страницы содержат общий элемент (например, заголовок, навигация, нижний колонтитул…), основной элемент фокусируется на уникальном содержании.
Например, статья, которую вы сейчас читаете, находится в основном элементе этой веб-страницы, поскольку ее содержание уникально для всего веб-сайта MarkSheet.
В сторону
Элемент side обычно находится рядом с основным и содержит дополнительную информацию, связанную с основным содержанием.
Раздел
Элемент section позволяет группировать
Разделы сами по себе не несут определенного значения. Это больше касается отношения между его дочерними элементами , а не его собственного значения на странице в целом.
На главной странице MarkSheet отображаются 3 раздела:
- рубрика (логотип, название, подзаголовок)
- введение ( «Короткий» , «Простой» , «Бесплатный» )
- глав ( «Интернет» , «HTML» , «CSS» )
Все они находятся в главном элементе главной страницы, но логически разделены, чтобы сгруппировать похожий контент и придать больше смысла структуре страницы.