Для чего предназначен парный тег u. Теги в HTML. Одинарные и парные теги. Основные одиночные теги

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

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

Содержимое Помещённый внутри этих тегов текст становится жирным

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

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

Любой тег состоит из:

• Открывающей угловой скобки (< ).
• Специального слова (имени тега). Например, hr , iframe , b .
• Закрывающей угловой скобки (> ).

Так как теги - основа языка разметки, не удивительно, что их довольно много. Рассмотрим основные, самые важные теги.

• - одиночный тег, внутри которого размещается комментарий. Комментарий - это текст, который не обрабатывается браузером. Внутри тега можно писать, что угодно, даже другие теги - работать они не будут, на экране не отобразятся. Разработчики комментируют код либо чтобы другим веб-мастерам было проще в нём разобраться, либо чтобы спустя продолжительное время его быстро смогли понять они сами.
• , , , , - теги, которые должны присутствовать в любом приличном HTML-документе (подробнее см. «Как создать сайт в Блокноте»).
• - тег содержит вспомогательную информацию для браузеров и поисковиков. Внутри него можно прописать ключевые слова, описание страницы, кодировку документа, имя автора и т. д.
• содержит ссылку на файл сценария или сам код.
• - тег, задающий стиль документа и/или его элементов с помощью CSS. HTML-документ может содержать множество тегов , определяющих разные стили разных частей страницы.
• - полная противоположность , его дополняющая. Тег задаёт «шапку» (заголовок) раздела или всей страницы.
• хранит в себе «ноги» сайта или раздела. Внутри него можно разместить вспомогательную информацию, копирайт, контактные данные и т. д.
• содержит основной контент страницы. Ни шапку, ни блок меню, ни «ноги» сайта, а то, ради чего страница создавалась. Например, на странице, которую вы сейчас читаете, внутри должна располагаться как раз эта статья.
• предназначен для создания ссылок. Ссылки - корень гипертекста, поэтому им посвящена .
• нужен для добавления на веб-страницу картинок (к вашим услугам посвящённая этому действу ).
• ,
  , - , , ,

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

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

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

• ,
  ,
  • - теги списков. Маркированные, нумерованные - работа этих тегов. Есть ещё списки определений, за которые отвечают теги , и , но подробно обо всей это шестёрке вы узнаете из статьи «Создание списков» .
  • , , , используются при создании таблиц и подробно рассматриваются в отдельной статье .
    - тег, добавляющий странице интерактивности, то есть позволяющий пользователю взаимодействовать с веб-сайтом. Конечно, форме необходим обработчик, но зато с помощью тегов внутри вы можете создать интерфейс. Флажки, кнопки, переключатели, поля ввода и другие объекты, которые требуют от вас активных действий - всё это элементы формы, код которых размещается внутри контейнера .
    - тег, создающий интерактивную кнопку. Чтобы при нажатии на неё что-нибудь произошло, кнопка должна находиться в форме (располагаться между тегами ).
    создаёт элементы формы: переключатели, флажки, кнопки, всевозможные поля ввода. Вставляется в контейнер . Но зачем нам тогда отдельно , если есть универсальный ? позволяет создать кнопку с расширенными параметрами. Например, на кнопке можно разместить картинку. На элементе, созданном через , такого сделать нельзя.
    и - теги создания меню в HTML 5. - это контейнер, внутри которого помещаются элементы , добавление которых и приводит к созданию пунктов меню. Довольно интересная парочка. Например, с её помощью вы можете создать собственное контекстное меню для страницы или отдельного её элемента.
    - ещё один тег формы, создающий в ней большое поле, в которое можно вводить не одну строку текста, а целые абзацы.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Название для документа (страницы) Это заголовок

    Это параграф (абзац).

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

    А теперь детально разберем из чего состоит любая HTML страница:

    DOCTYPE это декларация, которая определяет тип документа. Декларация не является тегом HTML это только инструкция для веб-браузера о том, какая версия HTML используется в документе. Декларация !DOCTYPE помогает браузеру отобразить веб-страницу правильно, для этого браузер должен знать, как тип, так и версию документа.

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

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

    Хронология версий HTML:

    , и

    Версия HTML HTML 2.0 HTML 3.2 HTML 4.01 XHTML HTML 5 Год

    1991	1995	1997	1999	2000	2014

    Текст между

    и

    (англ. HTML Paragraph Element ) определяет параграф (абзац). Содержание элемента всегда начинается с новой строки.

    Ниже показано как отображается вышерассмотренный пример в браузере:

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

    Вопросы и задачи по теме

    Перед тем как перейти к изучению следующей темы ответьте, или найдите ответ на следующие вопросы:

    • Какая основная задача языка гипертекстовой разметки?
    • Какая версия языка HTML сейчас используется?
    • Что такое декларация? Какая декларация используется в современном стандарте?
    • В какой HTML элемент помещается видимое содержимое документа (страницы)?

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

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

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

    Парные теги HTML

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

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

    Жирный абзац

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

    Жирный абзац

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  < html >

  < head >

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

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

  < body >

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

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

  В данном примере строка 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 > Кавычки в атрибуте alt

  < body >

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

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

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

  height="101">

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

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

  
  

  Определение в Википедии: HTML (от англ. HyperText Markup Language - язык разметки гипертекста ) – стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML ). Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме.

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

  Язык HTML отвечает за разметку страницы, за порядок и последовательность расположения ее элементов. При помощи HTML элементам страницы задают определенные свойства и характеристики. Редактирование текста - это тоже HTML.

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

  Теги парные и одиночные

  Основой языка HTML являются теги . Каждый элемент страницы обозначен тем или иным тегом.

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

  - парные теги . У таких тегов сначала идет открывающий тег - между символами "" , сообщающий браузеру о начале своего действия в данном месте; затем закрывающий тег – между символами"" (то есть у закрывающего тега к символу «меньше чем» - "