Как правильно написать SEO заголовки h1, h2, h3. Проверка тегов на странице
Заголовки необходимы, чтобы коротко описать основную тематику текста на странице, грамотно его структурировать, выделить разделы, показать их иерархию. С их помощью пользователю будет намного проще ориентироваться в контенте и находить нужный ему материал.
Иерархия заголовков на странице
В языке HTML, на котором создаются web-стрницы, существует 6 уровней заголовков — от тега h1 до h6. Каждый из них в иерархической цепочке подчинен предыдущему. Самый главный заголовок — тег h1, в него вложен подзаголовок h2, соответственно, h3 уже разграничивает текст внутри h2 и т. д.
Пример иерархии с правильной вложенностью тегов:
Как мы видим, в такой иерархии прослеживается логическая последовательность, благодаря которой становится понятно содержание текста и тематика каждого раздела. Недопустимо нарушать иерархию, например, использовать тег Н3 перед Н2 или использовать тег Н6, если на странице нет Н4 и Н5. Как правило, для оформления текста на сайте достаточно тегов Н1 — Н3. Остальные используют в редких случаях.
Пример визуального отображения заголовков в тексте: 
Как заголовки в тексте влияют на продвижение сайтов?
Правильно оформленные заголовки помогают пользователю ориентироваться на странице. Текст с удобной структурой и интересными подзаголовками привлекает посетителей и побуждает их дольше оставаться на странице интернет-магазина. Это положительно отражается на поведенческих характеристиках сайта и способствует росту его позиций в результатах поисковой выдачи.
Яндекс и Google рекомендуют использовать заголовки и подзаголовки для удобства пользователей.
Они помогают и поисковым роботам быстрее разобраться со структурой документа, определить характер и качество контента. Содержимое заголовков учитывается поисковыми системами для определения релевантности страницы поисковому запросу.
Слова, размещенные в тег Н1, получают больший вес, чем остальной текст на странице.
Заголовок (тег) h1
Тег h1 — самый главный заголовок на странице. Он считается названием документа и должен отображать суть размещенного контента. Это поможет пользователям и поисковым роботам точно определить назначение страницы.
Неправильное употребление данного заголовка может просто негативно сказаться на ранжировании станицы, именно поэтому его написанию и оптимизации следует уделить особое внимание.
Правила, которые нужно соблюдать при написании Н1
Правильно написанный заголовок уровня Н1:
располагается выше текста и заголовков следующих уровней и пишется шрифтом наибольшего размера;
отражает содержание текста;
присутствует на странице в единственном экземпляре, если иного не требует логическая структура текста;
не совпадает с Тitle (тайтл) или другими тегами;
уникален для каждой страницы;
длина тега имеет значение: не слишком длинный (количество 60-70 символов) — хотя при ранжировании учитывается больше слов, чем выводится на экран, надо учитывать, что чем больше слов в заголовке, тем меньше будет "вес" каждого из них по формуле БМ25;
содержит в себе ключевое слово — это значимый фактор ранжирования для поисковых систем;
не должен быть переоптимизированным;
в конце не ставится точка (при этом может стоять восклицательный или знак вопроса).
Как прописывать ключевые слова в Н1?
Заголовок на главной странице должен содержать в себе релевантные запросы. Это значимый фактор ранжирования для поисковых систем. На страницах с описанием конкретных товаров пишите заголовки с низкочастотными ключевыми словами.
Ключевое слово должно находиться как можно ближе к началу заголовка.
Избегайте переспама в Н1. Не стоит употреблять слишком много ключевых слов и включать фразы в прямом вхождении, если они звучат неестественно. Используйте разные словоформы и разбавленные вхождения.
Не обязательно всегда начинать заголовок со слов «купить» или «цена» — это может стать негативным сигналом для поисковых систем.
Употребление заголовков Н1 и Тitle
Н1 не должен совпадать с МЕТА-тегом Тitle — заголовком, который описывает содержимое страницы для поисковых систем, а также отображается во вкладке браузера. Тitle можно увидеть и в качестве заголовка сниппета в поисковой выдаче.
Использование одинаковые ключевых слов в МЕТА-теге Тitle и заголовке H1 создает угрозу наложения санкций со стороны поисковых систем. Поскольку Тitle и тег h1 имеют большое значение для ранжирования сайта в результатах поиска, то написание одних и тех же ключевых слов в данных элементах может быть расценено как попытка искусственного увеличения их веса. Также не рекомендуется использовать дубль тега h1 в Description.
Страницы с совпадающими тегами Title и Н1 показывает отчет «Ошибки МЕТА тегов» в разделе «SEO-аудит» сервиса «Лабрика».
Сколько раз можно прописать заголовок (тег) Н1 на странице?
Только один! Правилами языка HTML 5 допускается использование нескольких заголовков Н1.
Тег h1 для Google
Согласно нашим исследованиям, Google не считает наличие нескольких заголовков Н1 критической ошибкой. Специалист компании Мэтт Каттс также говорил о возможности размещения на странице нескольких тегов H1 в тех случаях, когда этого требует логическая структура контента. Однако автор рекомендовал не злоупотреблять этим тэгом и не применять его без необходимости. Например, не стоит выделять тэгами заголовка значительные фрагменты текста. Это, как и слишком частое использование заголовков, не соответствующее структуре статьи, может привести к понижению страницы в результатах поисковой выдачи.
Тег h1 для Яндекс
Важно понимать: для Яндекса присутствие нескольких тегов h1 на странице является отрицательным сигналом ранжирования в интернете.
Информацию по наличию на странице нескольких заголовков h1 можно получить с помощью отчета «Ошибки МЕТА тегов» в разделе «Технический аудит» сервиса «Лабрика».
Как составить «цепляющий» заголовок?
Создание привлекательных заголовков — сложная работа. Чтобы заголовок привлекал внимание пользователей он должен:
сразу показать читателю полезность данного контента — например, предложить решение проблемы, получение какой-либо выгоды и т. п.:
«Как писать заголовки в SMM»;
добавлять интригу — обещать какую-либо эксклюзивную, самую полную, самую актуальную информацию:
«Создаем самый надежный пароль и запоминаем его»;
быть понятным и предоставлять точные, конкретные данные в цифрах — это вызовет больше доверия:
«100+ заголовков, привлекающих внимание»;
обозначать некоторую целевую аудиторию, то есть указывать, для кого предназначен контент страницы:
«Как придумать заголовок к статье? Шпаргалка копирайтера»;
включать побудительные глаголы — они помогут создать нужное вам отношение пользователя к содержимому страницы:
«Получайте новости о конкурсах и грантах быстрее всех!»;
бросать читателю вызов, предлагать ему проверить свои знания:
«А вы знаете, как правильно читать книги?».
Помните, что создание заголовка должно соответствовать контенту страницы вообще. Если вы обманете ожидания читателя, вызванные заголовком, то потеряете доверие к следующим своим текстам и трафик.
Правила оформления заголовков Н2 — Н6
Подзаголовки уровней Н2 — Н6 прописываются внутри текста страницы, чтобы выделить его разделы. Они также учитываются поисковыми системами при анализе контента страницы и должны соответствовать определенным правилам.
располагаться в строгом соответствии с уровнем иерархии;
раскрывать тематику раздела;
начинаться с новой строки;
отличаться по стилю от основного текста и заголовков других уровней;
Заголовки не должны:
включать ниакие другие теги, например, для дополнительного выделения жирным шрифтом;
использоваться для выделения фраз и предложений, не являющихся заголовками по смыслу;
избыточно наполняться ключевыми словами;
находиться в элементах меню и содержать активные ссылки.
Переспам ключевыми словами и наличие тегов в заголовках Н1, Н2, Н3 можно найти с помощью отчета «Тошнота слов на страницах» в разделе «SEO-аудит» сервиса «Лабрика».
Способы: как сделать заголовок Н1 — Н6 в CMS ?
Обычно в шаблонах систем управления контентом (CMS) заголовок Н1 отображается как название страницы. В других CMS Н1, как и подзаголовки в тексте, нужно вручную добавить в содержимом страницы с помощью редактора. Для этого нужный текст выделяется, а в меню выбирается заголовок соответствующего уровня. Проверьте, как прописываются заголовки в систем управления вашего ресурса.
Пример в WordPress: 
HTML заголовок и его виды
В прошлом уроке мы рассмотрели основы HTML и обязательные теги, сейчас продолжим знакомство с другими тегами и рассмотрим каким образом создаются HTML заголовки.
В HTML документе заголовок играет большую роль. Он концентрирует внимание посетителя и призывают его прочитать статью, или какой либо материал, он играет большую роль в оптимизации страниц под поисковые системы т. к. поисковики обращают внимание на текст заключенный между тегами заголовка и т. д.
HTML заголовки бывают 6-ти уровней, каждый из которых отличается величиной. За создание заголовка отвечает тэг <Hx> и парный закрывающий его тэг </Hx>. Где x – это число от 1 до 6-ти, которое определяет уровень заголовка.
Таким образом, тэг <h1> </h1> определяет самый большой размер заголовка, а тэг <h6> </h6> самый маленький. На рисунке вы можете видеть все уровни заголовков от 1-го до 6-го.
В основном применяют заголовки более высоких уровней, очень редко применяются заголовки 6-го и 5-го уровней. Попробуем применить этот тег на практике и сделаем заголовок для HTML страницы. Назовем ее, к примеру, «Тестовая страница» и применим к ней заголовок 1-го уровня.
Для этого в код нашей веб-страницы, которую мы создавали в уроке основы html, сразу после тега <body> вставим следующее <h1>Тестовая страница</h1>. Весь код будет выглядеть так:
Можете попробовать изменять цифры в тэге заголовка от 1-го до 6-ти и посмотреть, как будет меняться величина текста. Не забудьте что после каждого изменения в коде, html файл необходимо сохранить, а чтобы увидеть внесенные изменения необходимо обновить веб-страницу в браузере. Одновременно с величиной текста тег заголовка задает отступы и делает текст жирным.
В основном при создании html документов используют заголовки первого, второго и третьего уровня. Поисковые системы больше всего обращают внимание на ключевые слова находящиеся в заголовке первого уровня, меньше в заголовке второго и третьего уровня и т. д., т. е. чем больше уровень заголовка тем меньше он представляет какое либо значение для поисковых систем. В настоящее время поисковые системы перестали придавать большое значение ключевым словам заключенным в теге h1. Более подробно об этом читайте в материалах раздела SEO оптимизация. Изучение остальных тегов мы продолжим в других уроках по html.
Как понять, что перед вами заголовок
Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от <h1> до <h6> . Каждый уровень заголовка имеет свой семантический вес, где <h1> имеет наибольший вес, а <h6> — наименьший.
Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.
При вёрстке сайта важно соблюдать семантику, чтобы все теги использовались корректно и ресурс работал без ошибок. Если напутать уровни заголовков, то структура страницы будет не семантичной, а скринридеры неправильно прочтут сайт.
В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.
Как выделять заголовки на макете
Чтобы легко выделять заголовки, важно понимать их функцию. Заголовок не просто привлекает внимание, он резюмирует — сжато передаёт смысл блока, в котором расположен. Если после прочтения выделенной фразы вам абсолютно понятно, о чём данный блок — это заголовок.
Если же крупный текст не отражает сути блока, а просто привлекает внимание, то он размечается как обычный абзац. А в разметку лучше добавить подходящий по смыслу дополнительный заголовок, который будет структурировать страницу. Чтобы свёрстанный сайт визуально соответствовал макету, такие дополнительные «невидимые» заголовки скрываются с помощью специального класса visually-hidden в CSS.
Например, на сайте есть блок с описанием преимуществ компании. Мы видим выделенную фразу и автоматически думаем, что её нужно разметить как заголовок. Но на самом деле эта фраза больше относится к содержанию блока. Чтобы структурировать страницу, рекомендуется сделать невидимый заголовок <h2> , который будет передавать суть блока.
Здесь выделенное предложение является содержанием блока, а не заголовком
Немного практики
Теперь рассмотрим макет и потренируемся выделять заголовки.
Самый крупный текст на странице — «Нежный пломбир с клубничным джемом». Было бы ошибкой разметить его как <h1> , потому что этот заголовок относится к одному из слайдеров. У следующей фотографии с продуктом будет другой заголовок.
На роль заголовка первого уровня для всего документа больше подойдёт текст: «Магазин натурального мороженого Глейси». Этого текста нет на странице, но его важно добавить в скрытом виде. Для блока со слайдером можно сделать общий невидимый заголовок <h2> «Виды пломбира на заказ».
Дальше идёт блок с выделенным текстом: «Заказывайте мороженое и получайте подарки!». Этот раздел посвящён акциям и актуальным предложениям, поэтому можно объединить всё невидимым заголовком второго уровня: «Акции на продукты и предложения». Внутри блока расположены сами предложения, которые имеют свои заголовки <h3> .
Блок «Акции на продукты и предложения»
Ниже расположен блок с полным ассортиментом мороженого. Здесь также есть крупный текст, но он больше похож на призыв к действию, чем на сжатое содержание раздела. Поэтому здесь также лучше добавить невидимый заголовок <h2> , например, «Ассортимент мороженого».
Блок «Ассортимент мороженого»
В итоге у нас получится примерно такая структура:
Почему важно правильно размечать заголовки
Верная семантическая разметка и последовательность заголовков важны для правильной индексации сайта, поисковых роботов и правильной работы сервисов и дополнительных интегрированных технологий. У валидатора W3C даже есть отдельный критерий по структуре заголовков.
Чтобы проверить последовательность заголовков, нужно добавить сайт для проверки в строку адреса и поставить галочку рядом с настройкой outline .
В строку адреса добавлен сайт и отмечена галочка outline 
Валидатор показывает все заголовки и их уровни
⭐ Заголовки играют важную роль в оптимизации поисковых систем. Правильное использование заголовков может помочь поисковым системам понять, о чём именно страница, а также улучшить её видимость в результатах поиска.
Некоторые пользователи могут читать страницу в режиме «статьи», с упрощённым дизайном. В этом случае страница станет чёрно-белой и все заголовки примут размер, соответствующий их уровню.
Часть пользователей взаимодействует с ресурсами при помощи вспомогательных технологий. Скринридеры используют заголовки для организации информации на странице и помогают пользователям ориентироваться. Правильно структурированные заголовки позволяют пользователям с плохим зрением или слепотой легко перемещаться по содержанию, пропуская ненужные сведения и переходя к интересующим разделам.
Учебник по HTML
При написании этого курса мы предплагали, что Вы имеете: По крайней мере начальные знания о том, как использовать NCSA Mosaic или любой другой Web browser (например, Netscape). Общее понимание, как работают Web-сервер и Web-browser Доступ к Web-серверу, на котором Вы хотели бы создавать HTML-документы. Желание создавать HTML-документы для личного использования.
Создание документа в HTML
В HTML документы записываются в ASCII формате и поэтому могут быть созданы и отредактированы в любом текстовом редакторе (например, Emacs или vi на UNIX машинах, или любом редакторе на IBM PC).
Пример документа в HTML
Любой гипертекст похож на книгу и может быть разбит на отдельные структурные элементы: Собственно документ Главы, параграфы, пункты, подпункты Абзацы.
Для каждого из этих элементов в HTML существуют определенные стили, описывающие в каком виде пользователь увидит текст на экране. Пусть мы создали файл minihtml.html:
<BODY>
<TITLE>Пример HTML-текста</TITLE>
<H1>Глава 1</H1>
<H2>Параграф 1.</H2>
Добро пожаловать в HTML! Здесь мы расскажем, как надо и как не надо писать гипертексты.
<H2>Параграф 2.</H2>
</BODY>
Итак, Вы уже поняли, что: Заголовок документа начинается с <TITLE> и заканчивается </TITLE>. Заголовок первого уровня (Главы) выделется символами <H1> и </H1>) Заголовоки последующих уровней (параграфы, пункты, подпункты и т.п.) — символами <Hx> и </Hx>), где x — числа 2, 3, . Абзац — символами <P> (В версиях HTML, действующих сейчас, символа </P> не существует! НО! Он может появится в последующих версиях!)
NOTE: HTML не различает, какими буквами набраны символы форматирования: <title> равносильно <TITLE> или <TiTlE>. Не все стили поддержаны всеми WWW-browsers. Если browser не поддерживает стиль, то он его игнорирует. (Поэтому не страшно если Вы уже сейчас начнете пользоваться при форматировании абзацев символом. Ниже мы более подробно остановимся на этом вопросе.)
Основные элементы
Основной текст отделяется от сопроводительного символами: <BODY> </BODY>
Заголовки документов
Каждый HTML-документ должен иметь заголовок, он показывается отдельно и используется, прежде всего, для идентификации документа (например, при поиске). Заголовок должен описывать цель документа и содержать не больше 5-6 слов. Практически во всех browsers заголовок документа виден в верхней части экрана (окна).
Для выделения заголовка служат символы: <HEAD> <TITLE> Заголовок </TITLE> </HEAD>
Заголовки разделов документов
HTML имеет шесть уровней заголовков, имеющих номера с 1 по 6 (заголовок первого уровня является заголовком высшего уровня). По сравнению с нормальным текстом, заголовки выделяются шрифтом — размером и толщиной букв. Первый заголовок в каждом документе должен быть выделен <H1>. Синтаксис заголовков: <Hx> Текст заголовка </Hx> где x — число от 1 до 6, определяющее уровень заголовка.
Абзацы
В отличие от документов в большинстве текстовых процессоров, прерывания строк и слов в HTML-файлах не существенны. Обрыв слова или строки может происходить в любом пункте в вашем исходном файле, при просмотре это прерывание будет проигнорировано. Напомним, что в нашем примере, первый параграф был представлен как <H2>Параграф 1.</H2> Добро пожаловать в HTML! Здесь мы расскажем, как надо и как не надо писать гипертексты.
В исходном файле два предложения находятся на двух разных стороках. Web browser игнорирует это перерывание строки и начинает новый абзац только, после знака < P>. Однако, чтобы сохранить удобочитаемость в исходных HTML-файлах, мы рекомендуем заголовки размещать на отдельных строках, а абзацы отделять пустыми строками (в дополнение к <P>). Также заметим, что хотя в действующих версиях HTML нет признака форматирования < /P>, мы Вам рекомендуем его употреблять, поскольку он может быть введен в последующих версиях. К ошибке это не приведет, поскольку все незнакомые символы browser просто игнорирует. В противном случае, Вам в последствии, может быть, придется переделывать Ваши HTML-документы. В версии HTML+ предлагается, по аналогии с описанием заголовков, использовать как открывающий, так и закрывающий знаки абзаца.
Соединение с другими документами
Главное преимущество HTML состоит в его способности связываться с другими документами. Browser выделяет (обычно цветом и/или подчеркиванием) ключевые слова, являющиеся гипертекстовыми ссылками (гиперссылками). Описывается ссылка на другой документ следующим образом: <A href=»имя файла»> Текст, который будет служить как обращение к другому документу</A>.
Приведем пример такой гипертекстовой ссылки: Пример HTML-текста Здесь ключевые слова `Пример HTML-текста’ являются гиперссылкой на файл minihtml.html, который лежит в той же директории, что и текущий документ. Вы можете ссылаться на документ, лежащий в любой директории, описав к нему полный путь. Так, например, ссылку на файл NJStats.html, лежащий в поддиректории AtlanticStates можно описать как: <A href=»AtlanticStates/NJStats.html»>New Jersey</A> Это так называемые относительные ссылки . Вы также можете использовать абсолютное имя файла (полный путь). В общем случае, использование ссылки по абсолютному имени файла более предпочтительно.
В этой главе был использован материал, подготовленный и доступный полностью на www.frisbee.da.ru. Мы выражаем глубокую благодарность авторам URL-руководства.
Итак -URL это абревиатура от Uniform Resource Locator. В него входит, кроме названия файла и директории: сетевой адрес машины и метод доступа к файлу.С помощью URL можно запускать удаленные программы, и передавать им значения. На этом принципе построены шлюзы в другие интернетовские сервиса: finger, archie, . Здесь представлены несколько наиболее часто используемых типов URL. Допустим файл с именем «online15.zip» лежит на ftp сервере ftp.simtel.ru в директории /pub/doc/services/ тогда URL этого файла будет выглядeть так: file:// ftp. simtel. ru/ pub/ doc/ services/ online15.zip URL директории в которой лежит файл: file://ftp.simtel.ru/pub/doc/services/ а URL корневой директории ftp сервера ftp.simtel.ru выглядит вот так: file://ftp.simtel.ru/
Gopher URL’s не так разнообразны, как файловые. Это связано с ограниченностью этого сервиса. Для того что бы описать, например, gopher сервер узла gopher.kiae.su необходим URL: gopher://gopher.kiae.su/
Некоторые gopher-сервера могут находиться на нестандартном номере порта (по умолчанию обычно используется 70 порт) тогда он должен указываться: gopher://gopher.banzai.edu:1234/, где 1234 — номер порта.
Если вы внимательно посмотрите на исходники какого нибудь гипертекстового документа, и обратите внимание на то как указаны ссылки на другие URL то заметите, что встречаются два вида:
1. <A href=»http://www.simtel.ru/news/snews.http»>News</A>
2. <A href=»aaa.html»>AAA</A>
Первый — это полный URL, а второй — частичный. Частичный URL указывает на документ который находится на том же сервере и в тойже директории, что и документ в котором встречается эта ссылка.
Обращение к определенным разделам других документов
Гиперссылки могут также использоваться для соединения с определенными разделами документов. Предположим, мы хотим соединить документ А с первой главой документа В, для чего нам необходимо создать именнованную гиперссылку в документе B. Здесь вы можете увидеть <A NAME = «Глава 1»>Главу 1</a> Текст первой главы.
Теперь, описывая ссылку в документе A, надо включить не только имя файла «documentB.html» но также и имя гиперссылки, отделяемое символом (#): Здесь вы можете увидеть текст <A HREF = «documentB.html#Глава1»> Главы 1 </A> документа B.
Теперь «кликнув» в слово «Главы 1» в документе А, вы переходите непосредственно в Главу 1 в документе B.
Соединения с разделами текущего документа
Техника соединения аналогична описанной выше, только опускается имя файла. Вот, например, связь с Главой 1 внутри того же самого файла (Документ B) Это <A HREF = «#Глава1»>Глава 1</A> текущего документа.
Дополнительные возможности форматирования
Выше было описано, как создавать простые HTML-документы. Для более сложных документов, HTML имеет некоторые дополнительные возможности форматирования.
Списки
HTML поддерживает ненумерованные, нумерованные списки и списки определений.
Ненумерованные списки
Ненумерованный список: <UL><LI>список пунктов </UL>, например: <UL> <LI> яблоки <LI> бананы </UL>
Нумерованные списки
Нумерованный список идентичен ненумерованному списку, только вместо < UL> используется < OL>. <OL> <LI> апельсины <LI> персики <LI> виноград </OL>
Browser автоматически нумерует элементы такого списка.
Списки определений
Список определений обычно состоит из чередования термина <DT> и определения <DD>. Обычно Web browsers определения располагает на новой строке. Приведем пример списка определений:
<DT> NCSA
<DD> NCSA (National Center for Supercomputing Applications).
<DT> CTC
<DD> CTC (Cornell Theory Center).
</DL>
Вложенные списки
Списки могут быть произвольно вложены, хотя разумнее было бы практически ограничиться тремя уровнями вложенных списков.
Приведем пример вложенных списков:
Авторский стиль редактирования
Как мы уже говорили выше, в общем случае, текст документа формируется browser, игнорируя пробелы и переносы строк. Используя <PRE> можно описать в тексте заданный авторский стиль. (То есть пробелы и пустые строки показаны как пробелы и пустые строки, и строки будут прерываться там же что и в исходном HTML-файле.) Это полезно, например, для изображения программ:
#!/bin/csh
cd $SCR
cfs get mysrc.f:mycfsdir/mysrc.f
cfs get myinfile:mycfsdir/myinfile
fc -02 -o mya.out mysrc.f
mya.out
cfs save myoutfile:mycfsdir/myoutfile rm *
Адреса
<ADDRESS> используется, чтобы определить автора документа и способы контакта c ним (например, e-mail адрес). Обычно это последний пункт в файле.
Например, последняя строка этого документа выглядит:
<ADDRESS> Введение в HTML/ НИИЯФ МГУ/ lenka@srdlan.npi.msu.su </ADDRESS>
Внимание: <ADDRESS> НЕ используется для почтового адреса.
Стили
Можно описывать специальными стилями отдельные слова или предложения. Имеются два типа стилей: логический и физический. Логические стили определяют текст согласно заданному значению, в то время как физические стили определяют некоторые участки текста.
Зачем существуют два стиля, если они могут дать одинаковый результат на экране? В качестве ответа на этот вопрос сошлемнся на аксиому: «Доверьтесь вашему browser.»
В идеале, в SGML, содержание отделяется от заглавия. Таким образом, SGML определяет строку как заголовок, но не определяет, что заголовок должен быть написан, например, жирным шрифтом с размером букв 24 пункта, и должен быть расположен в верхней части страницы. Преимущество этого подхода (это подобно в концепции стиля в большинстве текстовых процессоров) — в том, что если Вы решаете заменить стиль заголовка — все, что Вы должны сделать — это измененить определение заголовка в Web browser.
Другое преимущество стилей в том, что, например, удобнее определить что — нибудь как <H1> чем помнить, каким шрифтом надо описывать заголовок. Это же истинно и для отдельных символов. Например, рассмотрим <STRONG>. Большинство browsers рассматривают это как жирный шрифт в тексте. Однако, возможно, что читатель предпочел бы что этом разделе это выделялось, например, другим цветом. Таким образом, стили дают пользователю большую свободу в выборе шрифтов.
Логические стили
- <DFN> служит для описания определений.
- <EM> служит для выделения слов. (Это выделенное слово.)
- <CITE> служит для выделения заголовков книг, фильмов, цитат и т.п. (Это цитата )
- <CODE> служит для выдлеления программных кодов, текстов программ и т.п. Изображается шрифтом фиксированной ширины. (The <stdio.h> header file)
- <KBD> используется для ввода с клавиатуры пользователья. Может быть изображено жирным шрифтом (но в большинстве browser изображается специальным шрифтом). (Введите passwd )
- <SAMP> используется для машинных сообщений. Изображается шрифтом фиксированной ширины. ( Segmentation fault: Core dumped. )
- <STRONG>служит для ОСОБОГО выделения слов. Обычно выделяется жирным шрифтом (Это очень важно)
- <VAR>используется для символьных переменных. (Это переменная .)
Физические стили
Существуют физические способы выделения — автор задает стиль написания текста, описывая шрифт в исходном HTML-документе.
Вы можете задать:
<B>, </B> — жирный шрифт (это жирный шрифт)
<I>, </I> — наклонный шрифт (это наклонный шрифт)
<TT>, </TT> — фиксированный шрифт (шрифт заданной ширины) (это fixed шрифт)
Специальные символы
Символы <, >, & и » имеют в HTML особое значение, как символы форматирования. Но иногда нам необходимо использовать их в тексте по своему прямому назначению. Для их введения в текст, Вы должны использовать:
& lt; — левая скобка <
& gt; — правая скобка >
& amp; — &
& quot; — «
ЗАМЕЧАНИЕ:Специальные символы чувствительны к регистру: НЕЛЬЗЯ использовать & LT; вместо & lt;.
Прерывание стороки
Используя <BR> Вы можете перейти на новую строку, не начиная нового абзаца (в большинстве browser абзацы выделяются дополнительными пустыми строками).
Например:
Институт Ядерной Физики <BR> Московского Государственного Университета <BR>
Институт Ядерной Физики
Московского Государственного Университета
Горизонтальная линия
Используя <HR> Вы можете разделить текст горизонтальной чертой:
Внутренние рисунки
Большинство Web browsers могут показывать рисунки X Bitmap (XBM) или GIF формата вместе с текстом.
Поскольку каждый рисунок занимает много времени на отображение на экране (что замедляет показ документа) то мы не рекомендуем Вам включать слишком большое количество или чрезмерно большие по размеру рисунки в Ваш HTML-документ.
Чтобы включить рисунок, надо описать гиперссылку на него: <IMG SRC=image_URL>
где image_URL — URL .gif или .xbm файла, содержащего рисунок. Таким образом, синтаксис ссылки на рисунок аналогичен синтаксису гиперссылки HREF.
Автоматически, рисунок выравнивается по нижнему краю сопровождающего его текта, но Вы можете задавать взаимное расположение рисунка и текста:
Форматирование положения рисунка задается включением в гиперссылку пункта «ALIGN ALT = «. Сопроводительный текст должен быть включет в кавычки. Например: <IMG SRC=»logo.gif» ALT = «logo.gif»>
В этом случае пользователь lynx увидит только текст «logo.gif».
Внешние рисунки, звуки и мультипликация
Если Вы не хотите, чтобы рисунок замедлял загрузку основного WWW-документа, Вы можете поместить рисунок в отдельный документ, написав на него гиперссылку. В этом случае пользователь сам должен решить — смотреть или не смотреть ему этот рисунок: