Структура HTML документа
Хотя основа документа HTML – простой текст, чтобы создать настоящий HTML документ, необходимо кое-что еще. А именно задать структуру документа HTML.
Структура документа HTML состоит из тегов, которые окружают содержимое и придают ему определенное техническое значение.
Измените свой документ следующим образом:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <body> Это моя первая веб-страница </body> </html>
Теперь сохраните документ, вернитесь в браузер и выберите команду «Обновить» (это перезагрузит вашу веб-страницу).
Внешний вид страницы никак не изменился. Однако предназначение HTML – определение значения для содержимого, а не внешнего представления, и данный пример показал нам несколько фундаментальных элементов веб-страницы, задающих базовую структуру документа HTML.
Первая строка, начинающаяся с «
Возможно в данный момент вы в действительности не представляете, что вы делаете, однако данная команда важна и стоит ее всегда писать. Если этого не сделать, то браузеры переключатся в режим «обратной совместимости» и будут действовать весьма своеобразным образом. Сейчас не стоит особенно беспокоиться об этой команде и ее значимости для структуры документа HTML. Подробнее о типах документов вы узнаете несколько позже. А пока просто запомните, что эту команду следует включать в начало любой веб-страницы.Вернемся к нашему примеру. Следующая команда в структуре документа HTML, команда <html>, — открывающий тег, который прекращает все недомолвки и прямо говорит браузеру, что все, что между ним и закрывающим тегом </html>, является HTML документом. Все что находится между <body> и </body>
является основным содержимым веб-страницы и выводится в окне браузера.Закрывающие теги
Теги </body> и </html> закрывают соответствующие открывающие теги.
Все теги в структуре документа HTML 4.01 (XHTML) должны быть закрыты. Хотя более ранние стандарты прохладно смотрели на то, что некоторые теги оставались открытыми, новые стандарты языка требуют, чтобы абсолютно все теги были закрыты. В любом случае следование этому правилу будет хорошей привычкой.
Не у всех тегов есть соответствующие закрывающие теги (вроде <html></html>). Некоторые теги, которые не заключают в себе контент, закрывают сами себя. Например, тег разрыва строки выглядит следующим образом: <br />. Мы вернемся к этому примеру позднее. Все что нужно запомнить, это то, что все теги в структуре документа HTML должны быть закрыты, и большинство из них (те которые содержат какой-нибудь контент) имеют следующую форму: открывающий тег → контент → закрывающий тег.
Атрибуты
У тегов также могут быть атрибуты. Атрибуты – это определенная дополнительная информация. Атрибуты определяются в открывающем теге, а их значения всегда заключаются в кавычки.
Все это выглядит следующим образом:
<тег атрибут="значение">контент</тег>
Подробнее о тегах с атрибутами мы поговорим немного позже.
Элементы
Предназначение тегов – обозначать начало и конец элемента структуры документа HTML. Элементы же это кирпичики, из которых складывается веб-страница. Так, например, все что находится между тегами <body> и </body>, включая сами эти теги, является элементом body.
Конспект «Структура 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 – Инженерно-технические услуги
Обзор
Файлы HTML (HyperText Markup Language) — это, по сути, простые текстовые файлы, которые можно создать в любом текстовом редакторе.
Но для корректного отображения во всемирной паутине HTML-документ должен быть правильно структурирован. Любое отклонение от этой структуры приведет к тому, что многие веб-браузеры будут отображать содержимое неправильно или вообще не отображать. Кроме того, все HTML-документы должны иметь суффикс «html», чтобы HTML-код правильно отображался веб-браузером.
Нормотворческий орган Сети, люди, которые определяют эту структуру, — это Консорциум Всемирной Паутины (W3C). Веб-браузеры должны максимально точно следовать этим стандартам. По большей части все они работают хорошо, но некоторые браузеры не достигают этой цели (Internet Explorer является худшим виновником). Тем не менее, при создании веб-страницы лучше всего следовать текущим веб-стандартам. Это обеспечит просмотр вашего сайта в как можно большем количестве браузеров. Все HTML-инструкции на этом сайте ETS соответствуют стандартам W3C.
Пример
Это заголовок
Это абзац, центрированный на странице.
А это второй абзац, выделенный жирным шрифтом.
Этот код создает страницу, которая выглядит следующим образом:
В приведенном выше примере вы можете увидеть использование тегов, которые являются неотъемлемой частью HTML-документа. Тег HTML состоит из левой угловой скобки (<), имени тега (например, «h2») и правой угловой скобки (>). Теги обычно парные, так что у вас есть тег в начале и в конце раздела документа (
и 9Например, 0038 .) Все конечные теги выглядят так же, как и начальный тег, за исключением косой черты (/), которая предшествует имени тега в квадратных скобках. Пара тегов определяет, где эффект тега должен начинаться и заканчиваться на странице. Текущий веб-стандарт от W3C предполагает, что все имена тегов должны быть строчными.Атрибуты
Некоторые теги могут также включать атрибут, представляющий собой дополнительную информацию, включенную только в начальный тег.
Атрибуты специфичны для каждого тега, хотя есть много общего. Некоторые теги должны иметь атрибут для правильной работы. Пример атрибута показан в теге первого абзаца, показанном в примере выше ( .) Согласно веб-стандартам все параметры атрибутов должны заключаться в кавычки. Например, это неправильно:
Закрывающие теги
Кроме того, все вложенные теги HTML должны заканчиваться в порядке, обратном их созданию. Например, это неверно:
Этот заголовок выделен жирным шрифтом и курсивом Поскольку тег был создан первым, он должен быть закрыт последним, а поскольку тег был создан последним, его необходимо закрыть первым. Все теги должны открываться и закрываться друг в друге, как набор русских матрешек. Вот правильный пример:
Этот заголовок выделен жирным шрифтом и курсивом Размещение тега
На веб-странице некоторые теги HTML необходимы для правильного отображения страницы.
Это теги , ,
Это заголовок
Это абзац.
Любая информация в тегах скрыта и используется браузерами и поисковыми роботами; это известно как метаданные. Также обратите внимание, что некоторые теги вложены в другие теги; в приведенном ниже примере </code> вложен внутри <code><head> </code> и <code><head> </code> вложен внутри <code><html> </code> . На изображении ниже показано, как элементы могут существовать внутри других элементов:</p><p></p><p></p><p></p><p> В таблице ниже описаны теги, которые использовались в приведенной выше базовой структуре HTML:</p><p></p><p></p><table><thead><tr><th> Тег</th><th> Описание</th></tr></thead><tbody><tr><td> <!DOCTYPE></td><td> Это объявление для отображения типа документа; это помогает веб-браузеру правильно отображать веб-страницу</td></tr><tr><td> <название> </название></td><td> Определяет заголовок веб-страницы, который будет отображаться на вкладке веб-браузера</td></tr><tr><td><html></html></td><td> Это показывает начало и конец файла HTML</td></tr><tr><td> <голова> </голова></td><td> Это дает информацию о файле (метаданные)</td></tr><tr><td> <тело> </тело></td><td> Определяет основной корпус; все, что находится внутри тегов body, отображается на веб-странице</td></tr><tr><td><h2></h2></td><td> Определяет заголовок; Теги от<h2><span class="ez-toc-section" id="i-11"> до </span></h2><h6><span class="ez-toc-section" id="i-12"> используются для заголовков разного размера, где </span></h6><h2><span class="ez-toc-section" id="i-13"> самый большой, а </span></h2><h6><span class="ez-toc-section" id="i-14"> самый маленький </span></h6></td></tr><tr><td><p></p></td><td> Это определяет параграф</td></tr></tbody></table><p></p><h4><span class="ez-toc-section" id="i-15"> Заголовки и списки </span></h4><p></p><p> Заголовки используются для начала нового раздела, чтобы помочь читателю понять цель этой части веб-страницы.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/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/h/hCrOMGADLcevZdSsl38izgjXUynB6Na7xRf9HW/slide-20.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf2.ppt-online.org/files2/slide/h/hCrOMGADLcevZdSsl38izgjXUynB6Na7xRf9HW/slide-20.jpg' /></noscript></p><p></p><p> Вы используете заголовки <code><h3></h3></code> и <code><h4></h4></code> для представления различных разделов, таких как заголовок «Raspberry Pi 4», который находится внутри раздела «Фан-страница Raspberry Pi» на веб-странице фан-клуба Raspberry Pi. Думайте о <code><h3></h3></code> заголовках как о главах книги. Эти отдельные разделы также могут использовать более конкретные заголовки ( <code><h4></h4></code> тегов, затем <code><h5></h5> </code> тегов и т. д.), чтобы ввести подразделы.</p><p></p><p> <strong> Измените теги заголовков на веб-странице фан-клуба Raspberry Pi, чтобы они были более полезными для читателя. </strong></p><p></p><p> Вы также можете использовать список на веб-странице фан-клуба Raspberry Pi, чтобы разбить абзац на ключевые моменты. Это может выделить пункты для читателя.</p><p></p><p> Чтобы создать список на вашей веб-странице, у вас есть два варианта: неупорядоченный список <code><ul> </code> , который дает маркеры, или упорядоченный список <code><ol> </code> , который дает нумерованные пункты.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf.ppt-online.org/files1/slide/w/WrpDXwbQykLB4nAP75Fm0CEHtNi63uIavjSzgTqUs/slide-2.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files1/slide/w/WrpDXwbQykLB4nAP75Fm0CEHtNi63uIavjSzgTqUs/slide-2.jpg' /></noscript> Каждый элемент в списке должен содержаться в пределах <code><li> </code> тегов:</p><p></p><pre> <ул>
<li>Маркированный список</li>
<li>Маркированный список</li>
</ul>
</pre><p></p><p> <strong> Создайте список на веб-странице фан-клуба Raspberry Pi. </strong> <br/> <strong> Добавьте <code> тегов <em> </code> для выделения курсивом и <code> <strong> </code>, чтобы выделить текст на вашей странице, чтобы выделить ключевые моменты. </strong></p><p></p><pre> <em>Выделено курсивом.</em>
</pre><p></p><h4><span class="ez-toc-section" id="i-16"> Изображения и цитаты </span></h4><p></p><p> Если вы хотите показать логотип Raspberry Pi или помочь читателю понять, что вы делаете на своей странице, вы можете добавить изображение.</p><p></p><p> Тег <code> <img> </code> используется для определения элемента изображения на веб-странице. Он использует <code> src </code> атрибут для указания источника изображения — где оно хранится. Используемый ниже тег <code> <img> </code> взят с веб-страницы фан-клуба Raspberry Pi:</p><p></p><pre> <img class="lazy lazy-hidden" decoding="async" src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="https://sandbox.<img class="lazy lazy-hidden" decoding="async" loading='lazy' src="//russia-dropshipping.ru/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 decoding="async" src="https://sandbox.<img decoding="async" loading='lazy' src='/800/600/http/impuls-web.ru/wp-content/uploads/2019/04/html-struktura-2.jpg' /></noscript> trinket-shell.com/5550343ee6c144dc/raspberrypi.png">
</pre><p></p><p> В приведенном выше HTML-коде используется унифицированный указатель ресурсов (URL), чтобы указать, где хранится изображение — в данном случае на веб-сайте Trinket.</p><p></p><p> <code> <цитата> 9Теги 0030 используются, когда вы хотите привести цитату из другого источника; это полезно, когда вы хотите сделать резервную копию точки, которую вы делаете. Это создаст отступ для текста и сообщит читателю, что он отличается от остального текста.</p><p></p><p> Вы использовали много новых тегов, поэтому я собрал их в этой таблице:</p><p></p><p></p><table><thead><tr><th> Тег</th><th> Описание</th></tr></thead><tbody><tr><td><ul></ul></td><td> Определяет неупорядоченный список, отображаемый в виде маркированного списка</td></tr><tr><td> <ол> </ол></td><td> Определяет упорядоченный список, отображаемый в виде нумерованного списка</td></tr><tr><td><li></li></td><td> Определяет точку списка</td></tr><tr><td> <блочная цитата> </блочная цитата></td><td> Определяет раздел, цитируемый из другого источника</td></tr><tr><td> <img></td><td> Определяет изображение; использует атрибут <code> src </code> внутри тега для указания источника изображения</td></tr></tbody></table><p></p><p> <strong> Добавьте соответствующее изображение на свою веб-страницу фан-клуба Raspberry Pi, добавив элемент <code> <img> </code>, как показано в примере HTML выше.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/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/r/R07Zmy2SNxzsibYAETaveVCLdwBkPcK3joDf6X/slide-5.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/r/R07Zmy2SNxzsibYAETaveVCLdwBkPcK3joDf6X/slide-5.jpg' /></noscript></div><footer class="entry-footer"> <span><i class="fa fa-folder"></i> <a href="https://russia-dropshipping.ru/category/raznoe" rel="category tag">Разное</a></span><span><i class="fa fa-link"></i><a href="https://russia-dropshipping.ru/raznoe/struktura-tega-html-struktura-html-dokumenta.html" rel="bookmark"> permalink</a></span></footer></article><nav class="navigation post-navigation clearfix" role="navigation"><h1 class="screen-reader-text">Post navigation</h1><div class="nav-links"><div class="nav-previous"><a href="https://russia-dropshipping.ru/raznoe/oformlenie-instagrama-informacziya-oformlenie-instagram-kak-krasivo-oformit-akkaunt-i-shapku-profilya.html" rel="prev"><i class="fa fa-long-arrow-left"></i> Оформление инстаграма информация: Оформление Инстаграм: как красиво оформить аккаунт и шапку профиля</a></div><div class="nav-next"><a href="https://russia-dropshipping.ru/raznoe/poisk-gugla-google-search-console.html" rel="next">Поиск гугла: Google Search Console <i class="fa fa-long-arrow-right"></i></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="/raznoe/struktura-tega-html-struktura-html-dokumenta.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://russia-dropshipping.ru/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='51811' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div></main></div><div id="secondary" class="widget-area" role="complementary"><aside id="search-2" class="widget widget_search"><form role="search" method="get" class="search-form" action="https://russia-dropshipping.ru/"> <label> <span class="screen-reader-text">Найти:</span> <input type="search" class="search-field" placeholder="Поиск…" value="" name="s" /> </label> <input type="submit" class="search-submit" value="Поиск" /></form></aside><aside id="categories-3" class="widget widget_categories"><h3 class="widget-title">Рубрики</h3><ul><li class="cat-item cat-item-7"><a href="https://russia-dropshipping.ru/category/seo">Seo</a></li><li class="cat-item cat-item-15"><a href="https://russia-dropshipping.ru/category/instrument-2">Инструмент</a></li><li class="cat-item cat-item-9"><a href="https://russia-dropshipping.ru/category/instrument">Инструменты</a></li><li class="cat-item cat-item-16"><a href="https://russia-dropshipping.ru/category/program-2">Програм</a></li><li class="cat-item cat-item-4"><a href="https://russia-dropshipping.ru/category/program">Программы</a></li><li class="cat-item cat-item-14"><a href="https://russia-dropshipping.ru/category/prodvizh-2">Продвиж</a></li><li class="cat-item cat-item-5"><a href="https://russia-dropshipping.ru/category/prodvizh">Продвижение</a></li><li class="cat-item cat-item-3"><a href="https://russia-dropshipping.ru/category/raznoe">Разное</a></li><li class="cat-item cat-item-13"><a href="https://russia-dropshipping.ru/category/semant-2">Семант</a></li><li class="cat-item cat-item-8"><a href="https://russia-dropshipping.ru/category/semant">Семантика</a></li><li class="cat-item cat-item-17"><a href="https://russia-dropshipping.ru/category/sovet-2">Совет</a></li><li class="cat-item cat-item-11"><a href="https://russia-dropshipping.ru/category/sovet">Советы</a></li><li class="cat-item cat-item-12"><a href="https://russia-dropshipping.ru/category/sozdan-2">Создан</a></li><li class="cat-item cat-item-6"><a href="https://russia-dropshipping.ru/category/sozdan">Создание</a></li><li class="cat-item cat-item-18"><a href="https://russia-dropshipping.ru/category/sxem-2">Схем</a></li><li class="cat-item cat-item-10"><a href="https://russia-dropshipping.ru/category/sxem">Схемы</a></li></ul></aside></div></div><div id="sidebar-footer" class="footer-widget-area clearfix" role="complementary"><div class="container"></div></div><footer id="colophon" class="site-footer" role="contentinfo"><div class="site-info"><div class="container"> Copyright © 2025 <font style="text-align:left;font-size:15px;"><br> Дропшиппинг в России.<br> Сообщество поставщиков дропшипперов и интернет предпринимателей.<br>Все права защищены.<br>ИП Калмыков Семен Алексеевич. ОГРНИП: 313695209500032.<br>Адрес: ООО «Борец», г. Москва, ул. Складочная 6 к.4.<br>E-mail: mail@russia-dropshipping.ru. <span class="phone-none">Телефон: +7 (499) 348-21-17</span></font></div></div></footer></div> <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://russia-dropshipping.ru/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>
Также обратите внимание, что некоторые теги вложены в другие теги; в приведенном ниже примере