Структура страницы html: Структура html страницы.

Конспект «Структура HTML-документа» — Структура HTML-документа — HTML Academy

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

<!DOCTYPE html>

Простейшая HTML-страница состоит как минимум из трёх тегов: <html>, <head> и <body>. Тег <head> обычно содержит заголовок, ключевые слова, описание страницы и другие служебные данные. Также внутри него подключаются внешние ресурсы, например, стили. Содержимое этого тега не отображается на странице напрямую. А в теге <body> хранится содержание страницы, которое отображается в окне браузера.

Для подключения стилей к странице существует тег <link>. Для этого у него есть атрибут href в котором задаётся адрес стилевого файла, а значение stylesheet атрибута rel говорит браузеру, что мы подключаем именно стили, а не что-то другое.

<head>
  <link href="адрес_файла_стилей.css" rel="stylesheet">
</head>

Ещё один элемент, который располагается в <head> — это тег <title>. В нём задаётся заголовок страницы, который отображается во вкладках браузера. По заголовку должно быть понятно, о чём эта страница, даже когда она не открыта в браузере, а отображается в результатах поиска или в браузерных закладках.

<head>
  <title>Тренажёры — HTML Academy</title>
</head>

Ещё один важный тег, располагающийся внутри <head> это тег <meta>. Он одиночный, то есть не требует парный закрывающий тег в конце. С помощью <meta> можно сообщать браузеру, поисковому роботу или другому устройству различную служебную информацию (или метаинформацию) о вашем сайте: кодировку текста, описание контента и так далее. Для этого используются теги

<meta> с разными атрибутами и их значениями.

Кодировка текста HTML-страницы указывается с помощью атрибута charset:

<meta charset="название кодировки">

Самая распространённая современная кодировка — utf-8.

Перечень ключевых слов задаётся тегом <meta>, у которого атрибут name имеет значение keywords. Ключевые слова (самые важные слова из содержания страницы) перечисляются в атрибуте content через запятую:

<meta name="keywords" content="важные, ключевые, слова">

Краткое описание (или аннотация) страницы задаётся похожим образом, только значение атрибута name меняется на description:

<meta name="description" content="краткое описание">

Внутри <body> находятся те теги, которые отображаются на странице. Например, тег

<main> выделяет основное содержание страницы, которое не повторяется на других страницах. И обычно на странице используется один <main>.

Тег <header> содержит вводную часть страницы, которую чаще называют «шапкой», а тег <footer> описывает заключительную часть страницы, или «подвал». Существует тег <section>, который обозначает крупный смысловой (или «логический») раздел.

Тег <article>, обозначает цельный, законченный и самостоятельный фрагмент информации.

Для создания логического раздела с основной навигацией предназначен тег <nav> (сокращение от английского «navigation»). Обычно в <nav> включают ссылки на другие страницы или навигацию по текущей странице.

Тег <aside>

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

Для создания основной структуры текста используют заголовки. В HTML существует целое семейство заголовочных тегов: от <h2> до <h6>. Тег <h2> обозначает самый важный заголовок (заголовок верхнего уровня), а тег <h6> обозначает подзаголовок самого нижнего уровня.

<h2>Спецификация HTML</h2>
<h3>Раздел 1 Введение</h3>
<h4>Раздел 1.1 Происхождение языка</h4>

Основную структуру текста создают с помощью заголовков, а более мелкую выстраивают с помощью параграфов (или абзацев). Для разметки параграфов предназначен тег <p>. По умолчанию абзацы начинаются с новой строки и отделяются от остального контента отступами сверху и снизу.


Продолжить

Структура html-документа, веб-страницы | основные теги

  • doctype
  • Элемент html
  • Элемент head
  • Элемент title
  • Элемент body

Настало время рассмотреть на примере простейший HTML-документ. Мы напишем код, результатом работы которого является вывод в окне браузера фразы «Hello, world!» (в дословном переводе с англ. — «Здравствуй, мир!»). Обычно такая практика написания кода является первым опытом при изучении нового языка. Такая постановка задачи обращает внимание учащегося сразу на несколько ключевых моментов языка программирования (в нашем случае языка разметки), главным из которых является базовая структура программы (в нашем случае веб-страницы).

doctype

Каждый HTML документ, отвечающий спецификации HTML какой-либо версии (мы будем указывать последнюю версию), обязан начинаться со строки декларации версии HTML, делается это с помощью объявления <!DOCTYPE> следующим образом:


<!DOCTYPE html>

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

Хотя слово doctype размещается в угловых скобках (< и >), оно не является тегом, это инструкция, предназначенная специально для браузеров, и восклицательный знак (!) в начале отличает ее от остального кода в HTML-документе.

Элемент html

После объявления версии и типа документа необходимо обозначить его начало и конец, делается это с помощью элемента <html>:


<!DOCTYPE html>
<html>
</html>

Это элемент также называют корневым, потому что все остальные элементы документа располагаются в нем. Корневой элемент может иметь только два дочерних элемента: <head> и <body>.

Элемент head

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

Элемент <head> должен быть первым дочерним элементом <html>, никакое содержимое или элементы не должны располагаться перед ним:


<!DOCTYPE html>
<html>
  <head>
  </head>
</html>

Элемент title

Элемент <title> предоставляет текстовый заголовок для документа. Каждый HTML-документ должен иметь ровно один элемент <title>, который должен располагаться внутри элемента <head>:


<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна</title>
  </head>
</html>

Браузеры отображают содержимое элемента <title> как заголовок (имя) документа, который обычно отображается вверху окна браузера или в названии вкладки:

Элемент body

Элемент <body> является контейнером для всего содержимого веб-страницы. Все, что отображается в окне браузера и видит пользователь, содержится в нем (у каждого HTML-документа может быть только один элемент <body>). Его основная цель — отделить содержимое документа от метаданных:


<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна</title>
  </head>
  <body>
  </body>
</html>

Вот и все! Начало положено – вы получили прекрасную заготовку. Вот так будет выглядеть готовая структура документа с выводом в окне браузера фразы «Hello, world!»:


<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна</title>
  </head>
  <body>
    Hello, world!
  </body>
</html>

С этой темой смотрят:

  • Введение в html
  • HTML элементы
  • Создание html документа
  • Теги <meta> в HTML

Базовая структура веб-страницы HTML — основные теги HTML

 

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

Элемент html в основном сообщает вашему компьютеру, что это документ HTML. Все остальные теги элементов «вложены» в начало и конец html теги. Затем веб-страница подразделяется на два основных раздела: «голова» и «тело».

Раздел заголовка начинается с начального тега и заканчивается конечным тегом

. Сразу после этого идет начальный тег , а непосредственно перед конечным тегом html — закрывающий тег .

Есть только один комплект из ... тегов, один набор из ... тегов и один набор из ... тегов. Эту базовую структуру веб-страницы HTML можно проиллюстрировать на следующем примере:

Пример 2

Головной раздел или заголовок документа имеет мало содержания и в основном содержит закодированные в HTML инструкции о том, как озаглавить, классифицировать и «запустить» веб-страницу. Раздел body или тело документа , с другой стороны, содержит почти весь контент, который вы разместите на своей веб-странице, и этот контент — обычно текст, но также может быть изображениями и звуками — отформатирован с использованием большего количества HTML-кода. Весь текст, который вы поместите за пределы угловых скобок, станет «видимым текстом» и будет отображаться вашим веб-браузером на вашей веб-странице. Поместив этот текст между начальным и конечным тегами определенных элементов HTML, вы можете указать веб-браузеру, где и как отображать этот текст.


Добавление заголовка на веб-страницу

Хорошо, давайте продолжим на примере 2. (Щелкните здесь, чтобы прочитать предыдущую страницу в этом руководстве, если вы не знакомы с тем, как создавать и редактировать HTML-документ.)

Веб-страницы обычно имеют заголовок, который появляется в строке заголовка, который проходит через самый верх веб-страницы. Этот заголовок создается с использованием тегов .<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/impuls-web.ru/wp-content/uploads/2019/04/html-struktura-2.jpg' /><noscript><img loading='lazy' src='/800/600/http/impuls-web.ru/wp-content/uploads/2019/04/html-struktura-2.jpg' /></noscript><div id="yandex_rtb_2" class="yandex-adaptive classYandexRTB"></div> <script type="text/javascript">if(rtbW>=960){var rtbBlockID="R-A-744004-3";} else{var rtbBlockID="R-A-744004-5";} window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo:"yandex_rtb_2",blockId:rtbBlockID,pageNumber:2,onError:(data)=>{var g=document.createElement("ins");g.className="adsbygoogle";g.style.display="inline";if(rtbW>=960){g.style.width="580px";g.style.height="400px";g.setAttribute("data-ad-slot","9935184599");}else{g.style.width="300px";g.style.height="600px";g.setAttribute("data-ad-slot","9935184599");} g.setAttribute("data-ad-client","ca-pub-1812626643144578");g.setAttribute("data-alternate-ad-url",stroke2);document.getElementById("yandex_rtb_2").appendChild(g);(adsbygoogle=window.adsbygoogle||[]).push({});}})});window.addEventListener("load",()=>{var ins=document.getElementById("yandex_rtb_2");if(ins.clientHeight =="0"){ins.innerHTML=stroke3;}},true);</script> .. , которые сами по себе всегда вложены в теги ... теги. Весь текст, расположенный после начального тега </code> и перед конечным тегом <code> , будет отображаться как заголовок вашей веб-страницы. Следовательно, следующий код HTML создаст веб-страницу с названием «Моя домашняя страница»:

Пример 3

</code> <code> Моя домашняя страница </code> <code>

Добавление заголовка на вашу веб-страницу

Добавление содержимого на вашу веб-страницу

Теперь, чтобы добавить какой-либо контент на вашу веб-страницу, все, что вам нужно сделать, это ввести текст между тегами... . Так давайте, например, поместим слова «HELLO WORLD!» на вашей веб-странице.

<code> Моя домашняя страница </code>

ПРИВЕТ, МИР!

Это создаст веб-страницу, которая выглядит следующим образом:

создайте веб-страницу с заголовком и простым текстом на чистом белом фоне. Итак, давайте завершим этот набор руководств изучением того, как использовать элементы HTML в сочетании с атрибутами HTML…

Лучшие бесплатные вещи
для веб-мастеров

Бесплатные текстовые редакторы
Бесплатные графические редакторы
Инструменты анализа веб-сайтов
Бесплатные шаблоны веб-сайтов

См. также:

Лучший бесплатный веб-хостинг

 

Если вам нужен веб-адрес .COM , вы можете быстро и легко получить его по адресу…

<~ НАЗАД ВЕРХ СЛЕДУЮЩИЙ ~>

СТРУКТУРА HTML-СТРАНИЦЫ И ВЛОЖЕНИЕ

Следующая диаграмма дает нам общее представление о структуре HTML-страницы:

Как мы видим, страница состоит из пяти важных частей:

  1. DOCTYPE
  2. HTML
  3. ГОЛОВКА
  4. КОРПУС
  5. НАЗВАНИЕ

DOCTYPE:

Говоря простыми словами, это означает объявление «типа документа».

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

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

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

HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd
”>

Для HTML5 объявление выглядит так:

HTML:

Чтобы отобразить веб-страницу, нам сначала нужно сообщить браузеру, что это веб-страница.

Почему? Потому что браузеры могут отображать файлы других типов: файлы Adobe Acrobat, текстовые файлы, изображения, файлы Flash.

Чтобы сигнализировать браузеру, что это страница сайта, нам нужны два тега — открывающий и закрывающий тег:

Все, что есть видно в браузере, находится между этими двумя тегами .

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

HEAD:

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

Внутри элемента могут находиться следующие элементы:

  • (этот элемент обязателен в HTML-документе)</li><li> <стиль></li><li> <базовый></li><li> <ссылка></li><li> <мета></li><li> <скрипт></li><li> <noscript></li></ul><p> Размещается между тегами<html> и<body>.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf2.ppt-online.org/files2/slide/o/oAZe6u0c15BIHaqMJNsUfzKTOVxWQ9bGkiSvmEhwX/slide-4.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf2.ppt-online.org/files2/slide/o/oAZe6u0c15BIHaqMJNsUfzKTOVxWQ9bGkiSvmEhwX/slide-4.jpg' /></noscript></p><p> В HTML 4.01 элемент<head> обязателен.</p><p> В HTML5 элемент<head> можно опустить.</p><h3><span class="ez-toc-section" id="BODY"> BODY: </span></h3><p> Все, что пользователи видят на своем экране, генерируется из кода между открывающим и закрывающим тегами этого элемента. Итак, это «тело» HTML-документа.</p><p> Содержит текст, гиперссылки, изображения, таблицы, списки и т.д.,</p><p> Тег body имеет множество атрибутов, которые помогают нам управлять отображением некоторых элементов страницы. Мы можем классифицировать эти атрибуты по трем типам</p><ol><li> Атрибуты макета: например, цвет фона или изображения, цвет текста и цвета ссылок</li><li>  Глобальные атрибуты: атрибуты, общие для всех элементов HTML, такие как стиль, язык, класс, идентификатор и т. д.</li><li> Атрибут событий: например, события мыши, события клавиатуры, события Windows или события формы, события мультимедиа и т. д.</li></ol><p> Обратите внимание, что все атрибуты макета были удалены из HTML5. Вместо этого используйте CSS.</p><h3><span class="ez-toc-section" id="i-3"> ВКЛАДЫВАНИЕ: </span></h3><p> Элемент HTML — это элемент, который имеет открывающий и закрывающий теги.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf.ppt-online.org/files/slide/n/nua6RAM0omQeiKfI2WSvgpDJPxGzCZEcLhb7Bs/slide-14.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/n/nua6RAM0omQeiKfI2WSvgpDJPxGzCZEcLhb7Bs/slide-14.jpg' /></noscript></div></div></div></article><nav class="navigation post-navigation" aria-label="Записи"><h2 class="screen-reader-text">Навигация по записям</h2><div class="nav-links"><div class="nav-previous"><a href="https://xn--90abhccf7b.xn--p1ai/raznoe/www-form-urlencoded-form-http-application-x-www-form-urlencoded-or-multipart-form-data.html" rel="prev">Www form urlencoded form: http — application/x-www-form-urlencoded or multipart/form-data?</a></div><div class="nav-next"><a href="https://xn--90abhccf7b.xn--p1ai/raznoe/kak-bystro-usnut-esli-ne-spitsya-nochyu-5-dejstvennyh-sposobov-kotorye-pomogut-zasnut-za-paru-minut.html" rel="next">Как быстро уснуть если не спится ночью: 5 действенных способов, которые помогут заснуть за пару минут</a></div></div></nav><div id="comments" class="comments-area"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/html/struktura-straniczy-html-struktura-html-straniczy.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://xn--90abhccf7b.xn--p1ai/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='43011' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div></main></div><div id="sidebar-primary" class="widget-area sidebar " role="complementary"><div class="sidebar-main"><div id="yandex_rtb_R-A-744004-7" class="yandex-adaptive classYandexRTB"></div> <script type="text/javascript"> window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo: "yandex_rtb_R-A-744004-7",blockId: "R-A-744004-7",pageNumber: 11,onError: (data) => { var g = document.createElement("ins"); g.className = "adsbygoogle"; g.style.display = "inline"; g.style.width = "300px"; g.style.height = "600px"; g.setAttribute("data-ad-slot", "9935184599"); g.setAttribute("data-ad-client", "ca-pub-1812626643144578"); g.setAttribute("data-alternate-ad-url", "https://chajnov.ru/back.php"); document.getElementById("yandex_rtb_[rtbBlock]").appendChild(g); (adsbygoogle = window.adsbygoogle || []).push({}); }})}); window.addEventListener("load", () => { var ins = document.getElementById("yandex_rtb_R-A-744004-7"); if (ins.clientHeight == "0") { ins.innerHTML = stroke2; } }, true); </script><section id="search-2" class="widget widget_search"><div class="zita-widget-content"><form role="search" method="get" id="searchform" action="https://xn--90abhccf7b.xn--p1ai/"><div class="form-content"> <input type="text" placeholder="search.." name="s" id="s" value=""/> <input type="submit" value="Search" /></div></form></div></section><section id="nav_menu-4" class="widget widget_nav_menu"><div class="zita-widget-content"><h2 class="widget-title">Рубрики</h2><div class="menu-2-container"><ul id="menu-2" class="menu"><li id="menu-item-19021" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19021"><a href="https://xn--90abhccf7b.xn--p1ai/category/css">Css</a></li><li id="menu-item-19022" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-19022"><a href="https://xn--90abhccf7b.xn--p1ai/category/html">Html</a></li><li id="menu-item-19023" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19023"><a href="https://xn--90abhccf7b.xn--p1ai/category/js">Js</a></li><li id="menu-item-19024" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19024"><a href="https://xn--90abhccf7b.xn--p1ai/category/adaptiv">Адаптивный сайт</a></li><li id="menu-item-19025" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19025"><a href="https://xn--90abhccf7b.xn--p1ai/category/verstk">Верстка</a></li><li id="menu-item-19026" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19026"><a href="https://xn--90abhccf7b.xn--p1ai/category/idei">Идеи</a></li><li id="menu-item-19028" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19028"><a href="https://xn--90abhccf7b.xn--p1ai/category/chego-nachat">С чего начать</a></li><li id="menu-item-19029" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19029"><a href="https://xn--90abhccf7b.xn--p1ai/category/sovety">Советы</a></li><li id="menu-item-19031" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19031"><a href="https://xn--90abhccf7b.xn--p1ai/category/shablon">Шаблоны</a></li><li id="menu-item-19027" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19027"><a href="https://xn--90abhccf7b.xn--p1ai/category/raznoe">Разное</a></li></ul></div></div></section></div></div></div></div><footer id="zita-footer"><div class="footer-wrap widget-area"><div class="bottom-footer"><div class="bottom-footer-bar ft-btm-one"><div class="container"><div class="bottom-footer-container"> © Компания <a href="http://вебджем.рф"> Вебджем.рф </a> 2009 - 2024 | Все права защищены.</a></div></div></div></div></div></footer> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://xn--90abhccf7b.xn--p1ai/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!-- noptimize --> <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> <!-- /noptimize --></body></html>