HTML Bold 태그의 대안

82

좋습니다. HTML에서는 <b>태그를 사용할 수 있지만 태그에 사용할 수 있는 "weight=bold"속성이 <p>없습니까?

아니면 CSS 또는 Javascript입니까?

html  css 
— Kzqai
소스
5
나는 최고의 답변이 기술적으로 정확함에도 불구하고 실질적으로 비참하다고 생각하기 때문에 가시성을 높이기 위해이 질문에 대한 현상금을 시작하고 있습니다. 특히 "html5의 굵은 태그"에 대한 Google 검색 결과가 매우 높은 질문에 대한 것입니다.
— Kzqai
7
나는이 현상금을 우스꽝스럽게 투표한다. @mipadi가 정답을 가지고 있습니다. 사용자가 다른 스타일을 원하는지 알 수 p없다면 그것은 자신의 문제입니다. 아마도 그들은 그것을 명확히 할 다른 SO 질문을 할 것입니다.
— Ryley

답변:

99

<strong>태그 도 고려하십시오 . 화면 판독기에 훨씬 더 좋으므로 접근성이 더 좋습니다. 검색 엔진도 사용 <strong>그들이 헤더 태그를 사용하는 방법과 유사 중요한 내용을 결정하기 위해 태그를 <h1>, <h2>등 (하지만 <b>또한 검색 엔진에 유사한 의미를해야합니다). 텍스트의 중요성을 강조하려면 <strong>. 당신이 경우 없는 스트레스의 중요성을 원하는, 사용 <b>태그를하거나 사용하는 font-weight:bold;요소 또는 CSS에서 스타일을.

전체 단락을 굵게 표시하는 경우 CSS 옵션을 사용하는 것이 좋습니다. 이렇게하면 스크린 리더에 미치는 영향이 줄어들며 전체 단락을 강조하는 것은 의미가 없습니다. 그러나 다른 한편으로, 나는 정당한 이유로 전체 단락을 강조하기 위해 굵게 사용 된 것을 보았습니다. 어떤 경우 font-weight:bold;에는 클래스 / 스타일에서 사용하려는 것입니다.

결국 <strong>, <b>또는 font-weight:bold;모두 작동하고 시각적으로 비슷한 것을 수행하지만 (아마도 정확히 똑같은) 의미가 약간 다릅니다. 또한, 무엇을있는 거 굵은 글자는 헤더 경우, 헤더 태그를 사용할 수 있는지 확인하십시오 <h1>, <h2>등

— 대릴 하인
소스
37
<b>는 현재 HTML 또는 XHTML 표준에서 더 이상 사용되지 않으며 향후 HTML 5에서도 사용되지 않습니다. <b> 및 <strong>은 서로 다른 의미를 갖습니다. <b>는 "굵은 스타일의 텍스트"를 의미합니다. <strong>은 "강조 강조"를 의미하지만 텍스트 스타일을 지정하지는 않습니다. 브라우저는 기본적으로 굵게 표시됩니다.
— thomasrutter
2
<b>의 광범위한 사용은 줄어들었지만 실제 요소는 W3C 사양에 따라 더 이상 사용되지 않습니다.
— 알렉스
4
<b>는 HTML5에서 사실상 더 이상 사용되지 않으며 약간 다른 의미를 가진 다른 <b> 태그로 대체됩니다. 그것은 이상한 선택이지만 기본적으로 그들이 한 일입니다. 어쨌든 텍스트 스타일을 굵게 지정하는 데 사용해서는 안됩니다.
— 척
@ 척 : 새로운 b 요소는 무엇을 의미합니까?
— alex
1
최신 스크린 리더 (예 : 최신 버전의 JAWS 및 Window Eyes)는 일반 설정에서 <em> 또는 <strong> 요소의 콘텐츠를 다르게 전달하지 않습니다. 음성 출력이 영향을 받으려면 사용자가 교정 모드로 전환해야합니다. 좋은 읽기 : 스크린 리더는 강조가 부족 하고 i, b, em 및 HTML5의 강력한 요소가 있습니다.
— Jon Gibbins 2011
79

CSS 속성을 생각하고 있습니다 font-weight.

p { font-weight: bold; }
— 미 파디
소스
6
음, 희망 그는 :) 엉망에게 ... 정확히 무슨 몇 가지를 것입니다 복사하지 않습니다
— 대릴 하인
6
구문 적으로 올바른 예입니다. OP는 그가 어떻게 사용되기를 원하는지 결정 해야 할 것입니다.
— mipadi
6
"올바른 구문"이 전부는 아닙니다. b 태그에 대한 솔루션에 대한 탐색에서 가시성이 많은 질문에 대한 최상위 답변이므로이 답변이 더 좋았 으면합니다. 다른 훨씬 더 중요한 용도 (일반적으로 텍스트 단락)를 사용하는 요소의 스타일을 옹호하고 <strong>, <h1>과 같은 깔끔한 대안보다 CSS 스타일을 사용하는 것을 옹호하기 때문에 좋은 결과를 장려하지 않습니다. <em> 및 <mark>. 기술적으로는 가능하지만 실제로는 재앙을 불러옵니다.
— Kzqai
4
@Tchalvak : <p>OP에서 예제로 사용했기 때문에 저는 예제로 사용하고 있습니다. font-weight그러나 모든 요소에서 작동합니다.
— mipadi
7
@mipadi 나는 그것을 이해하지만, 개인적으로 낯선 사람이 "그의 얼굴을 면도하는 정말 날카로운 칼"을 요구하면 나는 그 요청의 특정 용어를 무시하고 그에게 안전 면도기를 줄 것입니다.
— Kzqai
23

텍스트의 의미가 의미가 강한 경우 strong요소를 사용합니다 . 그렇지 않다면 의미 론적 이름의 클래스 (요소의 의미를 명확하게 보여주는 클래스,이를 호출하여 프리젠 테이션과 데이터를 혼합하지 않음 bold)를 사용하고 CSS에서 참조하십시오.

HTML

<span class="important-message">I'm important!</span>

CSS

.important-message {
   font-weight: bold;
}

일부 사람들은 여전히 b요소를 프리젠 테이션 후크 로 사용 하지만, strong현재 대부분의 사람들이 요소를 선호하지만 더 이상 사용되지 않습니다 . 올바르게 사용되었는지 확인하십시오.

— 알렉스
소스
4
<b>는 더 이상 사용되지 않습니다. HTML 4.01, XHTML 1, XHTML 1.1 및 곧 출시 될 HTML 5에서도 여전히 지원됩니다. 그것은 여부 해야 되지 할 것은 또 다른 문제이다. 그렇지 않습니다. 참조 w3.org/TR/html401/index/elements.html
— thomasrutter
작은 기술 : 클래스 이름은 통제 된 어휘가 아니기 때문에 '의미 적'이라고 부를 수 없습니다. 앱 전체에서 "중요한 메시지"가 의미하는 바를 정의하는 표준은 어디에도 없습니다. 기능별로 클래스 이름을 지정하는 것은 가독성과 모범 사례를 촉진하기 때문에 여전히 좋은 생각입니다.
— thomasrutter
@thomasrutter ... 그게 내가 생각한다고 말한 이유 입니다. 이름은 컴퓨터에만 의미가있을 필요는 없습니다. 사람들도 html을 읽습니다.
— 알렉스
10

<B> 태그는 건재하다. <b>은 (는) 더 이상 사용되지 않지만 사용이 명확하고 제한되었습니다. <b>에는 의미 론적 의미가 없으며 화면 판독기에서 말하는 것과 같은 음성 강조를 전달하지도 않습니다. 그러나 <b>는 <i> 태그와 마찬가지로 인쇄 된 엠파 시스를 전달 합니다. 둘 다 typograpghy에서 특정 위치를 가지고 있지만 음성 의사 소통에서는 그렇지 않습니다 . mes frères .

http://www.whatwg.org/ 에서 인용하려면

b 요소는 문서 초록의 키워드, 리뷰의 제품 이름 또는 일반적인 타이포그래피 표현이 굵게 표시된 기타 텍스트 범위와 같이 추가 중요도를 전달하지 않고 일반 산문에서 스타일 적으로 상쇄되는 텍스트 범위를 나타냅니다.
— 사용자 336882
소스
8

태그 Bold를 사용하여 텍스트 나 단어 를 만들 수 있습니다 <b>Text</b>.

<strong>Text</strong>태그를 사용할 수도 있습니다.

헤드 태그 <h1>, <h2>, <h3>, ... 기본 굵게 태그이고, 당신은 CSS로 자신의 스타일을 변경하지 않는 한 기본적으로 굵은 텍스트를 만들

위의 태그는 HTML에서 사용할 수 있었지만 스타일을 변경 CSS하려면

font-weight:bold
— Nasser Hadjloo
소스
7

아래와 같이 코딩 할 수 있습니다 ..

<html>
 <head>
 <style>
 p.boldstats{
 font-weight: bold
  }
  </style>
 </head>

  <body>
  <p class="boldstats"> The bold finder </p>
  </body>
