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 (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства.

Текстовые документы, содержащие разметку на языке HTML (такие документы традиционно имеют расширение .html или .htm), обрабатываются специальными приложениями, которые отображают документ в его форматированном виде.

Такие приложения, называемые «браузерами» или «интернет-обозревателями», обычно предоставляют пользователю удобный интерфейс для запроса веб-страниц, их просмотра (и вывода на иные внешние устройства) и, при необходимости, отправки введённых пользователем данных на сервер. Наиболее популярными на сегодняшний день браузерами являются Google Chrome, Mozilla Firefox, Opera, Internet Explorer и Safari (см.: Браузер#Рыночные доли).

HTML — теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками — тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных. В этом случае обычно не указывается закрывающий тег (например, тег переноса строки <br> — одиночный и закрывать его не нужно) . Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, атрибут href=»/ у ссылки). Атрибуты указываются в открывающем теге. Вот примеры фрагментов HTML-документа:

  • <strong>Текст между двумя тегами — открывающим и закрывающим.</strong>
  • <a href=»http://www.example.com»>Здесь элемент содержит атрибут href, то есть гиперссылку.</a>
  • А вот пример пустого элемента: <br>

Регистр, в котором набрано имя элемента и имена атрибутов, в HTML значения не имеет (в отличие от XHTML). Элементы могут быть вложенными. Например, следующий код:

<!DOCTYPE html>

<html>

   <head>

      <meta charset="utf-8" />

      <title>HTML Document</title>

   </head>

   <body>

      <p>

         <b>

            Этот текст будет полужирным, <i>а этот — ещё и курсивным</i>.

         </b>

      </p>

   </body>

</html>​

 

даст такой результат:

Этот текст будет полужирным, а этот еще и курсивным.

 

У вас нет прав для комментирования.

Какова структура документа HTML?

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

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

В HTML теги подразделяются на два типа:

  • Парные теги: Эти теги идут парами. Они имеют как открывающий (< >), так и закрывающий () теги. Например,

    …

  • Пустые теги: Эти теги не идут парами и не содержат никакой информации. Например,
Документ HTML разделен на две части:
  • Головная часть — заголовок и метаданные веб-документа содержатся в элементе заголовка.
  • Часть корпуса — Элемент body содержит информацию, которую вы хотите отобразить на веб-странице. Чтобы сделать ваши веб-страницы совместимыми с HTML 4, включите объявление типа документа ( DTD ) перед элементом HTML. Когда вы создаете новую веб-страницу, многие программы веб-публикаций автоматически добавляют DTD и базовые теги. Первый тег на веб-странице показывает язык разметки, используемый для документа. Тег предлагает информацию о веб-странице.
    Наконец, содержимое появляется в теге.

Базовая структура HTML

Базовая структура документа HTML состоит из 5 элементов:

  • <голова>
  • <название>
  • <тело>

Тег в HTML используется для информирования браузера о версии HTML, используемой на веб-странице. Он упоминается как объявление типа документа (DTD) . На самом деле это не тег/элемент, а скорее инструкция для браузера относительно типа документа. Это нулевой элемент, который не имеет закрывающего тега и не должен содержать никакого содержимого.

На самом деле существуют различные типы HTML, например.

HTML 4,01 Строгие , HTML 4.01 Переход , HTML 4.01 Frameset , XHTML 1,0 Строгие , XHTML 1,0 Переход , xhtml 1.0, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
, . в SGML объявление относится к объявлению типа документа (DTD) в HTML 4.01. Однако HTML 5 не основан на SGML (стандартный обобщенный язык разметки).

Синтаксис

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

 
 

<голова>
!Тег DOCTYPE

<тело>
     
 Тег !DOCTYPE

Вывод

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

Синтаксис тега 

 
 

...

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

 
 
HTML-тег


        <тело>
             
html-тег

Выход:

Тег в HTML используется для хранения метаданных ( данные о данных ). Он используется между тегами и.

Заголовок HTML-документа — это раздел документа, содержимое которого не отображается в браузере при загрузке страницы. Он содержит только метаданные документа HTML, которые указывают информацию о документе HTML.

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

Название документа, набор символов, стили, ссылки, скрипты и другая метаинформация определяются метаданными.

Ниже приведен список тегов метаданных:

  • </li><li> <стиль></li><li> <мета></li><li> <ссылка></li><li> <скрипт></li><li> <база></li></ul><h4 level="3"><span class="ez-toc-section" id="i-4"> Синтаксис тега </span></h4><head></h4><pre> <pre> <!DOCTYPE html> <html> <голова> ... </голова> </html> </pre></pre><p> <strong> Пример: </strong> В этом примере мы будем использовать тег<head>, содержащий теги <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://ylianova.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!--[if lt IE 9]> <script src="https://ylianova.ru/wp-content/themes/anew/js/ie/respond.js"></script> <![endif]--> <!-- 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 --> <script defer src="https://ylianova.ru/wp-content/cache/autoptimize/js/autoptimize_44fb035c922849da7c0ac093ea3e6958.js"></script></body></html>