Основы HTML. Парные теги Парный тег

Язык гипертекстовой разметки HTML (англ. HyperText Markup Language ) - является языком разметки документов во Всемирной паутине.

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

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

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

Давайте рассмотрим чем отличаются парные теги от одиночных.

Вид (синтаксис) парного тега:

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

Большинство ошибок в верстке (создание структуры HTML кода ) у Вас может возникать по той причине, что не указан закрывающий тег или он указан без прямого слеша / . Если не указать прямой слеш, то браузер воспринимает тег как открывающий, а не закрывающий. В том случае если вы вообще не указали закрывающий тег, то браузер не узнает где Ваша команда заканчивается, чтобы её остановить, что может привести к серьезным ошибкам, будьте внимательны. К счастью, современные редакторы HTML кода позволяют быстрее отслеживать ошибки такого рода.

Вид (синтаксис) одиночного тега:

В современном стандарте HTML 5 одиночные теги записываются как и начальные теги у парных тегов (наименование тега помещено в угловые скобки < и > ).

Обращаю Ваше внимание, что до выхода современного стандарта одиночные теги требовали наличие прямого слеша перед наименованием тега (записывались по аналогии с закрывающими тегами). Использование прямого слеша в одиночных тегах не будет считаться ошибкой, но в этом и нет необходимости - короче код, быстрей загрузка.

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

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

Пример простого HTML документа:

И так, мы с Вами поняли, что HTML - это краеугольный камень, благодаря которому любой браузер пользователя отобразит страницу. Но как выглядит HTML? Давайте рассмотрим простой код, из которого состоит практически любая информационная страница:

Мой первый заголовок

Мой первый абзац

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

Мой первый заголовок

Мой первый абзац

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

HTML(HyperText Markup Language) – это язык разметки гипертекста . Язык разметки используется для придания структуры интернет-странице, сайту. Язык разметки не несет в себе оформление, а выполняет задачи структурирования. Структура задается с помощью специальных элементов — меток, понятных браузеру. Эти метки называются тегами – от англ. слова tag - именованная метка.

Гипертекст – это документ, разметка которого выполнена с помощью языка HTML . Термин «гипертекст» изначально был введён Тедом Нельсоном для обозначения текста, «который разветвляется сам по себе или выполняет действие по запросу».

HTML документ – это обычный текстовый файл, который имеет специальную структуру. При открытии интернет-браузер обрабатывает этот документ, в результате чего мы с вами видим привычные для нас интернет-страницы, где есть текст, картинки, ссылки, и т.д. Интернет-страницы имеют расширение – html .

Рассмотрим структуру простого HTML документа

Строка называется тегом. Вообще, все, что заключено в символы <> называется тегом. Данные символы — служебные в языке HTML. Теги бывают двух видов:

• Парные — данные теги имеют открывающийся и закрывающийся тег. Закрывающийся тег содержит знак наклонной черты. Между данными тегами вписывается содержимое тега. Содержимым тега может быть как обычный текст, так и другие, вложенные теги. Примеры парных тегов:
• Непарные — теги, которые не закрываются. Пример:
  

Теги можно писать большими и малыми буквами, поскольку HTML не различает написание. Закрывать парные теги нужно всегда!

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

Рассмотрим структуру HTML документа:

• — что же это за тег такой? Это версия HTML которая используется в данной странице. Подобным тегом принято начинать все HTML-документы. Это считается хорошим тоном. DOCTYPE указывает браузеру в какой версии HTML был написан документ, для того, что бы все браузеры (а их сейчас много) могли правильно обработать разметку и отобразить содержимое документа. Если этого не сделать, то браузер по умолчанию некорректно определит версию документа, в результате чего вся разметка может поехать и неправильно отображаться в разных браузерах. В данном случае DOCTYPE указывает на версию HTML5 .
• — все содержимое страницы заключено между данными парными тегами, которые информируют браузер, что это HTML страница.
• -служебная секция (заголовок), которая используется для подключения внешних файлов, и установок отвечающих за вид, вывод и работу данной страницы. Содержимое ее, чаще всего, не отображается на странице, кроме тега title. Тег title – содержит заголовок страницы, который отображается во вкладке.
• — все что отображается на странице, пишется в теге body.

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

charset="UTF-8" — атрибут. Атрибутов может быть много. Атрибуты пишутся через пробел. В данном случае, с помощью тега meta HTML странице указывается кодировка UTF-8. Т.е. браузеру указывается кодировка данного документа, для правильного отображения содержимого страницы.

Атрибуты используются для расширения функционала тегов и позволяют модифицировать как способы отображения тегов на странице, так и их поведение. Не все теги используются для вывода информации, есть теги которые используются только для программирования поведения страницы, например с помощью JavaScript.

Вопросы для самоконтроля

1. Что такое гипертекст?
2. В чем состоит необходимость использования HTML?
3. Что такое кодировка страницы? Зачем она применяется? Где в браузере можно поменять кодировку?
4. Какие виды атрибутов вам известны?
5. Что такое теги? Чем они отличаются от атрибутов?
6. Какие теги обязательно должна содержать HTML страница?

Текст урока разработан совместно с Каменщик М.

Парные теги, называемые по-другому контейнеры, состоят из двух частей- открывающий и закрывающий тег. Открывающий тег обозначается как и одиночный - <тег> , а в закрывающем используется слэш - . Допускается вкладывать в контейнер другие теги, однако следует соблюдать их порядок. Так, на рис. 4 демонстрируется, как можно и нельзя добавлять один контейнер внутрь другого.

Рис. 4 Вложение тегов, а - правильное, б - неверное

Если связать открывающий и закрывающий тег между собой скобкой, как показано на рис. 4, то несколько скобок обозначающих разные контейнеры, не должны пересекаться между собой (рис. 4а). Любое пересечение условных скобок (рис. 4б) говорит о том, что правильная последовательность тегов нарушена.

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

1. Правила применения тегов

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

Атрибуты тегов и кавычки

Согласно спецификации HTML все значения атрибутов тегов следует указывать в двойных ("пример") или одинарных кавычках ("пример"). Отсутствие кавычек не приведет к ошибкам, браузеры во многих случаях достаточно корректно обрабатывают код и без кавычек, за исключением текста, содержащего пробелы (пример 2).

Пример 2. Использование кавычек в атрибутах тегов

< html >

< head >

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

< title > Кавычки в атрибуте alttitle >

head >

< body >

< p >< img src="images/arena.png" alt="Вид заголовка" width="400" height="101">p >

< p >< img src="images/arena.png" alt=Вид заголовка width="400" height="101">p >

body >

html >

В данном примере строка 8 написана правильно, со всеми кавычками, а в строке 9 у атрибута alt кавычки отсутствуют. Из-за этого браузер в качестве значения alt возьмет только первое слово («Вид»), а слово «заголовка» будет воспринято как ошибочное значение. Поэтому всегда приучайтесь указывать значения атрибутов тегов в кавычках.

Теги можно писать как прописными, так и строчными символами

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

Переносы строк

Внутри тега между его атрибутами допустимо ставить перенос строк. В примере 3 показана одна и та же строка, но оформленная разными способами.

Пример 3. Переносы строк в коде тега

HTML 4.01IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4

< html >

< head >

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

< title > Кавычки в атрибуте alttitle >

head >

< body >

< p >< img src="images/arena.png" alt="Вид заголовка в IE" width="400" height="101">p >

< p >< img src="images/arena.png"

alt="Вид заголовка в браузере IE"

height="101">p >

body >

html >

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

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

Вы уже прочитали, что весь язык состоит из тегов. В этом уроке разберемся подробнее с HTML тегами. В языке HTML происходит деление тегов на одинарные (не парные) и парные теги. Итак, одинарные HTML теги состоят из одного тега, то есть, у них нет закрывающего тега. А у парных дескрипторов есть открывающийся и закрывающийся тег.

Одинарные теги HTML

Одинарные теги не имеют закрывающего тега. Например:
, . Раньше писали так:
, , теперь такой стиль написания одинарных тегов не актуален, поэтому не пишите так. Самые используемые одинарные теги:
- перенос на новую строку,

---

- разделительная линия, - вставка изображения.

Парные теги HTML

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

Что такое дескрипторы в HTML?

, так вот, это парный тег, содержимым этого тега является текст «Что такое теги в HTML?». Его началом является тег

, а концом

.

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

Жирный абзац

. А вот ошибка:

Жирный абзац

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

Как правильно писать парные теги

.

Что нового в HTML5 в плане тегов?

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

Почему важно научиться пользоваться тегами?

Поисковики Yandex и Google трепетно относятся к верстке HTML документов, проверяя их на валидность. Ищут в них ключевики заключенные в специальные дескрипторы и так далее. Но этот раздел не про это. Это относится к продвижению (SEO).

Как выучить все теги HTML?

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