</html>
— madcoderJ
소스
6

글꼴 두께 속성을 사용할 수 있습니다.

예를 들면 :

<p>This is my paragraph</p>

CSS를 아래와 같이 인라인으로 만들 수 있습니다.

<p style="font-weight:bold;">This is my paragraph</p>

또는 아래와 같이 외부 CSS 스타일 시트에 있습니다.

p{
  font-weight:bold;
}
— 올루와 사요 바 발로 라
소스
5

공룡이 지구를 걸어 다니고 CSS가 존재하지 않았던 시대의 모든 역사와 날짜입니다.

더 진지하게, <b/>태그를 잊어 버리고 font-weight:boldCSS 규칙에서 사용하십시오 :)

— Julian Aubourg
소스
4

<b> 최후의 수단이다

사용할 수 <b>있지만 마지막 수단으로 만 사용할 수 있습니다 . 에 대한 좋은 대안으로 작동하는 다양한 요소가 있습니다 <b>. 여기에 가장 유용한 순서대로 나열되어 있습니다.

더 유용한 대안

  • 중요한 텍스트 : <strong>
  • 강조된 텍스트의 경우 : <em>
  • 머리글의 경우 페이지 머리글뿐만 아니라 단락 머리글 및 모든 종류의 기타 항목 : <h1> through <h6>

사용을위한 실용적인 가장자리 케이스 <b>

내가 옹호하는 유일한 경우 <b>는

  1. <strong>염두에두고있는 텍스트를 표시하지 않으려는 다른 방식으로 스타일을 지정 했습니다.

  2. 기울임 꼴 강조 또는 제목을 원하지 않는 경우

  3. 인라인 스팬 또는 클래스와 함께 스팬을 굵은 텍스트 로 사용하려고 합니다 . (예를 들어 <span class='bold'>)

그런 다음 <b>대신 사용하는 것이 합리적 입니다.이 경우 비의 미적 범위보다 명확하고 짧고 의미가 많을 것이고 b가 요소로 사용하도록 재정의 되었기 때문에 간결함 / 가독성이 그 선택을하는 좋은 이유입니다. 인쇄 된 강조 표시 .

— Kzqai
소스
4

당신은 또한 할 수 있습니다 <p style="font-weight:bold;"> bold text here </p>

— 존 보커
소스
1
인라인 스타일은 html에서 더 이상 사용되지 않을 예정입니다. 5 : P
— Lock
확실합니까? 인라인 스타일 태그 만 더 이상 사용되지 않는다고 생각했습니다. (big, s, strike, tt, u)
— John Boker
2
더 이상 사용되지 않는 경우에도 거의 항상 나쁜 생각입니다. 다시 <font> 태그를 사용하는 것이 좋습니다.
— tgecho
인라인 스타일은 여전히 ​​작은 CSS 파일에 권장됩니다. Yslow와 Google의 PageSpeed를 확인하세요. 이상 하긴하지만 합리적으로 들립니다 (전화 횟수가 적습니까?)
— Yannis Dran 2015-09-09
@Kzqai : 100 % 동의합니다. 내 특정 경우에는 div에 ajax 요청이 많이로드되어 인라인 스타일을 제거해야합니다. 인라인 스타일을 제거하기 만하면 로딩 시간이 몇 밀리 초 절약됩니다.
— Adrian P.
1

CSS 클래스를 사용하고 싶습니까?

p.bold { font-weight:bold; }

그래도 <p>정상적으로 사용할 수 있습니다 .

<p>This is normal text</p>
<p class="bold">This is bold text</p>

제공합니다 :

이것은 일반 텍스트입니다.

굵은 텍스트입니다.

— Daalbert
소스
1

아주 오래된 실입니다. -그러나 완전성을 위해 :

나는 사용한다 <span class="bold">my text</span>    

네 가지 글꼴 스타일을 업로드 할 때 : 보통; 굵게; 이탤릭체와 굵은 이탤릭체는 CSS를 통해 내 웹 사이트로 들어갑니다.

결과 출력이 단순히 글꼴을 수정하는 것보다 낫고 굵은 글꼴이 어떻게 보일지에 대한 디자이너의 의도에 더 가깝다고 생각합니다.

물론 이탤릭체와 굵은 이탤릭체에도 똑같이 적용되어 추가적인 유연성을 제공합니다.

— 짐 버터 워스
소스
1

b요소 대신 사용하는 것은 해당 요소 콘텐츠의 의미에 따라 다릅니다.

  • 요소 b와 strong는 지금까지 오랫동안 공존 해 왔습니다. HTML5로 대체 된 HTML 4.01 에서는 strong"강조 강조", 즉 em요소 (단지 강조 표시) 보다 더 강한 강조를 위해 사용되었습니다 . 에서 HTML 5.2 , strong"그 내용에 대한 강력한 중요성, 심각성, 또는 긴급을 나타냅니다"; "심각함"과 "긴급함"의 측면은 HTML 4.01에 비해 사양에서 새로워졌습니다. 따라서 b중요하거나 심각하거나 긴급한 콘텐츠를 표현 했었다면 strong대신 사용 하는 것이 좋습니다 . 당신이 원하는 경우, 예를 들어, 의미있는 클래스 속성을 추가하여 서로 다른 의미를 구별 할 수 <strong class="urgent">...</strong>및<strong class="warning">...</strong>적절한 CSS 선택기를 사용하여 이러한 유형의 "강조"스타일을 다르게 지정합니다 (예 : 다른 색상 및 글꼴 크기 사용) (예 : CSS 파일 : strong.warning { color: red; background-color: transparent; border: 2px solid red; }.).
    에 대한 또 다른 대안 b은 HTML 5.2에서 "내용의 강조 강조를 나타내는" em요소 입니다. 이 요소는 일반적으로 이탤릭체로 렌더링됩니다 (따라서 i요소 의 대체물로 종종 권장 됨 ).
    나는 다른 답변의 조언을 따르고 같은 것을 작성하려는 유혹에 저항합니다 <strong class="bold">...</strong>. 첫째, 클래스 속성은 비 시각적 컨텍스트 (ePub 책 듣기, 일반적으로 텍스트 음성 변환, 화면 판독기, 점자)에서 어떤 것도 의미하지 않습니다. 둘째,대담한 이유 .
  • 당신이 사용하는 경우 b(이전 글 머리에서 사용하는 경우가 텍스트의 짧은 스팬, 반대) 전체 단락 또는 제목, 나는 적절한로 교체 할 class경우, 속성이나 적용, WAI-ARIA 역할 과 같은 alert라이브에 대한 "중요하고 일반적으로 시간에 민감한 정보가있는"지역. 위에서 언급했듯이 "의미 적" class속성 값을 사용 하여 코드를 유지하는 사람들 (미래의 자신 포함)이 왜 무언가가 굵게 표시 되었는지 파악할 수 있도록해야합니다 .
  • 의 모든 사용이 b의미론을 나타내는 것은 아닙니다 . 예를 들어, 인쇄 된 문서를 HTML로 변환 할 때 강조 또는 중요성과는 무관하지만 시각적 가이드로 텍스트가 굵게 표시 될 수 있습니다. 당신이 유지할 수 있도록 예를 들어, 사전의 표제어는 다른 내용보다는 "긴급"더 이상 "심각한"없는 b요소 및 optionallly 의미있는 클래스 속성, 예를 추가 <b class="headword">하거나로 태그를 대체 <span class="headword">인수에 따라 b이 비 시각적 맥락에서는 의미가 없습니다.

CSS 파일 ( style다른 답변에서 권장하는대로 속성 을 사용하는 대신 )에는 "굵게"또는 중요한 텍스트를 스타일링하는 몇 가지 옵션이 있습니다.

  • 다른 색상 지정 (전경 및 / 또는 배경);
  • 다른 글꼴을 지정합니다.
  • 테두리 지정 (위의 예 참조)
  • 은 USING 다른 폰트 가중치를 사용하여 font-weight속성 단지 이상의 값을 허용 normal하고 bold, 즉을 normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,
  • 기타

참고 숫자 글꼴 가중치를 지원하는 것은 항상 좋은되지 않았습니다.

— Tsundoku
소스
1 

    #bold{
      font-weight: bold;
    }
    #custom{
      font-weight: 200;
    }
<body>
  <p id="bold"> here is a bold text using css </p>
  <p id="custom"> here is a custom bold text using css </p>
</body>
스 니펫 확장

잘 됐으면 좋겠어

— Zakizakibzr
소스
0

사이드 노트에서 아래 코드도 굵게 만들 것입니다.

<strong> text here </strong>
— 비노이 안토니
소스
1
... 대부분의 브라우저에서 ...하지만 텍스트를 더 강조하는 것으로 설명하는 부작용 일뿐입니다.
— Quentin
0

다음을 사용할 수 있습니다.

<p id="p1">Some Text here </p>
#p1{
   font-weight: bold;
}

또는

<Strong><p>Some text here </p></strong>

또는

<h1> tag굵은 체와 다소 유사한 것을 사용할 수 있습니다.

— KFC
소스
1
p는 아마도 블록 수준이므로 p 안으로 들어가는 것이 좋습니다.
— Kzqai
0

요즘 사람들은 처음부터 자신의 블로그를 코딩하는 대신 웹 사이트 빌더 (Wordpress와 같은 CMS)를 사용하는 경향이 있습니다. 전문 웹 개발자도 더 빠르기 때문에 그렇게합니다.

실생활에서 자신의 블로그를 코딩 할 때 명심해야 할 장점과 사항을 언급 할 수 있다면 좋을 것입니다. 예를 들면 다음과 같습니다.

  • 더 많은 유연성 (사용자 정의)
  • 도메인 이름 지불
  • 지불 및 웹 호스팅 선택
  • 보안 및 유지 관리
  • 일부 웹 사이트 빌더의 템플릿 및 그래픽에 대한 저작권 및 라이센스. 호스트의 웹 사이트 빌더를 사용한 경우 웹 사이트가 특정 웹 호스트에 잠길 수 있습니다. 따라서 다른 웹 호스트로 이동할 수 없습니다. 그렇게하면 해당 템플릿을 더 이상 사용할 수 없기 때문입니다.
  • 웹 사이트가 다운되었을 때 웹 사이트 빌더의 기술 지원을 요청할 때 문제가 발생합니다.
  • 일부 템플릿은 검색 엔진 친화적이지 않아 웹 사이트 순위 (SEO)에 영향을 미칩니다.

어쨌든 대화 형 웹 페이지를 만들기 위해 css / css3 또는 JavaScript를 사용할 수 있습니다. 모든 종류의 코드를 기본 블로그 테마 형식으로 서버에 업로드 할 수도 있습니다.

— madcoderJ
소스
-2

@Darryl Hein의 대답은 한 가지 점에도 불구하고 정확합니다 . 의미 론적<b> 이지 않기 때문에 XHTML 이후로 전혀 권장되지 않습니다 .

<strong> 의미 적으로 강조된 텍스트를 의미합니다.

font-weight: bold 시각적으로 강조된 텍스트를 의미합니다.

<strong>일반적인 기본값이지만 굵게 표시되지 않도록 css 튜닝 할 수 있습니다. 빨간색, 기울임 꼴 또는 밑줄로 만들 수 있습니다 (이 모든 가능성이 실제로 사용자에게 친숙하지는 않지만). 시각적 디자인 때문이 아니라 의미와 관련된 문구 / 단어에 사용합니다.

font-weight: bold 헤더, 하위 헤더, 표 헤더 셀 등과 같은 디자인 관련 굵은 부분에 사용되어야합니다.

— 가드
소스
나는 그것이 html5의 <b>에 대한 수정 된 정의에서 사실이라고 생각하지 않습니다.
— Kzqai
동시에 당신은 그것이 <b>최후의 수단 이라고 직접 썼고 나는 b는 권장하지 않는다고 썼습니다. 모순은 어디에 있습니까?
— 가드
3
죄송합니다 . dev.w3.org/html5/markup/b.html#b에...previous versions of HTML defined the b element only in presentational terms, the element has now been given the specific semantic purpose of representing text “offset from its surrounding content without conveying any extra emphasis or importance, and [conventionally boldened]”. 따라 html 5 에서 html5 에서 의미 론적 의미가 retconned 의미를 갖는다는 점에서 더 구체적 이어야했습니다 . 그것이 내가 생각하는 이유입니다 <b>: 유효 함 / 최후의 수단 / 의미 론적이지 않음 / 시맨틱으로 재정의 됨 등. 미묘한 차이 일뿐입니다.
— Kzqai
-3

<strong>더 의미가 있으므로 태그를 사용하십시오 . <b>감가 상각되었으므로 사용하지 않는 것이 가장 좋습니다. 또한 굵은 텍스트에는 더 많은 검색 엔진 최적화 (SEO) 가중치가 부여되므로 CSS를 사용하여 또는 굵게 <strong>만드는 것보다 항상 실제를 사용하는 것이 가장 좋습니다 .<p><span>

— 매튜 제임스 테일러
소스
4
"더 많은 의미 론적"이기 때문에 사용하지 마십시오. 작성중인 내용에 적용되는 의미론을 가지고 있기 때문에 사용하십시오. 우리는 OP가 가진 텍스트의 의미가 무엇인지 모릅니다.
— Quentin
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.