Разное

Html документ: HTML – Структура html-документа и теги для его создания

01.01.2023

HTML – Структура html-документа и теги для его создания

HTML – расшифровывается как «язык гипертекстовой разметки» (англ. HyperText Markup Language), который является наиболее широко используемым языком для написания веб-страниц.

  • Гипертекст относится к способу связывания веб-страниц (HTML-документов). Таким образом, ссылка, доступная на веб-странице, называется гипертекстом.
  • Как следует из названия, HTML – это язык разметки, что означает, что Вы используете HTML, чтобы просто «разметить» текстовый документ с тегами, которые сообщают веб-браузеру, как структурировать его для отображения.

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

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

HTML-документ

В следующем примере показан HTML-документ в простейшей форме:

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <h2>Заголовок</h2>
    <p>Здесь содержание документа. ..</p>
  </body>
</html>

Давайте сохраним код в HTML-файле document.html с помощью вашего любимого текстового редактора. И откройте файл с помощью веб-браузера, такого как Internet Explorer, Google Chrome или Firefox и др. Он должен показать следующий результат:

Теги для создания HTML-документа

Как уже говорилось ранее, HTML является языком разметки и использует различные теги для форматирования содержимого. Эти теги заключены в угловые скобки . Большинство тегов имеют соответствующие закрывающие теги, за исключением нескольких тегов. Например, тег <html> имеет закрывающий тег </html> и тег <body> имеет тег закрытия </body> и другие.

В приведенном выше примере используются следующие теги для создания HTML-документа:

ТегОписание
<!DOCTYPE…>Этот тег определяет тип документа и версию HTML.
<html>Этот тег охватывает полный HTML-документ и в основном состоит из заголовка документа, который представлен тегами <head></head> и телом документа, которое представлено тегами <body></body>.
<head>Этот тег представляет заголовок документа, который может содержать другие html-теги, такие как <title>, <link> и т.д.
<title>Тег <title> используется внутри тега <head>, чтобы указать название документа.
<body>Этот тег представляет тело документа, в котором хранятся другие html-теги, такие как <h2>, <div>, <p> и другие.
<h2>Этот тег представляет заголовок.
<p>Этот тег представляет абзац.

Знание этих тегов вполне хватит чтобы создать html-документ (html-страницу).

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

Консорциум World Wide Web (W3C) рекомендует использовать строчные теги, начиная с HTML 4.

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

Структура типичного HTML-документа будет иметь следующий вид:

Тег декларации документа
<html>
  <head>
    <title>Теги, связанные с заголовком документа</title>
  </head>
  <body>
    Теги, связанные с телом документа
  </body>
</html>

Мы изучим все теги заголовка и тела в последующих уроках, теперь давайте посмотрим, что такое тег декларации документа.

Декларация <!DOCTYPE>

Тег декларация <!DOCTYPE> используется веб-браузером для понимания версии HTML, используемой в документе. Текущая версия HTML – 5, и она использует следующее объявление:

<!DOCTYPE html>

Существует много других типов объявлений, которые могут использоваться в документе HTML в зависимости от того, какая версия HTML используется. Мы увидим более подробную информацию об этом при обсуждении тега <!DOCTYPE…> вместе с другими тегами HTML.

Источник: HTML — Overview.

Структура 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.

Первая строка, начинающаяся с «

<!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-элемент представляет корень (элемент верхнего уровня) HTML-документа, поэтому его также называют корневым элементом . Все остальные элементы должны быть потомками этого элемента.

Категории контента Нет.
Разрешенный контент Один элемент, за которым следует один <тело> элемент.
Отсутствие тега Начальный тег может быть опущен, если первое, что находится внутри элемент не является комментарием.
Конечный тег может быть опущен, если элемент не является сразу с последующим комментарием.
Разрешенные родители Нет. Это корневой элемент документа.
Неявная роль ARIA документ
Разрешенные роли ARIA Нет роль разрешено
Интерфейс DOM HTMLHtmlElement

Этот элемент включает глобальные атрибуты.

манифест
Устаревший
Нестандартный

Указывает URI манифеста ресурса, указывающего ресурсы, которые следует кэшировать локально.

версия Устаревший

Указывает версию определения типа документа HTML, которая управляет текущим документом. Этот атрибут не нужен, так как он является избыточным по отношению к информации о версии в объявлении типа документа.

xмлн

Указывает пространство имен XML документа. Значение по умолчанию:

"http://www.w3.org/1999/xhtml" . Это требуется в документах, проанализированных с помощью парсеров XML, и необязательно в текстовых/html-документах.

 

  <голова>
    
  
  <тело>
    
  

 

Хотя HTML не требует от авторов указывать начальный и конечный теги элемента, это важно для авторов, так как это позволит им указать lang для веб-страницы. Предоставление атрибута lang с допустимым языковым тегом в соответствии с RFC 5646: теги для определения языков (также известный как BCP 47) в элементе

поможет технологии чтения с экрана определить правильный язык для объявления. Идентифицирующий языковой тег должен описывать язык, используемый большей частью содержимого страницы. Без него программы чтения с экрана обычно по умолчанию используют язык, установленный в операционной системе, что может привести к неправильному произношению.

Включение действительного объявления lang в элемент также гарантирует, что важные метаданные, содержащиеся в страницы, такие как </code> страницы, также объявляются правильно.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.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/u/UBOcSM5eaQ3gv1WCrqPY94oTu0FtVfIniwADky/slide-12.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/u/UBOcSM5eaQ3gv1WCrqPY94oTu0FtVfIniwADky/slide-12.jpg' /></noscript><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></p><ul><li> MDN Понимание WCAG, пояснения к Руководству 3.1</li><li> Понимание критерия успеха 3.1.1 | Понимание W3C WCAG 2.1</li></ul><table class="table table-hover"><thead><tr><th scope="col"> Спецификация</th></tr></thead><tbody><tr><td> HTML Standard <br/> <small> # the-html-element </small></td></tr></tbody></table><p> Таблицы BCD загружаются только в браузере</p> с включенным JavaScript. Включите JavaScript для просмотра данных.<ul><li> Элемент верхнего уровня MathML: <code> <math> </code></li><li> Элемент верхнего уровня SVG: <code> <svg> </code></li></ul><p> <b> Последнее изменение: </b> <time datetime="2022-10-31T06:32:10.000Z"> 31 октября 2022 г. </time> , участниками MDN</p><h2><span class="ez-toc-section" id="404"> 404: Страница не найдена </span></h2><p> Страница, которую вы пытались открыть по этому адресу, похоже, не существует. Обычно это результат плохой или устаревшей ссылки. Мы приносим свои извинения за доставленные неудобства.</p><h4><span class="ez-toc-section" id="i-5"> Что я могу сделать сейчас? </span></h4><p> Если вы впервые посещаете TechTarget, добро пожаловать! Извините за обстоятельства, при которых мы встречаемся.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.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/7/7M54zoTrJnHQK9fUxjYyZt8cFARIGqwuhE2CNS/slide-6.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/7/7M54zoTrJnHQK9fUxjYyZt8cFARIGqwuhE2CNS/slide-6.jpg' /></noscript> Вот куда вы можете пойти отсюда:</p> Поиск<ul><li> Узнайте последние новости.</li><li> Наша домашняя страница содержит самую свежую информацию о Java-разработке.</li><li> Наша страница «О нас» содержит дополнительную информацию о сайте, на котором вы находитесь, TheServerSide.com.</li><li> Если вам нужно, свяжитесь с нами, мы будем рады услышать от вас.</li></ul><h4><span class="ez-toc-section" id="i-6"> Поиск по категории </span></h4><p data-readability-styled="true"> Архитектура приложения</p><ul><li> <i data-icon="2"/> 10 учебных курсов для подготовки к сертификации по микросервисам<p> Хотя получить сертификат по архитектуре микросервисов не всегда просто, существует множество курсов, которые вы можете пройти, чтобы …</p></li><li> <i data-icon="2"/> Признаки антипаттерна «Золотой молот» и 5 способов его избежать<p> Антипаттерн «Золотой молот» может подкрасться к команде разработчиков, но есть способы его обнаружить. Изучайте знаки, а также некоторые…</p></li><li> <i data-icon="2"/> Почему контрактное тестирование может быть необходимо для микросервисов<p> Разработчики сталкиваются с многочисленными проблемами, пытаясь выполнить традиционное сквозное интеграционное тестирование микросервисов.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.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/c/CUOvQSkofJ8EI6eXGBsNbqh9TmDaFtAud1gnKL4W5c/slide-6.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf2.ppt-online.org/files2/slide/c/CUOvQSkofJ8EI6eXGBsNbqh9TmDaFtAud1gnKL4W5c/slide-6.jpg' /></noscript> Контракт…</p></li></ul><p data-readability-styled="true"> Качество программного обеспечения</p><ul><li> <i data-icon="2"/> Как сравнить критерии приемлемости с определением готовности<p> Критерии приемки и определение готовности измеряют качество разработки продукта, но способы, которыми команды рассчитывают и …</p></li><li> <i data-icon="2"/> Инструменты AWS DevOps расширяют функции low-code, фокусируясь на devx<p> Многие функции AWS CodeCatalyst и Application Composer были технически возможны и раньше, но новый пакет услуг …</p></li><li> <i data-icon="2"/> Amazon продвигает инструменты CodeWhisperer, AI и ML<p> AWS выпустила обновления для ряда инструментов и сервисов искусственного интеллекта, среди которых были улучшения системы кодирования CodeWhisperer и …</p></li></ul><p data-readability-styled="true"> Облачные вычисления</p><ul><li> <i data-icon="2"/> Обновления HPE GreenLake для частного облака расширяют возможности гибридных облаков<p> HPE продолжает инвестировать в GreenLake для частных и гибридных облаков по мере роста спроса на эти услуги.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fsd.multiurok.ru/html/2018/06/09/s_5b1aefd08ddc6/img8.jpg' /><noscript><img loading='lazy' src='/800/600/http/fsd.multiurok.ru/html/2018/06/09/s_5b1aefd08ddc6/img8.jpg' /></noscript> Тем временем конкуренция…</p></li><li> <i data-icon="2"/> Reynolds проводит первое облачное тестирование на производстве<p> Производитель популярных бытовых брендов решит, поможет ли система IoT от DXC Technology сократить потребление природного газа в …</p></li><li> <i data-icon="2"/> Руководство для конференции по AWS re:Invent 2022<p> Ознакомьтесь с последними новостями, выпусками продуктов и обновлениями технологий, а также анализом и рекомендациями экспертов от AWS re:Invent 2022 …</p></li></ul><p data-readability-styled="true"> Безопасность</p><ul><li> <i data-icon="2"/> Программа-вымогатель Vice Society представляет «постоянную угрозу» для сектора образования<p> Новое исследование Palo Alto Networks подтверждает недавние предупреждения правительства о том, что Vice Society представляет повышенный риск для K-12…</p></li><li> <i data-icon="2"/> Понимание анализа вредоносного ПО и его проблем<p> Узнайте, чего ожидать от карьеры аналитика вредоносных программ, от типов вредоносных программ, с которыми вы столкнетесь, до важных инструментов, которые можно использовать для .<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.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/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></div><div class="post-meta"></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--80aahvkuapc1be.xn--p1ai/raznoe/gruzitsya-gruzitsya-eto-chto-takoe-gruzitsya.html" rel="prev"><span class="meta-nav">Предыдущая запись</span> Грузится: ГРУЗИТЬСЯ | это… Что такое ГРУЗИТЬСЯ?</a></div><div class="nav-next"><a href="https://xn--80aahvkuapc1be.xn--p1ai/raznoe/generator-knopok-css-generator-knopok-css-18-proverennyx-instrumentov.html" rel="next"><span class="meta-nav">Следующая запись</span> Генератор кнопок css: Генератор кнопок css — 18 проверенных инструментов</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/html-dokument-html-struktura-html-dokumenta-i-tegi-dlya-ego-sozdaniya.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://xn--80aahvkuapc1be.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='34435' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div></main></div></div><div class="col-md-4"><div id="sidebar" class="sidebar"><div id="search-9" class="widget widget_search"><form role="search" method="get" class="form-search" action="https://xn--80aahvkuapc1be.xn--p1ai/"><div class="input-group"> <label class="screen-reader-text" for="s">Поиск:</label> <input type="text" class="form-control search-query" placeholder="Поиск и помощь" value="" name="s" title="Поиск:" /> <span class="input-group-btn"> <button type="submit" class="btn btn-default" name="submit" id="searchsubmit" value="Найти"><i class="fa fa-search"></i></button> </span></div></form></div><div id="categories-10" class="widget widget_categories"><div class="widget-title"><span>Рубрики</span></div><ul><li class="cat-item cat-item-8"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/seo">Seo</a></li><li class="cat-item cat-item-4"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/wordpress">Wordpress</a></li><li class="cat-item cat-item-6"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/dizajn">Дизайн</a></li><li class="cat-item cat-item-7"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/zarabotok">Заработок</a></li><li class="cat-item cat-item-9"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/plagin">Плагин</a></li><li class="cat-item cat-item-3"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/raznoe">Разное</a></li><li class="cat-item cat-item-15"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/rekomendac">Рекомендац</a></li><li class="cat-item cat-item-5"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/sajt">Сайт</a></li><li class="cat-item cat-item-1"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/sovety">Совет</a></li><li class="cat-item cat-item-12"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/sovet">Советы</a></li><li class="cat-item cat-item-13"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/tem-2">Тем</a></li><li class="cat-item cat-item-10"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/tem">Темы</a></li><li class="cat-item cat-item-14"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/urok-2">Урок</a></li><li class="cat-item cat-item-11"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/urok">Уроки</a></li></ul></div></div></div></div></div></div><footer class="mz-footer" id="footer"><div class="container footer-inner"><div class="row row-gutter"></div></div><div class="footer-wide"></div><div class="footer-bottom"><div class="site-info"> © Орфографика.рф, 2010 - 2019</div> Расшифровки, размещенные на сайте, предназначены только для личного, некоммерческого использования.<br> При перепосте материалов обязательна активная ссылка: «Текст подготовлен компанией Орфографика.рф». <br>Вопросы и предложения: info@орфографика.рф.</div></footer></div><p id="back-top"> <a href="#top"><i class="fa fa-angle-up"></i></a></p> <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--80aahvkuapc1be.xn--p1ai/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <script defer src="https://xn--80aahvkuapc1be.xn--p1ai/wp-content/cache/autoptimize/js/autoptimize_4a4d238a5e8b8af382deb7daca3c6459.js"></script></body></html>