Структура html документа состоит из. Названия идентификаторов и классов. Что такое HTML

Документ HTML состоит из основного текста и тегов . По сути, документ HTML представляет собой текстовый файл и для его создания можно использовать обычный текстовый редактор, например, Блокнот .

Документы HTML имеют строго заданную структуру, должны начинаться с тега и заканчиваться закрывающим тегом . Эта пара тегов сообщает браузеру, что перед ним действительно документ HTML.

Документ HTML состоит из раздела заголовков и тела документа. Раздел заголовков заключён между тегами и и содержит информацию о документе в целом. В частности, этот раздел должен содержать теги и , между которыми размещают заголовок документа. Браузеры используют этот заголовок, чтобы заполнить строку заголовка окна браузера.

Основной текст располагается в теле документа, которое задаётся тегами и . Для изменения фона документа используется атрибут BGCOLOR, а для задания цвета шрифта применяется атрибут TEXT. В качестве значений этих атрибутов используется символьная константа цвета или шестнадцатеричное число, формирующее цвет по схеме «красный-зелёный-синий».

Четыре перечисленных парных тега определяют основную структуру документа HTML. Они встречаются или их наличие подразумевается во всех документах HTML.

Фактически определить расположение основных структурных тегов можно и при их отсутствии. Поэтому, если теги , , и соответствующие им закрывающие теги опущены, то программа-браузер сама определит то место, где они должны находиться. Тег считается обязательным, но и его пропуск не вызовет катастрофических последствий. Однако при создании Web-страниц опускать эти теги не рекомендуется, так как неизвестно, как поведёт себя браузер, установленный на компьютере пользователя.

Парные теги влияют на часть документа между открывающим и закрывающим тегами. Такую часть документа рассматривают как элемент языка HTML. Например, элемент BODY включает в себя открывающий тег , основное содержание элемента и закрывающий тег . Элементы языка HTML делятся на блочные и текстовые . Блочные элементы относятся к частям текста уровня абзаца. Текстовые элементы описывают свойства отдельных фраз и более мелких частей текста. При создании документа HTML желательно придерживаться следующих правил вложения элементов :

элементы не должны пересекаться. Если открывающий тег находится внутри элемента, то и закрывающий тег должен располагаться внутри этого же элемента;

блочные элементы могут содержать вложенные блочные и текстовые элементы;

текстовые элементы могут содержать вложенные текстовые элементы;

текстовые элементы не могут содержать вложенные блочные элементы.

Заголовок документа

Функциональные разделы документа

Язык HTML предназначен для описания функциональных разделов документа. Во многих обычных документах основными функциональными разделами являются заголовки и абзацы .

Язык HTML поддерживает шесть уровней внутренних заголовков документа. Они помечаются тегами от и до и . На экране компьютера эти заголовки изображаются шрифтами разных размеров. В соответствии с идеологией языка HTML текст, который по сути является заголовком, надо пометить с помощью одного из этих тегов. Пользоваться тегами форматирования, которые изменяют размер и начертание шрифта, в данном случае не следует.

Для обозначения обычных абзацев используют тег

И соответственно закрывающий тег

. Теги, описывающие обычные абзацы являются необязательными, но при их наличии браузеры чётко отслеживают границы между абзацами.

Для улучшения читаемости текста между абзацами браузеры выводят пустую строку. Эффективным средством создания разделителей в тексте являются горизонтальные полоски (линейки), визуально разделяющие документ на части. Горизонтальная линейка создаётся тегом . Это одиночный тег, не имеющий парного.

При создании HTML документа следует учитывать, что кратные пробелы между словами и переходы на новую строку при воспроизведении документа браузером игнорируются.

Для перехода на новую строку без создания абзаца используется тег
.

Функциональные разделы документа

Главный заголовок

Подзаголовок

Эти строки отображаются слитно,

несмотря на то, что в документе

они отделены

друг от друга.

Закрывающий тег абзаца не обязателен.

Тег начала абзаца более важен, чем реальный переход на новую строку.

Текст после горизонтальной линейки
разбит на две строки

HTML - это язык разметки сайта. Многие считают его программированием, но это не так. В HTML нет никаких переменных, вычислений, массивов и других элементов, присутствующих в любом языке программирования.

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

Создание html-документа

Создать простую страничку сайта можно в любом редакторе. Подойдет даже "Блокнот". Для начинающего разработчика рекомендуется использовать другие редакторы, у которых есть функции автоподстановки и другие подсказки. Благодаря этому можно создавать готовые таблицы, ссылки, изображения и другие элементы. А в "Блокноте" каждую букву приходится писать вручную.

Как правило, "Блокнот" используют только в тех случаях, когда под рукой нет других инструментов. Сначала создается текстовый документ, а потом сохраняется в формате html. Все страницы сайта должны быть с расширением html.

Язык html является иерархичным. То есть существует специальная структура html-документа. Что это такое? Рассмотрим ниже для наглядности.

Структура html-документа. Пример

Структура всегда одна и та же. Если вы захотите поменять что-то, браузер не сможет это обработать. В результате вы не получите то, что задумали.

На рисунке выше указана структура любого html-файла. Первый пункт указывает на тип файла. Этот тег указывается один раз. Если вы будете использовать специальные редакторы, то вся структура создастся автоматически. Вам нужно будет подправить стандартные значения.

Структура html-документа - основные теги:

Из этих трех тегов состоит каркас всего сайта. Обратите внимание на рисунок. Все эти теги имеют закрывающийся тег со знаком “/”. Если вы пишете от руки, привыкайте ставить сразу оба тега - открывающий и закрывающий.

Выше было сказано, что страницы сайтов имеют расширение.html. То есть если вы создадите текстовый документ, но при этом напишете правильный код, браузер всё равно отобразит вам просто текст. Никакого преобразования кода не будет.

Раздел head

На рисунке под пунктом 3 указан раздел head. В этом разделе указывается служебная информация. Например, можно указать кодировку (пункт 4) и заголовок страницы (пункт 5).

Заголовок должен быть всегда. Без него ни один поисковик не сможет определить название контента (текста) на веб-странице. А это плохо для продвижения сайта. Более того, в браузере наверху не будет указан заголовок страницы. Это неудобство для пользователя.

Структура html-документа такова, что указывается только в разделе head. Если тег указать в разделе body или после него, то обработчик на него не обратит внимания.

Кроме этого, в разделе head указывается информация для подключения скриптов, файлов стилей, инструкции для поисковых систем или любые другие данные, которые пользователь не должен видеть, но они важны для браузера или программистов.

Подключение стилей

Структура html-документа позволяет подключать стили различными способами. Более того, их можно писать индивидуально в каждом элементе. Но данный способ не рекомендуется, поскольку код становится слишком большим и неудобным.

Подключается файл следующим образом.

В атрибуте href указывается путь до файла. Если в пути будет ошибка, то стили не загрузятся. Также обязателен атрибут type, который указывает, что это файл css.

Другим вариантом является определение стилей прямо в разделе head.

Но этот вариант также не очень рекомендуется. Эти методы сильно отличаются тем, что файл css может быть одним для всего сайта, и все изменения в нем будут мгновенно применяться ко всем страницам. А если вы используете метод, который указан на рисунке выше, то вам придется вносить изменения во все существующие страницы сайта.

Если создаваемый класс будет использоваться только на одной странице, тогда этот вариант вам подходит.

Подключение скриптов

Скрипты подключаются следующим образом.

Здесь обязательны два атрибута: type и src. В первом указываем, что это файл Javascript, а второй - где расположен файл. Если вы допустите опечатку, то ничего работать не будет.

Раздел body

Структура html-документа такова, что размещать содержание, которое будет видно пользователю, нужно только в разделе body. Название тега говорит само за себя.

Здесь указывается весь основной код страницы, который может включать неограниченное число элементов. Но чем длиннее код, тем дольше он будет обрабатываться.

Рассмотрим самые основные теги, которые можно использовать в области body. Основных не так много. Все остальные вы будете узнавать по мере роста ваших знаний и практики.

Основные теги

Структура html-документа требует обязательного порядка написания элементов. Теги всегда должны по краям обрамляться скобками . Без этого браузер не поймет, что это тег. После открывающейся скобки всегда следует имя элемента (тега). Если вы допустите пробел между < и именем, то браузер посчитает это текстом.

Рассмотрим на примере тега изображения. Обратите внимание, что этот тег не закрывающийся, в отличие от ссылок, абзаца и многих других.

