Strong css: 🤷🏽‍♀️ Page not found | MDN Web Docs

против font-weight: жирный шрифт и стиль шрифта: курсив

Существует ли какая-либо реальная разница между использованием <strong> и <em> вместо свойств CSS:

font-weight: bold;
font-style: italic;

Кроме того, что действительно является причиной того, что оба варианта существуют? Я мог ошибаться, но не <strong> и <em> появились на сцене довольно долго после того, как font-weight и font-style стали стандартными свойствами CSS? Если это так, для них должна быть какая-то причина.

Ответ 1

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

В HTML5 вы используете <strong>, чтобы указать важные части предложения, например:

<p><strong>Do not touch.</strong> Contains <strong>hazardous</strong> materials.

И вы используете <em> для обозначения лингвистического стресса, например:

<p>A Gentleman: I suppose he does. But there no point in asking.
<p>A Lady: Why not?
<p>A Gentleman: Because he doesn't row.
<p>A Lady: He doesn't <em>row</em>?
<p>A Gentleman: No. He <em>doesn't</em> row.
<p>A Lady: Ah. I see what you mean.

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

em {
    font-style: normal;
    text-transform: uppercase;
}

Обратите внимание, что исходный ответ (ниже) применим к стандартам HTML до HTML5, в котором <strong> и <em> имели несколько разные значения, <b> и <i> были чисто презентационными и не имели смыслового значения. Подобно <strong> и <em>, соответственно, они имеют одинаковые значения по умолчанию, но могут быть изменены по-разному.

Вы используете <strong> и <em> для указания интенсивного акцента и нормального акцента соответственно.

Или подумайте об этом так: font-weight: bold ближе к <b> чем <strong>, а font-style: italic ближе к <i> чем <em>. Эти визуальные стили являются чисто визуальными: такие инструменты, как программы чтения с экрана, не собираются понимать, что жирный и курсивный, но некоторые читатели экрана могут читать текст <strong> и <em> в более подчеркнутом тон.

Ответ 2

ДА! Существует явная разница.

Элемент <em> представляет собой акцент подчеркивания его содержания. Уровень акцента, который выделяет конкретный кусок контента, определяется его количеством элементов предка <em>.

<strong>  =  important content
<em>      =  stress emphasis of its contents

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

Внимание!

• Элемент <em> также не предназначен для передачи важности; для этого Цель, элемент <strong> более уместен.

• Элемент <em> не является общим элементом «курсив». Иногда текст должен выделяться из остальной части абзаца, как если бы это было в другом настроении или голосе. Для этого элемент i больше необходимо.

Ссылка (примеры): См. ссылку W3C

Ответ 3

Проблема — проблема смыслового значения (как упоминает BoltClock) и визуального рендеринга.

Первоначально HTML использовал для этих целей <b> и <i> полностью стилистические команды, изложенные в семантической среде разметки документа. CSS — попытка отделить, насколько это возможно, стилистические элементы среды. Таким образом, информация стиля, такая как полужирный и курсив, должна идти в CSS.

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

Ответ 4

<strong> и <em> являются семантическими элементами разметки, например: машина (бот поисковой машины, программа чтения с экрана) может понять, что элемент strong более важен, чем другие элементы.

Стили CSS — это то, как вы визуализируете их для людей, обычно жирным или курсивом.

Разделение презентации и контента в Википедии

Ответ 5

<strong> и <em> — в отличие от <b> и <i> — имеют четкую цель для веб-браузеров для слепых.

Слепой человек не просматривает веб визуально, а звуком, например, текстовыми считывателями. <strong> и <em>, в дополнение к тому, чтобы поощрять выделение жирным шрифтом или курсивом, также передавать громкость или подчеркивание слогов соответственно (OH MY! and Ooooooh Myyyyyyy!). Аудио-только браузеры непредсказуемы, когда речь заходит о <b> и <i>… они могут сделать их громкими или подчеркнуть их, или они могут не… вы никогда не можете быть уверены, если не используете <strong> и <em>.

