Тег для выделения жирным: Теги strong и b, важность и выделение — Разметка текста — HTML Academy

Но необходимо помнить, что некоторые браузеры текст со свойством font-style: oblique; могут интерпретировать не как наклонный текст, а как курсивный.

Здравствуйте, уважаемые читатели блога ! В этой статье речь пойдет о тегах форматирования текста . Яркими примерами являются выделение текста жирным или курсивом. Также мы рассмотрим влияние некоторых тегов на внутреннюю оптимизацию сайта и правила их написания. Про то, вы можете прочитать в приведенной статье. Кстати, вы можете встретить подобные элементы оформления текста вы можете во многих текстовых редакторах, например в Ворде.

Теги разделяются на 2 вида: блочные и строчные. При использовании первых, вы сможете изменить содержание части текста (строки, отдельные фрагменты или же слова), а вторые являются . Теги форматирования, которые мы рассмотрим в этой статье, преимущественно строчные.

Правила и порядок написания тегов

Вы уже знаете, что такое открывающий и закрывающий теги. Если нет, то прочтите статью, приведенную в самом начале этого материала. Если коротко, то теги бывают двух видов: одиночные (например, перенос на новую строку
) и контейнерные (парными). Так вот, все теги форматирования текста являются парными . Это означает, что любой элемент имеет открывающий и закрывающий теги, а выделяемый фрагмент должен быть помещен между ними. Например, правильное выделение фразы будет выглядеть так: Выделенный фрагмент

Когда браузер обработает этот фрагмент, то вы увидите вот такой текст: Выделенный фрагмент. Кстати, в RSS ленте все теги не отображаются ().

Главное при написании тегов — не забывайте их закрывать. Иначе весь текст на странице будет выделен жирным (в примере с тегом ). Но бывают такие случаи, когда нужно выделить определенный фрагмент и жирным и курсивом одновременно. Но тега, выполняющего это действие, не существует. Выход из этой ситуации один: использовать два тега одновременно. В каком порядке их использовать значения не имеет. Поэтому, написав текст с тегами так:

Выделенный фрагмент

или вот так:

Выделенный фрагмент

Вы все равно получите Выделенный фрагмент курсивом и жирным одновременно. Однако, предпочтительно использовать первый вариант, потому что изначально он был единственным и правильным. Также не стоит забывать о том, что каждый браузер может обрабатывать теги по-разному (), в зависимости от настроек. А теперь перейдем к самим тегам форматирования

Выделение текста жирным и курсивом — теги

Самые популярные теги форматирования текста — выделение его жирным и курсивом . Обычно их используют для придания важности какому-либо фрагменту. Первый случай служит для выделения фрагмента, содержащего полезную информацию или ключевые слова. Курсив применяется в тех же целях, что и жирный текст, но информация менее важна, потому что курсив на фоне основного текста менее заметен, нежели жирный текст.

Рассмотрим для начала выделение текста жирным . Для этого действия используется два тега — и . Разницы во внешнем виде нет. Хотя, учитывая то, что любой браузер может интерпретировать каждый элемент по-своему, вы сможете увидеть какие-либо отличия. Вот как выглядит текст в тегах и в уже обработанном браузером виде:

Текст в тегах strong

Текст в тегах b

А вот как выглядят две данные строчки в исходном коде страницы:

Текст в тегах strong Текст в тегах b

Ту же ситуацию мы можем наблюдать в случае с тегами выделения курсивом и . Попытайтесь найти отличия между двумя примерами:

Текст в тегах em

Текст в тегах I

А вот исходный код:

Текст в тегах em Текст в тегах I

Итак, рассмотренные теги выделения жирным и курсивом фактически не отличаются, но зачем же тогда нам, например, тег если есть ? Ведь последний содержит всего один символ (не считая скобок) и, следовательно, легче в написании. А все дело в том, что теги и влияют на . Если вы будете окружать этими тегами ключевые слова, то это благоприятно скажется на продвижении сайта.Главное не переусердствовать — максимум в тексте должно быть 5% жирного текста в теге , и столько же и курсива в теге .

Если же вы хотите просто выделить в тексте какой-либо момент, то используйте тег или . Вообще, я думаю, что поисковики тоже рассматривают текст в этих тегах как более важный, но на внутреннюю оптимизацию они все-таки оказывают меньшее влияние, нежели и .

Теги выделения текста чертой —

Теперь рассмотрим несколько тегов, которые используют черту в оформлении текста. Самый известный вам из текстовых редакторов — тег или подчеркивание . Влияние на ранжирование этот тег не оказывает (насколько я знаю), а вот выделить какой-либо текст и заострить на нем внимание поможет. Пример использования данного тега я привел чуть выше.

Еще два схожих по назначению тега — и . Оба выполняют функцию зачеркивания текста. Использовать этот тег можно в любых ситуациях: если вы обновляете документ (а точнее его часть), то можно перечеркнуть старое и добавить новое; если вы собираетесь написать нечто, отходящее от темы материала; что-то не соответствующее морально-этическим нормам.

Отличия же этих двух тегов заключаются только в их написании , вследствие чего предпочтительней использовать первый, т.к. во-первых удобнее писать, а во-вторых, на вашей странице будет находиться меньшее количество HTML-кода, а поисковики это любят.

Тег и атрибуты — параметры шрифта текста

Теперь рассмотрим тег, который не используется без атрибутов. С помощью его вы сможете задать параметры для определенного фрагмента текста. Вообще, сейчас предпочтительней использовать (каскадные таблицы стилей), т.к. с помощью них можно сильно сократить весь HTML код страницы. Итак, рассмотрим тот самый тег . Для него существует всего три атрибута:

• face — сам шрифт. Например, Arial, Courier или Verdana. Можно перечислить несколько, т.к. не у всех пользователей имеется обширный набор шрифтов, а написав несколько в атрибуте face, браузер сможет выбрать, какой использовать, а точнее — какой присутствует в системе;
• size — атрибут, указывающий размер текста. Может быть выражен как в условных единицах, так и в пикселях;
• color — цвет текста. Данный атрибут можно использовать как в HTML-кодах цветов, так и в словесных. Первые имеют вид #FFFFFF (где F — любая цифра или буква от A до F), а вторые записываются простыми словами (например, red — красный).

Так выглядит текст в теге с использованием каждого атрибута:

Этот текст имеет размер 6px

Этот текст красного цвета

Этот текст имеет шрифт Arial

Этот текст красного цвета и размера 5px

А вот что вы увидите, после обработки написанного кода:

Блочные элементы оформления текста — заголовки

Напоследок мы рассмотрим блочные элементы, которые используются практически в каждом документе. Это теги заголовков и абзаца. Рассмотрим первое. Заголовки бывают 6-ти видов и каждый имеет свой тег. Каждый вид носит лишь свой порядковый номер и записывается с помощью тегов

Цифра после слова заголовок соответствует цифре в теге . Заголовки оказывают огромное влияние на на внутреннюю оптимизацию, поэтому заключайте в теги ключевые слова. Особенностей этого дела довольно много, о чем я расскажу в последующих статьях.

А теперь поговорим про тег выделения абзаца

Функция данного тега заключается в отделении текста между от другого такого же текста пустой строкой. Если посмотреть исходный код какого-либо документа, то вы можете увидеть следующее:

В зеленых прямоугольниках один абзац, в красных — другой. А вот как этот код выглядит после обработки браузером (стрелочка указывает на пустую строку):

В итоге мы получаем довольно заметное отделение одного абзаца от другого, что идет на пользу — чтение становится более удобным.

Вот и подошла к концу статья про теги форматирования документа . Их намного больше, нежели я описал в этом материале. Просто о некоторых нужно рассказать довольно много, вследствие чего им будет посвящены отдельные статьи с полным обзором.!

Обслуживание

Как выделить ссылку жирным шрифтом : Радиосхема.ру

Я создаю страницу ‘FAQ’, на которой вверху есть список вопросов (ссылки), а ответы появляются ниже.

При нажатии на каждый вопрос отображается соответствующий ответ (с помощью show/hide divs). Мои вопросы таковы: есть ли способ сделать нажатый вопрос/ссылку жирным шрифтом? и чтобы он оставался жирным до тех пор, пока не будет нажат другой вопрос, в этом случае вновь нажатый вопрос будет жирным, а ранее нажатый вопрос вернется в нормальное состояние.

Я пробовал использовать a:active в CSS, но хотя это делает текст жирным при щелчке, как только вы отпускаете мышь, он возвращается в нормальное состояние.

Функция Javascript вызывается при нажатии на каждую ссылку, это показывает/скрывает соответствующие дивы, которые в данный момент находятся друг над другом.

javascript находится ниже

Спасибо за вашу помощь 🙂 Тереза

4 ответа

• некоторые шрифты полужирные, а некоторые нет

У меня есть проблема, чтобы найти, почему шрифты жирные, даже если я не применял жирный шрифт, но половина из них не жирные. что еще больше сбивает с толку. так что некоторые смелые, а некоторые нет. [ Внимание, линк играет арабский вокал ! ] 🙂 проверьте следующий скриншот, и вот живая демо.

Я сделал два похожих проекта Python в Netbeans 6.9.1, и один из них выделен жирным шрифтом. Что заставляет имя проекта Netbeans выделяться жирным шрифтом? Ни одно из моих других названий проектов не выделено жирным шрифтом.

Вы должны добавить этот стиль в свой файл css:

Да, просто измените свой Javascript, чтобы добавить или удалить класс. Определите этот класс как имеющий полужирный или нормальный вес текста.

CSS селектор :active сделает это. Использование то же самое, что и с :hover .

• Как сделать EditText жирным курсивом подчеркивание android

Я работаю с EditText для поддержки свойств полужирного, курсивного и подчеркивания. Я добился успеха, выбрав текст и нажав на кнопку, чтобы выделить жирным шрифтом мой текст. Теперь я хочу снова удалить жирный шрифт после выбора текста и нажатия на кнопку жирного шрифта. Это просто не установка.

Следующий скрипт позволяет мне попасть на сайт с несколькими ссылками с похожими названиями. Я хочу получить только один из них, который можно отличить от других, потому что он напечатан жирным шрифтом на веб-сайте. Однако я не смог найти способ выбрать жирную ссылку в списке. Неужели кто-нибудь.

использование jquery что-то вроде этого может сработать. вы можете заменить «.css» на «.addClass(‘class’)» и «.removeClass(‘class’)» в соответствующих местах.

следует отметить — где «active»-это ваш класс css для стилизации LI. и ol#foo-это ваш OL.

Похожие вопросы:

Есть ли какой-нибудь способ установить ряд дат, которые будут отображаться внутри DatePicker жирным шрифтом (или иным образом выделены)? =UPDATE= извиняюсь, кажется, я недостаточно объяснился. Я.

Я делаю веб-страницу с меню, используя ul и плавающий li . Чтобы отличить активную страницу от других страниц, а также когда я навожу курсор на ссылку, текст становится жирным. Проблема, с которой я.

Я работал над своим richtextbox, но столкнулся с чем-то странным. Я хочу, чтобы первое слово на каждой строке выделялось жирным шрифтом использование этого кода: RichTextBox bold = richTextBox1;.

У меня есть проблема, чтобы найти, почему шрифты жирные, даже если я не применял жирный шрифт, но половина из них не жирные. что еще больше сбивает с толку. так что некоторые смелые, а некоторые.

Я сделал два похожих проекта Python в Netbeans 6.9.1, и один из них выделен жирным шрифтом. Что заставляет имя проекта Netbeans выделяться жирным шрифтом? Ни одно из моих других названий проектов не.

Я работаю с EditText для поддержки свойств полужирного, курсивного и подчеркивания. Я добился успеха, выбрав текст и нажав на кнопку, чтобы выделить жирным шрифтом мой текст. Теперь я хочу снова.

Следующий скрипт позволяет мне попасть на сайт с несколькими ссылками с похожими названиями. Я хочу получить только один из них, который можно отличить от других, потому что он напечатан жирным.

У меня есть простой код PHP, где мне нужно имя, номер телефона и остальные данные пользователя, выделенные жирным шрифтом. Но когда я использую его, он показывает то же самое, но текст не будет.

