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 |
Устанавливает способ выравнивания контента по горизонтали. В HTML5 используйте CSS. |
Заголовок HTML, виды заголовков html // Вебшкола онлайн
Заголовки очень важны в html-документе
Заголовки HTML
Пример
<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> | Горизонтальная линия |
| <!— —> | Вставка комментария |
Понравилась запись? Сказать «Спасибо» очень просто, поделитесь записью в социальных сетях!