html — В чем разница между и , и ?

теги i, b, em и strong традиционно являются репрезентативными. Но им было дано новое семантическое значение в html5 .

i и b использовались для стиля шрифта в html4. i использовался для курсива, а b для жирного. В html5. Тег i имеет новое семантическое значение ‘ альтернативного голоса или настроения ‘ и Тег b имеет значение стилистически смещено .

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

<p><i>I hope this works</i>, he thought.</p>

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

Следующий пример абзаца стилистически смещен от абзацев, следующих за ним.

<p><b>The event takes place this upcoming Saturday, and over 3,000 people have already registered.</b></p>

em и strong имели значение акцент и сильный акцент в html4. Но в html5 em означает ударение на ударение и сильная означает сильную важность .

В следующем примере должно быть лингвистическое изменение при чтении Слова перед …

<p>Make sure to sign up <em>before</em> the day of the event, September 16, 2016</p>

В этом же примере мы можем использовать тег strong следующим образом.

<p>Make sure to sign up <em>before</em> the day of the event, <strong>September 16, 2016</strong></p>

придать важность дате события.

MDN Ref:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

HTML/CSS Часть 3: Теги — заголовок, — параграф, | LinuxUSER

Итак, вернёмся в Sublime Text. В прошлый раз мы остановились на разметке страницы. Ссылка на начало:

HTML/CSS Часть 2

Весь контент сайта размещается между тегами <body> </body>

Давайте теперь напишем в эти теги какой-нибудь контент. Начнём с тега <h2>. Большинство тегов начинаются с открывающего тега и закрывающего. Открывающий тег заголовка выглядит так: <h2>. Закрывающий тег заголовка выглядит так: </h2>. Между ними впишем название заголовка: <h2>LinuxUSER</h2>

Это заголовок первого уровня. Всего их бывает шесть и выглядят они так: h2, h3, h4, h5, h5, h6. И создаются они аналогично заголовку первого уровня. Далее следующий тег называется параграф. Давайте его создадим написав под <h2>LinuxUSER</h2> открывающий тег<p> и закрывающий тег </p>. Этот тег и есть параграф: <p></p>

Теперь впишем между открывающим и закрывающим тегом параграфа какой-нибудь текст. Например я напишу «Тег параграф. Показывает как работает тег параграф». Теперь сохраним результат комбинацией CTRL+S

И откроем в ранее созданной папке LinuxUSER файл index.html при помощи браузера Firefox

И как видно что под названием заголовка появился текст который мы вписали в теге параграф. Теперь рассмотрим тег <strong>. Этот тег позволяет выделять слова. Давайте напишем этот тег. Он так же начинается с открывающего тега и закрывающего: <strong></strong>

Я поставлю в этот тег строчку «Показывает как работает тег параграф»: <p>Тег параграф. <strong>Показывает как работает тег параграф</strong></p>

Сохраняем комбинацией CTRL+S и открываем наш index.html браузером Firefox

И у нас выделилась строка «Показывает как работает тег параграф»

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

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

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

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

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

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

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

  








 
 Заголовок 1 
 
 Мы хотим выделить  этот текст .
 

  

  








 
 Заголовок 1 
 
 Мы хотим выделить  этот текст . 


  

  




<название> XHMTL 1.0 Переходный пример от www.techonthenet.com 



 
 Заголовок 1 
 
 Мы хотим выделить  этот текст . 


  

  








 
 Заголовок 1 
 
 Мы хотим выделить  этот текст .


  

  








 
 Заголовок 1 
 
 Мы хотим выделить  этот текст . 


  

  

  ...
  
    
 
    
 
  

  

  ...
<заголовок>
   
 О коралловых рифах 
 

  ...
<статья>
  
 
  
 
  
 
  
 

  ...
<статья>
  <заголовок>
     
 Коралловый риф 
 Биоразнообразие   
  

  ...
<статья>
  <заголовок>
    ...