Заголовки бывают разные по значению, или как говорят, по уровню. Учебник, например, имеет название — это заголовок первого уровня. Текст в учебнике разбит на главы; названия глав — это заголовки второго уровня. Главы содержат параграфы с заголовками третьего уровня, а параграфы — пункты, обозначенные заголовками четвёртого уровня.
HTML поддерживает заголовки шести уровней при помощи конструкции:
В качестве n следует использовать одну из цифр 16, обозначающую уровень заголовка.
При отображении страницы браузер выделяет заголовки размером шрифта и жирностью:
Это заголовок 1 уровня
Это заголовок 2 уровня
Это заголовок 3 уровня
Это заголовок 4 уровня
Это заголовок 5 уровня
Это заголовок 6 уровня
Элементом H1 задают, как правило, заголовок сайта, элементом H2 — заголовок страницы, элементом H3 — разделы на странице и так далее.
Например, страница “В лес за грибами” сайта “Лесные истории” может иметь следующий вид (справа от заголовков проставлен их уровень):
HTML5 #1 Базовая структура HTML документа (Base HTML Document Structure)
Уровни заголовков отражают структуру документа (показана на схеме справа). Однако, в HTML-коде иерархия документа закладывается только в номер уровня Hn , и не означает вложенность соответствующих фрагментов кода.
Код вышеприведённой страницы имеет вид:
Замечаем, что вложенность элементов в коде не совпадает с вложенностью фрагментов содержания страницы.
В коде все элементы Hn и P являются прямыми потомками элемента BODY .
Горизонтальная линия
Линия — простейший графический элемент, который умеет строить браузер. Горизонтальная линия задаётся тегом , и этот тег не имеет парного закрывающего.
Горизонтальные линии удобно использовать для дополнительного выделения (или разделения) элементов документа на экране. Посмотрите еще раз, как линия отделяет заголовок в примере от основного текста:
Абзац
Человеку в отличие от компьютера трудно воспринимать однородную информацию, поэтому в книгах буквы не покрывают сплошь всю страницу, хотя это здорово сэкономило бы бумагу. Страница в угоду человеческой природе содержит много пустоты, а текст делится на порции — абзацы.
Абзацы отделяются друг от друга “красными” или пустыми строками. Красная строка — это первая строка абзаца с текстом, сдвинутым вправо.
Конечно, разделять текст на абзацы стараются не как попало, а так, чтобы каждый фрагмент содержал законченную мысль.
Вот сейчас начат новый абзац, потому что закончено вступление, и разговор пойдет о том, как кодируются абзацы на HTML.
Задаётся абзац тегами
и
, между которыми помещается текст. Парный тег
является необязательным.
По умолчанию браузер использует не красную, а пустую строку (отступ) для отделения одного абзаца от другого.
Браузер отображает элемент P следующим образом:
- Абзац выводится с новой строки и перед ним формируется отступ размером в пустую строку.
- Абзац выравнивается по левому краю для языков с написанием слева направо и по правому для языков с написанием справа налево.
- Между словами помещается ровно по одному пробелу независимо от того, сколько пробелов проставлено в HTML-коде.
- Перенос текста на новую строку выполняется, если очередное слово не помещается в экранной строке, а не тогда, когда в HTML-коде начинается новая строка.
- Завершая абзац, браузер выполняет переход на новую строку и формирует после абзаца отступ размером в пустую строку.
Посмотрите, как браузер перестраивает абзац в разных по ширине окнах (откройте документ и измените несколько раз ширину его окна):
Учим Html за 35 минут для начинающих от 10 лет (Основы) + Мотивация для разработчиков #ДомаВместе
Парный тег
является необязательным — браузер определяет конец текущего абзаца по началу следующего или началу другого элемента уровня блока (о делении элементов на строчные и блочные рассказано в следующем пункте). Однако на практике лучше использовать следующее правило: в цепочке элементов P последний элемент лучше записывать с закрывающим тегом. А можно все элементы P записывать парными тегами, тогда уж браузеру точно не к чему будет придраться!
Блочные и строчные элементы
Элементы HTML разделяются на два класса — и .
Блочные элементы браузер выводит на экран в прямоугольные области, следующие друг за другом сверху вниз:
Блочный элемент занимает всю доступную ширину. Высота блочного элемента определяется его содержимым.
Приведённый выше рисунок соответствует, например, такому коду:
Цветной фон у блоков, правда, отсутствует, но его можно задать, используя свойства CSS (материал следующей темы учебника):
Строчные элементы содержатся внутри блочных и занимают место в строке, переходя на следующие строки, если в текущей не хватило места:
Элемент HTML является блочным. Внутри этого элемента расположен элемент — BODY , который тоже является блочным.
Прямые потомки BODY — всегда блоки: абзацы ( P ), горизонтальные линии ( HR ), заголовки ( Hn ) и другие. Даже если поместить в BODY строчные элементы, браузер автоматически “обернёт” их в специально созданные безымянные блоки.
К строчным относятся элементы, позволяющие выделять текст (например, курсивом или жирностью), а также обычный неразмеченный текст — он автоматически собирается браузером в безымянные строчные элементы.
Рассмотрим следующий пример:
Этот код содержит 6 блочных элементов. Элемент HTML является родителем BODY . Четыре блока в BODY браузер выводит в последовательные прямоугольные области, занимающие всю ширину BODY :
Каждый блочный элемент в BODY , кроме HR , содержит внутри себя строчные элементы.
Блочный элемент H1 содержит один строчный безымянный элемент (текст заголовка):
Если ширина окна уменьшается, соответственно уменьшается ширина H1 и строчный элемент занимает несколько строк:
Блочный элемент P в первом абзаце содержит три строчных элемента: безымянный, EM и ещё один безымянный:
Если ширина окна уменьшается, строчные элементы переносятся со строки на строку так, чтобы занять ширину содержащего их блока ( P ):
Внутри блочных элементов могут располагаться не только строчные, но и блочные элементы вперемежку со строчными:
Все строчные и неразмеченные элементы собираются в безымянные блоки (назовём их условно БЛОК ):
Размещение на экране выполняется прежним способом: блоки выводятся в прямоугольные области, следующие друг за другом сверху вниз.
Блочные элементы могут содержать блочные и строчные элементы. Однако блочный элемент P является исключением: внутрь него разрешается помещать только строчные элементы.
Следующий код является ошибочным:
Можно ли размещать внутри строчного элемента блочные? Стандарт языка запрещает это: “строчные элементы могут содержать только данные и другие строчные элементы”.
Стиль записи кода программы
Записывать код программы нужно так, чтобы смысл его был максимально понятен. Подробный разговор на эту тему предстоит в уроке 10, а сейчас несколько самых важных рекомендаций.
Лесенка
Лесенка (ступенчатые отступы) отражает вложенность элементов друг в друга и позволяет легко увидеть в тексте границы больших многострочных конструкций.
Структурная лесенка должна повторять иерархическую структуру блочных элементов: каждый потомок смещается вправо по отношению к телу своего родителя (точки имитируют пробелы-отступы):
Начало и конец каждого блока занимают отдельные строки и записываются с одной и той же позиции. Потомок записывается между этими строками со сдвигом вправо (рекомендуемый сдвиг — 2 позиции).
Структурную лесенку делайте только на теговом “каркасе” блочных элементов. Строчные элементы лучше начинать с первой позиции — так их легче записывать и редактировать.
Короткие строки
Для просмотра длинных строк приходится применять горизонтальную прокрутку, а это очень неудобно. Длина строки в коде не должна превышать 80 символов.
Теги большие, атрибуты маленькие
HTML позволяет записывать имена тегов, атрибутов и их значений в любом регистре. Для выделения тегового каркаса рекомендуется записывать названия тегов прописными буквами, а названия атрибутов и их значения — строчными.
Источник: robotlandia.ru
Структура HTML-кода
Если открыть любую веб-страницу, то она будет содержать в себе типичные элементы, которые не меняются от вида и направленности сайта. В примере 1 показан код простого документа, содержащего основные элементы.
Пример 1. Исходный код веб-страницы
Скопируйте содержимое данного примера и сохраните его в папке c:www под именем example2.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть файл (Ctrl+O). В диалоговом окне выбора документа укажите файл example2.html. В браузере откроется веб-страница, показанная на рис. 1.
Рис. 1. Результат примера в браузере
Далее разберём отдельные строки нашего кода.
Элемент (жарг. доктайп) предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях — современный HTML5 или устаревшие HTML4 и XHTML. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать .
Поскольку мы в дальнейшем будем работать только с HTML5, то нам потребуется только один короткий и современный доктайп.
Структура HTML-документа
В этой статье мы рассмотрим структуру 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)
Элемент Body (7)
body содержит все, что мы хотим вывести на веб-странице. Это часть HTML-документа , которая отображается в браузере.
Запомните
- Тег HTML — указывает браузеру, как контент должен отображаться в нем.
- Любой HTML-документ состоит из трех частей — определение типа документа, голова и тело.
- HTML 5 определяется с помощью , в то время как HTML 4 имеет три разных способа определения типа — Strict , Transitional и фреймовая структура HTML .
- — это корневой элемент, который не может помещаться в любой другой.
- Элементы и вкладываются внутрь элемента .
- содержит информацию для браузера
- содержит все, что должно быть отображено в окне браузера.
- Элемент HTML — это комбинация открывающего тега, содержимого и закрывающего тега.
- Декларация Doctype сообщает браузеру, какому стандарту он следует.
- может содержать заголовок, таблицы стилей, скрипты и метаданные.
- Метаданные — это информация о документе, но не его содержимое.
Источник: www.internet-technologies.ru