Структура html кода: Структура HTML-кода | htmlbook.ru

Структура HTML-кода | htmlbook.ru

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

Пример 4.1. Исходный код веб-страницы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Пример веб-страницы</title>
 </head>
 <body>
  <h2>Заголовок</h2>
  <!-- Комментарий -->
  <p>Первый абзац.</p>
  <p>Второй абзац.</p>
 </body>
</html>

Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под
именем example41.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть
файл (Ctrl+O). В диалоговом окне выбора документа укажите файл example41. html. В браузере откроется веб-страница, показанная на рис. 4.1.

Рис. 4.1. Результат выполнения примера

Далее разберем отдельные строки нашего кода.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Элемент <!DOCTYPE> предназначен для указания типа текущего документа —
DTD (document type definition, описание типа документа). Это необходимо, чтобы
браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML
существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText
Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но
различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал,
согласно какому стандарту отображать веб-страницу и необходимо в первой строке
кода задавать <!DOCTYPE>.

Существует несколько видов <!DOCTYPE>, они различаются в зависимости
от версии HTML, на которую ориентированы. В табл. 4.1. приведены основные
типы документов с их описанием.

Табл. 4.1. Допустимые DTD
DOCTYPE	Описание
HTML 4.01
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>	Строгий синтаксис HTML.
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>	Переходный синтаксис HTML.
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»>	В HTML-документе применяются фреймы.
HTML 5
<!DOCTYPE html>	В этой версии HTML только один доктайп.
XHTML 1.0
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www. w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>	Строгий синтаксис XHTML.
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>	Переходный синтаксис XHTML.
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Frameset//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd»>	Документ написан на XHTML и содержит фреймы.
XHTML 1.1
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1//EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»>	Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Как видите, никакого деления на виды это определение не имеет, поскольку синтаксис один и подчиняется четким правилам.

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

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

В дальнейшем будем применять преимущественно строгий <!DOCTYPE>, кроме
случаев, когда это оговаривается особо. Это позволит нам избегать типичных
ошибок и приучит к написанию синтаксически правильного кода.

Часто можно встретить код HTML вообще без использования <!DOCTYPE>,
веб-страница в подобном случае все равно будет показана. Тем не менее, может
получиться, что один и тот же документ отображается в браузере по-разному при
использовании <!DOCTYPE> и без него. Кроме того,
браузеры могут по-своему показывать такие документы, в итоге страница «рассыплется»,
т.е. будет отображаться совсем не так, как это требуется разработчику. Чтобы
не произошло подобных ситуаций, всегда добавляйте <!DOCTYPE> в начало документа.

 <html>

Тег <html> определяет начало HTML-файла, внутри него хранится заголовок
(<head>) и тело документа (<body>).

 <head>

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

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Тег <meta> является универсальным и добавляет целый класс возможностей,
в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять
кодировку страницы, добавлять ключевые слова, описание документа и многое другое.
Чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.

 <title>Пример веб-страницы</title>

Тег <title> определяет заголовок веб-страницы, это один из важных элементов
предназначенный для решения множества задач. В операционной системе Windows
текст заголовка отображается в левом верхнем углу окна браузера (рис. 4.2).

Рис. 4.2. Вид заголовка в браузере

Тег <title> является обязательным и должен непременно присутствовать
в коде документа.

</head>

Обязательно следует добавлять закрывающий тег </head>, чтобы показать,
что блок заголовка документа завершен.

<body>

Тело документа <body> предназначено для размещения тегов и содержательной
части веб-страницы.

<h2>Заголовок</h2>

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

 <!-- Комментарий -->

Некоторый текст можно спрятать от показа в браузере, сделав его комментарием.
Хотя такой текст пользователь не увидит, он все равно будет передаваться
в документе, так что, посмотрев исходный код, можно обнаружить скрытые заметки.

Комментарии нужны для внесения в код своих записей, не влияющих на вид страницы.
Начинаются они тегом <!— и заканчиваются тегом —>. Все, что находится
между этими тегами, отображаться на веб-странице не будет.

 <p>Первый абзац.</p>

Тег <p> определяет абзац (параграф) текста. Если закрывающего тега нет,
считается, что конец абзаца совпадает с началом следующего блочного элемента.

 <p>Второй абзац.</p>

Тег <p> является блочным элементом, поэтому текст всегда начинается
с новой строки, абзацы идущие друг за другом разделяются между собой отбивкой (так называется пустое пространство между ними). Это хорошо видно на рис. 4.1.

</body>

Следует добавить закрывающий тег </body>, чтобы показать, что тело документа
завершено.

</html>

Последним элементом в коде всегда идет закрывающий тег </html>.

Структура HTML-кода | WebReference

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

Пример 1. Исходный код веб-страницы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Пример веб-страницы</title>
 </head>
 <body>
  <h2>Заголовок</h2>
  <!-- Комментарий -->
  <p>Первый абзац. </p>
  <p>Второй абзац.</p>
 </body>
</html>

Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example2.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть файл (Ctrl+O). В диалоговом окне выбора документа укажите файл example2.html. В браузере откроется веб-страница, показанная на рис. 1.

Рис. 1. Результат примера в браузере

Далее разберём отдельные строки нашего кода.

<!DOCTYPE html>

Элемент <!DOCTYPE> (жарг. доктайп) предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях — современный HTML5 или устаревшие HTML4 и XHTML. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.

Поскольку мы в дальнейшем будем работать только с HTML5, то нам потребуется только один короткий и современный доктайп.

Мы упоминали, что имена элементов можно писать маленькими и большими буквами. К <!DOCTYPE> это правило тоже относится и его можно записывать по разному. Тем не менее, традиционно имя этого элемента пишется в верхнем регистре.

<html>

Открывающий тег <html> определяет начало HTML-документа, внутри него хранится «голова» (<head>) и «тело» документа (<body>).

<head>

Содержимое этого раздела не показывается напрямую на странице, за исключением элемента <title>. Внутри <head> могут располагаться следующие элементы: <base>, <link>, <meta>, <script>, <style> или <title>.

<meta charset="utf-8">

Элемент <meta> является универсальным и добавляет целый класс возможностей, в частности, с помощью метатега, как обобщённо называют этот элемент, можно изменить кодировку страницы, добавить ключевые слова, описание документа и многое другое, предназначенное для браузера или поисковых систем. В частности, чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.

<title>Пример веб-страницы</title>

Элемент <title> определяет название веб-страницы. В браузере оно отображается на текущей вкладке (рис. 2).

Рис. 2. Название веб-страниц в браузере

Элемент <title> является обязательным и должен непременно присутствовать в коде документа. Внутри разрешается писать только текст и никаких других элементов в <title> быть не должно. Но допустимо добавлять разные текстовые символы, например, так: <title>Adobe™ Photoshop®</title>.

</head>

Закрывающий тег </head> показывает, что «голова» документа завершена.

<body>

«Тело» документа <body> предназначено для размещения элементов и содержимого веб-страницы.

<h2>Заголовок</h2>

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

<!-- Комментарий -->

Некоторый текст можно спрятать от показа в браузере, сделав его комментарием. Хотя такой текст пользователь не увидит, он всё равно будет передаваться в документе, так что, посмотрев его исходный код, можно обнаружить скрытые заметки.

Комментарии нужны для внесения в код своих записей, не влияющих на вид страницы. Начинаются они тегом <!— и заканчиваются тегом —>. Всё, что находится между этими тегами, отображаться на веб-странице не будет.

<p>Первый абзац.</p>

Элемент <p> определяет абзац текста.

<p>Второй абзац.</p>

Элемент <p> является блочным, поэтому текст всегда начинается с новой строки, абзацы идущие друг за другом разделяются между собой отбивкой (так называется пустое пространство между ними). Это хорошо видно на рис. 1.

</body>

Следует добавить закрывающий тег </body>, чтобы показать, что «тело» документа завершено.

</html>

Последним элементом в коде всегда идёт закрывающий тег </html>.

Автор: Влад Мержевич

Последнее изменение: 10.01.2019

Курс HTML | Структура HTML-документа

ВВЕДЕНИЕ

Как мы все знаем, HTML — это язык Интернета. Он используется для разработки веб-страниц или, можно сказать, структурирования макетов страниц веб-сайта. HTML расшифровывается как HYPERTEXT MARKUP LANGUAGE, поскольку его полная форма предполагает, что это не язык программирования, а язык разметки. Таким образом, при выполнении HTML-кода мы не можем столкнуться ни с одной такой ошибкой. В реальном HTML код не компилировался и не интерпретировался, потому что HTML код отображался браузером. что похоже на компиляцию программы. Содержимое HTML обрабатывается через браузер для отображения содержимого HTML.

Навигация по курсу

СТРУКТУРА ДОКУМЕНТОВ HTML

Html использует предопределенные теги и атрибуты шрифта и атрибуты для указания браузеру, какой формат, стиль и средства отображать содержимое. Html — это язык, нечувствительный к регистру. Нечувствителен к регистру означает, что нет разницы между прописными и строчными буквами (прописными и строчными буквами), которые обрабатываются одинаково, например, «D» и «d» здесь одинаковы.
Обычно в HTML есть два типа тегов:

Парные теги : Эти теги идут парами. То есть они имеют как открывающий (< >), так и закрывающий () теги.
Пустые теги : Эти теги не требуют закрытия.

Ниже приведен пример тега () в HTML, который указывает браузеру выделить текст внутри него жирным шрифтом.

Теги и атрибуты: Теги — это отдельные элементы HTML-структуры, мы должны открывать и закрывать любой тег косой чертой, например

. Есть несколько вариантов с тегом, некоторые из них являются самозакрывающимися тегами, которые не требуется закрывать, а некоторые являются пустыми тегами, в которые мы можем добавить любые атрибуты. Атрибуты — это дополнительные свойства html-тегов, определяющие свойства любых html-тегов. то есть ширина, высота, элементы управления, циклы, ввод и автовоспроизведение. Эти атрибуты также помогают нам хранить информацию в метатегах, используя атрибуты имени, содержимого и типа. HTML-документы структурированы ниже:

Структура HTML-документа

HTML-документ в основном делится на две части:

HEAD : содержит информацию о HTML-документе. Например, заголовок страницы, версия HTML, метаданные и т. д.
BODY : содержит все, что вы хотите отобразить на веб-странице.

Структура HTML-документа

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

< html lang = "en" >

< Голова >

< Meta Charset = Meta = Meta = Meta = 0075 "UTF-8" >

< Meta HTTP-EQUIV = "X-UCOMPATIL" = "X-UCOMBATIL" = "X-UA-COMPATIL" = "X-UA = " x-UA = "X-UOA = " x-ua. >

< Мета Название = "Viewport" Содержание = " = = = = = = = = = = = = = = = = = = = = ". >

< meta name = "author" content = "Mr.X" >

< Мета Имя = "LinkedIn Profile" Содержание = "0005

< Meta Название = "Описание"

Содержание = "ATER PLATE TO TO DATER TO DATHER = " ATER PLATE.

< title >GeeksforGeeks title >

7 0 9 0075 head >

< body >

< h2 >GeeksforGeeks h2 >

< p >Портал информатики для гиков p >

body >

html >

Каждая веб-страница должна содержать этот код. Ниже приводится полное объяснение каждого из тегов, используемых в приведенном выше фрагменте HTML-кода:
: Этот тег используется для указания версии HTML. В настоящее время это говорит о том, что версия HTML 5.0
: является корневым элементом html. Это самый большой и основной элемент в полном языке html, все теги, элементы и атрибуты, заключенные в нем, или, можно сказать, обертка init, которая используется для структурирования веб-страницы. Тег является родительским тегом для тегов и , других тегов, заключенных в теги и. В теге мы используем атрибуты «lang» для определения языков html-страницы, например, здесь en представляет английский язык. некоторые из них: es = испанский, zh-Hans = китайский, fr = французский и el = греческий и т. д.
: Тег заголовка содержит метаданные, заголовок, CSS страницы и т. д. Данные, хранящиеся в теге, не отображаются пользователю, они просто записываются для справочных целей и в качестве водяного знака владельца.

  Примечание:  для лучшего понимания см. выше код html.
   </strong> = для хранения имени веб-сайта или отображаемого контента.
  <strong> <ссылка> </strong> = Чтобы добавить/связать файл css (каскадная таблица стилей).
 <strong> <мета> </strong> = 1. для хранения данных о сайте, организации,
Создатель-владелец
            2. для адаптивного сайта через атрибуты
            3. указать совместимость html с браузером
 <strong> <script></strong>=добавить файл javascript.</pre><p><strong><body>:</strong>Тег body используется для включения всех данных веб-страницы от текстов до ссылок.Весь контент,который вы видите в браузере,содержится в этом элементе.Следующие теги и элементы,используемые в теле.</p><p>   1.</p><h2><span class="ez-toc-section"id="i"></span>,<span class="ez-toc-section-end"></span></h2><h3><span class="ez-toc-section"id="i-2"></span>,<span class="ez-toc-section-end"></span></h3><h4><span class="ez-toc-section"id="%D0%B4%D0%BE"></span>до<span class="ez-toc-section-end"></span></h4><h6></h6><p>   2. </p><p>   3. </p><div>и<span><br/>   4. <b>,<i>и<u> <br/>   5. </p><li>,<ul>и</p><ol>.<br/>   6. <img>,<audio>,<video>и<iframe><br/>   7. </p><table><th>,</p><thead>и</p><tr>.<img class="lazy lazy-hidden"loading='lazy'src="//imacrosoft.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><br/>   8. </p><form> <br/>   9. <label>и<input>другие……….<br/><strong>Дополнительные сведения о структуре HTML-документа см.на странице 9.0004: <br/> </p><ul><li>https:</ul><p>HTML является основой веб-страниц и используется для разработки веб-страниц путем структурирования веб-сайтов и веб-приложений.Вы можете изучить HTML с нуля,следуя этому руководству по HTML и примерам HTML.</p><p></p><p>Статьи по теме</p><h2><span class="ez-toc-section"id="%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_HTML5-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B"></span>Структура HTML5-страницы<span class="ez-toc-section-end"></span></h2><p>Базовая HTML-страница начинается с объявления типа документа или типа документа.Это способ сообщить браузеру,какой это тип документа.<br/>Тип документа всегда является первым элементом в начале любого HTML-файла.Затем следуют разделы и подразделы,каждый из которых,возможно,имеет свой заголовок и подзаголовок.Эти элементы заголовков и разделов помогают читателю понять смысл содержания.</p><p>Говоря о прошлом,можно сказать,что раньше объявление doctype было очень неприятным и трудным для запоминания.<img class="lazy lazy-hidden"loading='lazy'src="//imacrosoft.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></p><p>В качестве иллюстрации см.объявление HTML 4.01 Strict DTD:</p><pre><!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/ strict.dtd"></pre><p>HTML5 сделал больше!Лучшее решение на данный момент-это короткое объявление:</p><pre><!Doctype html></pre><p>Тип документа может быть написан строчными,прописными или смешанными регистрами.Как вы заметили,в объявлении отсутствует цифра «5».Хотя эта веб-разметка известна как «HTML5».</p><p>Элемент<html>следует за информацией о типе документа,которая используется для информирования браузера о том,что это HTML-документ.Вы можете использовать язык<br/>со значением<strong>"en"</strong>,чтобы указать,что документ на английском языке.Но в настоящее время даже атрибут lang не нужен для проверки или правильной работы документа.</p><p>Не забудьте включить закрывающий тег</html>:</p><pre><!DOCTYPE HTML><html язык="ru"></html></pre><p>Следующая часть — это раздел<head>.Элемент<head>содержит метаданные(название документа,набор символов,стили,ссылки,скрипты),конкретную информацию о веб-странице,которая не отображается пользователю.<img class="lazy lazy-hidden"loading='lazy'src="//imacrosoft.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif"data-lazy-type="image"data-src='/800/600/http/image3.slideserve.com/5998561/slide5-l.jpg'/><noscript><img loading='lazy'src='/800/600/http/image3.slideserve.com/5998561/slide5-l.jpg'/></noscript></p><p>Элемент<meta>используется для указания метаданных,чтобы предоставить браузерам и поисковым системам техническую информацию о веб-странице.</p><p>Например,если вы хотите указать автора вашего документа,вы можете использовать элемент<meta>следующим образом:</p><pre><meta name="Author"content="W3docs"></pre><p>Чтобы определить кодировку символов для документа,вам необходимо установить атрибут charset со значением<strong>"utf-8"</strong>почти во всех случаях.<strong>UTF-8</strong>— кодировка символов по умолчанию для HTML5.</p><p>Узнайте больше о кодировке UTF-8.</p><pre><meta charset="utf-8"></pre><p>Используйте элемент<title>для определения заголовка вашего документа.</p><pre><title>W3Docs — изучайте языки программирования онлайн.

Далее идет элемент,который устанавливает связь между текущим документом и внешним ресурсом.Как правило,он используется для ссылки на внешнюю таблицу стилей CSS.

Обязательными атрибутами для элементаявляются rel,href и type.

Теперь вы можете увидеть весь раздел:

W3Docs — изучайте языки программирования онлайн.

Элемент

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

...

Между тегами body могут быть разные элементы, которым можно придать стиль с помощью свойств CSS. Просто добавьте селектор идентификатора или класса в свой HTML-элемент и в разделе