Здравствуйте, уважаемые читатели блога сайт. Сегодня мы начнем разговор про теги в языке Html, а именно про заголовки H1, H2, H3, H4, H5, H6, про абзацы P и переносы строки Br, а также про тэг горизонтальной линии Hr, на примере которого мы рассмотрим использование атрибутов и посмотрим, где можно будет узнать все возможные для каждого элемента атрибуты и подглядеть синтаксис значений для них.

Главное отличие строчных и блочных тегов состоит в том, что первые могут следовать друг за другом по ширине, пока не закончится доступное для этого место, а затем они будут перенесены на следующую строку.

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

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

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

Давайте начнем рассмотрение с такого понятия, как заголовки, которые формируются с помощью парных тэгов H1, H2, H3, H4, H5, H6 (название происходит от первой буквы слова «Header», т.е. «заголовок»). Они призваны отделять друг от друга различные фрагменты текста и помечать их важность в зависимости от уровня. В современной версии языка Html все теги и все допустимые для них атрибуты заранее оговорены и описаны.

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

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

Заголовки разного уровня H1-H6 будут рисоваться в браузерах шрифтами разных размеров (хотя, используя CSS, вы можете задать им абсолютно любой размер, цвет и тип шрифта для отображения в браузере, но в чистом Html действуют именно такие правила):

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

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

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

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

Параграф, перенос строки и горизонтальная линия HR в Html коде

Тег P образуется от слова «paragraph», но чаще все же его называют абзацем. Они используются для смыслового выделения некоторого куска текста, включающего, как правило, несколько предложений. Между параграфами, образованными элементами P по вертикали, появляется пустое пространство, которое и позволяет отделить логические куски текста визуально друг от друга.

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

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

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

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

Так как P является блочным элементом и внутри него могут стоять только строчные. Следовательно, браузер, обнаружив открывающий тэг параграфа, разбирает код дальше и как только наткнется на следующий блочный элемент (скорее всего это будет следующий открывающий P), то тут же перед ним вставляет закрывающий тег абзаца. В стандарте Html 5 таких вольностей скорее всего уже не будет и нужно сразу привыкать закрывать все теги и писать их только строчными буквами.

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

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

Ну, а если вам нужно будет действительно написать четверостишие в общепринятом виде, то можете для этой цели использовать дополнительные Html

теги переноса строки под названием BR

(от слова «break»):

BR является строчным элементом и к тому же «пустым», т.е. одиночным (не имеет закрывавшего элемента). Вся функция BR заключается в том, что он вызывает перенос строки при отображении текста в браузере (аналогичен клавише Enter в любом текстовом редакторе).

Написание тегов BR (переноса строки) в коде никак не регламентируется. Можно написать весь текст слитно и поставить вместо пробелов в нужных местах BR, а можно сразу для наглядности в коде уже разбить текст на строки и поставить BR либо в конце строк, либо в их начале. Сути это не меняет.

HR (аббревиатура от слов «horizontal rule», т.е. горизонтальная линия) — очень простой Html тег, который рисует горизонтальную линию (полоску) во всю ширину экрана и толщины, зависящей от того браузера, в котором она просматривается (по сути это визуальный маркер, который по аналогии с тэгами заголовков позволяет разбивать текст на логические куски для их более простого усвоения).

Он является «пустым» (одиночным), т.е. не имеет пары (закрывающего тэга). Кроме этого, HR является блочным элементом , т.е. он занимает по умолчанию всю доступную ему ширину страницы.

Понятие атрибутов и правила их написания в Html тегах

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

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

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

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

Там я приводил ссылку на список всех допустимых в Html тегов . Если в этом списке щелкните по названию интересующего вас элемента (в нашем случае это HR), то попадете на страницу с подробной спецификацией именно по нему:

Все атрибуты любого тега можно разделить на три группы :

1. Общие — они могут стоять у подавляющего большинства элементов в языке Html. На приведенном чуть выше рисунке они находятся внизу и обведены красной рамочкой. Собственно, общих атрибутов немного (всего шесть), да и то, вряд ли вы будете использовать в своей практике все из них. Скорее всего только четыре — , title и style.
2. Атрибуты событий — они нужны, чтобы вызвать какое-либо действие в ответ на действие пользователя или на системное событие. Они имеют большее отношение к ДжаваСкрит и на приведенном чуть выше рисунке находятся в самом низу (обведены в темную рамочку).
3. Уникальные — у каждого тега, как правило, имеется свой собственный набор атрибутов, некоторые из которых могут вообще не встречаться у других элементов. Если рассматривать горизонтальную линию HR, то у нее есть только четыре уникальных атрибута (align, noshade, size и width). Все остальные, указанные в тэге HR (кроме описанных чуть выше двух групп), будут браузером проигнорированы.

Примеры атрибутов в теге горизонтальной линии HR

В качестве значений различных атрибутов могут выступать как произвольные числа ( и т.п.) так и значения из заранее оговоренного набора, например, как в случае align для HR — left|center|right (вы можете использовать один из трех вариантов выравнивания).

Вообще, информацию по ним в валидаторе WC3 можно получить не только в списке Html тегов, но и в списке атрибутов , который вы найдете по приведенной ссылке.

В этом списке перечислены все возможные варианты для всех имеющихся в языке Html тегов. В колонке «Related Elements» напротив интересующего вас варианта будут приведены элементы, в которых данный атрибут может быть использован. В колонке «Type» указан тип данных, которые могут быть использованы в качестве его значения.

Например, в подчеркнутой на рисунке строке для атрибута align, для тега HR, допустимо использование только трех фиксированных значений, которые там и перечислены (left | center | right).

Еще одной очень важной колонкой является «Depr». Если напротив интересующего вас атрибута в этой колонке стоит буква D, то его использовать не рекомендуется , а следует для его замены применять соответствующие CSS стили. При просмотре спецификации тэгов мы тоже видели, что рядом с названиями всех четырех атрибутов для HR написано слово «Deprecated» (не рекомендован к применению).

Давайте посмотрим, какие атрибуты используются с теми элементами, которые мы уже успели рассмотреть в этой статье (P, заголовки H1-H6 и HR). Для всех них можно использовать «align» , т.к. все эти элементы являются блочными. Для строчных элементов атрибут выравнивания по ширине «align» теряет смысл.

Например, если вы добавите «align» в тег заголовка (например, H1), то сможете задать выравнивание текста заголовка. Т.е. блочный элемент будет занимать все доступное ему пространство по ширине, но содержимое этого заголовка (его текст) может быть выравнен либо по левому краю (left — используется по умолчанию), либо по правому краю (right), либо по центру (center), либо по ширине (justify — изменяется расстояние между словам, как в газетных колонках).

Тоже самое, кстати, будет справедливо и для Html тега абзаца P и для контейнера Div, если вы внимательно посмотрите на приведенный скриншот.

Для горизонтальной линии HR атрибут «align» будет означать выравнивание самой горизонтальной строки, образованной этим элементом. Но тег HR является блочным элементом и стремится занять по ширине все доступное пространство. Следовательно, имеет смысл использовать «align» в нем только в том случае, если вместе с ним вы задали значение для атрибута «width» (ширина) меньшее ширины страницы.

В качестве значения для «width» можно использовать просто цифры (это будет задаваться ширина в пикселах), либо можно использовать проценты от общей доступной для горизонтальной линии HR ширины. Значение атрибута «size» для этого же тэга задается в цифрах, обозначающих высоту горизонтальной линии в пикселах. Давайте рассмотрим это на примере:

---

У тэга HR в стандарте Html 4.01 есть еще один атрибут, который называют одиночным , т.к. он не может принимать никаких значений (он просто означает какое-то действие) — это «noshade», который запрещает горизонтальной линии отбрасывать тень:

---

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

Удачи вам! До скорых встреч на страницах блога сайт

Вам может быть интересно

Таблицы в Html - теги Table, Tr и Td, а так же Colspan, Cellpadding, Cellspacing и Rowspan для их создания
Iframe и Frame - что это такое и как лучше использовать фреймы в Html
Директивы комментариев и Doctype в Html коде, а так же понятие блочных и строчных элементов (тэгов)
Embed и object - Html теги для отображения медиа контента (видео, флеш, аудио) на веб страницах
Как вставить в HTML ссылку и картинку (фото) - теги IMG и A
Html формы для сайта - теги Form, Input и Select, Option, Textarea, Label и другие для создания элементов вебформ
Теги Font (Face, Size и Color), Blockquote и Pre - устаревшее форматирование текста в чистом HTML (без использования CSS)
Пробельные символы и форматирование ими кода в Html, а так же спецсимволы неразрывного пробела и другие мнемоники
Как создать гиперссылку (А, Href, Target blank), как открывать ее в новом окне на сайте, а так же сделать картинку ссылкой в Html коде

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

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

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

Что такое теги на сайте (метки для создания навигации)

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

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

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

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

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

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

Почему такой способ разметки с помощью тегов используется не на всех вебсайтах, если это удобно для пользователей? Нет их и на моем блоге, чему есть ряд объяснений. Хотя их использование предусмотрено в по умолчанию, а также существует масса плагинов по работе с тэгами.

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

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

Что такое Html теги?

Их впервые я решил изучить еще лет пятнадцать назад, но дальше тега Title у меня тогда дело не продвинулось. Потом мне попался в руки бесплатный видеокурс Евгения Попова по Html и дело пошло. Конечно же, тот курс явился только начальным этапом, но именно такого простого изложения часто и не хватает новичкам.

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

Но видеокурс видеокурсом, а я же вас должен заинтересовать, чтобы вы его скачали и посмотрели. Из общих фраз ведь не понятно, что же такое теги в языке Html и зачем вам их изучать. О, это великая и простая вещь, которая позволит вам стать властелином собственного сайта. А зачем вам сайт?

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

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

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

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

Теги бывают разные , но их не много (из тех, что остались актуальными после внедрения в жизнь CSS). Смотрите как просто. Допустим вы хотите создать абзац — просто окружаете текст будущего параграфа открывающим и закрывающим тегами P (это латинская буква и в коде ее лучше писать маленькой, а здесь я сделал ее заглавной для наглядности). Вот так это будет выглядеть:

Текст текст....... текст текст

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

О, я же забыл сказать, по каким признакам браузер отделяет теги (разметку) от основного содержимого. Сами догадались?

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

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

В коде выглядеть они могут, например, так:

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

Мета теги прописываются в коде вебстраницы в строго определенном месте. Знаете в каком? Правильно, в так называемой «голове» документа, которая заключается в открывающий и закрывающий теги HEAD .

Все, что прописывается внутри них (включая и тэги META), отображаться на вебстранице не будет. Это строго служебная информация. Приведенные выше description и keywords сообщают поисковым системам о содержании данной вебстраницы, а приведенный чуть ниже метатег .

Что такое музыкальные теги в аудио-файлах?

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

Переименовав файлы с помощью , вы все равно на своем проигрывателе увидите нелицеприятную картину. Что же делать? И кто виноват в сложившейся ситуации? Как ни странно, но причиной являются неправильно прописанные теги в этом музыкальном файле .

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

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

С помощью специального софта. Сами теги в аудио-файлах появились впервые в конце прошлого столетия. Для файлов формата MP3 стандарт для их добавления назывался ID3, а для музыкальных файлов, которые сжимаются без потери качества (типа FLAC и подобных ему), стандарт добавления тегов (мета-данных) назывался Vorbis comment.

Для музыки записанной в Виндосовском формате WMA существует WM metadata, а для яблочных MP4 — iTunes metadata (кстати, совсем недавно писал про то, ).

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

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

Удачи вам! До скорых встреч на страницах блога сайт

Вам может быть интересно

Теги для Инстаграма - зачем нужны и где посмотреть самые популярные их них
Хештеги - что это такое и как используют хэштеги в Твиттере, Инстаграме и других местах Как автоматически добавить атрибут Alt в теги Img вашего блога на WordPress (там, где их нет)
Радикал - бесплатный фотохостинг с быстрой и простой загрузкой фото через Radikal.ru
Ссылка - что это такое и как ее создать Что такое кэш - как очистить кеш в Опере, Мозиле, Хроме и других браузерах
Большой Вопрос - как зарабатывать на сервисе вопросов и ответов Сравнение - это прием украшающий образ (примеры из литературы) Что такое Смарт ТВ в телевизоре

Тег

Тег

применяется для разделения страницы на параграфы. Он может содержать только текст и inline-теги (теги уровня строки). При этом сам тег

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

Зависит от типа браузера, но примерно он равен высоте одной строки текста на текущей странице.

Закрывающий тег

не является обязательным. Если он отсутствует, то концом параграфа будет считаться первый не -inline-тег расположенный ниже в HTML-коде страницы.

Атрибуты

Личные атрибуты:

• align - Устанавливает горизонтальное выравнивание содержимого параграфа.

• accesskey - устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
• class - задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
• dir - указывает направление текста внутри элемента.
• - задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
• lang - указывает язык, на котором написан текст внутри HTML-элемента.
• style - необходим для применения встроенных стилей CSS к тегу.
• tabindex - устанавливает порядок табуляции между элементами (клавиша Tab).
• title - выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.

Тип тега

Назначение: текст (блоки) .

Модель тега: block (блочный, уровня блока).

Может содержать: inline-теги, обычный текст и спецсимволы HTML (мнемоники).

Открывающий тег: необходим. Закрывающий тег: не обязателен.

Синтаксис

содержимое

Пример HTML: применение тега P

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

Еще одна ошибка - это использование «где ни попадя» инвертированных цветов, когда визуально цвет текста светлее фона, например черный фон - белый текст. Данная техника вполне применима, но только там, где это действительно к месту.

Поддержка версиями HTML

Версия:	HTML 4.01	HTML 5	XHTML 1.0	XHTML 1.1
Поддержка:	Да	Да	Да	Да

Поддержка браузерами

Браузер:	Internet Explorer	Google Chrome	Mozilla Firefox	Opera
Версия:	6.0 и выше	2.0 и выше	2.0 и выше	9.2 и выше	3.1 и выше
Поддержка:	Да	Да	Да	Да	Да

И сегодня мы с вами рассмотрим поподробнее, что такое html теги и их атрибуты на примере p, br, hr ; а также, какую роль играют значения атрибутов тегов, содержащихся в в html документе.

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

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

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

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

Парные и одиночные, блочные и строчные HTML теги: p, br, hr

Как вы, наверное, уже поняли из предыдущих публикаций на блоге, тег является основной структурной единицей языка гипертекстовой разметки HTML (Hyper Text Markup Language). По большому счету именно совокупность тегов определяет html код, который описывает тот или иной документ (например, одну из страниц вашего ресурса).

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

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

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

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

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

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

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

HTML теги Тег p - блочный элемент Содержание тега p

А вот чтобы отобразить этот текст в несколько строк, необходимо воспользоваться элементом br (от английского «break»), который является одиночным, то есть не имеет закрывающего тега, а также это строчный элемент. Помещая его в конце каждой из строк текста, являющегося содержимым тега p, получаем искомый вариант:

HTML теги
Тег p - блочный элемент
Содержание тега p

Написание тегов br практически свободно. То есть вы можете сразу выделить несколько строк и в конце каждой из них поставить данный тег, а можно просто написать текст обычным способом и в места предполагаемых переносов вставить br. Количество строчных элементов br, включенных в содержание блочного тега p может быть сколько угодно большим. То есть сколько угодно текста можно написать с новой строки.

Теперь посмотрим еще на один простой тег, о котором подробнее поговорим в конце статьи. Речь о теге hr (от английского «horizontal rule» - горизонтальная линия), который является одиночным, но одновременно блочным, поскольку по умолчанию занимает всю возможную ширину. Он описывает простую горизонтальную линию, которая бывает полезной при разделении контента страницы на логические части. Это может быть разделение текста, групп изображений либо каких-то других составных частей дизайна.

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

Атрибуты HTML тегов и их классификация

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

Почти у каждого атрибута есть свое значение (параметр). В общем виде любой одиночный или парный тег можно представить схематически в следующем виде:

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

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

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

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

Все атрибуты элементов можно распределить на три группы:

1. Группа универсальных атрибутов - они применяются практически ко всем html тегам. На скриншоте выше они выделены в зеленую рамку
2. Уникальные атрибуты - присущие только данному элементу набор атрибутов (для тега hr на рисунке они подчеркнуты фиолетовым: align, noshade, size, width). В спецификацию html 5 добавлен новый атрибут color, который определяет цвет горизонтальной линии.
3. События - эти атрибуты нужны, когда требуется какое-либо действие в ответ на действие пользователя. На скриншоте они выделены в синюю рамку.

Информацию об атрибутах можно также получить на другой страничке W3C, где приведена таблица с полным списком html атрибутов :

В этой таблице приведены все атрибуты для всех существующих в языке гипертекстовой разметки тегов. В столбце "Related Elements" напротив нужного атрибута отмечены теги, в которых данный атрибут может быть использован. В колонке "Type" обозначен тип данных, которые могут быть использованы в качестве значения атрибута. Например, для атрибута align (который определяет выравнивание элемента) возможно применение трех возможных значений (left, center, right).

Если в колонке "Dept" проставлена буква D, то такой атрибут использовать не рекомендуется, иначе html документ не пройдет валидацию. В этом случае необходимо использовать стили css, изучением которых, как я уже отмечал, займемся в недалеком будущем. Это просто необходимо, поскольку тенденция такова, что большинство атрибутов в версии html 5 не рекомендованы для использования и внешний вид элементов следует определять, применяя css.

Кстати, абсолютно полная информация с добавленными тегами и их атрибутами по версии html 5 представлена на одном из лучших, на мой взгляд, ресурсов, посвященных изучению основ html, а именно на htmlbook , причем на русском языке.

Как отобразить горизонтальную линию с помощью тега hr

Будем действовать поступательно. Элемент hr без атрибутов определяет простую горизонтальную линию, которая занимает все пространство по ширине (смотрите пример выше). Последовательно применяя различные атрибуты для тега hr, будем изменять внешний вид горизонтальной линии.

Для начала пропишем атрибуты align и width. Что касается align, то его использовать имеет смысл только в том случае, если задан атрибут width, который определяет ширину элемента (меньше, чем ширина страницы). Напомню, что тег hr является блочным элементом и по умолчанию занимает все доступное по ширине пространство.

В качестве значения атрибута width можно использовать цифры (в этом случае будет задаваться ширина в пикселах) либо проценты, которые задают ширину элемента как долю от доступного пространства. Значение атрибута size проставляется в цифрах и определяет высоту элемента (в данном случае толщину горизонтальной линии). Итак, рассмотрим пример:

---

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

---

Теперь попробуем добавить атрибут color, который определит цвет горизонтальной линии. Замечу, что использование этого атрибута автоматически запрещает трехмерные эффекты, поэтому использование noshade не требуется. В качестве значения ставим название цвета, например, "blue".

---

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

Мы уже разобрались. Мы выяснили, что у них есть содержимое. Однако это ещё не всё. У тегов также есть атрибуты, которые расширяют их возможности, а у атрибутов, в свою очередь, есть значения. С их помощью элементу можно задавать параметры, определять стиль оформления. Например, тегом

вы обозначили абзац. Но как сделать, чтобы он был выровнен по правому краю? Для этого понадобится определённый атрибут с соответствующим значением. Как некоторые теги не имеют пары, так и некоторые атрибуты могут употребляться без значений.

Как писать атрибуты?

Атрибуты - зарезервированные слова (как и теги, только без угловых скобок), значения же их могут быть разными. Так же, как и теги, атрибуты со значениями рекомендуется писать маленькими буквами, хотя браузерам, в общем-то, безразлично - это просто правило хорошего тона: по-русски ведь ТОЖЕ НЕ ПРИНЯТО ПИСАТЬ ПРИ ВКЛЮЧЕННОМ CAPS LOCK. А чем HTML хуже?

Значения с атрибутами записываются в таком формате:

Атрибут=”значение” lang=”en”

Писать атрибуты всегда нужно внутри открывающего тега, после зарезервированного слова.

Абзац

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

Универсальные атрибуты

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

• accesskey позволяет задать сочетание клавиш для доступа к определённому объекту страницы. Например, вы можете сделать так, чтобы с помощью комбинации клавиш Alt+1 пользователь переходил по определённой ссылке. Таким образом разработать систему клавишной навигации.

В качестве значения атрибута могут выступать цифры 0-9 или буквы латинского алфавита:

Ссылка будет открываться по нажатию сочетания клавиш с единицей

• class позволяет связать тег с заранее заданным с помощью CSS оформлением. Использование атрибута позволяет существенно уменьшить код, ведь вместо того, чтобы повторять ввод одного и того же блока CSS, можно просто ввести имя соответствующего ему класса.
• С помощью contenteditable можно разрешить пользователю редактировать любой элемент HTML-страницы: удалять, вставлять, изменять текст. Этот же атрибут даёт возможность редактирование и запретить. Значения имеет всего два: true - правку разрешить, false - запретить.
• При помощи атрибута contextmenu вы можете наделить любой элемент документа уникальными пунктами контекстного меню на своё усмотрение. Само меню создаётся в теге , а атрибуту contextmenu присваивается его идентификатор.
• dir определяет направление текста: слева направо (ltr) или справа налево (rtl) .
• draggable позволяет запретить (false) или разрешить (true) пользователю перетаскивать наделённый этим атрибутом элемент страницы.
• dropzone указывает браузеру, что делать с перетаскиваемым элементом: копировать (значение copy ), перемещать (move ) или создать на него ссылку (link) .
• hidden - атрибут, позволяющий скрыть содержимое элемента, чтобы оно не отображалось в браузере. Если атрибуту задано значение false, объект отображается, true - скрывается.
• id задаёт идентификатор элемента - своего рода имя, которое нужно для простой смены стиля объекта, а также для того, чтобы к нему могли обращаться скрипты. Значением атрибута и будет его имя. Начинаться оно должно обязательно с латинской буквы, и может содержать цифры, буквы всё того же латинского алфавита (большие и маленькие), а также символы дефиса (-) и подчёркивания (_) . Русских букв содержать не может.
• lang помогает браузеру понять, на каком языке написан контент, и задать ему соответствующий стиль (например, в языках могут использоваться разные кавычки). Значениями выступают коды языков (русский - ru , английский - en и т. п.).
• spellcheck включает (true) или отключает (false) проверку правописания. Особенно полезно использовать атрибут в тегах полей форм, куда текст будет вводить пользователь.
• style позволяет задать оформление элемента с помощью CSS-кода.
• tabindex даёт возможность определить, сколько раз пользователю придётся нажать клавишу Tab, чтобы фокус получил объект с этим атрибутом. Количество нажатий определяет значение атрибута - целое положительное число.
• title - всплывающая подсказка, которая появится, если подвести мышку к элементу и на некоторое время оставить её неподвижной. Строка в значении и будет подсказкой.

• translate разрешает (yes) или запрещает (no) перевод содержимого тега.
• align задаёт выравнивание элемента. Например, с его помощью можно выровнять текст по левому краю (значение left ), по правому краю (right ), по центру (center) или по ширине (justify) . Для изображений (тег ) также доступно выравнивание по верхней границе самого высокого элемента строки (top ), по нижней границе (bottom) , а значение middle делает так, что средняя линия картинки совпадает с базовой линией строки.

Стоит иметь в виду, что использовать атрибут align не рекомендуется, а выравнивать текст лучше с помощью CSS.

Пример использования атрибутов

В качестве примера рассмотрим строку HTML-кода:

Этот текст можно редактировать

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

Разберём каждый элемент строки.

- открывающий тег контейнера, хранящего абзац.

- закрывающий тег.

Между символами > и < расположен текст Этот текст можно редактировать. Это - надпись вне тегов (между ними), а значит она будет видна открывшему страницу пользователю. Браузер воспринимает её как простой текст, который надо вывести на экран.

contenteditable =”true ” - это и есть атрибут и его значение. Помните, как в школе: x=3. Так и здесь: contenteditable =”true ”. Атрибут contenteditable задаёт, сможет ли пользователь редактировать содержимое элемента, значение true , написанное в кавычках через знак равно, редактирование разрешает:

Атрибут=”значение” contenteditable=”true”