Заголовок в html – Заголовки html (теги h1 — h6), html форматирование текста (теги strong, b, em, i, blockquote, pre) | Создание сайтов и заработок в сети

Содержание

HTML заголовок и его виды

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

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

Материалы по теме:

HTML заголовки бывают 6-ти уровней, каждый из которых отличается величиной. За создание заголовка отвечает тэг <Hx> и парный закрывающий его тэг </Hx>. Где x – это число от 1 до 6-ти, которое определяет уровень заголовка.

Таким образом, тэг <h2> </h2> определяет самый большой размер заголовка, а тэг <h6> </h6> самый маленький. На рисунке вы можете видеть все уровни заголовков от 1-го до 6-го.

В основном применяют заголовки более высоких уровней, очень редко применяются заголовки 6-го и 5-го уровней. Попробуем применить этот тег на практике и сделаем заголовок для HTML страницы. Назовем ее, к примеру, «Тестовая страница» и применим к ней заголовок 1-го уровня.

Для этого в код нашей веб-страницы, которую мы создавали в уроке основы html, сразу после тега <body> вставим следующее <h2>Тестовая страница</h2>. Весь код будет выглядеть так:

<html>
<head>
<title>Моя первая страница </title>
</head>
<body bgcolor="#FFFF99" text="#0000CD">
<h4>Тестовая страница</h4>
Вот вы и создали свою первую web страницу!!!
</body>
</html>

Можете попробовать изменять цифры в тэге заголовка от 1-го до 6-ти и посмотреть, как будет меняться величина текста. Не забудьте что после каждого изменения в коде, html файл необходимо сохранить, а чтобы увидеть внесенные изменения необходимо обновить веб-страницу в браузере. Одновременно с величиной текста тег заголовка задает отступы и делает текст жирным.

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

Материал подготовлен порталом: webmastermix.ru

Рекомендуем ознакомиться со следующими материалами:

Подробности

Обновлено: 04 Сентябрь 2013

Создано: 12 Январь 2010

Просмотров: 26798

Создание заголовков в HTML.

В прошлом уроке мы научились работать с тегом <p> и с помощью него создавать параграфы или другими словами абзацы. Сегодня рассмотрим теги, которые отвечают за создание заголовков и подзаголовков. За заголовки в HTML у нас отвечают шесть тегов это теги, начиная с

<h2>, <h3>, <h4>, <h5>, <H5>, <H6>. Заголовок под <h2> как правило используется один раз на странице и это является самый главный заголовок на странице. Остальные теги от <h3> по <H6> можно считать подзаголовками.

Тег <h2> это самый крупный заголовок, <h3> немного поменьше, <h4> еще меньше и так далее, <H6> это самый маленький подзаголовок то есть чем больше цифра, тем меньше заголовок. Все эти теги группы H являются парными и должны иметь обязательно закрывающийся тег </h2>, </h3>, </h4>, </h5>, </H5>, </H6 > в противном случае, если не закрыть тег, то весь текст станет заголовком.

Давайте создадим пример и посмотрим как все работает. Берем все тот же созданный шаблон из первого урока С чего начать WEB-программирование и создаем между тегами <body> наши заголовки.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Первая HTML страница</title>
</head>
<body>
    
    

Я заголовок <h3>

Я заголовок <h4>

Я заголовок <h5>
Я заголовок <H5>
Я заголовок <H6>
</body> </html>

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

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

header - заголовок.


Теги заголовков - HTML подзаголовки

Тег <h2> - <h6> в HTML используются для определения заголовков на веб-странице.

Всего существует шесть тегов заголовков HTML:

  • <h2> - заголовок первого уровня;
  • <h3> - заголовок второго уровня;
  • <h4> - заголовок третьего уровня;
  • <h5> - заголовок четвертого уровня;
  • <h5> - заголовок пятого уровня;
  • <h6> - заголовок шестого уровня.

HTML заголовок <h2> имеет наибольшее значение, является главным заголовком HTML документа.

Заголовки имеют строгую иерархию. Заголовок HTML <h3> является подзаголовком <h2> и имеет меньшее значение, чем <h2>, но большее, чем <h4> и т.д.

