Bold html: Тег | htmlbook.ru

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

Может кто-нибудь сказать мне, что я делаю не так?

«bold» никогда не был элементом HTML («b» — наиболее близкое совпадение).

HTML должен содержать структурированный контент; Издатель CSS должен предложить стили для этого контента. Таким образом, пользовательские агенты могут предоставлять структурированный контент с полезными стилями и навигационными элементами управления пользователям, которые не видят предложенный вами жирный стиль (например, пользователи поисковых систем, полностью слепые пользователи, использующие программы чтения с экрана, плохо зрячие пользователи, использующие свои собственные цвета и шрифты, вызывающие пользователи, использующие текстовые браузеры, пользователи голосовых браузеров, таких как Opera для Windows). Таким образом, правильный способ сделать текст жирным, зависит от того, почему вы хотите сделать его жирным. Например:

• Хотите отличить заголовки от другого текста? Используйте элементы заголовка (от «h2» до «h6») и предложите для них выделенный жирный стиль в CSS («h2, h3, h4, h5, h5, h6 {font-weight: bold;}».

• Хотите подбодрить ярлыки для полей формы? Используйте элемент «label», программно свяжите его с соответствующим элементом «select», «input» или «textarea», присвоив ему атрибут «for», соответствующий атрибуту «id» на цели, и предложите жирный стиль для это внутри вашего CSS («label {font-weight: bold;»}).

• Хотите выделить заголовок для группы связанных полей в форме, такой как группа выбора радио? Окружите их элементом «fieldset», присвойте ему элемент «legend» и предложите смелый стиль для него в вашем CSS («legend {font-weight: bold;}»).

• Хотите отличить заголовок таблицы от заголовка таблицы? Используйте элемент «caption» и предложите для него смелый стиль в своем CSS («caption {font-weight: bold;}»).

• Хотите отличить заголовки таблиц от ячеек данных таблицы? Используйте элемент th и предложите для него выделенный жирный стиль в CSS («th {font-weight: bold;}»).

• Хотите отличить название фильма или альбома, на который ссылаются, от окружающего текста? Используйте элемент «cite» с классом («cite class =» movie-title «) и предложите смелый стиль для него в вашем CSS (» .movie-title {font-weight: bold;} «).

• Хотите отличить определенное ключевое слово от окружающего текста, определяющего или объясняющего его? Используйте элемент «dfn» и предложите смелый стиль для него в вашем CSS («dfn {font-weight: bold;}»).

• Хотите отличить компьютерный код от окружающего текста? Используйте элемент «code» и предложите для него смелый стиль в своем CSS («code {font-weight: bold;}»).

• Хотите отличить имя переменной от окружающего текста? Используйте элемент «var» и предложите смелый стиль для него в вашем CSS («var {font-weight: bold;}»).

• Хотите указать, что какой-то текст был добавлен в качестве обновления? Используйте элемент «ins» и предложите смелый стиль для него в вашем CSS («ins {font-weight: bold;}»).

• Хотите слегка подчеркнуть текст («Я люблю котят!»)? Используйте элемент «em» и предложите смелый стиль для него в вашем CSS (например, «em {font-weight: bold;}»).

• Хотите сильно подчеркнуть текст, возможно, для предупреждения (« Берегите собаку! »)? Используйте элемент «strong» и предложите смелый стиль для него в вашем CSS (например, «strong {font-weight: bold;}»).

… Вы поняли (надеюсь).

Не можете найти элемент HTML с правильной семантикой для выражения / почему / вы хотите сделать этот конкретный текст жирным? Оберните его в общий элемент «span», дайте ему осмысленное имя класса, которое выражает ваше обоснование для различения этого текста («<span class =» lede «> Позвольте мне начать эту новостную статью с предложения, которое суммирует его. </ Span >) и предложите смелый стиль для него в вашем CSS («.lede {font-weight: bold;»}. Прежде чем создавать собственные имена классов, вы можете проверить, есть ли микроформат (microformats.org) или общее соглашение о том, что вы хотите выразить.

Устаревший код: vs style= » font-weight:bold;»

Правильный вопрос: «What markup best describes my content?»

Давайте начнем с тега <b> (который не является устаревшим):

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

…

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

…

Это может помочь думать об элементах b или i как о элементе span
с автоматическим резервным стилем. Как и элемент span, эти
элементы обычно извлекают выгоду из имен классов, если они должны быть полезны.

http://www.w3.org/Международные/вопросы/qa-b-and-i-tags

Для сравнения, <strong> имеет более конкретную цель:

Сильный элемент представляет собой фрагмент текста с большой важностью.

http://www.w3.org/TR/html-markup/strong.html

Например:

<p><strong>Warning.</strong> Here be dragons.</p>

_{Здесь мы подчеркиваем слово «warning», чтобы подчеркнуть его важность.}

Но не:

<p><strong>Item 1:</strong> Foo, bar, and baz.</p>

_{«Item 1» не предназначен для подчеркивания, поэтому <strong> -неправильный тег. Кроме того, вполне возможно, что вся структура может быть лучше представлена.}

Если значение текста имеет большое значение, <strong> подходит (как и эта строка).

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

<span>Hello World</span>

.product-name { font-weight: bold; }

Во всех случаях:

• Используйте markup, который описывает содержимое.
• Не используйте встроенные стили (используйте внешнюю таблицу стилей).
• Не называйте стили на основе их визуального представления (например, имя стиля «bold»-плохой выбор)

Будет ли <b> лучше, потому что, если кто-то выключил css в
браузере, он все равно будет отображаться правильно?

Нет. Используйте правильный markup для задания. Довольно необычно, что кто-то, использующий визуальное представление вашего сайта, добровольно отключает таблицу стилей, но невизуальные потребители в первую очередь заботятся о структуре вашего документа. «non-visual consumer» может быть поисковой системой, анализирующей ваш контент, или приложением для чтения с экрана.

Дополнительное Чтение:

HTML Table текстовые различия (bold/not жирный шрифт)

Я новичок в HTML/CSS/JavaScript и в настоящее время борюсь с моим текстом внутри таблицы.

В частности, для меня это OK, если заголовки моих столбцов и любые «sublabels», которые я использую в ячейках таблицы, должны быть полужирными, но я хочу, чтобы весь оставшийся текст (текст «basic») был полужирным. Как мне этого добиться?

Вот несколько примеров HTML, сопровождающих мое описание. Весь текст будет выделен жирным шрифтом, если я оставлю код как есть:

    <table align="center">
    <tbody>
    <tr><th>
    <p>Column Label 1</p>
    </th><th>
    <p>Column Label 2</p>
    </th><th>
    <p>Column Label 3</p>
    </th></tr>
    <tr><th border="0">
    <p><strong><span>Sublabel here.</span></strong></p>
    <p align="left">"Basic" text here.</p>
    </th><th border="0">
    <p align="center">"Basic" text here.</p>
    </th><th border="0">
    <p align="center">"Basic" text here.</p>
    </th></tr>
    </tbody>
    </table>

html

css

Поделиться

Источник

J’on J’onzz    

27 июня 2016 в 15:47

3 ответа

• Как установить жирный шрифт в html?

  HTML <div class=test>Bold Text. Normal Text</div> Ожидаемый Результат: Жирный Текст. Обычный Текст Я знаю, что нужно добавить <b> для определенного текста. Но условие здесь не в том, чтобы редактировать страницу HTML. С помощью CSS или jquery нужно установить определенный текст…

• HTML жирный шрифт не рендеринг

  Я пишу автоматический полный контроль, и я дошел до того, что строю <ul> с результатами веб-сервиса. Я иду дальше и пытаюсь применить свой жирный шрифт на сервере и вернуть его как строку клиенту, чтобы он просто ввел ее в новый <li> Моя проблема в том, что жирный шрифт не делает то,…

1

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

Однако ваш код также содержит несколько ненужных тегов, я постараюсь опубликовать пример ASAP.

Примером компоновки таблицы может быть

<table>
   <tr>
      <th>Table heading 1</th>
      <th>Table heading 1</th>          
      <th>Table heading 1</th>
   </tr>
   <tr>
      <td>Table data 1</td>
      <td>Table data 2</td>
      <td>Table data 3</td>
   </tr>
</table>

Затем я бы предложил вам использовать CSS и стилизовать таблицу с помощью селекторов table , tr , th и td , а не встроенных стилей. Это значительно упростит ваш код и сделает его более удобным для использования.

Поделиться

Sam Anderson    

27 июня 2016 в 15:52

0

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

Важно отметить, что HTML следует использовать для структурирования документа, а CSS-для его стиля. Вместо использования атрибута style было бы гораздо проще читать и поддерживать DRYer, если бы вы использовали внешний файл css.

Кроме того, свойство align не поддерживается в HTML5. CSS следует использовать вместо text-align .

td { background: #d4e6fd; }

p {
  font-family: helvetica;
  font-size: 11;
}

th { background: #032046; }
th:first-child { width: 45%; }
th:not(:first-child) { width: 15%; }
th > p { color: white; }
span { text-decoration: underline; }

td:first-child p {
  text-align: left;
}

td:not(:first-child) p {
  text-align: center;
}

<table align="center">
  <tbody>
    <tr>
      <th>
        <p>Column Label 1</p>
      </th>
      <th>
        <p>Column Label 2</p>
      </th>
      <th>
        <p>Column Label 3</p>
      </th>
    </tr>
     <tr>
       <td border="0">
         <p><span>Sublabel here.</span></p>
         <p>"Basic" text here.</p>
       </td>
       <td border="0">
         <p>"Basic" text here.</p>
       </td>
       <td border="0">
         <p>"Basic" text here.</p>
       </td>
    </tr>
  </tbody>
</table>

Поделиться

Richard Hamilton    

27 июня 2016 в 15:55

• Жирный шрифт с жирным весом в iPhone

  У меня есть дизайн, который использует шрифт Helvetica-Bold с весом полужирного шрифта: я пытаюсь объяснить себе: полужирный шрифт,который также может быть установлен на полужирный. Но в iOS году, пытаясь сделать шрифт жирным, я снова и снова находил ответ просто использовать жирный шрифт из…

• как отключить жирный шрифт в vim?

  я удалил все ссылки на жирный шрифт (gui=bold, cterm=bold, term=bold) в файле цветового синтаксиса slate.vim, но я все еще вижу некоторый жирный текст. например, в файле python ключевые слова class, def, try, except, return и т. д. по-прежнему выделены жирным синим шрифтом. кроме того, как…

0

Ваш текст выделен жирным шрифтом, поскольку вы использовали тег th , по умолчанию он выделен жирным шрифтом (в зависимости от браузера), тег th должен находиться внутри тега thead в таблице, проверьте тег HTML на W3C и тег td внутри тега tbody .

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

Я только что обновил ваш код HTML и CSS, вы можете проверить онлайн по адресу: https://jsfiddle.net/1y4uksc5/

HTML код:

<table align="center">
<thead>
  <tr>
    <th>
      <p>Column Label 1</p>
    </th>
    <th>
      <p>Column Label 2</p>
    </th>
    <th>
      <p>Column Label 3</p>
    </th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>
      <p><strong>Sublabel</strong></p>
      <p>"Basic" text here.</p>
    </td>
    <td>
      <p>"Basic" text here.</p>
    </td>
    <td>
      <p>"Basic" texthere.</p>
    </td>
  </tr>
</tbody>

CSS код:

th {
  background-color: #032046;
  color: white;
}
td {
  background-color: #d4e6fd; 
}
.text-underline {
  text-decoration: underline;
}
p {
  font-family: helvetica;
  font-size: 11;
}

Поделиться

Huy Nguyen    

27 июня 2016 в 16:11

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

Встроенный шрифт не распознает жирный шрифт

Как я могу ссылаться на встроенный шрифт в моем проекте silverlight, учитывая, что существует несколько файлов для одного и того же шрифта? Я использовал следующие теги в файле Fonts.xaml:…

Как изменить шрифт normal на Foundry Sterling Bold?

Я хочу изменить свой шрифт, он будет Литейный Стерлинг жирный. Как это сделать? Пожалуйста помочь. <!DOCTYPE html> <html lang=en-us> <head> <style> @font-face { font-family:…

жирный шрифт, эффекты заголовка в alert()?

в javascript, как сделать alert bold n использовать заголовки h2-h5? Возможно ли это или просто простое оповещение-это вариант? как включить жирный шрифт и h2 в это предупреждение? function…

Как установить жирный шрифт в html?

HTML <div class=test>Bold Text. Normal Text</div> Ожидаемый Результат: Жирный Текст. Обычный Текст Я знаю, что нужно добавить <b> для определенного текста. Но условие здесь не в…

HTML жирный шрифт не рендеринг

Я пишу автоматический полный контроль, и я дошел до того, что строю <ul> с результатами веб-сервиса. Я иду дальше и пытаюсь применить свой жирный шрифт на сервере и вернуть его как строку…

Жирный шрифт с жирным весом в iPhone

У меня есть дизайн, который использует шрифт Helvetica-Bold с весом полужирного шрифта: я пытаюсь объяснить себе: полужирный шрифт,который также может быть установлен на полужирный. Но в iOS году,…

как отключить жирный шрифт в vim?

я удалил все ссылки на жирный шрифт (gui=bold, cterm=bold, term=bold) в файле цветового синтаксиса slate.vim, но я все еще вижу некоторый жирный текст. например, в файле python ключевые слова class,…

Как определить другой жирный шрифт в Android textview

Мне нужно использовать другой шрифт для жирных элементов в тексте HTML, отображаемом в Android textview. Я попытался сделать это таким образом, но похоже, что аргумент стиля шрифта просто…

Как установить жирный шрифт на UILabel в iOS?

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

Жирный шрифт для dompdf 0.7.0 beta

Я использую DOMPDF ver. 0.7.0, чтобы сделать файл pdf из HTML, но у меня есть проблема, когда мне нужно использовать пользовательский шрифт (arial) с жирным шрифтом. жирный шрифт не будет работать…

Шрифт Bookman Old Style Bold

HTML-цитат Элементы

В этой главе мы рассмотрим

, , , <адрес> , ,
и HTML-элементов.

---

Пример

Вот цитата с сайта WWF:

Уже почти 60 лет WWF защищает будущее природы.
Ведущая в мире природоохранная организация,
WWF работает в 100 странах и поддерживается более чем одним миллионом членов в Соединенных Штатах и
почти пять миллионов во всем мире.

Попробуй сам »

---

HTML

для предложений

Элемент HTML

определяет раздел, который
цитируется из другого источника.

Браузеры обычно делают отступ

элементов.

Пример

Вот цитата с веб-сайта WWF:

На протяжении 50 лет WWF защищает будущее природа.
В мире
ведущая природоохранная организация,
WWF работает в 100 странах мира и является
при поддержке
1,2 миллиона членов в США и
человек, близких к 5
миллионов во всем мире.

Попробуй сам »

---

HTML

для коротких предложений

Тег HTML определяет короткую цитату.

Браузеры обычно заключают кавычки в кавычки.

Пример

Цель WWF: Построить будущее, в котором люди будут жить в гармонии с
природа.

Попробуй сам »

---

---

HTML

для сокращений

Тег HTML определяет аббревиатуру или акроним, например «HTML»,
«CSS», «Мистер»,
«Доктор», «Как можно скорее», «Банкомат».

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

Совет: Используйте глобальный атрибут заголовка для
показать описание для
аббревиатура / акроним при наведении указателя мыши на элемент.

Пример

ВОЗ была основана в
1948г.

Попробуй сам »

---

HTML

<адрес> для контактной информации

Тег HTML

определяет контактную информацию автора / владельца документа.
или статья.

Контактная информация может быть адресом электронной почты, URL, физическим адресом, телефоном.
номер, идентификатор в социальных сетях и т. д.

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

Пример

Написано Джоном Доу.

Посетите нас по адресу:

Example.com

Box 564, Диснейленд

USA

Попробуй сам »

---

HTML

для названия работы

Тег HTML определяет заголовок
творческая работа (эл.грамм. книга, стихотворение, песня, фильм, картина, скульптура и т. д.).

Примечание: Имя человека не является названием произведения.

Текст в элементе обычно отображается курсивом .

Пример

Крик Эдварда Мунка. Написана в 1893 году.

Попробуй сам »

---

HTML

для двунаправленного обхода

BDO означает двунаправленное переключение.

Тег HTML используется для переопределения
текущее направление текста:

Пример

Этот текст будет написан справа налево

Попробуй сам »

---

Упражнения HTML

---

HTML-цитаты и элементы цитирования

Тег	Описание
	Определяет аббревиатуру или акроним
<адрес>	Определяет контактную информацию автора / владельца документа
	Определяет направление текста
	Определяет раздел, цитируемый из другого источника
	Определяет название произведения
	Определяет короткую встроенную цитату

HTML b Тег

Пример

Выделите текст жирным шрифтом (не отмечая его как важный):

Это обычный текст — жирный текст .

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.

---

Определение и использование

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

---

Советы и примечания

Примечание: Согласно спецификации HTML5,
тег следует использовать как ПОСЛЕДНЕЕ средство, когда нет более подходящего тега. В
В спецификации указано, что заголовки должны быть обозначены

в теги

, выделенный текст должен
обозначать

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

Совет: Для выделения текста жирным шрифтом можно также использовать следующий CSS: «font-weight:
жирный; «.

---

Поддержка браузера

Элемент
	Есть	Есть	Есть	Есть	Есть

---

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

Тег также поддерживает глобальные атрибуты в HTML.

---

Атрибуты событий

Тег также поддерживает атрибуты событий в HTML.

---

---

Другие примеры

Пример

Используйте CSS, чтобы выделить полужирный текст:

Это обычный текст — жирным шрифтом
текст .

Попробуй сам »

---

Связанные страницы

Учебное пособие по HTML: Форматирование текста HTML

Ссылка на HTML DOM: полужирный объект

---

Настройки CSS по умолчанию

Большинство браузеров отображают элемент со следующими значениями по умолчанию:

: элемент «Сильная важность» — HTML: язык разметки гипертекста

Элемент HTML указывает на то, что его содержимое имеет большое значение, серьезность или срочность.Браузеры обычно отображают содержимое жирным шрифтом.

Элемент предназначен для контента, который имеет «большое значение», включая важные или срочно важные вещи (например, предупреждения). Это может быть предложение, имеющее большое значение для всей страницы, или вы можете просто попытаться указать, что некоторые слова имеют большее значение по сравнению с близлежащим контентом.

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

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

vs.

Новых разработчиков часто сбивает с толку, почему существует так много способов выразить одно и то же на готовом веб-сайте. и , возможно, являются одним из наиболее распространенных источников путаницы, заставляя разработчиков спрашивать: «Что мне следует использовать: или ? Разве они не делают то же самое? вещь?»

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

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

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

vs.

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

В то время как используется для изменения значения предложения, как это делается при произношении акцента («Я люблю морковь» против «Я люблю морковь »), используется для обозначения порций предложение добавляет важности (например, « Предупреждение! Это очень опасно. »). И , и могут быть вложены, чтобы увеличить относительную степень важности или акцентирования внимания, соответственно.

Базовый пример

  
 Прежде чем продолжить,  убедитесь, что вы надели защитные очки . 
  

Результат:

Предупреждения на этикетках

  
  Важно:  Прежде чем продолжить, убедитесь, что вы добавили много масла. 
  

Это приводит к следующему:

Таблицы BCD загружаются только в браузере

css — Как сделать текст в HTML жирным?

Может ли кто-нибудь сказать мне, что я делаю не так? »

«полужирный» никогда не был элементом HTML («b» — наиболее близкое соответствие).

HTML должен содержать структурированный контент; CSS издателя должен предлагать стили для этого контента. Таким образом, пользовательские агенты могут предоставлять структурированный контент с полезными стилями и элементами управления для навигации пользователям, которые не могут видеть предложенный вами жирный стиль (например, пользователи поисковых систем, полностью слепые пользователи, использующие программы чтения с экрана, слабовидящие пользователи, использующие свои собственные цвета и шрифты, фанатичных пользователей, использующих текстовые браузеры, пользователей голосовых браузеров с голосовым управлением, таких как Opera для Windows). Таким образом, правильный способ сделать текст полужирным зависит от , почему вы хотите выделить его полужирным шрифтом.Например:

• Хотите отличать заголовки от другого текста? Используйте элементы заголовка (от «h2» до «h6») и предложите им жирный стиль в вашем CSS («h2, h3, h4, h5, h5, h6 {font-weight: bold;}».

• Хотите выделить подписи для полей формы жирным шрифтом? Используйте элемент «label», программно свяжите его с соответствующим элементом «select», «input» или «textarea», присвоив ему атрибут «for», соответствующий атрибуту «id» на цели, и предложите жирный стиль для это в вашем CSS («label {font-weight: bold;»}).

• Хотите выделить заголовок для группы связанных полей в форме, например группы вариантов выбора радио? Окружите их элементом «fieldset», дайте ему элемент «legend» и предложите жирный стиль для него в вашем CSS («legend {font-weight: bold;}»).

• Хотите отличить заголовок таблицы от подписи к ней? Используйте элемент «caption» и предложите для него жирный стиль в вашем CSS («caption {font-weight: bold;}»).

• Хотите отличать заголовки таблиц от ячеек данных таблицы? Используйте элемент «th» и предложите ему полужирный стиль в вашем CSS («th {font-weight: bold;}»).

• Хотите отличить название упомянутого фильма или альбома от окружающего текста? Используйте элемент «cite» с классом («cite) и предложите для него полужирный стиль в вашем CSS (» .movie-title {font-weight: bold;} «).

• Хотите отличить определенное ключевое слово от окружающего текста, определяя или поясняя его? Используйте элемент «dfn» и предложите для него жирный стиль в вашем CSS («dfn {font-weight: bold;}»).

• Хотите отличить компьютерный код от окружающего текста? Используйте элемент «код» и предложите для него полужирный стиль в вашем CSS («code {font-weight: bold;}»).

• Хотите отличить имя переменной от окружающего текста? Используйте элемент «var» и предложите ему полужирный стиль в своем CSS («var {font-weight: bold;}»).

• Хотите указать, что какой-то текст был добавлен в качестве обновления? Используйте элемент «ins» и предложите для него полужирный стиль в своем CSS («ins {font-weight: bold;}»).

• Хотите немного подчеркнуть текст («Я люблю котят!»)? Используйте элемент «em» и предложите для него жирный стиль в вашем CSS (например,грамм. «em {font-weight: bold;}»).

• Хотите сильно выделить какой-нибудь текст, возможно, для предупреждения (« Остерегайтесь собаки! »)? Используйте «сильный» элемент и предложите для него жирный стиль в вашем CSS (например, «strong {font-weight: bold;}»).

… Вы поняли (надеюсь).

Не удается найти элемент HTML с правильной семантикой для выражения / почему / вы хотите выделить этот конкретный текст жирным шрифтом? Оберните его в общий элемент «span», дайте ему осмысленное имя класса, которое выражает ваше обоснование различения этого текста (« Позвольте мне начать эту новостную статью с предложения, которое резюмирует его.) и предложите для него полужирный стиль в своем CSS («.lede {font-weight: bold;»}. Прежде чем создавать собственные имена классов, вы можете проверить, существует ли микроформат (microformats. org) или обычное соглашение о том, что вы хотите выразить.

Тег

HTML — GeeksforGeeks

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

Вниманию читателя! Не прекращайте учиться сейчас. Освойте все важные концепции HTML с Web Design for Beginners | HTML курс.

HTML

< html > < корпус 000 000 GeeksforGeeks h2 > < h4 > HTML-тег b h4 > > p A < b > Портал компьютерных наук b > для компьютерных фанатов. Он содержит хорошо написанные, хорошо продуманные и хорошо объясненные хорошо объясненные < b > компьютерные науки и статьи по программированию. b p > корпус > html 85 html 85 0 Выход : Тег в HTML используется для выделения полужирного текста без особой важности.Текст написан внутри тега жирным шрифтом. Вы можете сделать это, используя font-weight: bold; свойство в CSS. Это тег контейнера, который содержит открывающий тег, контент и закрывающий тег. Существует аналогичный тег, тег, который является анализируемым тегом и используется для демонстрации важности текста и оказывает аналогичное влияние на контент. В соответствии со спецификацией HTML5 тег следует использовать в качестве последнего варианта, к которому следует прибегать, когда нет более подходящего тега.В спецификации HTML5 указано, что для заголовков он должен отображаться тегами от до , для выделенного текста он должен отображаться тегом и аналогичным образом, важный текст - тегом , & для выделенного / выделенного текста следует пометить его тегом . Синтаксис: Содержание ... Принятые атрибуты : Это глобальный атрибут, который может использоваться в любом элементе HTML. Пример 1: В этом примере мы использовали тег и тег , чтобы проиллюстрировать разницу во внешнем виде текста и его размерах. HTML < html > < корпус 000 000 GeeksforGeeks h2 > < h4 > HTML b-тег h4 > 65 p > Это обычный абзац Текст тега p > < b > Это b > корпус > html 9 0004> Вывод: Пример 2: В этом примере мы использовали свойство CSS font-weight, значение которого установлено на полужирный, чтобы текст стал полужирным. HTML < html > < корпус 000 000 GeeksforGeeks h2 > < h4 > HTML b-тег h4 > 65 p > Это обычный абзац Текст тега p > < p style = style = style -weight: bold " > Это жирный текст с использованием CSS p > body > html > Выход: Поддерживаемые браузеры: Google Chrome0 Internet Explorer 11.0 Microsoft Edge 93.0 Firefox 92.0 Opera 78.0 Safari 14.1 Специальные возможности в Penn State | Полужирный и курсив в HTML Содержание страницы Жирный вместо курсива Курсив в печатном виде используется по ряду причин, включая перечисление названий книг и фильмов, иностранные слова и математические переменные, а также для выделения. К сожалению, курсивный текст в Интернете часто не так ясен, поэтому многие редакторы используют полужирный шрифт или сочетание полужирного и курсивного шрифта, тогда как в печати используется только курсив.См. Примеры ниже. Форматирование печати Книга «Маленький принц » считается поэтической и философской во французской литературной культуре (см. французская Википедия: «Маленький принц »). Веб-форматирование 1 (полужирный) Книга «Маленький принц» считается поэтической и философской во французской литературной культуре (см. Французскую Википедию: «Маленький принц»). Веб-форматирование 2 (полужирный и курсив) Книга «Маленький принц» считается во французской литературной культуре « поэтическая и философская» (см. Французскую Википедию: «Маленький принц»). B по сравнению с STRONG Почему EM и СИЛЬНЫЙ Многие эксперты по специальным возможностям рекомендуют использовать STRONG вместо B для полужирного текста и EM вместо I для курсива. Причины этой рекомендации: STRONG и EM - семантические теги, означающие, что они указывают на то, что автор желает сделать акцент, который выделяется полужирным шрифтом / курсивом в визуальном браузере или в различных стилях речи в программе чтения с экрана. Теоретически программы чтения с экрана могут произносить STRONG и EM другим голосом или стилем. Однако на практике это случается редко (то же самое верно для тегов B и I ). Почему не критично С другой стороны, реальные соображения делают это различие не столь важным, как другие проблемы. Обычные программы чтения с экрана в настоящее время обрабатывают теги B / I так же, как теги STRONG / EM. То есть они игнорируются , если пользователь не указывает, что они должны быть указаны.Некоторые пользователи сообщают, что объявление об изменениях может отвлекать. Многие авторы в любом случае выделяют полужирный шрифт или курсив исключительно по визуальным причинам (в этом случае может быть предпочтительнее B / I) или не уверены, почему они добавляют форматирование, тем самым удаляя полезность STRONG / EM. ПРИМЕЧАНИЕ: Никакие спецификации специальных возможностей не требуют исключения использования тегов B и I, а только их правильного использования. Некоторые возможные семантические варианты использования полужирного шрифта и курсива Эти элементы являются примерами элементов, которые можно пометить как STRONG и EM . Предупреждающие таблички Ключевые понятия или Ключевые словарные элементы в курсе. Но с использованием полужирного начертания для выделения каждый экземпляр выразительной интонации может быть просто немного отвлекающим в длинном тексте, но может быть полезным в визуальных браузерах. Некоторые возможные визуальные варианты использования полужирного шрифта и курсива Чтобы сделать цветной текст или мелкий текст более четким и разборчивым академических съездов, в том числе: Названия книг и фильмов (например,грамм. Унесенные ветром ) Иностранные слова в английском тексте (например, «Испанское слово« кошка »- el gato .») Переменные в текстах по математике, естествознанию и информатике (например, x = 2) Чтобы сделать пункты меню, заголовки или инструменты навигации более четкими Помощь пользователям в визуальном браузере сканирование ключевых понятий , которые могут быть разделены другим способом (например, специальные знаки препинания) в тексте Для целей проектирования Использование CSS Если полужирный шрифт или курсив в основном визуальный и привязан к конкретному использованию в презентации, часто лучше включить спецификацию CSS для полужирного или курсивного начертания.Например, если вы хотите, чтобы тег CAPTION в ТАБЛИЦЕ всегда был полужирным или полужирным и курсивом, вы можете использовать объявление CSS, такое как: Примеры использования CSS для полужирного и курсива caption {font-weight: bold} caption {font-style: italic; font-weight: bold;} Тем не менее, все же могут быть случаи, когда использование тега B или I, чтобы указать, что визуальное форматирование является наиболее эффективным решением. С точки зрения стандартов, решение таблицы стилей, такое как class = "bold"> Полужирный текст , так же семантически бессмысленно, как Полужирный текст и потребляет намного больше символов ASCII в файле HTML. Другие альтернативные теги Есть некоторые малоизвестные теги, предназначенные для представления различных семантических концепций, которые обычно обозначаются курсивом или другими изменениями форматирования. Эти теги поддерживаются всеми браузерами и могут быть изменены с помощью CSS. Тег CITE (по умолчанию курсив) Тег CITE семантически предназначен для коротких ссылок, таких как названия книг. Форматирование по умолчанию - курсив, но можно использовать CSS, чтобы сделать этот тег и полужирным, и курсивом. Тег VAR (по умолчанию курсив) Тег VAR семантически предназначен для представления переменных в компьютерном коде или математических уравнениях. Тег DEL (по умолчанию зачеркнутый) Тег DEL семантически предназначен для обозначения текста, который следует удалить, и должен использоваться вместо тега STRIKE. Тег INS используется для обозначения недавно вставленного текста или текста, заменяющего удаленный текст.По умолчанию текст подчеркнут, но вы можете использовать CSS, чтобы изменить его на другой формат (возможно, с новым цветом или с цветным фоном). Теги CODE и KBD (моноширинный шрифт по умолчанию) Тег CODE семантически предназначен для описания кода, такого как теги HTML (например, ) или спецификации CSS (например, {font-weight: bold} ). Тег KBD предназначен для указания ключей, вводимых пользователем (например, RETURN ) в технической документации. HTML 5 Новая спецификация HTML 5 включает дополнительные семантические теги, которые также могут использоваться вместе с CSS для обеспечения соответствующей разметки и форматирования. Некоторые примеры включают: FIGCAPTION - Создает видимый текст, описывающий изображение MARK - Создает выделенный или выделенный текст Начало страницы Доступность: жирный шрифт против сильного и курсив против выделения Когда дело доходит до доступности вашего контента, мы рекомендуем использовать семантическую разметку, чтобы правильно сообщать об изменениях стиля всем пользователям.Давайте посмотрим, почему эта разница важна. Полужирный шрифт и курсив Полужирный шрифт и курсив часто используются для выделения слов или фраз в абзаце текста. Использование этих тегов помогает сканировать контент на предмет наличия зрячего человека, например: «Я хотел бы получить уведомление по электронной почте , а не по другим формам связи». «Его любимая книга - Гроздья гнева, ». Но полужирный тег и курсивный тег указаны как ошибка уровня A соответствия WCAG, поскольку большинство программ чтения с экрана НЕ сообщают об этих изменениях пользователю программы чтения с экрана. и не следует использовать для стилизации текста, когда автор хочет выделить слово или отрывок текста. Строгие и акцентирующие теги Чтобы обеспечить одинаковый опыт для всех пользователей, необходимо использовать строгие и выделенные теги вместо полужирных и курсивных тегов. Это большой сдвиг, особенно для авторов контента, но он необходим для обеспечения равных возможностей для всех пользователей. Строгий тег и акцентный тег считаются семантической разметкой, которая позволяет добавить смысл вашему контенту.Он служит указанием программе чтения с экрана , как что-то следует понимать . Преимущество семантической разметки Полужирный тег по сравнению с сильным тегом будет выглядеть точно так же при просмотре контента в браузере, но предоставит пользователям программы чтения с экрана другое восприятие. Когда что-то выделено жирным шрифтом в фрагменте текста с помощью тега , это не принесет пользы пользователям, использующим программы чтения с экрана. Это особенно важно, когда тег помогает передать особое значение выделенных слов или фраз. Если вы стремитесь сделать свой онлайн-контент доступным, постарайтесь заменить полужирные теги сильными тегами там, где это возможно. Если вы хотите придать особую важность определенному отрезку текста, вы можете поместить тег в другой тег . Использование тегов заголовка В некоторых случаях редакторы контента могут использовать теги, выделенные жирным шрифтом (), вместо тега заголовка (например, ), думая, что он будет передан всем пользователям. Но, как мы определили, жирным шрифтом теги не объявляются пользователям программ чтения с экрана. Кроме того, теги заголовков являются важным способом сканирования страницы пользователями программ чтения с экрана. Используя быстрые клавиши, программа чтения с экрана считывает все заголовки на странице, чтобы пользователь мог быстро перейти к в интересующей его области. Это экономит время, поскольку не требуется читать всю страницу, чтобы найти то, что им нужно. Если есть ситуации, когда для разделения содержимого на разделы используются жирные или курсивные теги, убедитесь, что вместо них используются теги заголовков, чтобы упростить работу и сделать ее понятнее для всех пользователей. Заключение Если вы хотите сделать свой онлайн-контент доступным для тех, кто использует программу чтения с экрана: Избегайте использования тегов стиля, таких как и Используйте семантические теги и (курсив) Используйте уровни заголовков, чтобы разбить содержание и сделать его более читабельным Дополнительные ресурсы . Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт