Как создать жирный и курсивный заголовки в HTML
Внедрите теги разметки стиля для курсива и полужирного шрифта в коде заголовка HTML, чтобы подчеркнуть ваш список тем.
Заголовки
Теги заголовков — это самый простой способ разделить ваш документ. Если вы думаете о своем сайте как о газете, тогда заголовки — это заголовки в газете. Основной заголовок — это h2, а последующие заголовки — от h3 до H6.
Используйте следующие коды для создания HTML.
<h2> Это заголовок 1 </ h2>
<h3> Это заголовок 2 </ h3>
<h4> Это заголовок 3 </ h4>
<h5> Это заголовок 4 </ h5>
<h5> Это заголовок 5 </ h5>
<h6> Это заголовок 6 </ h6>
Держите заголовки в логическом порядке — h2 предшествует h3, который предшествует h4, и так далее.
Не беспокойтесь о том, как выглядят заголовки — вы должны использовать CSS для стилизации заголовков, а не использовать заголовки не по порядку.
Теги заголовков — это элементы уровня блока , поэтому они ставят для вас разрывы строк. Не помещайте теги абзаца внутри тегов заголовка.
Жирный и Курсив
Есть четыре тега, которые вы можете использовать для жирного и курсива:
- <strong> и <b> для жирного
- <em> и <i> для курсива
Неважно, какой вы используете. В то время как некоторые предпочитают <strong> и <em>, многие люди находят <b> для «жирный» и <i> для «курсив» легче запомнить.
Просто окружите свой текст открывающими и закрывающими тегами, чтобы сделать текст жирным или курсивом:
<b> полужирный </ b>
<i> курсив </ i>
Вы можете вложить эти теги (что означает, что вы можете сделать текст как жирным, так и курсивом), и не имеет значения, какой это внешний или внутренний тег.
Например:
Этот текст выделен жирным шрифтом
<strong> Этот текст выделен жирным шрифтом </ strong>
Этот текст выделен курсивом
<em> Этот текст выделен курсивом </ em>
Этот текст выделен жирным шрифтом и курсивом
<strong> <em> Этот текст выделен жирным шрифтом и курсивом </ em> </ strong>
Почему есть два набора тегов жирным шрифтом и курсивом
В HTML4 теги <b> и <i> считались тегами стиля, которые влияли только на внешний вид текста и ничего не говорили о содержимом тега, и их использование считалось плохой формой.
Затем в HTML5 им было дано семантическое значение вне внешнего вида текста.
В HTML5 эти теги используют определенные значения:
- <b> обозначает текст, который не важнее окружающего текста, но типичным типографским представлением является жирный текст, например ключевые слова в аннотации документа или названия продуктов в обзоре.
- <i> обозначает текст, который не более важен, чем окружающий текст, но типичным типографским представлением является текст курсивом, такой как название книги, технический термин или фраза на другом языке.
- <strong> обозначает текст, который имеет большое значение по сравнению с окружающим текстом.
- <em> обозначает текст, который имеет подчеркнутый удар по сравнению с окружающим текстом.
Курсив в заголовках
Ничто не мешает вам использовать теги курсива в теге заголовка, хотя некоторые браузеры могут удалять этот контекст.
Обычно лучше использовать CSS, чтобы убедиться, что вы получаете тот визуальный результат, к которому стремитесь.
Как сделать жирный шрифт в HTML
Рейтинг: 4 из 5, голосов 13
08 февраля 2018 г.
Существует три способа выделить текст жирным шрифтом на HTML странице, но не спешите сразу использовать любой понравившийся, так как такое выделение может иметь разный смысл и влиять на оптимизацию сайта для поисковой системы.
Жирный шрифт тегом strong
Этот способ подойдет, если вы хотите выделить жирным шрифтом важную часть текста. HTML тег <strong> является тегом логического форматирования и его суть: «подчеркнуть» важность выделенного фрагмента.
В HTML есть и другие теги логического форматирования. Например, тег <em> выделяет текст курсивом и указывает на акцентирование внимания на выделенной фразе.
Другие виды выделения текста описаны в статье: Теги форматирование текста в HTML.
Не стоит использовать тег <strong> слишком часто.
Страница перенасыщенная тегами <strong>, может быть «наказана» поисковыми системами. То же самое может произойти, если вы будете выделять все поисковые ключевые фразы на странице, либо одну и ту же фразу много раз.
Пример как сделать жирный шрифт HTML тегом <strong>:
<p>Обычный текст <strong>выделенный важный фрагмент текста</strong>. Обычный текст.</p>
Жирный текст с помощью тега b
В отличии от тега <strong>, тег <b> не придает выделенному участку дополнительный логический смысл. Тег <b> является тегом физического форматирования и его предназначение — изменить стиль начертания текста.
То есть, если по каким-то причинам вы считаете, что фрагмент будет лучше смотреться, написанный жирным шрифтом, но сам по себе выделенный участок не является более важным, чем текст вокруг — используйте тег <b>.
<p>Обычный текст <b>текст жирным шрифтом</b>.Обычный текст.</p>
Обычный текст.</p>Выделение жирным стилями CSS
Жирный текст можно сделать не только с помощью специальных HTML тегов. Добиться вывода жирным шрифтом можно на любом теге задав ему свойство font-weight: bold; (работает не для всех шрифтов).
Такое выделение будет нести стилистический характер, не добавляя выделенному тексту логического веса.
К тому же, можно выделять как конкретный тег, так и сразу группу элементов, задав стили через CSS класс.
Свойство CSS внутри атрибута style:
<p>Текст жирным шрифтом.</p>
Класс CSS:
<style>
.bold_text {
font-weight: bold;
}
</style>
<p>Текст жирным шрифтом.</p>
<p>Текст обычным шрифтом.</p>
<p>Текст жирным шрифтом.</p>Что делать, если выделить текст жирным не получается
Если выделить текст жирным не получается, скорее всего на вашем сайте переопределены CSS стили элементов.
В таком случае, вам придется откорректировать эти стили. В большинстве случаев это можно будет сделать через основной файл таблиц стилей CSS. Если вы в этом не разбираетесь, обратиться к веб-мастеру. С большой долей вероятности на решение этой проблемы потребуется не более 5-ти минут работы (хотя, конечно же, могут быть исключения).
by Lebedev
Как выделить содержимое CSS курсивом и полужирным шрифтом?
Задавать вопрос
спросил
Изменено 1 год, 5 месяцев назад
Просмотрено 762 раза
0
Новинка! Сохраняйте вопросы или ответы и организуйте свой любимый контент.
Узнать больше.
Итак, я хочу выделить класс содержимого CSS курсивом и полужирным шрифтом.
Вот мой код.
div::before {
содержание: "текст";
черный цвет;
} Я хочу сделать это ТОЛЬКО используя CSS, без HTML. Причина этого в том, что я делаю тему Discord, которая возможна только с помощью CSS, без пользовательского HTML.
Можно добавить font-weight и font-style свойства ::before .
div::before {
содержание: "текст";
черный цвет;
вес шрифта: полужирный;
стиль шрифта: курсив;
} Вы можете выделить контент курсивом используя стиль шрифта и полужирным шрифтом используя вес шрифта
div {
вес шрифта: полужирный;
стиль шрифта: курсив;
}
Сначала добавьте текст в div, потому что это позволит вам получить разницу, а затем применить свойство стиля шрифта: (обычный или курсив).
язык: html
До >
После > Курсив
язык: css
div:: перед {
содержание: "текст";
черный цвет;
стиль шрифта: курсив;
}
1
<голова>Содержимое CSS курсивом и полужирным шрифтом <стиль> div:: перед { содержание: "текст"; черный цвет; вес шрифта: полужирный; стиль шрифта: курсив; } <тело> <дел>
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Требуется, но никогда не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Жирный и курсив в HTML5
Луи Лазарис / /
Обновлено:
Если бы вы использовали и теги в HTML5 так же, как вы привыкли, это было бы нормально. Как многие заявляли, HTML5 обратно совместим со старыми тенденциями в SEO, доступности и разметке, поэтому ваши страницы не сломаются и не будут считаться устаревшими или устаревшими.
Но это не значит, что некоторые из этих элементов не развиваются. Одним из хороших примеров является использование тегов для выделения того, что мы обычно называем «жирным» и «курсивным» текстом.
Здесь я описываю некоторые моменты, на которые следует обратить внимание при добавлении HTML-элементов, которые обычно ассоциируются с «жирным» или «курсивным» текстом.
(фото предоставлено Брайаном Лари)
Элементы
и При кодировании сайтов с разметкой HTML4/XHTML нам рекомендуется использовать вместо .
Элемент был оставлен в беде, так как мы могли стилизовать текст с помощью CSS и добавить важность, используя .
Использование CSS для придания тексту визуально жирного вида и использование , чтобы придать тексту больший акцент (для SEO или общей стратегии контента) был правильным способом. В HTML5 все похоже, но немного отличается. Теперь, согласно спецификации, элемент используется для придания тексту «стилистического смещения по сравнению с обычной прозой без придания ему дополнительной важности». Так что это больше не означает «сделай это жирным шрифтом». Технически буква «б», используемая в элементе, больше не имеет ничего общего с «жирным шрифтом». Вы можете использовать для ключевых слов, основного предложения в статье (в спецификации используется эта статья BBC в качестве примера) или другого текста, который должен выделяться среди остальных, но который вы не хотите иметь дополнительная важность.
Элемент , согласно спецификации, придает тексту «большую важность для его содержимого». Таким образом, тег помещает контент в контекст иерархии (которая почти такая же, как в HTML4). Таким образом, если у вас есть что-то, завернутое в двойные теги , это будет иметь большее значение, чем что-то с одним тегом .
Если это слишком запутанно, вот простое резюме:
Используйте , если вы хотите, чтобы текст имел другой стиль, не зависящий от контекста, но используйте , если вы хотите, чтобы текст имел дополнительное значение с точки зрения содержания или SEO.
Элементы
и Аналогично, элемент теперь следует рассматривать немного по-другому. Это не только для «курсивного» текста (хотя он может быть курсивом, это на ваше усмотрение). Теперь он представляет собой текст, который «в другом голосе или настроении или иным образом отличается от обычной прозы» (что на самом деле является текстом, выделенным курсивом).
Похоже на , он не имеет контекстуального значения по сравнению с окружающим содержимым. Согласно спецификации, вы можете использовать для таксономических обозначений, идиом на иностранном языке (например, фраза argumentsum ad verecundiam ) или даже последовательность сновидений. И, если я не ошибаюсь, как это принято, заголовки публикаций должны быть смещены с помощью (ОБНОВЛЕНИЕ: после дальнейших исследований по этому вопросу я понял, что заголовки публикаций теперь смещаются в HTML5 с использованием (хотя спецификация действительно не приводит это в качестве примера). теги, как объяснено здесь, поэтому вы не должны использовать или для этой цели.)
Элемент (аналогично ) используется для выделения фрагмента текста. В то время как используется для создания контекстной иерархии, — это просто способ подчеркнуть что-то, точно так же, как слова или фразы в разговорной речи.
Например, во фразе «Спецификация HTML5 действительно сложна для понимания» вы можете подчеркнуть слово «есть», чтобы оно выглядело так: «Спецификация HTML5 действительно — это , которые трудно понять».
И снова, если это несколько неясно, вот простое объяснение:
Используйте , чтобы компенсировать настроение текста, но используйте , чтобы сделать текст выразительным.
Почему изменения?
Надеюсь, я не использую здесь ошибку argumentsum ad verecundiam , но в HTML5 для веб-дизайнеров Джереми Кейт объясняет, почему мы должны принять эволюцию этих элементов:
Эти изменения… помогают повысить независимость HTML5 от устройств. Если вы думаете о словах «жирный» и «курсив», они имеют смысл только для визуального носителя, такого как экран или страница. Благодаря удалению визуальной предвзятости из определений этих элементов спецификация остается актуальной для невизуальных пользовательских агентов, таких как программы чтения с экрана.
