Базовая структура HTML файла — Vladimir Shaitan на DTF
Любой HTML файл начинается с базовой структуры. Обычно она включает в себя теги, которые есть в любом HTML файле.
351 просмотров
Пример базовой структуры показан ниже.
Рассмотрим ее подробнее.
<!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 файле.
Пример базовой структуры показан ниже.
<!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> — парный тег, нужен для хранения служебной, внутри него возможны различные сочетания тегов, которые будут указывать браузеру: название страницы, описание, ключевые слова.
Эта информация называется ‘метаинформацией
Все что находится внутри тега <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.
P.S. Больше уроков у меня на канале
Какова структура документа HTML?
HTML – это веб-язык. Он используется для разработки веб-страниц или для организации макетов страниц веб-сайта. HTML расшифровывается как HYPERTEXT MARKUP LANGUAGE, и, как следует из названия, это язык разметки, а не язык программирования.
HTML использует указанные теги и атрибуты, чтобы указать браузерам, как отображать текст, включая формат, стиль, размер шрифта и отображаемые изображения. HTML — это язык, нечувствительный к регистру. Нечувствительность к регистру означает, что нет различия между прописными и строчными буквами (заглавными и строчными буквами), которые рассматриваются как одно и то же; например, «P» и «p» здесь одинаковы. В HTML теги подразделяются на два типа:
- Парные теги: Эти теги идут парами. Они имеют как открывающий (< >), так и закрывающий () теги. Например,
…
- Головная часть — заголовок и метаданные веб-документа содержатся в элементе заголовка.
- Часть корпуса — Элемент body содержит информацию, которую вы хотите отобразить на веб-странице. Чтобы сделать ваши веб-страницы совместимыми с HTML 4, включите объявление типа документа ( DTD ) перед элементом HTML. Когда вы создаете новую веб-страницу, многие программы веб-публикаций автоматически добавляют DTD и базовые теги. Первый тег на веб-странице показывает язык разметки, используемый для документа. Тег предлагает информацию о веб-странице. Наконец, содержимое появляется в теге.
Базовая структура HTML
Базовая структура документа HTML состоит из 5 элементов:
- <голова>
- <название>
- <тело>
Тег в HTML используется для информирования браузера о версии HTML, используемой на веб-странице. Он упоминается как объявление типа документа (DTD) .
На самом деле это не тег/элемент, а скорее инструкция для браузера относительно типа документа. Это нулевой элемент, который не имеет закрывающего тега и не должен содержать никакого содержимого.
На самом деле существуют различные типы HTML, например. HTML 4,01 Строгие , HTML 4.01 Переход , HTML 4.01 Frameset , XHTML 1,0 Строгие , XHTML 1,0 Переход , xhtml 1.0, , xhtm9,
Синтаксис
Пример: В данном примере мы будем использовать тег для объявления версии HTML, в которой написана страница.
Это пустой тег и не содержит никакой информации.
<голова>!Тег DOCTYPE <тело>Тег !DOCTYPE
Вывод
Тег в HTML используется для указания корня страниц HTML и XHTML. Тег информирует браузер о том, что это HTML-документ. Это второй внешний контейнер для всего в HTML-документе, за которым следует тег. Тег требует наличия начального и конечного тегов.
Синтаксис тега
...
Пример: В данном примере мы собираемся использовать тег, чтобы показать, как он содержит содержимое документа HTML.
HTML-тег <тело>html-тег
Выход:
Тег
в HTML используется для хранения метаданных ( данные о данных ).
Он используется между тегами и.Заголовок HTML-документа — это раздел документа, содержимое которого не отображается в браузере при загрузке страницы. Он содержит только метаданные документа HTML, которые указывают информацию о документе HTML.
В зависимости от наших потребностей заголовок HTML может содержать много информации о метаданных или может содержать очень мало информации о метаданных или вообще не содержать ее. Тем не менее, раздел заголовка HTML-документа играет важную роль в создании веб-сайта.
Название документа, набор символов, стили, ссылки, скрипты и другая метаинформация определяются метаданными.
Ниже приведен список тегов метаданных:
</li><li> <стиль></li><li> <мета></li><li> <ссылка></li><li> <скрипт></li><li> <база></li></ul><h4 level="3"><span class="ez-toc-section" id="i-3"> Синтаксис тега </span></h4><head></h4><pre> <pre> <!DOCTYPE html> <html> <голова> ... </голова> </html> </pre></pre><p> <strong> Пример: </strong> В этом примере мы будем использовать тег<head>, содержащий теги<style>/*<
..
В данном случае мы используем тип документа,соответствующий HTML5,самой современной версии языка HTML. Существует ряд различных объявлений типов документов,соответствующих различным версиям HTML. 