Порядок атрибутов не имеет значения. Но их написание (оформление) очень важно. Всегда сначала идет имя атрибута, потом знак равенства, затем в кавычках пишется значение атрибута. Значение может быть разным - цифровое или текстовое.

Атрибут src во всех тегах указывает путь файла, который нужно подгружать. Атрибут alt во всех элементах указывает короткое описание. В данном случае загружается фотография bird.jpg с описанием - фотография птицы.

Кроме этого, в можно было указать размеры, только ширину или высоту, заголовок, выравнивание, класс стиля или рамку.

Рассмотрим другие основные теги, которые указываются в разделе body.

	Назначение
	Изображения
	Перенос текста на новую строку
…	Жирный текст
	Перечеркнутый текст
	Подчеркнутый текст

Как всё это можно представить в голове

Начинающие разработчики не всегда сразу могут представить всё это умозрительно. Посмотрите несколько примеров структуры веб-страниц, и тогда вам точно станет понятно.

В этой статье мы рассмотрим структуру HTML документа и познакомимся с разными частями веб-страницы.

Структура документа HTML

В HTML4 веб-страница состоит из трёх главных частей:

Объявление типа документа (Document type declaration (DTD) ) сверху;

Тег HTML , включающий в себя следующие элементы:

1. Головную часть (Head );
2. Тело (Body ):

Посмотрите на пример, приведенный выше. Заметили красный и черный текст? Черным обозначено содержимое, а красным - теги из которых состоят элементы:

Объявление типа документа (1)

Первая строка в примере структуры HTML - не элемент, а объявление типа документа (также называемое декларацией DOCTYPE). Оно предоставляет информацию о версии HTML-документа и указывает браузерам спецификацию HTML. Правильный документ объявляет, какая версия языка используется.

Посмотрите : Информация о DOCTYPE

Элемент HTML (2)

Весь документ содержится в элементе html . Он часто называют корневым, и он не может находиться внутри любого другого элемента. Используется и в HTML , и в XHTML документах .

Внутри элемента html документ разделяется на «голову » (head ) и «тело » (body ).

Элемент Head (3)

Элемент head содержит описательную информацию о самом документе. То, что в нем упоминается, не должно отображаться в браузере, но передает ему некоторую информацию. Например, заголовок, используемые таблицы стилей, скрипты и другую информацию.

Элементы Meta (4)

Элемент структуры сайта HTML meta внутри head предоставляют информацию о метаданных. Meta-элемент может содержать разные виды информации. В примере, приведенном выше, он определяет кодировку символов (character encoding ), используемую в документе.

Примечание : метаданные - это информация о документе, но не его содержание.

Элемент Title (5)

Head также содержит обязательный элемент title . Согласно спецификации HTML , каждый документ должен включать в себя заголовок. Заголовок, который указан в этом элементе, показывается в вкладке браузера.

Элемент Body (7)

body содержит все, что мы хотим вывести на веб-странице. Это часть HTML-документа , которая отображается в браузере.

Запомните

• Тег HTML - указывает браузеру, как контент должен отображаться в нем.
• Любой HTML-документ состоит из трех частей - определение типа документа, голова и тело.
• HTML 5 определяется с помощью , в то время как HTML 4 имеет три разных способа определения типа - Strict , Transitional и фреймовая структура HTML .
• - это корневой элемент, который не может помещаться в любой другой.
• Элементы и вкладываются внутрь элемента .
• содержит информацию для браузера
• содержит все, что должно быть отображено в окне браузера.
• Элемент HTML - это комбинация открывающего тега, содержимого и закрывающего тега.
• Декларация Doctype сообщает браузеру, какому стандарту он следует.
• может содержать заголовок, таблицы стилей, скрипты и метаданные.
• Метаданные - это информация о документе, но не его содержимое.

Перевод статьи “HTML Document Structure – Post #2 – HTML Tutorials ” был подготовлен дружной командой проекта .

Хорошо Плохо

Всем доброго времени суток! Сегодня мы научимся создать каркас нашей первой HTML страницы. А точнее разберемся с базовой структуры html страницы, узнаем, из чего она состоит. Но прежде всего, поговорим немного о тегах.

Что такое тег в HTML?

Тег это базовый элемент языка HTML. То есть HTML состоит именно из тегов и для того чтобы учить HTML, достаточно изучить основные теги, которые чаще всего используются. Если сравнивать с примером из реальной жизни, то тег в HTML это как кирпич для дома. Кирпич это основной элемент, который используется для строительства дома. То же самое и в HTML, тег это базовый элемент для создания html страницы. С помощью тега мы указываем браузеру, как правильно отобразить содержание html страницы.

Существует два типа тегов это парные теги и одинарные теги :

• Парные теги это теги, которые состоит из открывающего тега и закрывающего тега. По короче это теги, которые имеют закрывающего тега. Примеры: и ; и ; и ; и ; ;
• Одинарные теги это теги, которые не имею закрывающего тега. Примеры одинарных тегов:
  .

У html страницы есть базовая структура . Базовая структура на всех страницах сайта, выглядит одинаково. Единственное что может отличаться в базовой структуре страниц от сайта к сайту, это элемент DOCTYPE. Для того чтобы узнать что такое DOCTYPE и какие типы существуют, прочитайте эту статью . Если не укажем этот элемент то браузер отобразит страницу некорректно.

Вот как выглядит базовый каркас html страницы:

Главная страница

Сейчас если откроем данную страницу в браузере, то она будет пуста. Теперь добавим пару строк кода внутри тега body , и откроем еще раз эту страницу в браузере.

Моя первая html страница

Вот как выглядит страница в браузере после того как изменили ее код:

Анализируем данный пример

В начале страницы, перед тегом html всегда указываем DOCTYPE , то есть тип документа.

Каждая html страница начинается с тега < html> и заканчивается тегом и состоит из заголовка < head> и тела < body> .

Внутри заголовка пишется служебные элементы, которые не отображаются на странице в браузере. В основном это:

• Мета теги . Главные из них это мета-тег кодировки , через которого указываем кодировку страницы (), мета теги для поисковых систем, это мета-тег c описанием страницы (description) и ключевые слова для страницы (keywords) .
• Заголовок страницы, который указывается внутри тега < title> . Этот заголовок отображается во вкладке браузера.
• Блок с внутренними стилями. < style type=” text/ css”>Внутренние стили.
• Одинарный тег < link /> , через которого подключаем внешние файлы.
• А также блок < script src =" library.js " type =" text/javascript " > в котором пишутся различные скрипты JavaScript .

Внутри тега < body> пишется контент страницы. Контент может содержать текст, изображения, таблицы, списки, ссылки и другие элементы которые отображаются на странице в браузере.

Имена тегов можно писать в любом регистре, то есть если напишем < BODY>, < bOdY>,< Body> или < body> , то результат будет один и тот же, но рекомендуется всегда писать в нижнем регистре, то есть < body> .

Пожалуй, на этом все. Из этой маленькой, но очень важной статьи вы узнали, как выглядит базовая структура html страницы.

1.2.2 Структура HTML документаHTML документ состоит из трех основных разделов:
> Раздел HTML документа: Каждый HTML документ должен начинаться открывающим HTML тегом и заканчиваться закрывающим HTML тегом.
.
Эти теги говорят браузеру, о том, что тот текст, который находится между этими двумя тегами является HTML документом.
> Раздел Заголовка (Header Section): раздел начинается с тега и заканчивается тегом . Этот раздел содержит название документа, которое отображается в строке заголовка Web страницы. Сам заголовок включен внутрь тега TITLE, который начинается с и закрывается -
Заголовок имеет очень важное значение. На веб-сайтах часто используются закладки, чтобы отметить этот узел web. Броузер использует "заголовок", чтобы сохранить эту закладку. Также, когда пользователи ищут информацию, заголовок Web-страницы часто является ключевым словом, по которому пользователь осуществляет поиск.
> Раздел тела документа (BODY Section): этот раздел следует после раздела заголовка. Раздел тела документа содержит текст, картинки и ссылки, которые должны отображаться на Web странице. Раздел тела документа начинается с тега и заканчивается тегом .
Пример 2:

Welcome to the world of HTML

This is going to be real fun

Рисунок 1.4 Пример 2
Абзацы
Вы обратили внимание на тег, , в Примере 2? Тег определяет абзац (paragraph).
Когда Вы пишете текст, вы разбиваете содержимое на последовательность параграфов. Абзацы помогают определить логическую структуру документа и применить некоторое форатирорвание к содержимому документа. Тег используется, чтобы отметить начало нового параграфа.