Что такое HTML — теги и структура документа

Здравствуйте, дорогие друзья! Сегодня рассмотрим, что такое html, о том, какие разновидности тегов существуют, а также рассмотрим структуру документа html. На страницах блога Goldbusinessnet я уже рассказывал, как с помощью некоторых элементов языка разметки создавать гиперссылки и вставлять картинки на вебстраницы.  Кроме того, давал определение, но не лишним будет его повторить.

Итак, HTML (Hyper Text Markup Language) - язык гипертекстовой разметки. Собственно, его появление и зарождение браузеров, которые способны распознавать и интерпретировать код html в понятное пользователям содержание вебстраниц положило начало развитию всемирной паутины (интернета), в том числе появлению информационных ресурсов (сайтов, блогов, крупных порталов и т.д.). Таким образом, используя язык гипертекстовой разметки, мы имеем возможность создавать свои проекты в сети. Для обеспечения единых стандартов был создан Международный Консорциум W3C, задачей которого стало не допустить анархии в использовании элементов HTML среди разработчиков.

Была определена спецификация языка разметки, которая изредка обновлялась. На данный момент последней версией является HTML  4.01, однако идут активные работы по внедрению 5 версии, отдельные нововведения уже поддерживаются популярными браузерами, поэтому проверка страниц сайта на ошибки, проводимого W3C validator, производится применительно именно к HTML 5, с отличиями которого от 4 версии можно ознакомиться на этой странице (правда, на английском языке).

Структура документа HTML - основные теги (html, head, body)

Если вы на какой-либо вебстранице кликните по ней правой кнопкой мышки и выберете из контекстного меню «Просмотр кода страницы» (в случае браузера Google Chrome), то в отдельной вкладке откроется текст, который и является html кодом, состоящим из совокупности тегов. Тегами называются команды языка HTML. Эти теги определяют то, что пользователи видят при просмотре. В упрощенном виде структуру html документа можно представить так:

Текст документа html, который определяет содержание того или иного элемента на странице , заключается между открывающим  и закрывающим тегами (например, <head> и </head>). Как вы могли заметить, названия тегов заключаются между угловыми скобками, а закрывающий тег отличается от открывающего только наличием в нем слэша. Здесь надо отметить, что на приведенном выше скриншоте отмечены три главных тега (html, head, body) вместе со специальным тегом DOCTYPE:

  • <!DOCTYPE html> - специальный тег, который называют еще декларацией. Он начинается с угловой скобки и восклицательного знака и показывает, на какую версию html ориентироваться браузеру. Приведенный мной вариант написания декларации уже является детищем 5 версии языка разметки и поддерживается последними модификациями всех популярных браузеров, хотя в html 4.01 существуют несколько вариантов, например, такой:
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

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

  • head - внутри этого тега размещается служебная информация, которая необходима браузеру для корректной интерпретации html документа. Она не видна на открытой вебстранице.
  • body - между закрывающим и открывающим тегами будет помещена информация, отображаемая на web странице.
  • html - все содержание документа определяется эти тегом

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

<html><head>Служебная информация</head><body>Содержание</body></html>

Кроме этого, существуют теги, называемые пустыми, которые не требуют закрытия (например, тег br, определяющий перенос строки). В языке разметки существует строго ограниченный набор тегов для всех разработчиков, определенный консорциумом W3C, список валидных по версии HTML 4.01 тегов можно посмотреть на официальной странице:

Справа в столбце «Description» дается краткое описание тегов, а в левой колонке при нажатии на ссылку с названием того или иного тега вы получите подробнейшее его описание. А на русском языке полный список тегов согласно спецификации HTML 4.01 вместе с дополнениями HTML 5 представлен на этой странице.

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

Еще статьи по данной теме:
Самые интересные публикации из рубрики: Уроки HTML

6 отзывов

  1. Сергей Куприянов

    Мне очень понравился ваш девиз на главной:
    "ДОБРО ПОЖАЛОВАТЬ!
    Я уверен что совместное честное сотрудничество в сети интернет неминуемо ведет к успеху! Обогатим друг друга знаниями и новыми идеями!
    Администратор"

  2. Игорь

    Спасибо.

  3. Marina

    Спасибо за такой подробное и понятное объяснение!Буду с нетерпением ждать следующих статей.

  4. Игорь

    Пожалуйста, Marina.

  5. Алексей

    Огромное спасибо автору! Очень познавательно, доступно, и понятно изложено! Обязательно воспользуюсь рекомендациями и советами. Спасибо! С Уважением Алексей Миндлин.

  6. Игорь

    Благодарю, Алексей.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Чтобы ввести любой код, вставьте его между [php] и [/php]. Ссылка (URL), помещенная в текст комментария, не будет активной. C целью ее выделения и более удобного копирования можно заключить ее между тегами <pre> и </pre>.