Хотя основа документа 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.
Первая строка, начинающаяся с «
<!DOCTYPE…» говорит браузеру, что вы знаете, что делаете. Возможно в данный момент вы в действительности не представляете, что вы делаете, однако данная команда важна и стоит ее всегда писать. Если этого не сделать, то браузеры переключатся в режим «обратной совместимости» и будут действовать весьма своеобразным образом. Сейчас не стоит особенно беспокоиться об этой команде и ее значимости для структуры документа 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> — это тег <title>. В нём задаётся заголовок страницы, который отображается во вкладках браузера. По заголовку должно быть понятно, о чём эта страница, даже когда она не открыта в браузере, а отображается в результатах поиска или в браузерных закладках.
<head>
<title>Тренажёры — HTML Academy</title>
</head>
Ещё один важный тег, располагающийся внутри <head> это тег <meta>. Он одиночный, то есть не требует парный закрывающий тег в конце. С помощью <meta> можно сообщать браузеру, поисковому роботу или другому устройству различную служебную информацию (или метаинформацию) о вашем сайте: кодировку текста, описание контента и так далее. Для этого используются теги
<meta> с разными атрибутами и их значениями.
Кодировка текста HTML-страницы указывается с помощью атрибута charset:
<meta charset="название кодировки">
Самая распространённая современная кодировка — utf-8.
Перечень ключевых слов задаётся тегом <meta>, у которого атрибут name имеет значение keywords. Ключевые слова (самые важные слова из содержания страницы) перечисляются в атрибуте content через запятую:
находятся те теги, которые отображаются на странице. Например, тег <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-документа. Тег HTML состоит из левой угловой скобки (<), имени тега (например, «h2») и правой угловой скобки (>). Теги обычно парные, так что у вас есть тег в начале и в конце раздела документа ( и 9Например, 0038 .) Все конечные теги выглядят так же, как и начальный тег, за исключением косой черты (/), которая предшествует имени тега в квадратных скобках. Пара тегов определяет, где эффект тега должен начинаться и заканчиваться на странице. Текущий веб-стандарт от W3C предполагает, что все имена тегов должны быть строчными.
Атрибуты
Некоторые теги могут также включать атрибут, представляющий собой дополнительную информацию, включенную только в начальный тег. Атрибуты специфичны для каждого тега, хотя есть много общего. Некоторые теги должны иметь атрибут для правильной работы. Пример атрибута показан в теге первого абзаца, показанном в примере выше ( .) Согласно веб-стандартам все параметры атрибутов должны заключаться в кавычки. Например, это неправильно:
Закрывающие теги
Кроме того, все вложенные теги HTML должны заканчиваться в порядке, обратном их созданию. Например, это неверно: Этот заголовок выделен жирным шрифтом и курсивом Поскольку тег был создан первым, он должен быть закрыт последним, а поскольку тег был создан последним, его необходимо закрыть первым. Все теги должны открываться и закрываться друг в друге, как набор русских матрешек.
Вот правильный пример: Этот заголовок выделен жирным шрифтом и курсивом
Размещение тега
На веб-странице некоторые теги HTML необходимы для правильного отображения страницы. Это теги , , </strong> </code> и <code> <strong><body> </strong> </code> . Теги <code> <strong><html> </strong> </code> должны начинать и заканчивать документ, а теги <code> <strong><head> </strong> </code> должны стоять перед тегами <code> <strong><body> </strong> </code>. Кроме того, 9Теги 0015 <strong><title> </strong> </code> должны находиться внутри тегов <code> <strong><head> </strong> </code>. Ниже приводится простое объяснение каждого из этих тегов:</p><ul><li> <code> <strong><html> </strong><center><ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-1812626643144578"
data-ad-slot="4491286225"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center> </code> Этот тег и его закрывающий тег должны быть первым тегом (после Doctype) и последним тегом в вашем документе. Он сообщает браузеру, что все, что содержится в этих тегах, следует рассматривать как информацию в HTML-коде и соответственно анализировать браузером.</li><li> <code> <strong><head> </strong> </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/images.myshared.ru/17/1056026/slide_5.jpg' /><noscript><img loading='lazy' src='/800/600/http/images.myshared.ru/17/1056026/slide_5.jpg' /></noscript> В теги <code><head> </code> можно поместить много разных тегов, но в нашем примере выше у нас есть только обязательный тег <code><title> </code> .</li><li> <code> <strong><title> </strong> </code> Это идентификатор всего содержимого документа. Это не отображается на вашей веб-странице, но (обычно) в верхней части строки заголовка окна вашего браузера. Например, эта веб-страница <code><title> </code> — это «ETS — Основы HTML — Структура», как вы можете видеть, взглянув на заголовок этого окна браузера. Этот заголовок также отображается в истории браузера и в закладках, поэтому лучше использовать этот тег описательно, чтобы он был понятен вне контекста.</li><div id="yandex_rtb_1" class="yandex-adaptive classYandexRTB"></div> <script type="text/javascript">if(rtbW>=960){var rtbBlockID="R-A-744204-3";}
else{var rtbBlockID="R-A-744204-5";}
window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo:"yandex_rtb_1",blockId:rtbBlockID,pageNumber:1,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_1").appendChild(g);(adsbygoogle=window.adsbygoogle||[]).push({});}})});window.addEventListener("load",()=>{var ins=document.getElementById("yandex_rtb_1");if(ins.clientHeight =="0"){ins.innerHTML=stroke3;}},true);</script> <li> <code> <strong><body> </strong> </code> Этот тег содержит все элементы вашего документа, которые будут отображаться в окне браузера. Это содержимое вашего документа, и именно здесь будет размещено большинство тегов HTML.</li></ul><p> Существует множество других тегов 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/images.myshared.ru/5/489777/slide_16.jpg' /><noscript><img loading='lazy' src='/800/600/http/images.myshared.ru/5/489777/slide_16.jpg' /></noscript></p><h2><span class="ez-toc-section" id="_HTML-3"> Структура HTML и теги </span></h2><p> HTML использует теги для управления структурой веб-страницы. Смотрите, как Мэтт Хоган объясняет больше.</p><p></p><p> Просмотреть стенограмму</p><p> 2.6</p><p><center><ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1812626643144578"
data-ad-slot="3076124593"
data-ad-format="auto"
data-full-width-responsive="true"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center> Теперь пришло время попробовать изменить внешний вид контента на вашей веб-странице. Давайте посмотрим на списки. На этой веб-странице фан-клуба Raspberry Pi у нас есть абзац, описывающий технические характеристики Raspberry Pi 4. Это довольно сложно читать. Лучше поместим его в какой-нибудь список. У нас может быть два вида списков. Есть неупорядоченный список, который возвращает маркеры, и упорядоченный список, который возвращает числа. Поэтому для этого нам, вероятно, нужны маркеры. Итак, мы должны указать — поместите в HTML то, что мы собираемся поместить в неупорядоченный список, ul.</p><p> 51</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/cf3.ppt-online.org/files3/slide/o/O7VBfu4yk1oNaAMQGRtT8dqsncCzjlZ0i23K9m/slide-4.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf3.ppt-online.org/files3/slide/o/O7VBfu4yk1oNaAMQGRtT8dqsncCzjlZ0i23K9m/slide-4.jpg' /></noscript> Итак, у нас есть тег li. Это дает нам конец тега li, который мы можем захватить. И затем мы можем перетащить его в конец этой точки. Итак, это будет наша первая точка здесь. И избавься от этой запятой. И мы можем сделать еще один для следующего пункта списка.</p><p> 92,5</p><p> Здесь. Перетащите его в конец этой точки. Избавьтесь от этой запятой. И вы можете видеть справа, у нас есть два маркера. Вы также можете продолжать и делать – и добавлять в этот список. Если вы хотите сделать упорядоченный список, все, что нам нужно сделать, это изменить тег ul на тег ol.</p><p> 121.9</p><p> И вы можете видеть, что справа он меняется на цифры 1 и 2. Мы также можем изменить внешний вид текста на нашей веб-странице. Поэтому, если мы хотим выделить это слово фантастическим курсивом, мы можем использовать тег em.</p><p> 142.2</p><p> И мы можем просто перетащить конец тега em в конец фантастического. И вы можете увидеть его выделенным курсивом здесь, в нашем предварительном просмотре. Мы также можем выделить текст, используя сильный тег.<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/images.myshared.ru/4/281676/slide_3.jpg' /><noscript><img loading='lazy' src='/800/600/http/images.myshared.ru/4/281676/slide_3.jpg' /></noscript></p><p> 161,9</p><p> Итак, мы можем ввести сильный тег, взять конечный тег и перетащить его в конец Raspberry Pi. И вы видите это жирным шрифтом справа.</p><p> 178.1</p><p> Отлично. Также есть место для цитаты. Итак, вот цитата с сайта Raspberry Pi. Но это выглядит так же, как и остальная часть страницы. Это не означает, что оно пришло откуда-то еще. Таким образом, мы можем использовать тег блочной цитаты. Итак, давайте найдем его в HTML.</p><p> 206,3</p><p> Вот он. Теперь мы можем вставить тег блочной цитаты. И это фактическая цитата блока слов. И это просто отрежет конечный тег, убедитесь, что вы получили все, что вам нужно.</p><p> 225.1</p><p> Вот и конец этой линии.</p><p> 230.9</p><p> И вставьте его. И вы можете видеть на предварительном просмотре здесь, теперь он имеет отступ. Таким образом, это создает впечатление присутствия откуда-то еще.</p><p> 242,5</p><p> Здесь также есть место для изображения. Вот Raspberry Pi 4, но у нас пока нет изображения. Итак, нам нужно откуда-то получить изображение.<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/z/zrsNHPneUg3L6AJWZ795XaI1woqCOkSdcvyjtE/slide-27.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/z/zrsNHPneUg3L6AJWZ795XaI1woqCOkSdcvyjtE/slide-27.jpg' /></noscript> Итак, я искал изображение и нашел этот Raspberry Pi 4. И нам нужно скопировать URL-адрес. Итак, нам нужно взять это, скопировать. Итак, теперь нам нужно вставить этот URL-адрес в соответствующее место на нашей веб-странице. Итак, вот Raspberry Pi 4. Чуть ниже мы можем вставить URL-адрес. Но что? Он просто дает нам URL-адрес в данный момент. На самом деле это не дает нам изображения. Поэтому нам нужно использовать тег img.</p><p> 290.1 </p><p> Так рис. И мы также— мы должны сказать ему, откуда взялся источник. Итак – и тогда равняется.</p><p> 303.7</p><p> И тогда нужно исходник брать в кавычки.</p><p> 310</p><p> И нам нужно убрать этот ярлык. Итак, теперь мы видим, что у нас есть образ Raspberry Pi, но он огромен. Поэтому нам нужно сделать его немного больше подходящего размера для нашей веб-страницы. Поэтому нам нужно добавить сюда некоторые атрибуты ширины и высоты. Итак, займемся шириной. Скажем, 200. И тогда у нас также может быть атрибут высоты, который, скажем, также равен 200.<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/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> 346.1</p><p> Теперь мы видим, что у нас есть Raspberry Pi 4 действительно подходящего размера для нашей веб-страницы. Теперь пришло время попробовать. Попробуйте изменить внешний вид своей веб-страницы с помощью этих тегов и поделитесь ссылкой на свою безделушку в разделе комментариев. Если вы застряли, обязательно задавайте вопросы и помогайте друг другу. Я с нетерпением жду, чтобы увидеть, что вы создаете.</p><p> В этой статье вы узнаете об основной структуре веб-страницы и увидите больше тегов, которые можно использовать на странице фан-клуба Raspberry Pi.</p><p> Сравните приведенную ниже базовую структуру HTML со своей веб-страницей фан-клуба Raspberry Pi:</p><pre> <!DOCTYPE html>
<html>
<голова>
<title>Название страницы
<тело>
Возможно в данный момент вы в действительности не представляете, что вы делаете, однако данная команда важна и стоит ее всегда писать. Если этого не сделать, то браузеры переключатся в режим «обратной совместимости» и будут действовать весьма своеобразным образом. Сейчас не стоит особенно беспокоиться об этой команде и ее значимости для структуры документа HTML. Подробнее о типах документов вы узнаете несколько позже. А пока просто запомните, что эту команду следует включать в начало любой веб-страницы.
Все теги в структуре документа HTML 4.01 (XHTML) должны быть закрыты. Хотя более ранние стандарты прохладно смотрели на то, что некоторые теги оставались открытыми, новые стандарты языка требуют, чтобы абсолютно все теги были закрыты. В любом случае следование этому правилу будет хорошей привычкой.
Все это выглядит следующим образом:
Также внутри него подключаются внешние ресурсы, например, стили. Содержимое этого тега не отображается на странице напрямую. А в теге 
Он одиночный, то есть не требует парный закрывающий тег в конце. С помощью 
Например, тег 
Но для корректного отображения во всемирной паутине HTML-документ должен быть правильно структурирован. Любое отклонение от этой структуры приведет к тому, что многие веб-браузеры будут отображать содержимое неправильно или вообще не отображать. Кроме того, все HTML-документы должны иметь суффикс «html», чтобы HTML-код правильно отображался веб-браузером.
Атрибуты специфичны для каждого тега, хотя есть много общего. Некоторые теги должны иметь атрибут для правильной работы. Пример атрибута показан в теге первого абзаца, показанном в примере выше ( 
Это теги 
Также обратите внимание, что некоторые теги вложены в другие теги; в приведенном ниже примере