Способ 1: Имеет ли это смысл?
<span class="heading">Название статьи</span>
Хотя тег <span> может быть удобным в некоторых ситуациях, он не передает полного значения заголовка. Одним из преимуществ использования этого метода является то, что мы можем прикрепить к нему правило CSS и назначить ему класс заголовка, чтобы его текст выглядел как заголовок.
.заголовок {
размер шрифта: 24 пикселей;
начертание шрифта: жирный;
цвет: синий;
}
Хорошо, теперь все заголовки отмечены классом заголовка крупным жирным шрифтом и синим цветом. чудесный! Но правильно ли это? Что произойдет, если кто-то просмотрит его в браузере, не поддерживающем CSS?
Например, что произойдет, если правила установленной нами внешней таблицы стилей не поддерживаются более старыми версиями браузеров? Или что, если кто-то с нарушениями зрения воспользуется программой чтения с экрана, чтобы прочитать эту страницу? То, что посетитель видит (или слышит) с помощью этих средств, не должно отличаться от обычного текста на странице.
Хотя class="heading" добавляет тегу немного смысла, <span> по-прежнему остается обычным тегом, который можно изменить с помощью стиля по умолчанию в большинстве браузеров.
Поисковые системы будут игнорировать тег <span> при сканировании этой страницы, как будто его не существует, и не будут уделять дополнительного внимания ключевым словам, которые он может содержать. О взаимосвязи между поисковыми системами и заголовками мы поговорим позже.
Наконец, поскольку тег <span> является встроенным элементом, нам может потребоваться вложить его в дополнительный элемент уровня блока, например тег <p> или тег <div>, чтобы он сформировал отдельную строку. , что еще больше загромождает ваши теги ненужным кодом. Эти дополнительные теги необходимы для того, чтобы браузеры, не поддерживающие CSS, могли отображать один и тот же текст.
Способ 2. Комбинация <p> и <b>
<p><b>Название статьи</b></p>
Использование тега абзаца обеспечит отображение на уровне блока, а <b> сделает текст жирным. Но при использовании этого метода для обозначения важного заголовка мы сталкиваемся с такими же бессмысленными результатами.
В отличие от метода А, тег <b> может выделять текст жирным шрифтом в визуальных браузерах, даже в браузерах, которые не поддерживают CSS. Но, как и в случае с тегом <span>, поисковые системы не будут придавать более высокий приоритет только потому, что что-то выделено в абзаце жирным шрифтом.
Трудно стилизовать
Использование обычной комбинации <p> и <b> также имеет еще один недостаток — невозможно сделать этот заголовок отличным от других абзацев. Возможно, мы захотим использовать специальный стиль для выделения заголовка, чтобы сделать содержимое страницы более понятным и структурированным, но этот метод может только сделать его жирным.
Метод 3: Стиль плюс содержание
<h1>Название статьи</h1>
Что ж, какое отличное определение названия. Большинство веб-дизайнеров знакомы с ним. Фактически, при правильном использовании <Hn> может обеспечить гибкую, индексируемую и стилизованную структуру содержимого страницы.
Это также разумный способ определить это, и вы обнаружите, что он довольно прост. Никакие дополнительные теги больше не нужны, и вы можете возразить, что при этом экономится лишь немного больше байтов, чем при использовании двух других методов, что незначительно, но экономия имеет значение.
<h1>–<h6> представляют шесть уровней заголовков, от самого важного (<h1>) до наименее важного (<h6>). Они сами по себе являются блочными и не требуют добавления других элементов для индивидуального выравнивания. Просто, эффективно – просто отличный инструмент.
Легко настраивать стили
Поскольку мы используем тег <h1> уникально, а теги <b> или <p> больше подходят для использования на всей странице, мы можем использовать различные методы CSS для его стилизации.
Более того, тег title может четко обозначать заголовок даже без необходимости стилизации! Визуальные браузеры отображают <h1> более крупным жирным шрифтом. Страница без стилей будет отображать структуру документа, как и ожидалось, с соответствующими тегами заголовков, передающими смысл.
Программы чтения с экрана, КПК, сотовые телефоны, а также визуальные и невизуальные браузеры будут знать, что делать, когда они сталкиваются с тегом заголовка, правильно его обрабатывать и относиться к нему более серьезно, чем к обычному тексту на странице. При использовании тега <span> браузеры, не поддерживающие CSS, не будут обрабатывать его особым образом.
Раздражающие стили по умолчанию
В прошлом дизайнеры могли вообще избегать использования тегов заголовков, потому что настройки браузера по умолчанию были очень уродливыми. Или избегайте использования <h1> или <h2> из-за их огромных размеров по умолчанию и вместо этого используйте теги заголовков с более высокими номерами для достижения меньших размеров.
Однако важно подчеркнуть, что мы можем легко изменить эти теги заголовков с помощью CSS — например, < ;h1> не обязательно должен быть гигантским тегом, занимающим половину экрана. Позже я продемонстрирую, насколько просто стилизовать теги заголовков с помощью CSS, и, надеюсь, развею некоторые из ваших непреодолимых страхов.
дружелюбный к поисковым системам
Это огромное преимущество. Поисковые системы любят теги заголовков. С другой стороны, тег <span> или обычный тег абзаца, выделенный жирным шрифтом, означают нечто меньшее. Правильное обозначение заголовков с помощью <h1>–<h6> требует лишь небольших усилий с вашей стороны, но облегчает сканирование ваших страниц поисковыми системами, поэтому люди в конечном итоге смогут их найти.
Боты поисковых систем будут уделять особое внимание тегам заголовков – сюда вы можете поместить некоторые ключевые слова. Точно так же, как извлекаются <title> и <meta>, они будут выполнять поиск по странице по тегу заголовка. Если вы не используете эти теги, содержащиеся в них ключевые слова не будут считаться ценными и будут игнорироваться.
Таким образом, приложив немного усилий, вы можете повысить вероятность того, что люди найдут ваш сайт, основываясь на содержании вашей страницы. Звучит хорошо, не так ли?
О порядке названий
В примере именно этот заголовок является наиболее важным на странице, поскольку это заголовок документа. Поэтому мы используем самый важный тег заголовка — <h1>. Следуя спецификации W3C, некоторые считают, что пропуск нескольких уровней заголовков — плохая практика. Например, представьте, что мы находимся на следующей странице:
<h1>Название статьи</h1>
Наш следующий заголовок (если он не повторяется с другим <h1>) будет <h2>, затем <h3> и т. д. Вероятно, вам не следует пропускать один уровень после <h1> и сразу переходить к <h3>. Я склонен согласиться с вышеизложенной точкой зрения и поддерживать непрерывность уровней по тексту для построения структуры макета. Таким образом, вам будет проще добавлять заголовки и стили к уже существующей странице, а также вы уменьшите количество ошибок, вызванных использованием дополнительных чисел.
Как упоминалось ранее, дизайнеры могут использовать <h4> для обозначения самого важного заголовка на странице просто потому, что размер шрифта по умолчанию не такой неприятный, как <h1>. Но помните: сначала структура, потом дизайн. Мы всегда можем использовать CSS для стилизации заголовков под любой размер текста, который нам нравится.