Как сделать красивый заголовок html
10 советов по улучшению заголовков страниц
Тег принадлежит разделу HTML-документа и выглядит следующим образом:
Функции тега
Тег задает заголовок страницы и указывает пользователям и поисковым машинам тему данной страницы. В браузере заголовок отображается на вкладке данной веб-страницы.
Тег — это первое, что появляется в результатах поиска. Пользователь может оценить, соответствует ли сайт его запросу по тегу :
У пользователя в голове откладывается ваш заголовок, потому что он появляется в браузере, в истории посещений, в любимых страницах… Заголовок — это также первое, что видит пользователь, когда переходит по ссылке. Например, из социальных медиа:
Как написать хороший тег заголовка?
Есть 10 советов, которые помогут улучшить заголовок и завоевать симпатию поисковых систем.
1. Мыслите последовательно
Тег title HTML действительно должен быть последовательным. Он должен четко описывать тему страницы. Вы не можете озаглавить страницу контактов « Фотогалерея «.
Основные ключевые слова должны быть использованы в заголовке страницы. Если это не так, тогда либо ваш заголовок не полностью соответствует странице, либо ваши ключевые слова подобраны неправильно.
Избегайте заголовков по умолчанию и неоптимизированных заголовков типа « новая страница «, « без названия «… И автоматически генерируемых заголовков, которые включают в себя ключевые слова типа « Добро пожаловать на мой сайт! »
2. Не обманывайте! (Google не глуп)
Ваш HTML meta title не должен представлять собой набор различных ключевых слов без всякого смысла. Текст должен содержать логичное выражение, которое отражает содержание страницы. Алгоритмы Google Panda и Penguin налагают санкции за такое.
Следите, чтобы в заголовке не повторялись несколько раз одни и те же ключевые слова, если не хотите раздражать своих читателей и быть удаленным из результатов поисковой.
3. Думайте как человек, а не как робот
Попробуйте поставить себя на место пользователя: после того, как он ввел в поиск ключевое слово и получил список ссылок, какой заголовок он выберет? Почему он должен захотеть нажать на вашу ссылку? Заставьте его почувствовать эмоции, благодаря которым он должен выбрать ваш сайт, а не конкурента.
4. Короткие названия, которые говорят много …
Все больше и больше пользователей посещают сайты со смартфонов или планшетов, и заголовок страницы должен быть оптимизирован под эти устройства. Мы рекомендуем использовать заголовок такого же размера ( от 55 до 65 символов ), но избегать длинных слов.
5. Будьте уникальны
Поисковые системы не должны находить дублированного контента ( наличия нескольких страниц в пределах веб-сайта, содержащих тот же самый контент ). Выбирайте уникальные, понятные и персонализированные заголовки для каждой страницы сайта. Главная страница, галерея или страница контактов имеют разные функции и должны быть дифференцированы.
6. Покажите, кто вы такой!
Если вы популярны в поиске, то можете написать в теге title HTML страницы имя вашего бренда. Но не злоупотребляйте этим! Вы должны указать основной атрибут соответствующей страницы ( например, фотогалерея ), прежде чем указывать название бренда. В противном случае вы вызовите недовольство посетителей.
7. Удаляйте стоп-слова
Стоп-слова — это слова, которые фильтруются до или после обработки данных на естественном языке ( текста ).
8. Заголовок идет первым
9. Не ленитесь и не используйте заголовок из
Не копируйте заголовок страницы в теге
HTML-документа. Поисковые системы будут рассматривать эту практику как дублированный контент, и вы спровоцируете негативную реакцию пользователей.
10. Не используйте специальные символы
Но есть исключения: символ « & » вместо « and » может сэкономить для вас количество символов ( например, « sale of shoes and bags » в таком виде « sale shoes & bags « ).
CSS стили для заголовков сайта
Оформление текстовой информации в Web имеет свои определенные особенности. Если вы размещаете на сайте какой-то контент, то, как правило, он должен быть хорошо структурированным — для этого используются заголовки. С их помощью тексты получаются максимально легкими для чтения и восприятия.
Собственно, о них мы сегодня и поговорим — пост использует наработки из этой англоязычной статьи. Там имеется 6 разных вариантов оформления заголовок на любой вкус, я же приведу лишь 5 самых интересных, на мой взгляд. Они могут давать вам идеи и подсказки при реализации своих уникальных стилей. Также советуем глянуть подборку лучших шрифтов Google Fonts для заголовков.
Перед тем как начать пару моментов:
Напоследок во вступлении упоминается такое понятие как «вертикальный ритм» (vertical rhythm). Оно фактически задает все отступы между блоками на странице — будь то заголовки, текстовые параграфы, изображения или даже просто элементы шаблона сайта. Особенно актуально это при использовании необычной типографики. Итак, во всех примерах CSS стилей используется один и тот же «ритм»:
Теперь можно переходить непосредственно к практике.
Пример 1
Начинаем с более-менее простого варианта. Типографика отлично подходит для сайта СМИ, может быть даже какой-то газеты. Особых изысков это решение не предлагает, разве что используется 2 шрифта — Ultra (sans-serif), Orienta (sans-serif). Итоговый CSS код:
Пример 2
Здесь уже чуть более интересная реализация — добавляется фон для заголовка в виде сплошной заливки и картинки. CSS код прописан достаточно грамотно, отступы указаны в процентах дабы при уменьшении изображения текст заголовка не сливался с фоновой картинкой. Используемые шрифты Titillium Web (sans-serif), Muli (sans-serif).
Пример 3
Теперь пример реализации заголовков для сайта с темным дизайном. Для этого был подобран достаточно яркий, контрастный голубой цвет в противовес темно серому фону. Используемые шрифты Hammersmith One (sans-serif), Questrial (sans-serif).
Пример 4
Экспериментируем с фоном — как насчет добавить деревянную текстуру. Шрифты Scada (sans-serif), Carrois Gothic (sans-serif), причем листочек для H2 также реализован через шрифт, а не картинку.
Пример 5
Еще одно интересное и не совсем обычного цветовое решение — возможно, подтолкнет вас к каким-то своим идеям и реализациями. Заголовки, в принципе, не всегда могут иметь жирный большой шрифт — бывают и такие варианты.
Если вы знаете CSS практически досконально, то в оригинальной статье рассказывается как использовать некие pre-processors в стилях дабы сократить объем кода и сделать его проще. Честно говоря, использование функций и подстановку параметров в файле стилей CSS я видел впервые, но код получается весьма наглядным. Также, разумеется, в исходной статье найдете ссылки на исходники и демо версии всех вариантов.
P.S. Тем, кто работает в интернете или только-только начинает статья о том что такое ТИЦ поможет сориентироваться в одном из самых актуальных и обсуждаемых понятий в сети.
Самый хороший пример 4. Остальное плохо подобраны цвета шрифтов. Но всёравно спасибо за инфу, будет полезно для новичков.
А вообще нужно не только подбирать цвет и размер тени (эффект вдавлиности), но и подбирать цвет самого шрифта, так как шрифт и его объёмность + фон должны гармонично смотреться и играть между собой.
Vladymyr, тут еще важно как шрифты смотрятся в общем дизайне сайта — тогда может некоторые из них и «заиграют» весьма интересно.
В примере 2 как сделать так, чтобы линия тега h2 обрывалась если есть фото напротив.
Пример тут http://clip2net.com/s/jaFF1S
Катя, точный код, увы, вам не подскажу. Было бы просто, если бы для этого h2 был какой-то class, тогда в стилях можно было бы легко прописать для h2.class_name ширину width: 400px. Но если прописывать просто для h2, то все они будут одинаковые даже когда картинки рядом нет. Может попробовать width: 100%, или убрать position: relative.
Огромное спасибо! Очень помогло )
Антон, рассмотреть все варианты нереально:) Реализаций стилей для заголовков может быть множество.
Как сделать красивый шрифт в html: размеры, цвета, теги шрифтов html
В html размер шрифта играет важную роль. Он позволяет обратить внимание пользователя на важную информацию, размещенную на странице сайта. Хотя важен не только размер букв, но и их цвет, толщина и даже семейство.
Теги и атрибуты при роботе со шрифтами html
Возможности атрибута style
2) font-size – задается размер от 1 до 7. Это один из основных способов того, как в html можно увеличить шрифт.
Синтаксис написания:
Размер шрифта можно также задать:
Пример того, как поменять шрифт в html с помощью этого свойства:
Пример того, как изменить шрифт в html этим свойством:
Свойство font и цвет шрифта html
Font является еще одним контейнерным свойством. Внутри себя оно объединило значения нескольких свойств, предназначенных для изменения шрифтов. Синтаксис font :
Также в качестве значения могут быть заданы шрифты, используемые системой в надписях на различных элементах управления:
Русскоязычные шрифты и их поддержка
Не все из установленных в операционных системах шрифтов поддерживают русскую раскладку. Поэтому в веб-разработке лучше всего применять семейства шрифтов, проверенные на практике. Вот шрифты для html русские:
Урок 3. Заголовки и форматирование текста
Заголовки в HTML
| Внимание! сразу хочу сказать, что заголовки надо использовать аккуратно! Поисковый робот, который создаёт массив информации по вашему сайту в ПЕРВУЮ очередь по Контенту анализирует заголовки. И если, например, в них будет содержаться пустая информация вроде Занимательно, Внимание, А тут вот ещё интересно, то это пойдёт в минус Вашему сайту! |
Сразу обращайте на это внимание и делайте заголовки информативными! Например: Введение в социологию, Парадокс Энштейна-Подольского-Розена, Жизнеописание Горация, Юрский период, в которых должен содержаться Смысл всей или промежуточной информации данной страницы.
Форматирование текста в HTML
Наверное, Вы уже заметили, что если Вы переносите строку и продолжаете печатать текст в коде, то сам текст всё равно идёт в одним абзацем без переноса строки. Для того, чтобы перенести строку надо использовать одиночный тег br в месте принудительного переноса.
Чаще всего (и правильнее) для переноса строки и обозначения абзаца используют тег p (параграф). В случае использования данного тега абзацы у Вас будут разделять отступами друг от друга.
У тега p есть атрибут align, который отвечает за выравнивание параграфа. Может иметь следующие значения:
| Атрибут align есть и у заголовков (тег h), и у параграфов (тег p). |
Рассмотрим пример кода выравнивания текста по левой стороне, по правой и по центру
Также существует тег center. Он центрирует его содержимое (текст, изображение и тд). Для текста его действие аналогично выравниванию по центру.
Как выделить текст полужирным в html?
Рассмотрим пример кода выделения текста жирным
И те, и другие слова будут выделены жирным, однако для Поисковой Системы будет важны слова ключевого слова
Как выделить текст курсивом в html?
Рассмотрим пример кода c выделением текста курсивом
Как выделить текст подчёркиванием в html?
Данные и в первом, и во втором случае будут выделен подчёркиванием.
Как сделать перечёркнутый текст в html?
Как выделить текст в верхнем и нижнем индексах в html?
Тег font в html
Для редактирования текста в html также используется тег font. Однако с введением блочной вёрстки и популярностью CSS данный способ быстро начал забываться.
Тег font указывает параметры шрифта (тип шрифта, размер, цвет). У него есть соответствующие атрибуты:
Демонстрация Скачать исходники
Повторюсь, данный способ устарел, поэтому советую не привыкать его использовать.
Можно ли вывести текст в том виде, в котором напечатал(а). Тег PRE
Да, действительно можно облегчить себе жизнь и избавиться от многих отступов, переносов и прочего. Для этого существует тег pre. Количество пробелов, большее одного, в коде приравнивается к одному, однако в pre текст остаётся в таком виде, в котором его ввели.
Адаптивные заголовки (текст) на чистом CSS
Приветствую вас друзья! Хочу еще раз поздравить всех (на всякий случай для тех, кто не получал моего новогоднего поздравления) с наступившим Новым годом!
Давно не писал на своем блоге. Причина все таже — катастрофическая нехватка времени. Помимо всех моих забот, которых итак у меня не мало я ввязался в такую большую авантюру, как строительство собственного дома. По стройке я здесь писать не буду, создам для него отдельный проект. Но сейчас не об этом…
И так, сегодня поговорим о верстке и о таком трюке в CSS, который позволяет сделать наши заголовки адаптивными, причем размер может меняться плавно при уменьшении экрана браузера. Вообще, подзаголовками может подразумеваться любой текст на сайте.
Для динамичного уменьшения шрифта воспользуемся методом calc() в css.
Размер шрифта меняется в пределах от 30px (на большом экране) до 24px (на мобильном экране) с помощью формулы, которая работает в методе calc().
Расшифровку цифр я наглядно представил на картинке ниже.
Итак, давайте разберем подробнее каждый компонент формулы.
1.5rem — минимальный размер шрифта на мобильном при ширине контейнера 320px. Для тех, кто не в курсе rem (root em) — это условная единица, которая определяется, исходя из базового размера шрифта тега html (корневой элемент). Напишу про em и rem более подробнее в другой статье. По умолчанию базовый размер шрифта, устанавливаемый браузером равняется 16px. Вы можете самостоятельно переопределить этот размер (я этого не делаю). В нашем примере минимальный размер шрифта на мобильном — это 24px: 24/16 = 1.5
6 — разница между максимальным и минимальным размерами шрифта. То есть: 30 — 24 = 6. Думаю, здесь все понятно.
100vw — максимальная ширина контейнера сайта на широкоформатном экране. Здесь не путаем с максимальной шириной окна браузера. Именно ширина контейнера! В моем примере она равняется 1200px. Обратите внимание, что заголовки H1-H6 являются блочными элементами в HTML и растягиваются на ширину своего родителя (если нет дополнительных стилей). Вы можете возразить, сказав, что под 100vw определяется именно ширина окна браузера, а не контейнера. Да, и будете правы. Вот этот момент обсудим чуть ниже.
320px — минимальная ширина контейнера сайта на мобильном устройстве. Минимальную ширину я обычно выставляю в 320px, если будет меньше, то появляется горизонтальный скролл.
880 — разница между максимальным размером контейнера сайта и минимальным размером контейнера сайта. То есть: 1200 — 320 = 880.
Если мы данную формулу просто применим к определенному заголовку, то на широком экране FullHD (1920×1080) получим огромный размер шрифта, несмотря на то, что определили максимальный размер (в моем случае — 30px). Здесь как раз сработало значение 100vw, которое мы указали, как максимальную ширину контейнера. Как быть? Прибегнем к медиа-запросам в css.
Как видно из кода css формула с адаптивным заголовком у нас работает только в пределах от 320 до 1200px, ниже и выше — фиксированные значения. Таким образом мы избавились от слишком крупного размера на широких экранах более 1200px и слишком мелкого шрифта на экранах менее 320px.
Адаптивный режим просмотра на CodePen
В принципе здесь все. Добавлю, что данную формулу можно использовать не только для заголовков, но и для любого другого текста. Я даже, было дело, таким образом динамически изменял поля и отступы — margin и padding.
Упрощаем при помощи Sass/Scss
Дополню для любителей верстать на препроцессоре Sass (не понимаю, как можно верстать на чистом css). Лично я запихнул все это дело в миксин и просто в нужном месте его вызываю, передав минимальный и максимальный размеры шрифта.
В данном миксине медиа-запросы я вызываю через миксины Bootstrap 4, так как использую данный фреймворк при верстке макетов.
Теперь там, где нужно вызываем миксин responsive-tlt.
Вот и все хитрости. На этом все. Если возникнут вопросы, то задавайте в комментариях. Помогу обязательно!