Использовать HTML заголовки необходимо в последовательности от <h2> до <h6>. Использование заголовка меньшего значения, без наличия заголовка большего значения (например использовать <h5>, если не использован <h4>) является ошибкой.

Обычно на странице сайта используется один заголовок <h2>, который может содержать несколько подразделов <h3>, разделенных на подзаголовки <h4> и т.д.

Рекомендации по использованию тегов заголовков описаны в статье: Как правильно писать HTML заголовки для сайта.

Браузеры обычно выделяют заголовки размером шрифта и добавляют пустое место до и после них. Заголовок HTML <h2> имеет наибольший размер шрифта, заголовок <h6> - наименьший.

Все виды выделения текста описаны в статье: Теги форматирования текста в HTML.

Синтаксис

<h2>заголовок</h2>

Отображение в браузере

Примеры использования заголовков HTML в коде

<!DOCTYPE html>
<html>
<head>
<title>Теги заголовков</title>
</head>
<body>
<h2>Заголовок 1-го уровня</h2>
<h3>Заголовок 2-го уровня</h3>
<h4>Заголовок 3-го уровня</h4>
<h5>Заголовок 4-го уровня</h5>
<h5>Заголовок 5-го уровня</h5>
<h6>Заголовок 6-го уровня</h6>
</body>
</html>

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

Атрибуты

В HTML5 у тегов заголовков <h2>, <h3>, <h4>, <h5>, <h5>, <h6> нет атрибутов.

Устаревшие атрибуты заголовков HTML

Атрибут Значения Описание
aling

left
center
right
justify

Устанавливает способ выравнивания контента по горизонтали. В HTML5 используйте CSS.

Заголовок HTML, виды заголовков html // Вебшкола онлайн



Заголовки очень важны в html-документе

Заголовки HTML

Заголовки вставляются с помощью тега <h>. Число после тега <h> указывает на величину заголовка. Самый крупный заголовок соответствует тегу <h2>, а самый маленький — <h6>.

Пример

<h2>Заголовок первого уровня</h2>
<h3>Заголовок второго уровня</h3>
<h4>Заголовок третьего уровня</h4>

Внимание!Браузер автоматически добавляет пустую строку до и после заголовка.


Заголовки важны

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

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


Горизонтальная линия

Тег <hr /> используется для вставки горизонтальной линии в документ.

Пример

<h2>Это мой первый заголовок.</h2>
<hr />
<p>Это мой первый параграф.</p>
<hr />


HTML комментарии

Для того, чтобы сделать html-код более читабельным, вы можете добавить в него комментарии. Комментарии игнорируются браузером и не отображаются на веб-странице.

Чтобы добавить комментарий в html-код надо написать следующую конструкцию:

Пример

<!-- Здесь будет ваш комментарий -->

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


Как посмотреть html-код страницы?

Чтобы посмотреть html-код(исходный код) страницы вам надо выполнить следующие действия:

  • Opera(10.00) — в верхнем меню выбрать пункты «Вид» -> «Исходный код» или нажать комбинацию клавиш Ctrl+U.
  • Internet Explorer(8.0.6) — в верхнем меню выбрать пункты «Вид» -> «Просмотр HTML кода».
  • Mozilla Firefox(3.5.3) — в верхнем меню выбрать пункты «Вид» -> «Исходный код страницы» или нажать комбинацию клавиш Ctrl+U.
  • Google Chrome(3.0.195.24) — вверху справа нажать на значок страницы с загнутым уголком(Управление текущей страницей), выбрать пункты «Разработчикам» -> «Просмотреть исходный код» или нажать комбинацию клавиш Ctrl+U.

Примеры с этой страницы

Заголовки

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

Горизонтальная линия

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

Комментарии в html

Пример демонстрирует, как вставить комментарий в html-код.


Справка по тегам HTML

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

Тег Описание
<html> Описывает html-документ
<body> Описывает «тело»(содержимое) html-документа
<h2>-<h6> Заголовки от первого до шестого уровня
<hr> Горизонтальная линия
<!-- --> Вставка комментария


Понравилась запись? Сказать "Спасибо" очень просто, поделитесь записью в социальных сетях!



Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *