Здравствуйте, уважаемые читатели блога сайт. Сегодня мы начнем разговор про теги в языке 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 коде

Браузер					Netтscape		Опера							Mozilla Firefox
Версия	5.5	6.0	7.0	8.0	8.0	9.0	7.0	8.0	9.2	9.5	1.3	2.0	3.1	1.5	2.0	3.0
Поддерживается	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да

ШТМЛ:

3.2

4

XШТМЛ:

1.0

1.1

Описание

Определяет контентовый параграф. Тег

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

Синтаксис

контент

контент

Параметры

align Определяет выравнивание контента.

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

Не обязателен.

Пример 1. Использование тега

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Описание параметров тега

Параметр ALIGN

Описание

Выравнивание блока контента по краю.

Синтаксис

Аргументы

left Выравнивание контента по левоой стороне. В этом случае строки контента выравнивается по левоой стороне, а правый край располагается?лесенкой?. Такой способ выравнивания является наиболее популярным на с нашего сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой контент. center Выравнивание контента по центру. контент помещается по центру горизонтали окна браузера или контейнера, где расположен контентовый блок. Строки контента словно нанизываются на невидимую ось, которая проходит по центру web-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению контента. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого контента неудобно. right Выравнивание контента по правой стороне. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки контента равняются по правой стороне, а левый остается?рваным?. Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой контент читать труднее, чем, если бы он был выровнен по левоой стороне. Поэтому выравнивание по правой стороне применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где контент приходится читать справа налево, там возможно подобный способ выравнивания и пригодится. Но где вы у нас в стране видели такие сайты. justify Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.

Значение по умолчанию

Аналог CSS (ЦСС)

Пример 2. Выравнивание контента

ШТМЛ 4.01 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.

Тег

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

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

Используется, но не обязателен

Атрибуты тега P

Align – определяет выравнивание текста по горизонтали.

Значения атрибута

Left - выравнивание текста по левому краю
- center – выравнивание текста по центру
- right - выравнивание текста по правому краю
- justify - выравнивание текста по ширине - одновременно по левому и по правому краю. В этом случае (при необходимо сти) добавляются пробелы между словами.Это значение действует, если текст занимает более одной строки.

Значение по умолчанию

Left

Пример - тег p

"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >

Параграф расположен в правой части документа

Параграф расположен по центру

Параграф расположен в левой части документа

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

Параграф расположен в правой части документа

Параграф расположен по центру

Параграф расположен в левой части документа

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

46.4K

Зачастую начинающих веб-мастеров мучает вопрос, почему одни сайты ранжируются выше и обходят конкурентов в поисковой выдаче. Причиной этого могут быть неправильно расставленные теги h1 , h2 …h6 . Если эти теги расставлены неверно, без учета специфики ресурса, то поисковикам сложнее получить точную информацию о статьях и содержащихся в ней ключевых словах.

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

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

Зачем нужны теги h1-h6?

В теги заключается название сайта, заголовки и подзаголовки текста:

В HTML теги заголовков обозначаются h от английского «header », что в переводе означает «заголовок, шапка ». Вот пример того, как это выглядит:

Заголовок

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

- наиболее важные теги

- менее значимые теги...

- последние по важности теги

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

Синтаксис тегов h1-h6

Название текста

Подзаголовок 1

...

Подзаголовок 2

Подзаголовок 3.1

...

Подзаголовок 3_2

Подзаголовок 3

Наибольшей популярностью пользуются теги h1 h2 h3 .

Как правильно использовать тег h1?

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

HTML тег h1 – самый значимый в своем роде. В него заключают название сайта и заголовок статьи. Однако не стоит его путать с тегом

Первый абзац: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Второй абзац: It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using "Content here, content here", making it look like readable English.

Давайте посмотрим, как выглядит это дело в браузере:

Наверняка вы заметили, что в коде страницы есть тег strong, этот тег делает текст жирным.

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

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

Атрибут указывается внутри скобки открывающего тега и имеет следующий синтаксис: имя_атрибута="значение"

Атрибут выравнивания

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

Содержимое параграфа.

У этого атрибута есть 4 значения:

1. Left – Выравнивает контент по левому краю. Это значение стоит по умолчанию. То есть если для абзаца не указываем атрибут align , то контент внутри абзаца по умолчанию, выровняется по левому краю. Это можно заметит в предыдущем примере.

2. Right – Выравнивает контент по правому краю.

Текст…

Вот как это выглядит в браузере:

3.Center - Выравнивает контент по центру страницы.

Текст…

4.Justify – Выравнивает контент по ширине страницы.

Текст…

Итоги урока:
Мы сегодня узнали, что такое абзац в html. Абзацы используются очень часто в html. Также узнали, что такое атрибут тега. И выучили атрибут выравнивания align. Который может принять одно из следующих значений: left (значение по умолчанию), right, center, justify.