Парный тег языка html. Чем непарные теги отличаются от парных? Министерство образования Республики Беларусь

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

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

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

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

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

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

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

Согласно спецификации 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 >

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

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

Привет! Ну что, сделали свою первую страничку? Молодцы! Теперь давайте поговорим о тегах: что это такое и зачем они нужны.

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

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

Пример:
Парные теги

Теги бывают двух видов. К первому относятся парные, включающие в себя две составляющие, от чего и получили свое название. Эти составляющие называются открывающимися и закрывающимися тегами. Закрывающийся тег отличается от своей пары наличием символа / , который ставится сразу после < .

Ко второму типу тегов относятся одиночные. И, как следует из названия, они не имеют пары в виде второго, закрывающего тега.

Одиночные HTML-теги

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

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

К числу таких тегов относятся:
,
, .

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

Атрибуты HTML-тегов

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

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

Как правило, в большинстве случаев теги и атрибуты прописываются в HTML вот так:
<имя-тега атрибут1="значение1" атрибут2="значение2" …>
У тега может быть как один, так и несколько атрибутов. Ниже вы можете видеть примеры.

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

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

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

Классификация тегов

Всего тегов в HTML насчитывается более 90. Как правило, один тег воздействует только на часть документа, например, тег заголовка первого уровня
…
. В таких случаях используются парные теги: открывающий и закрывающий . Открывающий тег (например,
) создает эффект, а закрывающий (
) — прекращает его действие. Как видно из примера, закрывающий тэг всегда имеет вот такой символ (/ ) — прямой слеш. Такие теги называют парные .

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

Типы тегов

Кроме того теги подразделяют на несколько типов, которое различаются по выполняем функциям:

теги заголовка документа;

блочные элементы;

строчные элементы;

универсальные элементы;

списки;

таблицы;

фреймы.

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

Структура тегов

При загрузке в браузере сами теги не отображаются, но влияют на способ отображения своего содержимого. Если в написание тега допущена ошибка, он игнорируется целиком.

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

Давайте посмотрим на правильную структуру тегов содержащих атрибуты:

Сам Себе Вебмастер

Для примера я привел два совершенно разных тега. Первый одинарный — отвечает за вывод изображений, атрибут — src=»logo.jpg» . Второй … парный отвечает за создание ссылок, атрибут — href=»сайт» .

Вывод 1 : Атрибуты могут иметь парные и непарные теги.

Вывод 2 : Атрибуты могут иметь только открывающие теги, закрывающие теги не имеют атрибутов.

Картинка для разъяснения:

Для структурирования и оформления текста применяются теги — специальные ключевые слова, обрамленные в скобки < и > . Большинство из них имеют закрывающую пару с косой чертой «/» перед именем тега. Это позволяет обозначать определенные части текста. Например:

Как видно из примера, в браузере теги не отображаются, но могут влиять на отображение текста.

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

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

Синтаксис и механизм представлений

Напомним, что одной из функций механизма представлений HTML 5 является обеспечение совместимости нового стандарта с уже существующими HTML/XHTML-документами. Это происходит благодаря наличию трех «режимов» (HTML5, XHTML5, DOM5 HTML) интерпретатора, каждый из которых поддерживает свой синтаксис.

Вообще говоря, стандартом HTML разрешается набирать теги в любом регистре. Кроме того, можно опускать некоторые закрывающие теги (и косую черту в одиночных тегах). В HTML 5 это тоже допустимо (синтаксис представления HTML5), но такой код не будет совместим с синтаксисом XML /XHTML, что делает затруднительным применение XML-совместимых технологий, таких как, например, микроформаты. По этой причине мы рекомендуем писать код, используя синтаксис XHTML (документ интерпретируется в представлении XHTML5). Исходя из этого и будет вестись дальнейшее изложение.

Для совместимости со старыми браузерами, которые не понимают синтаксис XHTML, в одиночных тегах желательно оставлять пробел между именем и косой чертой «/», хотя это скорее полезная привычка, чем правило:

Правило вложенности тегов

Парные теги (контейнеры) могут содержать не только текст, но и другие теги. При этом действует одно правило — теги должны закрываться в порядке, обратном тому, в котором они открывались. Обратите внимание на расположение тегов в следующем примере:

Чтобы запомнить это правило, представьте, будто теги — это матрешки. Вы можете положить их одну в другую, но нельзя одну половинку поместить внутри, а другую — снаружи. Это правило не относится к пустым тегам, которые попросту не имеют закрывающей пары.

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

Атрибуты тегов

Любой открывающий (или пустой) тег может содержать атрибуты, определяющие некоторые дополнительные свойства всего элемента. Атрибуты прописываются сразу после имени тега, отделяясь от него и друг от друга пробелом:
<а href="http://www.example.com/" target="_blank">Ссылка на сайт
В этом примере мы указали тегу (гиперссылка) два атрибута. Первому (href), отвечающему за адрес ссылки, мы присвоили значение http://www.example.com/ . Значение _blank атрибута target означает, что при нажатии на ссылку указанная в href страница должна открываться в новой вкладке браузера.

Некоторые атрибуты могут иметь только одно допустимое значение и всего два возможных состояния — когда атрибут присутствует в элементе и, соответственно, когда отсутствует. В этом курсе такие атрибуты, по аналогии с переменными в математике, называются булевыми. Значение булева атрибута обычно совпадает с его названием. Например, disabled="disabled" . Вообщя говоря, их можно опускать, указывая только название атрибута (т. н. сокращенные атрибуты). Однако для совместимости с синтаксисом XHTML/XML значения указывать все же обязательно. Кроме того, названия всех атрибутов необходимо набирать в нижнем регистре и заключать их значения в двойные кавычки, хотя HTML 5 и не ставит такого ограничения.

Не рекомендуется:
Рекомендуется:
Специальные символы

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

Специальные символы в HTML реализуются с помощью интерпретируемых браузером мнемокодов. Например, двойную кавычку (") можно вывести кодом " , а знак евро (€) — € . Все мнемокоды начинаются с амперсанда (&) и заканчиваются точкой с запятой (;). Чтобы обычный амперсанд в тексте не путался с началом мнемокода, его всегда необходимо выводить кодом & . С помощью мнемокодов можно отображать даже символы UTF-8. Такие мнемокоды имеют вид xxx; , где вместо xxxx указывается десятичный код символа в кодировке UTF-8. Например, © отобразится как «©». Многие из символов UTF-8 имеют аналоги в виде текстовых мнемокодов. Тот же символ « » можно обозначить вот так: .

9 комментариев
Я где то читал что атрибут target="_blank" как бы не очень хорошо использовать, не нарушает ли он каких нибудь стандартов? Я читал, что разработчику нельзя решать за пользователя как ему открывать ссылку (в новой вкладке или в той же), как бы это не хорошо. Хотелось бы узнать ваше мнение. Атрибут target="_blank" не включен в стандарт XHTML. Для сохранения валидности XHTML-страниц, значение target подменяют (при необходимости, конечно) с помощью JavaScript. В HTML это вполне валидный атрибут и в таких трюках нет необходимости.
По поводу целесообразности соглашусь с тем, что злоупотреблять им не стоит, поскольку большинству пользователей известен способ открыть любую ссылку в новой вкладке, да и кнопка "Назад" всегда под рукой. И все же, без target="_blank" есть некоторая вероятность потерять пользователя, "забывшего" вернуться, тогда как с ним есть вероятность навлечь праведный гнев того же пользователя. Получается палка о двух концах.
В своей практике, как правило, использую этот атрибут только для ссылок, добавленных пользователями (в комментариях, например), т.е. переход по которым не был запланирован при подготовке статьи. А также в ситуациях, когда это действительно необходимо: например на страницах, где в момент клика пользователь может загружать видео, слушает радио, общается в чате и т.д.
Кажись, именно в HTML 5 можно оставлять парные теги открытыми, если за ними идет другой тег. Типа, в списках тег li теперь можно не закрывать. Катерина, можно, да. И в HTML 4 тоже. В таком случае браузеры должны закрывать их самостоятельно. Однако в некоторых случаях они (IE9, например) делают это неправильно, что приводит к ошибкам в верстке, которые не так просто обнаружить. Парсеры XML (если есть необходимость их использовать) скорее всего тоже споткнутся об эти грабли. А плюсов от такой экономии кода, в общем-то, нет. На мой взгляд, теги все-таки лучше закрывать. Те, кто верстает на HTML 5, не сильно заботятся про IE. Он не поддерживает очень много возможностей HTML5 -- Википедия Сравнение браузеров (HTML5). А на htmlbook.ru есть перечень тегов, которые позволено пропускать -- http://htmlbook.ru/samhtml5/sintaksis-html5
Пользователей IE достаточно много, чтобы просто оставить их за бортом. Graceful degradation — наше всё. Касаемо незакрытых парных тегов вы правы — если строго следовать этому перечню, проблем даже в IE быть не должно, эти правила действуют со времен HTML 3.2.
Спасибо, ознакомлюсь) Спасибо за откровение! Отличный материал, однозначно стоит использовать.
Этот синтаксис имеет множество имен в зависимости от того, какой язык вы используете. Лучший способ узнать, что он называется, - это посмотреть спецификацию для конкретного языка.

HTML 4.x

Я не могу найти упоминания этого синтаксиса в спецификации HTML 4.x. Это недопустимый синтаксис.

В спецификации HTML 5 символ / (называемый SOLIDUS) действителен, но не действует для элементов void, таких как
,
, , и т.д., а для внешних элементов (таких как теги SVG) он обозначает начальный тег который обозначается как самозакрывающийся. Это не является допустимым синтаксисом для всех других тегов (например,