У меня есть массив в Google Sheet, который выглядит примерно так : +——+———+————+————+————+——+ | | A | B | C | D | . |.

У меня есть промежуток, который после редактирования должен стать жирным. На нем есть класс .edited. Я мог бы проверить, что класс есть, но я также хочу проверить, что элемент действительно выделен.

Существует три способа выделить текст жирным шрифтом на HTML странице, но не спешите сразу использовать любой понравившийся, так как такое выделение может иметь разный смысл и влиять на оптимизацию сайта для поисковой системы.

Жирный шрифт тегом strong

Этот способ подойдет, если вы хотите выделить жирным шрифтом важную часть текста. HTML тег является тегом логического форматирования и его суть: «подчеркнуть» важность выделенного фрагмента.

Другие виды выделения текста описаны в статье: Теги форматирование текста в HTML.

Пример как сделать жирный шрифт HTML тегом :

Жирный текст с помощью тега b

То есть, если по каким-то причинам вы считаете, что фрагмент будет лучше смотреться, написанный жирным шрифтом, но сам по себе выделенный участок не является более важным, чем текст вокруг — используйте тег .

Выделение жирным стилями CSS

Жирный текст можно сделать не только с помощью специальных HTML тегов. Добиться вывода жирным шрифтом можно на любом теге задав ему свойство font-weight: bold; (работает не для всех шрифтов).

Такое выделение будет нести стилистический характер, не добавляя выделенному тексту логического веса.

К тому же, можно выделять как конкретный тег, так и сразу группу элементов, задав стили через CSS класс.

Свойство CSS внутри атрибута style:

Что делать, если выделить текст жирным не получается

Если выделить текст жирным не получается, скорее всего на вашем сайте переопределены CSS стили элементов. В таком случае, вам придется откорректировать эти стили. В большинстве случаев это можно будет сделать через основной файл таблиц стилей CSS. Если вы в этом не разбираетесь, обратиться к веб-мастеру. С большой долей вероятности на решение этой проблемы потребуется не более 5-ти минут работы (хотя, конечно же, могут быть исключения).

В этой статье представлены способы, позволяющие использовать полужирный шрифт в HTML.

• Как сделать полужирный шрифт при помощи CSS-свойства font-weight
• Делаем текст полужирным используя тег жирного шрифта в html
• Как сделать текст полужирным — какой метод уместнее?
• Комбинируем выделение текста с помощью CSS и HTML

Как сделать полужирный шрифт при помощи CSS-свойства font-weight

Не знаете как сделать текст жирным в CSS? CSS предоставляет нам специальное свойство font-weight , которое позволяет вывести полужирное начертание CSS.

Давайте взглянем на следующий пример:

Пример полужирного текста при помощи CSS…
… а также полужирного выделения всего абзаца .

С помощью этого свойства также можно указывать плотность текста. К тому же вы сможете определять текст, который не требуется выделять.

В приведенном выше примере используются встроенные стили. Но я настоятельно рекомендую вам использовать внешние файлы и CSS -классы, так как это поможет применять единую стилизацию ко всем страницам сайта одновременно.

Делаем текст полужирным используя тег жирного шрифта в html

Большинство людей, знакомых с языком гипертекста, когда видят жирный шрифт HTML, сразу же вспоминают о теге .

Давайте рассмотрим пример того как выделить текст жирным в HTML при помощи тега :

Пример полужирного текста при помощи HTML-тега…
… а также полужирного выделения всего абзаца .

HTML-тег — самый быстрый способ вывести текст полужирным.

Как сделать текст полужирным — какой метод уместнее?

HTML предлагает несколько способов выделения текста. И у каждого тега конкретное предназначение.

Чтобы выделить отдельные слова в предложении жирным начертанием в HTML применяется два элемента:

Обратите внимание, что в первую очередь сообщает о важности выделенного текста и по совместительству делает текст жирным. Поэтому для обычного по важности, но жирного по виду текста, следует использовать (пример 1).

В HTML жирный текст можно сделать несколькими способами. К ним относятся:

• Тег b;
• Тег strong;
• CSS-свойство font-weight.

Поговорим о каждом из вариантов выделения текста по порядку.

Жирный текст: тег

Тег b HTML применяется следующим образом:

Для тега обязательно наличие закрывающего , и ему доступны универсальные атрибуты (такие как class, id, title и т.д.)

Хотя валидность тега b и не осуждается спецификацией HTML, более актуальным в использовании является тег strong, давайте разберемся почему.

Жирный текст: тег

Согласно спецификации HTML, тег b служит для выделения текста жирным шрифтом. В отличие от него, тег strong HTML служит для выделения важных фрах, слов, которые являются ключевыми для данной страницы.

Этот тег имеет весомое значение при ранжировании страниц в поисковой выдаче, поэтому он широко используется в продвижении сайтов и при SEO-оптимизации. Поисковые системы учитывают текст, заключенный в теги , и помечают его именно как важный.

Используется тег strong аналогичным образом:

Вы можете заметить, что внешне применение тегов и совсем не отличается (поскольку все современные браузеры интерпретируют их практически одинаково), но семантические различия в коде для поисковых систем, всё-таки, имеют место быть. Поэтому большинство SEO-оптимизаторов рекомендуют использовать тег strong.

Жирный текст при помощи CSS

Мы уже отмечали важность тега strong при поисковом продвижении, но что делать в случае, если нужно выделить большое количество текста жирным (но текст не нужно помечать для поисковиков как важный), или необходимо управлять степенью «жирности» шрифта? В таких случаях используется CSS-свойство font-weight. Применяется оно следующим образом:

Значениями bolder и lighter можно задать степень жирности больше (или меньше), чем у родителя. Числовым значением (100-900) можно задать степень жирности.

Как выделить ссылку жирным шрифтом

HTML выделение: Выделение текста жирным, курсивом и цветом.

Приветствую, Друзья.

После очередного долгого перерыва вспомнил, что давно уже не писал ни строчки. Конечно, на это есть свои причины, ведь какая-нибудь причина придумать себе оправдание всегда найдется, правда? На самом деле, каждый день занимаюсь ВидеоКурсом, о котором уже упоминал пару раз, но пока больше об этом ничего говорить не буду, скоро все узнаете.

Так вот, так как в голову ничего не приходило, о чем можно написать. Решил посмотреть статистику, что же интересует пользователей Рунета по вопросам HTML, WordPress, DLE и тому подобных тем. И знаете что? Есть еще о чем писать. На все вопросы, что я нашел, вроде бы и есть ответы, однако не всегда в понятной форме. Да и вообще стало интересно написать что-нибудь этакое.

Сегодня поговорим об HTML. А именно о том, как выделить текст жирным и курсивным начертанием, а также поговорим о выделении цветом.

Выделение текста жирным начертанием.

Чтобы выделить текст жирным начертанием не нужно ничего мудрить со стилями CSS или придумывать еще какие-либо сложности. В HTML уже есть такая возможность. При этом, мы можем не просто выделить текст жирным, но и сделать на нем некий акцент с помощью выделения. Акцент может делаться для поисковых систем или каких-либо специальных браузеров или программ. Главное это не переборщить с акцентированием текста в статье или на странице с как-то информацией, так как это может губительно сказаться как минимум на продвижении данной HTML-страницы.

Итак, чтобы просто выделить текст жирным, мы можем воспользоваться тегом <b>. Данный тег относится к элементам физической разметки, при этом устанавливая жирное начертание текста, не делая на нем какого-либо акцента. Этот тег является парным, что говорит о том, что он имеет, как открывающий тег, так и закрывающий. Кроме того, так как элемент встроенный, он должен находиться в каком-либо блочном элементе, например <p>

Пример кода:

<p><b>жирный текст</b></p>

Результат:

жирный текст

В этом случае мы просто выделили текст жирным начертанием и все.

Но бывает, так что нам нужно не просто выделить текст, а сделать на нем акцент. Для этого мы можем использовать тег логической разметки <strong>. Мало того, что текст, выделенный, этим тегом имеет больший вес для поисковых систем. Но и по идее он должен отличаться от тега <b> в речевых браузерах, например интонацией. Однако не могу ни подтвердить, ни опровергнуть данную информацию, так ли это?

В этом случае все абсолютно также как и в случае, с простым выделением жирным, только мы делаем акцент, а не просто выделение.

Пример кода:

<p><strong>текст, на котором мы сделали акцент</strong></p>

Результат:

текст, на котором мы сделали акцент

Все довольно просто, не правда ли?

Выделение текста курсивом.

В этом случае все не сложнее, чем в первом. И ситуация у нас абсолютно та же. Мы можем выделить текст двумя вариантами в HTML. Опять же, используя либо тег физической разметки или же тег логической, с помощью которого мы опять же делаем акцент на выделенный текст.

Чтобы выделить текст курсивом мы воспользуемся тегом <i>. Этот элемент является парным и строчным, что говорит нам о том, что мы должны использовать, как открывающий тег так и закрывающий. А также должны использовать его внутри блочного элемента. И в данном случае наиболее подходящий блочный элемент — тег параграфа <p>.

Пример кода:

<p><i>текст курсивом</i></p>

Результат:

текст курсивом

И конечно же мы можем сделать акцент на тексте одновременно выделив его курсивом с помощью тега <em>. Данный элемент такой же как <strong>, за исключением того что выделяется текст курсивом а не жирным.

Пример кода:

<p><em>текст, на котором мы сделали акцент</em></p>

Результат:

текст, на котором мы сделали акцент

И последнее о чем я хотел бы сегодня поговорить — это выделение текста цветом.

К сожалению тега, для выделения текста цветом в HTML мы не имеем. Но все же и в этом способе нет ничего сложного.

Итак, чтобы выделить определенную часть текста цветом, мы можем обернуть нужную часть текста тегом <span>, который является универсальным тегом, и используется внутри блочного элемента. В нашем случае блочным элементом является тег <p>. Но добавить <span> недостаточно. Также необходимо указать параметр style, что позволит добавить CSS свойства необходимому тексту, указать само свойство (color), которое поможет задать определенный цвет. И наконец, указать значение для свойства color. Но может возникнуть вопрос: «Что указывать-то?»  Указать необходимо HTML-код того цвета в который мы хотим «покрасить» текст. HTML-коды цветов можно найти здесь.

Теперь чтобы было понятней рассмотрим пример.

Пример кода.

<p>текст, который нужно выделить <span>цветом</span></p>

В этом случае мы выделяем одно слово: цветом. Также хочу отметить, что тег <span> является парным, и мы должны его закрыть там, где свойство должно закончиться.

Результат:

текст, который нужно выделить цветом

Такими нехитрыми способами мы можем манипулировать текстом на нашей странице. Хочу также отметить, что все то, о чем мы только что говорили, работает и на WordPress и на DLE, ибо любой движок для вывода страниц использует HTML. Именно поэтому HTML можно назвать основой основ любого сайта, не важно, какая  у Вас CMS.

Надеюсь, я все понятно объяснил.

Удачи, Друзья. Скоро… Будут интересные новости…

#HTML & CSS

21 января 2014

Форматирование текста в HTML. Основные теги форматирования

Форматирование текста является очень важным при создании web страницы. Оно позволяет выделить текст который вы считаете важным и обязательным к прочтению. К форматированию текстов вы прибегаете и в повседневной жизни при оформлении каких либо текстовых документов, для придания выразительности и ясности тексту для читающего.

В HTML присутствуют возможности форматирования текста аналогичные любому текстовому процессору (например: MS Word). Это выделение текста полужирным начертанием, курсивным начертанием, позволяет сделать подчеркнутый и зачеркнутый текста, определить шрифт для текста, его цвет, размер и тд.

<b></b> — тег выделения жирным начертанием, без логического выделения текста, относится к тегам физического форматирования текста. Данный тег является парным тегом, все что находится внутри данного контейнера выделяется жирным начертанием.

<strong></strong> — тег выделения жирным начертанием с логическим выделением содержимого. Текст внутри данного тега выделяется не только физически и видим для пользователя, но и логически, показывая поисковым системам что данный текст на странице важен. Если вам необходимо просто выделить текст который не несет в себе смысловой нагрузки всей страницы, то лучше всего использовать тег физического форматирования <b>, перенасыщенность страницы тегами <strong> ведет к наложению санкций поисковыми системами на ваш сайт или страницу.

<i></i> — тег выделения текста курсивным начертанием без логического выделения. Парные тег, весь текст заключенный внутри данного тега будет выводиться браузером курсивным начертанием.

<em></em> — тег выделения курсивным начертанием с логическим выделением текста для поисковых систем. Парный тег, все что заключено внутрь данного тега будет выведено браузером курсивным начертанием, и для поисковых систем определено как важная смысловая фраза для страницы.

<s></s> — текст расположенный внутри данного тега будет выводиться браузером как зачеркнутый текст. Применяется данный тег довольно редко, но в некоторых случаях он крайне необходим.

<u></u> — текст расположенный внутри данного тега будет выводиться браузером в виде подчеркнутого текста, используется для выделения определенных слов в тексте, для придания ему важности и значимости.

<small></small> — данный тег используется для уменьшения размера расположенного внутри него текста в отношении размера основного текста. Подходит для использования в качестве комментария или пояснения для основного текста.

<big></big> — данный тег используется для увеличения размера расположенного внутри него текста в отношении размера основного текста. Используется для выделения отдельного слова или фразы на странице большим размером чем основной текст, для придания ему большей значимости в глазах посетителя сайта.

 — используется для написания верхнего индекса, применяется в случаях когда у вас на странице есть какие либо формулы или математические примеры (для обозначения степеней например).

 — используется для написания нижнего индекса, прменяется в случаях написания на странице каких либо формул (например: химические формулы).

<pre></pre> — текст находящийся внутри данного тега будет отображен браузером в таком виде в каком он написан в данном теге, со всеми пробелами и со всеми отступами.

<mark></mark> — используется для подстветки участка текста на странице. Логического выделения данный тег не несет, но удобен для выделения важной по вашему мнению информации на сайте.

<blockquote></blockquote> — используется для оформления цитат, располагает текст расположенный внутри данного тега в новом блоке и добавляет ему некоторое форматирование.

Так же для форматирования текста используется тег <FONT></FONT> который позволяет задать размер, цвет и шрифт тексту с помощью соответствующих атрибутов: 1. SIZE — позволяет задать размер текста, принимает значения от 1 до 7. 2. COLOR — позволяет задать цвет тексту находящемуся в данном теге, использует стандартные цвета палитры RGB или имя цвета. 3. FACE — позволяет задать тип шрифта или несколько шрифтов через точку с запятой.

ПРИМЕР ИСПОЛЬЗОВАНИЯ ТЕГА <FONT>:

<font size=3 color=red face=Arial> Данный текст будет выведен красным цветом, размером 3, шрифтом Arial </font>

Пример использования тегов форматирования текста

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Мой первый сайт</title>
  </head>
  <body>

   <h2 align="center"> Привет МИР!!!</h2>

<p><b>Дорогой</b> друг я рад <i>видеть</i> тебя на моем <big><b><i>первом сайте!</i></b></big</p>
  </body>
</html>

Результат отображения данного кода в браузере будет таким:

Лабораторная работа 4. Форматирование текста (pdf)

Урок 3. Заголовки и форматирование текста

Заголовки в HTML

Для начала поговорим о заголовках. В предыдущих уроках Вы могли видеть как используется текст. Однако, наряду с ним, в html есть теги, обозначающие заголовки: h2, h3, h4, h5, h5, h6. Они идут в порядке от самого большого, до самого маленького: h2 — самый большой заголовок, h3 — чуть меньше, ну а h6, последний из них, соответственно самый маленький.

<html>

   <head>

   <title>html заголовки</title>

   </head>

<body>
   <h2>Заголовок 1</h2>

   <h3>Заголовок 2</h3>

   <h4>Заголовок 3</h4>

   <h5>Заголовок 4</h5>
</body>

</html>

Вышеуказанный код отобразит следующее

Внимание! сразу хочу сказать, что заголовки надо использовать аккуратно! Поисковый робот, который создаёт массив информации по вашему сайту в ПЕРВУЮ очередь по Контенту анализирует заголовки. И если, например, в них будет содержаться пустая информация вроде Занимательно, Внимание, А тут вот ещё интересно, то это пойдёт в минус Вашему сайту! Сразу обращайте на это внимание и делайте заголовки информативными! Например: Введение в социологию, Парадокс Энштейна-Подольского-Розена, Жизнеописание Горация, Юрский период, в которых должен содержаться Смысл всей или промежуточной информации данной страницы.

Форматирование текста в HTML

Наверное, Вы уже заметили, что если Вы переносите строку и продолжаете печатать текст в коде, то сам текст всё равно идёт в одним абзацем без переноса строки. Для того, чтобы перенести строку надо использовать одиночный тег br в месте принудительного переноса.

Чаще всего (и правильнее) для переноса строки и обозначения абзаца используют тег p (параграф). В случае использования данного тега абзацы у Вас будут разделять отступами друг от друга.

<html>

   <head>

   <title>html параграфы</title>

   </head>

<body>
<p>Текст первого абзаца. Текст первого абзаца. Текст первого абзаца. Текст первого абзаца.</p>

<p>Текст второго абзаца. Текст второго абзаца. Текст второго абзаца. Текст второго абзаца.</p>
</body>

</html>

У тега p есть атрибут align, который отвечает за выравнивание параграфа. Может иметь следующие значения:

left — выравнивание по левой стороне
right — выравнивание по правой стороне
center — по центру
jastify — по ширине

Рассмотрим пример кода выравнивания текста по левой стороне, по правой и по центру

<html>

   <head>

   <title>html выравнивание параграфов</title>

   </head>

<body>
<p align="left">Текст первого абзаца.  Текст первого абзаца. Текст первого абзаца.</p>

<p align="right">Текст второго абзаца. Текст второго абзаца. Текст второго абзаца.</p>

<p align="center">Текст третьего абзаца. Текст третьего абзаца. Текст третьего абзаца.</p>

</body>

</html>

В браузере отобразится следующее

Также существует тег center. Он центрирует его содержимое (текст, изображение и тд). Для текста его действие аналогично выравниванию по центру.

<html>

   <head>

   <title>центрирование в html</title>

   </head>

<body>
<center>Текст по центру</center>
</body>

</html>

Как выделить текст полужирным в html?

strong — стандартное выделение текста жирным.
b — выделение ключевого слова жирным. Вошло в обиход раньше тега strong, поэтому некоторые считают его устаревшим (однако тег используется в HTML5). Наравне со strong воспринимается Поисковыми системами при определении ключевых слов, словосочетаний.
Внимание! Выделение текста данными тегами понимается Поисковой Системой как особо важное.
Будьте внимательны:
1. выделяйте только важные слова и словосочетания
2. важные — это не четверть текста. Старайтесь ограничить применение данного тега.

Рассмотрим пример кода выделения текста жирным

<html>

   <head>

   <title>html выделение жирным</title>

   </head>

<body>
<p>Если Вы хотите выделить какую-то фразу, чтобы она просто была видна пользователю, 

например, напоминание, то <strong>делаем так</strong>. Или так в случае <b>ключевого слова</b></p>
</body>

</html>

В браузере отобразится следующее

И те, и другие слова будут выделены жирным, однако для Поисковой Системы будет важны слова ключевого слова

Как выделить текст курсивом в html?

i — выделение курсивом. Данным открывающим и закрывающим тегами следует выделять только важную информацию (ключевые слова), так как поисковые системы будут выдавать данные, ориентируясь по ним.
em — стандартное выделение курсивом. Нет ограничений в использовании.
cite — данный вид курсива используется для цитаты, ссылки на материал и авторов.
dfn — для выделения определений и терминов.

Рассмотрим пример кода c выделением текста курсивом

<html>

   <head>

   <title>Допустим страница о машинах</title>

   </head>

<body>
<i>Mercedes-Benz</i> - это немецкий автоконцерн, который был основан в 1886 году.  

Название произошло от двух марок - <dfn>Мерседес</dfn> и <dfn>Бенц</dfn>. 

Он занимается в основном выпуском <dfn>легковых автомобилей премиум-класса</dfn>, <dfn>грузовых автомобилей</dfn>, <dfn>автобусов</dfn>.

<p><cite>http://ru.wikipedia.org/wiki/Mercedes-Benz</cite></p>
</body>

</html>

В браузере отобразится так

Как выделить текст подчёркиванием в html?

u — стандартное выделение подчёркиванием (лучше использовать с последними спецификациями html)
ins — так помечаются новые данные (текст, пояснение) вставленные в Ваш документ (либо добавленные, либо взамен старых). Выделяются подчёркиванием

Данные и в первом, и во втором случае будут выделен подчёркиванием.

Как сделать перечёркнутый текст в html?

Перечёркнутым выделяется текст в следующих тегах
del — внесённое исправление.
strike — стандартное перечёркивание.
s — сокращённая запись strike

<html>

   <head>

   <title>Перечёркнутый текст в html</title>

   </head>

<body>
Дважды два равно <del>пяти</del> четырём. Обычный <s>перечёркнутый текст</s>
</body>

</html>

Как выделить текст в верхнем и нижнем индексах в html?

sub — тег, отображающий текст ниже уровня строки шрифтом меньшего размера.
sup — тег, отображающий текст выше уровня строки шрифтом меньшего размера.

<html>

   <head>

   <title>индексы в html</title>

   </head>

<body>
<p>a<sup>2</sup>+b<sup>2</sup> = c<sup>2</sup> - теорема Пифагора. </p>

<p>H<sub>2</sub>O - химическая формула воды.</p>
</body>

</html>

В браузере отобразится следующее

Тег font в html

Для редактирования текста в html также используется тег font. Однако с введением блочной вёрстки и популярностью

CSS

данный способ быстро начал забываться.

Тег font указывает параметры шрифта (тип шрифта, размер, цвет). У него есть соответствующие атрибуты:

face — название шрифта. Можно приводить несколько названий шрифтов (чере запятую), так как у пользователя, просматривающего Ваш сайт, такого шрифта может НЕ быть по умолчанию или он не будет поддерживать данный язык. Например пользователь из Польши или Китая. Соответственно, если данный шрифт не найден, то используется следующий по списку.

size — активные значения от 1 до 7. Шрифт по молчанию равен 3.

color — цвет текста. Если не задать параметр, то текст будет чёрным.

<html>

   <head>

   <title>Тег font в html</title>

   </head>

<body>
<font face="Tahoma" size=5 color="blue">Шрифт Tahoma, размер 5, цвет синий.</font>
</body>

</html>

Повторюсь, данный способ устарел, поэтому советую не привыкать его использовать.

Можно ли вывести текст в том виде, в котором напечатал(а). Тег PRE

Да, действительно можно облегчить себе жизнь и избавиться от многих отступов, переносов и прочего. Для этого существует тег pre. Количество пробелов, большее одного, в коде приравнивается к одному, однако в pre текст остаётся в таком виде, в котором его ввели.

<html>

   <head>

   <title>Тег pre в html</title>

   </head>

<body>
<pre>Как захотели ввести текст

              так он и                отобразился!     =)</pre>
</body>

</html>

В браузере будет так

Другие теги для форматирования текста

Тег abbr обозначает аббревиатуру. Аббревиатура — сокращенное слово или словосочетание. Аббревиатуры можно встретить повсюду, например, HTML (Hypertext Markup Language), PHP (Hypertext Preprocessor).
Слово выделенное в данные теги выделяется пунктиром и при наведении выводит содержимое атрибута title

<html>

   <head>

   <title>Тег abbr в html</title>

   </head>

<body>
<abbr title="Hypertext Markup Language">HTML</abbr> 
</body>

</html>

В браузере будет выглядеть так

Тег acronym в отличие от аббревиатуры обозначает устоявшиеся слово (акроним), которое употребляется как самостоятельное. Например: СССР (Союз Советских Социалистических Республик), СПИД (Синдром приобретённого иммунного дефицита), США (Соединённые Штаты Америки).
Слово выделенное в данные теги выделяется пунктиром и при наведении выводит содержимое атрибута title

<html>

   <head>

   <title>Тег acronym в html</title>

   </head>

<body>
<acronym title="Hypertext Markup Language">HTML</acronym> 
</body>

</html>

Горизонтальная черта в html или тег hr

Для обозначения горизонтальной линии в html используется тег hr. Сверу и снизу он выделяется отступами.

У данного тега есть следующие атрибуты:
align — выравнивание горизонтальной линии. Ранее уже упоминались типы выравнивания: по левому краю (left), по центру (center), по правому (right).
width — фиксирует длину черты в пикселях или процентах
size — толщина линии
color — цвет линии
noshade — убирает рельефность линии

<html>

   <head>

   <title>Тег font в html</title>

   </head>

<body>
Обычная линия

<hr>
Линия по центру длиной 50% от ширины блока, толщина линии 2

<hr align="center" size=2 width=50%>
Линия справа, синяя, 200 пикселей<hr align="right" color="blue" width="200">
</body>

</html>

В браузере

Спасибо за внимание! Урок был долгий и сложный! Вы сделали большой шаг вперёд!

HTML-тег

Тег HTML используется для создания элемента «b», который представляет жирный текст в документе HTML.

Тег следует использовать для выделения текста жирным шрифтом без придания ему дополнительной важности, например, в аннотациях статей, где начало статьи выделено жирным шрифтом. Следует использовать , а не , чтобы передать дополнительную важность. Чтобы передать дополнительную важность, используйте тег . Чтобы выделить текст, используйте клавишу Тег .

Синтаксис

Тег записывается как с текстом, который должен быть выделен жирным шрифтом и вставляется между начальным и конечным тегами.

Вот так:

жирный шрифт

Примеры

Названия продуктов

Вот пример использования элемента для разметки названий товаров в обзоре двух товаров.

iPhone 5s немного опередил Samsung Galaxy S4 во всех наших тестах, однако мы рекомендуем покупать оба.

Артикул Леде

Вот пример использования элемента для разметки первого абзаца статьи.

Статья lede (или lead ) обычно используется в сочетании с заголовком или названием. Он предшествует основной части статьи и дает читателю основное представление о том, о чем идет речь.

Журналистские лозунги подчеркивают важность привлечения внимания читателя, в то время как лэды в эссе резюмируют наброски аргументов и выводов, которые следуют в основной части эссе.

<артикул>

Ученый утверждает, что наука догматична

Биолог Руперт Шелдрейк утверждает, что современная наука сдерживается системами убеждений ученых и что многие ученые не осознают своих собственных предположений.

В своей книге Наука освобождена (известной в Великобритании как The Science Delusion) Шелдрейк излагает десять догм господствующей науки. Он утверждает, что самое большое научное заблуждение состоит в том, что наука уже знает ответы. Детали еще нуждаются в проработке, но, в принципе, основные вопросы решены.

Шелдрейк указывает, что современная наука основана на утверждении, что вся реальность материальна или физична. Нет реальности, кроме материальной реальности…

против против

Помните, что не следует использовать для придания особой важности. Чтобы передать дополнительную важность, используйте тег .

Кроме того, не следует использовать для передачи акцента. Чтобы передать акцент, используйте тег .

Ниже приведены примеры правильного использования каждого из этих тегов.

iMac — это продукт Apple, впервые анонсированный в 19 году.98.

Внимание: прямо сейчас в бассейне плавают крокодилы.

Если вы верите во что-то истинное или верите в то, что это неправда, вы используете веру, чтобы сгладить дискомфорт от невежества. — Том Кэмпбелл

Атрибуты

Атрибуты могут быть добавлены к элементу HTML, чтобы предоставить больше информации о том, как элемент должен выглядеть или вести себя.

Элемент принимает следующие атрибуты.

Атрибут	Описание
Нет

Глобальные атрибуты

Следующие атрибуты являются стандартными для всех элементов HTML. Поэтому вы можете использовать эти атрибуты с тегом , а также со всеми другими тегами HTML.

• ключ доступа
• автокапитализировать
• класс
• редактируемый контент
• данные-*
• директор
• перетаскиваемый
• скрытый
• идентификатор
• режим ввода
• это
• ид
• itemprop
• Артикул
• предметная область
• тип изделия
• язык
• часть
• слот
• проверка правописания
• стиль
• tabindex
• Название
• перевод

Полное объяснение этих атрибутов см. в разделе Глобальные атрибуты HTML 5.

Обработчики событий

Атрибуты содержимого обработчика событий позволяют вам вызывать сценарий из вашего HTML. Скрипт вызывается, когда происходит определенное «событие». Каждый атрибут содержимого обработчика событий имеет дело с другим событием.

• прерывание
• onauxclick
• размытие
• при отмене
• онканплей
• oncanplaythrough
• при смене
• по клику
• при закрытии
• в контекстном меню
• онкопия
• при обмене
• нарезной
• ondblclick
• ондраг
• ондрагенд
• ондрагентер
• ондрагзит
• на накладке
• ондраговер
• ондрагстарт
• впускной
• ondurationchange
• пустой
• одноконцевой
• при ошибке
• онфокус
• данные формы
• на входе
• недействительный
• нажатие клавиши
• нажатие клавиши
• onkeyup
• onlanguagechange
• под нагрузкой
• загруженные данные
• загруженные метаданные
• запуск при загрузке
• ввод с помощью мыши
• накладной
• перемещение мыши
• onmouseout
• при наведении мыши
• для мыши
• паста
• пауза
• в игре
• в игре
• в процессе
• при изменении скорости
• при сбросе
• при изменении размера
• при прокрутке
• нарушение политики безопасности
• поиск
• поиск
• по выбору
• при смене слота
• установлен
• при отправке
• на подвесе
• обновление по времени
• нагрудник
• onvolumechange
• в ожидании
• на колесе

Большинство атрибутов содержимого обработчиков событий можно использовать для всех элементов HTML, но для некоторых обработчиков событий существуют определенные правила, определяющие, когда их можно использовать и к каким элементам они применимы.

Дополнительные сведения см. в разделе Атрибуты содержимого обработчика событий HTML.

HTML: тег

---

В этом руководстве по HTML объясняется, как использовать элемент HTML, называемый тегом , с синтаксисом и примерами.

Описание

Тег HTML просто придает тексту жирный вид, но не придает ему никакого семантического значения. Этот тег также часто называют элементом .

СОВЕТ: Тег HTML не следует путать с тегом , который выделяет текст.

Синтаксис

В HTML синтаксис тега :

 
Текст, выделенный полужирным шрифтом, идет здесь, а не здесь
 

Пример вывода

Атрибуты

К тегу применяются только глобальные атрибуты. Нет атрибутов, специфичных для тега .

Примечание

• HTML-элемент находится внутри тега.
• Тег используется для выделения текста жирным шрифтом, но не выделяет текст, как это делает тег .
• В большинстве случаев рекомендуется использовать тег , а не тег .

Совместимость с браузерами

Тег имеет базовую поддержку со следующими браузерами:

• Chrome
• Андроид
• Firefox (Геккон)
• Firefox Mobile (Геккон)
• Internet Explorer (IE)
• Пограничный мобильный телефон
• Опера
• Опера Мобайл
• Сафари (веб-кит)
• Сафари Мобильный

Пример

Мы обсудим тег ниже, исследуя примеры использования тега в HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict и XHTML 1.1.

• HTML5
• HTML4
• XHTML

Документ HTML5

Если вы создали новую веб-страницу в HTML5, ваш тег может выглядеть следующим образом:

 

<голова>
<мета-кодировка="UTF-8">


<тело>
 
Заголовок 1
 
Мы хотим выделить этот текст жирным шрифтом.

 

В этом примере документа HTML5 мы создали тег , заключающий в себе текст «этот текст», который будет отображаться полужирным шрифтом.

HTML 4.01 Transitional Document

Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег может выглядеть следующим образом:

 

<голова>



<тело>
 
Заголовок 1
 
Мы хотим выделить этот текст жирным шрифтом.

 

В этом примере переходного документа HTML 4.01 мы создали тег , заключающий в себе текст «этот текст», который будет отображаться полужирным шрифтом.

Документ XHTML 1.

0 Transitional

Если вы создали новую веб-страницу в XHTML 1.0 Transitional, ваш тег может выглядеть следующим образом:

 

<голова>



<тело>
 
Заголовок 1
 
Мы хотим выделить этот текст жирным шрифтом.

 

В этом примере переходного документа XHTML 1.0 мы создали тег , заключающий в себе текст «этот текст», который будет отображаться полужирным шрифтом.

XHTML 1.0 Strict Document

Если вы создали новую веб-страницу в XHTML 1.0 Strict, ваш тег может выглядеть следующим образом:

 
 w3.org/1999/xhtml">
<голова>



<тело>
 
Заголовок 1
 
Мы хотим выделить этот текст жирным шрифтом.

 

В этом примере строгого документа XHTML 1.0 мы создали тег , заключающий в себе текст «этот текст», который будет отображаться полужирным шрифтом.

Документ XHTML 1.1

Если вы создали новую веб-страницу в XHTML 1.1, ваш тег может выглядеть следующим образом:

 

<голова>



<тело>
 
Заголовок 1
 
Мы хотим выделить этот текст жирным шрифтом.

 

В этом примере документа XHTML 1. 1 мы создали тег , заключающий в себе текст «этот текст», который будет отображаться полужирным шрифтом.

Поделись:

Рекламные объявления

Тег HTML — GeeksforGeeks

Просмотреть обсуждение

Улучшить статью

Сохранить статью

• Уровень сложности: Базовый
• Последнее обновление: 20 июл, 2022

Читать

Обсудить

Посмотреть обсуждение

Улучшить статью

Сохранить статью

Пример: Этот простой пример кода иллюстрирует выделение текста путем выделения его жирным шрифтом в HTML.

HTML

< html > < body >      < h2 > Гики для гиков h2 >      < h4 >HTML b tag h4 >        < p >        A < b >Портал информатики b > для гиков.        Он содержит хорошо написанные, хорошо продуманные и Хорошо объяснено < B > Интелсовная наука и Статьи по программированию. Body > HTML >

Вывод:

Тег в HTML используется для выделения полужирного текста без какой-либо дополнительной важности. Текст написан внутри тега и отображается полужирным шрифтом. Вы можете сделать это, используя font-weight: bold; свойство в CSS. Это контейнерный тег, который содержит открывающий тег, контент и закрывающий тег. Существует аналогичный тег , который является проанализированным тегом и используется для отображения важности текста и оказывает аналогичное влияние на контент.

В соответствии со спецификацией HTML5 тег следует использовать в крайнем случае, когда никакие другие теги не подходят. Спецификация HTML5 гласит, что для заголовков он должен быть изображен с помощью тегов

до

, для выделенного текста он должен быть изображен с помощью тега

и аналогичным образом, важный текст должен быть изображен с помощью тега , & для отмеченного/выделенного текста он должен быть обозначен тегом .

Синтаксис:

  Contents...  

Допустимые атрибуты: Это глобальный атрибут, который можно использовать для любого элемента HTML.

Пример 1: В этом примере мы использовали тег и тег

, чтобы проиллюстрировать разницу во внешнем виде текста и его размерах.

HTML

< html > 5 50609 < body >      < h2 >GeeksforGeeks h2 >        < h4 >HTML b tag H4 > < P 0004 P > < B > That Is Bold Tag 9003 000000000000000000000000000000 0000009. 9000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 9000 3 > . Body > HTML >

Выход:

Пример 2:

. Пример 2:

Пример 2:0491 В этом примере мы использовали свойство CSS font-weight, для которого установлено значение жирности, чтобы сделать текст жирным.

HTML

< html > < body >      < h2 > GeeksforGeeks h2 >        < H4 > HTML B TAG H4 > < < . / P > < P Стиль = "Font-Weight: Bold" > Это жирный текст с использованием CSS P > Body > 99599099 > 99999999999 > 9999999 HTML >

Выход:

Поддерживаемые браузеры: