Структура HTML документа: тип HTML документа, заголовок HTML документа, тело HTML документа, границы HTML документа
Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой продолжим раздел HTML. Эта запись поможет разобраться вам со структурой HTML документа. На самом деле, структура HTML документа очень простая: границы документа, заголовок, тело и декларация. О каждом элементе структуры документа и его назначении вы можете узнать из этой публикации.
Структура HTML документа: тип HTMLдокумента, заголовок HTML документа, тело HTML документа, границы HTML документа
Кроме того, что мы рассмотрим структуру HTML документа, мы поговорим о том, как браузер интерпретирует HTML документ и проведем параллель между HTML и протоколом HTTP, ведь обе эти технологии были разработаны в ЦЕРНе одним и тем же человеком для того, чтобы сделать общение по сети более доступным и простым специально неподготовленным пользователям.
Так же любой начинающий веб-разработчик или веб-мастер должен знать и понимать, как работают эти две технологии: HTML и HTTP.
Структура HTML документа. Особенности работы браузера с HTML
Содержание статьи:
- Структура HTML документа. Особенности работы браузера с HTML
- Заголовок HTML документа: место для служебной информации, которую не видят пользователи. HTML тэг <head>
- Тело HTML документа: видимая часть HTML страницы. HTML тэг <body>
- Границы HTML документа. HTML тэг <html>
- Тип HTML документа: как браузер узнает о версии HTML в документе. HTML тэг DOCTYPE
- Пример структуры HTML документа
- Сравниваем структуру HTML документа со структурой HTTP протокола
- Как браузер интерпретирует HTML документ
Когда мы разговаривали о том, что такое HTML и создавали первую HTML страницу, мы сделали это неправильно, да HTML документ был создан и мы его даже смогли посмотреть в браузере, но данный документ был неправильным с точки зрения стандарта HTML, хотя браузер «понял» и корректно отобразил страницу, но это заслуга браузера.
Прежде чем перейти к рассмотрению структуры HTML документа, давайте откроем файл в папке Lesson 1 (этот файл мы создали, когда знакомились с HTML) в браузере и воспользуемся консолью разработчика, я буду использовать для этого Google Chrome, вы можете использовать любой другой браузер.
Открыв index.htmlв браузере, нажмите F12, либо нажмите правой кнопкой мыши в области просмотра и из контекстного меню выберите пункт «Просмотреть код».
Смотрим код сформированной HTML страницы в браузере
Снизу у нас появится консоль, в которой наибольший интерес для нас в данный момент представляет вкладка Elements.
Код HTML страницы в консоли браузера
А теперь нажмите еще раз по области просмотра правой кнопкой мыши, но теперь нажмите «Просмотр код страницы».
У вас откроется новая вкладка в браузере, в которой будет отображен HTMLкод, из которого получилась данная страница, в моем случае это:
Hello, World!
Hello, World! |
Заметили разницу? В консоли помимо текста «Hello, World!» мы видим HTML тэги, когда мы смотрим HTML код, мы этих тэгов не видим.
Данный пример очень показательный по двум причинам:
- Вы увидели структуру HTML документа.
- Вы увидели, как браузер обрабатывает HTML код.
Все дело в том, что разработчики браузеров заботятся о своих пользователях в отличии от некоторых HTML разработчиков, поэтому браузеры будут исправлять некоторые ошибки разработчика, чтобы пользователь видел красивую и правильную структуру HTML документа. Здесь стоит заметить, что HTML тэги могут делиться как на одиночные и парные HTML тэги, так и на обязательные и необязательные HTML тэги, так же существуют еще и запрещенные HTML тэги. Обо всем этом мы обязательно поговорим.
В данном примере браузер сгенерировал структуру HTML документа за нас, но, тут можно подумать, что тэги, обозначающие структуру HTML документа необязательные, и этот будет глубоким заблуждением, просто браузер генерирует тэги структуры HTML документа в том случае, когда разработчик их не указал.
Из-за того, что браузер сгенерировал структуру HTML документа, мы видим разницу между консолью и исходным кодом HTML документа.
В консоли всегда отображается то, что на странице. В исходном коде браузера отображается код, который получил браузер на интерпретацию, это разные вещи.
Вы, наверное, уже разобрались со структурой HTML документа, посмотрев код консоли. Но я предлагаю вам взглянуть на картинку ниже, на ней изображена структура HTMLдокумента.
Структура HTML документа
Сверху мы видим HTML тэг <!DOCTYPE>, этот тэг так же является частью структуры HTML документа, но браузер его не генерирует, так как по тэгам не может определить версию HTML стандарта, как раз таки для определения версии HTML документа и используется тэг <!DOCTYPE>. Обратите внимание: это не простой параметр. На основе версии определяются правила написания тэгов (синтаксис HTML) и набор тэгов, который может быть использован в документе и, если эти правила будут нарушены, то ваш код будет невалидным.
Далее зеленой линией обозначен тэг <html>, который определяет границы HTML документа, весь код HTML документа за исключением декларации должен быть внутри тэгов <html> и </html>, иначе документ будет невалидным.
Для простоты понимания структуры HTML документа можно представить, что тэги <html>и </html> это своеобразный контейнер, а декларация DOCTYPE это инструкция по использованию контейнера.
Но также на рисунке мы видим, что наш контейнер <html>состоит из двух отсеков: верхний отсек – это заголовок HTML документа, в заголовке HTML документа располагается служебная информация, которая невидна пользователю за исключением названия HTML документа в тэге <title>.
Нижний отсек – это тело HTML документа, в котором идет код, который отображается браузером на экранах пользователя в виде HTML элементов. Отметим себе, что HTML элементы – это то, что пользователь видит на экране, а HTML тэги – это то, что разработчик пишет в редакторе. Структура HTML документа очень строгая и ее не стоит нарушать, конечно, любой современный браузер будет стараться корректно отобразить HTML документ, но как только вы будете делать валидацию HTML, вы будете получать ошибки.
Да и поисковые системы начинают относиться хуже к тем сайтам, у которых HTML код невалидный. Поэтому никогда не пренебрегайте правилами HTML. Давайте теперь более подробно поговорим о структуре HTML документа.
Заголовок HTML документа: место для служебной информации, которую не видят пользователи. HTML тэг <head>
Пожалуй, самым важным элементом структуры HTML документа является его заголовок. Начало заголовка HTML документа обозначается открывающим тэгом <head>, конец заголовка HTML документа обозначается закрывающим тэгом </head>.
Внутри заголовка HTML документа прописывается вся необходимая служебная информация:
- В заголовке указывается кодировка HTML документа.
- Так же здесь подключатся таблицы стилей.
- Заголовок HTML документа используется для подключения файлов JavaScript.
- В заголовке расположено описание HTML документа.
- В заголовке указывается название HTML документа.
- В заголовке могут быть указаны другие мета-тэги HTML, которые позволяют браузеру корректно отображать документы, а пользователям и поисковой системы получить больше информации о сайте.
Для нас сейчас важно сделать вывод о том, что заголовок HTML документа – важный элемент его структуры, который используется для размещения служебной информации, с некоторыми особенностями мы познакомимся в других записях.
Хочу обратить ваше внимание на то, что заголовок HTML документа и HTML заголовок – разные вещи, по крайней мере в моем понимание. HTML заголовок – это тэги <h2>, <h3>, <h4>и так до <h6>, эти тэги делят документ на разделы.
Тело HTML документа: видимая часть HTML страницы. HTML тэг <body>
В структуре HTML документа есть тело. Браузер обычно отображает содержимое тела HTML документа в области просмотра. Другими словами: тело HTML документа отображается пользователю и он даже может взаимодействовать с HTML элементами при помощи браузера, например, вводить данные в HTML формы.
Тело HTML документа является частью структуры и предназначено для отображения содержимого пользователя, хотя это не означает, что пользователь будет видеть все HTML элементы после того, как браузер проанализирует код страницы, так как некоторые HTML элементы могут быть намеренно скрыты стилями, заданными в CSS или удалены при помощи JavaScript кода.
Открывающий HTML тэг <body> обозначает начало тела HTML документа, закрывающий тэг </body>обозначает его окончание. Вне тела не должно быть HTML тэгов, которые бы отображались пользователю.
Вывод: тело документа – часть структуры HTML документа, которая отображается пользователю в области просмотра браузера.
Границы HTML документа. HTML тэг <html>
Если не быть таким уж формалистом, то HTML можно считать подмножеством XML. В XML действует незыблемое правило: один документ – один тэг. В XML так же, как и в HTML есть декларация. Как понимать это правило: один документ – один тэг.
Ведь на самом деле в XML документе тэгов много? Понимать это правило нужно следующим образом: тэг один, но в него может быть вложено сколь угодно много тэгов. Этот внешний тэг называют корневым или корнем. Корень как раз-таки и является границей XML. В HTML границей документа является тэг <html>.
Так и в HTML: весь HTML документ представляет собой один тэг <html>, внутри которого должно быть обязательно два вложенных тэга: <head>и <body>. За пределами границы HTML документа, кроме декларации, ничего быть не должно, на то это и граница.
Важной особенностью структуры HTML документа является то, что за пределами <html>…</html>не должно быть других тэгов, а внутри <html> могут быть только тэги <head>и <body>. А вот внутри тэгов <head>и <body>может быть сколь угодно много тэгов, правда внутри <head>служебных, а внутри <body>тех тэгов, которые видны пользователю.
Повторюсь, что структура HTML документа строгая и порядок написания тэгов должен быть так, как на рисунке выше.
Вывод: тэг <html> определяет границу HTML документа, за пределами которой не должно быть других тэгов, кроме декларации. Внутри границы HTML документа могут располагаться только тэги <head>и <body>в том порядке, как они написаны, а внутри тэгов <head> и <body> можно писать сколь угодно много тэгов.
Тип HTML документа: как браузер узнает о версии HTML в документе. HTML тэг DOCTYPE
Браузер интерпретирует HTML документа. Другими словами: браузер проводит его анализ и в соответствии с этим анализом он решает, как отображать HTML документ пользователю. На данный момент используют два стандарта HTML: 4.01 и 5 (есть еще XHTML, но на это у нас будет отдельная рубрика).
Исходя из вышесказанного, браузеру нужно «понимать»: с какой версией HTML он имеет дело или может он работает не с HTML, а с xHTML? Как ему это понять, чтобы правильно отобразить документ.
Для того чтобы браузер понимал с какой версией HTML он работает, в структуре HTML документа используется декларация, для объявления декларации используется HTML тэг <!DOCTYPE>, мы подробно поговорим про декларацию и ее роль в структуре HTML документа в отдельной записи, сейчас важно понимать то, что она нужна для того, чтобы браузер понял, как интерпретировать код HTML.
В принципе, мы рассмотрели структуру HTML документа и довольноподробно поговорили о каждом элементе структуры и его назначении в HTML, но давайте все-таки напишем код.
Пример структуры HTML документа
Без примера структуры HTML документа публикация была бы не полной. Поэтому откройте папку HTML, которую мы создали в прошлой записи и создайте в ней папку Lesson 2. Затем откройте любой удобный для вас редактор кода и напишите в нем следующее:
<!DOCTYPE html> <html lang=»ru-RU»> <head> <meta charset=»UTF-8″> <title>Структура HTML документа</title> </head> <body> <p>Lorem ipsum dolor sit amet, consecteturadipisicingelit. Necessitatibusipsaquis, maioresevenietatqueillo rem autemblanditiisiusto sit eumeligendi culpa ullamdebitisinciduntofficiaofficiis, in provident.</p> </body> </html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html>
<html lang=»ru-RU»>
<head>
<meta charset=»UTF-8″>
<title>Структура HTML документа</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consecteturadipisicingelit.
</body>
</html> |
Necessitatibusipsaquis, maioresevenietatqueillo rem autemblanditiisiusto sit eumeligendi culpa ullamdebitisinciduntofficiaofficiis, in provident.</p>Теперь мы создали правильный HTML документ, описав его структуру, отображаться в браузере он будет примерно следующим образом.
Так выглядит HTML документ в браузере с правильно заданной структурой
Если вы откроете консоль и откроете исходный код страницы, то увидите, что структура HTML документа есть и там, и там, только в этот раз браузер не делал работу за нас. Так же на странице мы видим HTML заголовок и HTML параграф, о которых мы поговорим, когда начнем разбираться с типографией в HTML.
Так же обратите внимание на то, что на вкладке появился текст: «Структура HTML документа», это получилось благодаря тому, что внутри заголовка HTML документа мы использовали тэг <title>, который используется для того, чтобы давать имена HTML страницам.
На картинке для примера я оставил вкладку, которая принадлежит странице из прошлой записи. Еще внутри заголовка есть мета-тэг с указанием кодировки документа.
Сравниваем структуру HTML документа со структурой HTTP протокола
Ни для кого не секрет, что в сети Интернет основным протоколом передачи данных является HTTP, который расшифровывается, как протокол передачи гипертекста и который был разработан одним и тем же человеком, что и HTML в ЦЕРНе.
Поэтому тут можно провести аналогию с HTTP протоколом, в котором есть HTTP сообщение, состоящее из служебной информации, которая прописывается в специальных полях HTTP заголовка и есть тело HTTP сообщения или HTTP объект, в котором передается полезная для пользователя информация. Согласитесь, что структура HTML документа очень похожа на структуру HTTP протокола.
Но если вам мало, то добавим: и HTTP запрос и HTTP ответ начинаются со статусной строки, если мы говорим про запрос, то в статусной строке указывается метод HTTP протокола, который говорит HTTP серверу о том, как выполнить запрос, а ответ сервера содержит специальный HTTP код состояния, который говорит клиенту о том, как он понял этот запрос.
Это похоже на DOCTYPE?
Как браузер интерпретирует HTML документ
HTML и HTTP очень связаны между собой, если вы не знаете, то HTTP протокол синхронный, это означает, что во время HTTP соединения и клиент, и сервер обмениваются сообщениями по очереди. Сперва клиент отправляет запрос, потом сервер отправляет ответ на запрос, если клиенту нужно, он делает еще запрос, на который опять же отвечает сервер.
HTTP клиент в нашем случае – это браузер. По HTTP протоколу чаще всего передаются HTML документы. Из-за особенностей реализации HTTP протокола и структуры HTML документа браузеры реализованы так, что они читают и интерпретируют HTML код слева направо и сверху вниз: сначала браузер проверяет версию HTML, указанную в декларации, затем он видит тэг <html>, который говорит ему о том, что начался HTML документ.
Далее браузер видит тэг <head> и понимает, что сейчас он получит служебную информацию, которая ему нужна, чтобы правильно отобразить документ.
Кстати, если браузер увидит, что вы подключаете какой-нибудь скрипт или таблицу стилей, то он будет делать запросы к серверу, чтобы получит недостающие файлы. Увидев закрывающий тэг </head> браузер понимает, что заголовок HTML закончился.
За тэгом <head> браузер видит тэг <body>, который говорит ему о том, что началось тело документа, которое нужно показать клиенту. Проанализировав тело, браузер увидит закрывающий тэг </body> и при этом поймет, что закончилось тело.
Об окончании документа браузер понимает по закрывающему тэгу </html>
Надеюсь, что данная статья помогла вам разобраться со структурой HTML документа и с тем, как обрабатывает браузер HTML код, если есть какие-то вопросы по структуре HTML документов – задавайте их в комментариях, разберемся вместе.
Строение тела документа | Учебник HTML5
Строение тела документа.
Описание тела нашего документа готово. Базовая структура определена, но необходимо еще поработать над содержанием.
Пока мы изучили только элементы HTML5, помогающие определять разделы макета и указывать их назначение, однако все самое важное находится внутри этих разделов.
Большинство уже рассмотренных элементов нужны для определения структуры HTML-документа, которую смогут распознать любые браузеры и новые устройства. Мы узнали, что с помощью тега <body> объявляется тело видимой части документа, тег <header> включает в себя важную информацию о теле, тег <nav> определяет средства навигации, тег <section> описывает содержимое самого документа, а в теги <aside> и <footer> заключается вспомогательная информация. Но ни один из указанных элементов не объявляет непосредственно содержимое документа. Все они относятся исключительно к описанию структуры документа.
Чем дальше мы углубляемся в разбор документа, тем ближе подходим к определению его содержимого. Информация в документе может включать в себя разные визуальные элементы, такие как заголовки,
тексты, изображения, видео и интерактивные приложения.
<title>Этот текст — заголовок документа</title>
<link rel=»stylesheet» href=»mystyles. css»>
</head>
<body>
<header>
<h2>Это главный заголовок веб-сайта</h2>
</header>
<nav>
<ul>
<li>домой</li>
<Н>фотографии</Н>
<li>видео</li>
<Н>контакты</Н>
</ul>
</nav>
<section>
<article>
Это текст моей первой статьи </article>
<article>
Этот текст моей второй статьи </article>
</section>
<aside>
<blockquote>Статья номер 1</blockquote>
<blockquote>Статья номер 2</blockquote>
</aside>
<footer>
Copyright © 2010-2011 </footer>
</body>
</html>
Как вы видите в коде листинга 1.15, теги <article> располагаются между тегами <section> — статьи принадлежат разделу, частью которого они являются.
Можно сказать, что тег <article> — дочерний элемент тега <section>, так же как все элементы внутри тега <body> являются дочерними элементами тела документа. Как и все дочерние элементы тела документа, теги <article> следуют один за другим, так как они независимы друг от друга, что и показано на рис. 1.4.
повторяем основы-
Как уже говорилось, документ HTML имеет древовидную структуру, корнем которой является элемент <html>. Элемент структуры может быть предком, потомком или братом другого элемента, в зависимости от того, какое место относительно друг друга они занимают в дереве. Например, в обычном HTML-документе элемент <body> является потомком элемента <html> и братом элемента <head>. Для обоих элементов, <body> и <head>, элемент <html> является родителем или предком.
Название элемента <article> никак не ограничивает его применение, то есть не обязательно описывать с помощью него только новостные статьи.
Элементы <article> могут описывать любые независимые части содержимого документа: публикации на форуме, статьи в журнале, записи блога, комментарии пользователей и т. п. Данный элемент всего лишь
Группирует связанные друг с другом фрагменты информации, независимо от характера этой информации.
<header> «/header>
<nav> </nav>
Как любая независимая часть документа, содержимое каждого элемента <article> обладает собственной структурой. При определении этой структуры мы можем пользоваться преимуществами, которые дает нам универсальность тегов <header> и <footer>, рассмотренных ранее. Это переносимые теги, и их можно использовать не только в теле документа, но и внутри любого его раздела.
Листинг 1.16. Построение структуры элемента <article>
<! DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»utf-8″>
<link rel=»stylesheet» href=»mystyles. css»>
</head>
<body>
<header>
<h2>Это главный заголовок веб-сайта</h2>
</header>
<nav>
<ul>
<li>домой</li>
<Н>фотографии</Н>
<li>видео</li>
<li>контакты</li>
</ul>
</nav>
<section>
<article>
<header>
h2>Заголовок статьи 1</h2>
</header>
Это текст моей первой статьи <footer>
<р>комментарии (0)</p>
</footer>
</article>
<article>
<header>
h2>Заголовок статьи 2</h2>
</header>
Это текст моей второй статьи <footer>
<р>комментарии (0)</p>
</footer>
</article>
</section>
<aside>
<blockquote>Статья номер 1</blockquote>
<blockquote>Статья номер 2</blockquote>
</aside>
<footer>
Copyright © 2010-2011 </footer>
</body>
</html>
Обе статьи в листинге 1.
16 описаны с помощью элемента <article>, и у каждой статьи задана своя структура. Вначале определен тег <header> с заголовком <h2>. Далее идет основное содержимое, то есть текст статьи. Завершает каждую статью тег <footer> с указанием количества комментариев.
<hgroup>
Внутри каждого элемента <header> — в начале тела документа и в начале каждой статьи — мы использовали тег <h2> для описания заголовка. В принципе, тега <h2> достаточно для создания заголовка части документа. Но иногда нам нужно добавить подзаголовок или другую вспомогательную информацию, чтобы пояснить назначение веб-страницы или какого-то ее раздела. Очень удобно, что элемент <header> может содержать другие элементы, например: оглавление, формы поиска, короткие текстовые фрагменты и логотипы.
Для создания заголовков мы можем использовать теги <h>: <h2>, <h3>, <h4>, <h5>, <h5> и <h6>. Однако для ускорения обработки документа и для того, чтобы во время его интерпретации не создавались множественные разделы и подразделы, эти теги необходимо группировать.
Для этого в HTML5 используется элемент <hgroup>.
Листинг 1.17. Использование элемента <hgroup>
<! DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»utf-8″>
<meta name=»description» content=»Это пример HTML5″>
<link rel=»stylesheet» href=»mystyles. css»> </head>
<body>
<header>
<h2>Это главный заголовок веб-сайта</h2> </header>
<nav>
<ul>
<li>домой</li>
<Н>фотографии</Н>
<li>видео</li>
<li>контакты</li>
</ul>
</nav>
<section>
<article>
<header>
<hgroup>
<h2>Заголовок статьи 1</h2> <h3>подзаголовок статьи 1</h3> </hgroup>
<p>опубликовано 10.12.2011</p> </header>
Это текст моей первой статьи <footer>
<p>комментарии (0)</p>
</footer>
</article>
<article>
<header>
<hgroup>
<1п1>Заголовок статьи 2</h2> <h3>подзаголовок статьи 2</h3> </hgroup>
<p>опубликовано 15.
12.2011</p> </header>
Это текст моей второй статьи <footer>
<p>комментарии (0)</p>
</footer>
</article>
</section>
<aside>
<blockquote>Статья номер 1</blockquote>
<blockquote>Статья номер 2</blockquote>
</aside>
<footer>
Copyright © 2010-2011 </footer>
</body>
</html>
Необходимо соблюдать иерархию тегов <h>, то есть сначала должен быть объявлен тег <h2>, затем для подзаголовка тег <h3> и т. д. Но в отличие от предыдущих версий HTML, в HTML5 теги <h> можно использовать в каждом разделе и заново строить такую иерархию. В листинге 1.17 мы добавили подзаголовок и метаданные в каждую статью и сгруппировали заголовок и подзаголовок с помощью <hgroup>. Иерархия тегов <h2> и <h3> используется в каждом элементе <article>.
Элемент <hgroup> следует добавлять только в том случае, если в одном теге <header> есть заголовки разных уровней.
Данный элемент может содержать только теги <h> — вот почему в нашем примере метаданные находятся за его пределами. Если в вашем коде используется только тег <h2> или тег <h2> с метаданными, то эти элементы группировать не нужно. Например, в заголовке тела документа элемент <hgroup> отсутствует, потому что элемент <h> только один. Элемент <hgroup> предназначен исключительно для группировки тегов <h>, на что и указывает его название.
Браузеры и программы, которые исполняют и отображают веб-сайты, считывают HTML-код и создают собственную внутреннюю структуру для интерпретации и обработки каждого элемента. Эта внутренняя структура состоит из разделов, не имеющих ничего общего с разделами документа, которые мы определили в HTML-коде, например, с помощью элементов <section>. Речь идет о концептуальных разделах, генерируемых во время интерпретации кода. Элемент <header> сам по себе не создает отдельного концептуального раздела.
Это означает, что элементы внутри <header>, представляющие разные уровни заголовков, могут
привести к формированию нескольких концептуальных разделов. Элемент <hgroup> был создан специально для группировки тегов <h>, чтобы избежать ошибок интерпретации HTML-кода браузерами.
повторяем основы-
Метаданные — это набор данных, который описывает другой набор данных и предоставляет дополнительную информацию о нем. В нашем примере метаданные содержат дату публикации статей.
<figure> и <figcaption>
Элемент <figure> предназначен для более точного определения содержимого документа. До его появления невозможно было объявить содержимое, которое представляет собой изолированную частью документа: иллюстрации, рисунки, видео и т. п. Как правило, такие элементы являются частью основного раздела, но их можно спокойно удалять из документа, не нарушая его структуру. Если такая информация присутствует в документе, то она определяется тегом <figure>.
Листинг 1.18. Использование элементов <figure> и <figcaption>
<! DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»utf-8″>
<meta name=»description» content=»Это пример HTML5″>
<link rel=»stylesheet» href=»mystyles. css»>
</head>
<body>
<header>
<h2>Это главный заголовок веб-сайта</h2>
</header>
<nav>
<ul>
<li>домой</li>
<Н>фотографии</Н>
<li>видео</li>
<Н>контакты</Н>
</ul>
</nav>
<section>
<article>
<header>
<hgroup>
<h2>Заголовок статьи 1</h2>
<h3>подзаголовок статьи 1</h3>
</hgroup>
<р>опубликовано 10.12.2011</p>
</header>
Это текст моей первой статьи <figure>
<img src=»http://minkbooks.
com/content/myimage.jpg»> <figcaption>
Это изображение для первой статьи </figcaption>
</figure>
<footer>
<р>комментарии (0)</p>
</footer>
</article>
<article>
<header>
<hgroup>
<h2>Заголовок статьи 2</h2>
<h3>подзаголовок статьи 2</h3>
</hgroup>
<р>опубликовано 15.12.2011</p>
</header>
Это текст моей второй статьи <footer>
<р>комментарии (0)</p>
</footer>
</article>
</section>
<aside>
<blockquote>Статья номер 1</blockquote> <blockquote>Статья номер 2</blockquote>
</aside>
<footer>
Copyright © 2010-2011 </footer>
</body>
</html>
В листинге 1.18 в первой статье сразу после текста мы добавили изображение (<img src=»http://minkbooks.
com/content/myimage.jpg»>). Это
Распространенный прием, текст часто сопровождается изображениями или видео. Теги <figure> определяют эти визуальные дополнения и помогают отличать их от остальной информации документа.
Кроме того, в листинге 1.18 внутри тега <figure> используется еще один дополнительный элемент. Такие блоки информации, как изображения и видео, принято подписывать. В HTML5 предусмотрен специальный элемент для создания таких подписей. Тег <figcaption> определяет текст, относящийся к содержимому <figure>, и устанавливает отношение между этими элементами и их содержимым.
Тег HTML
❮ Пред. Следующий ❯
Тег
определяет содержимое веб-страницы (текст, изображения, ссылки и т. д.). Он помещается внутри элемента после элемента. В документе HTML мы можем использовать только один тег.Обычно список CSS-классов для конкретного контента помещается в элемент
, что позволяет разработчикам и дизайнерам JavaScript легко ориентироваться на страницы.
Тег
идет парами. Содержимое записывается между открывающим () и закрывающим () тегами.Пример тега HTML
:
<голова>
Название документа
<тело>
Содержание документа
Попробуй сам »
Результат
Пример тега HTML
, используемого со свойствами CSS color и line-height:
<голова>
Название документа
<стиль>
тело {
цвет: #444444;
высота строки: 1,5;
}
<тело>
Пример HTML-тега body
Lorem ipsum, или lipsum, как его иногда называют, – это фиктивный текст, используемый при макетировании печатных, графических или веб-дизайнов. Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перепутал части книги Цицерона «De Finibus Bonorum et Malorum» для использования в книге образцов шрифтов.
Попробуй сам »
Тег
поддерживает глобальные атрибуты и атрибуты событий.Как оформить тег
?Общие свойства для изменения визуального веса/выделения/размера текста в теге
:- Свойство CSS font-style устанавливает стиль шрифта. нормальный | курсив | наклонный | начальная | наследовать.
- Свойство CSS font-family задает приоритетный список из одного или нескольких имен семейств шрифтов и/или общих имен семейств для выбранного элемента.
- Свойство CSS font-size устанавливает размер шрифта.
- Свойство CSS font-weight определяет, должен ли шрифт быть полужирным или толстым.
- Свойство CSS text-transform управляет регистром и регистром текста.
- Свойство CSS text-decoration определяет украшение, добавляемое к тексту, и является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.
Цветной текст в теге
:- Свойство цвета CSS описывает цвет текстового содержимого и оформления текста.
- Свойство CSS background-color устанавливает цвет фона элемента.
Стили макета текста для тега
:- Свойство CSS text-indent определяет отступ первой строки в текстовом блоке.
- Свойство CSS text-overflow указывает, как пользователь должен сигнализировать о переполненном содержимом, которое не отображается.
- Свойство CSS white-space указывает, как обрабатывается пробел внутри элемента.
- Свойство CSS word-break указывает, где строки должны быть разорваны.
Другие свойства тега
, на которые стоит обратить внимание:- Свойство CSS text-shadow добавляет тень к тексту.
- Свойство CSS text-align-last задает выравнивание последней строки текста.
- Свойство CSS line-height определяет высоту строки.
- Свойство CSS letter-spacing определяет интервалы между буквами/символами в тексте.
- Свойство CSS word-spacing задает расстояние между словами.
Тег HTML body — javatpoint
следующий → ← предыдущая HTML-тег определяет основное содержимое HTML-документа, которое отображается в браузере. Он может содержать текстовое содержимое, абзацы, заголовки, изображения, таблицы, ссылки, видео и т. д.Элемент должен быть вторым элементом после тега или должен быть помещен между тегами и. Этот тег необходим для каждого HTML-документа и должен использоваться только один раз во всем HTML-документе.СинтаксисРазместите здесь свой контент……..Ниже приведены некоторые характеристики тега
Пример<голова> Пример тега bodyЭтот абзац находится между тегом body Протестируйте сейчасВывод: АтрибутСпецифические атрибуты тега
|
(Не поддерживается в HTML5)