Thay thế cho thẻ HTML Bold


82

Được rồi, tôi biết rằng trong HTML, bạn có thể sử dụng <b>thẻ, nhưng không có "weight=bold"thuộc tính nào mà tôi có thể sử dụng trong <p>thẻ?

Hay đó là trong CSS, hoặc Javascript?


5
Tôi đang bắt đầu trả tiền thưởng cho câu hỏi này để thúc đẩy khả năng hiển thị của nó bởi vì tôi coi câu trả lời hàng đầu là thảm hại thực tế mặc dù về mặt kỹ thuật là đúng. Đặc biệt là một câu hỏi có kết quả tìm kiếm rất cao trên google cho "thẻ chữ đậm trong html5".
Kzqai

7
Tôi bỏ phiếu tiền thưởng này thật nực cười. @mipadi có câu trả lời chính xác. Nếu người dùng không thể tìm ra rằng có thể họ muốn tạo kiểu khác hơn pthì đó là vấn đề của riêng họ. Có thể họ sẽ hỏi một câu hỏi SO khác để làm rõ điều đó.
Ryley

Câu trả lời:


99

Cũng xem xét <strong>thẻ. Nó tốt hơn nhiều cho trình đọc màn hình và do đó tốt hơn cho khả năng tiếp cận. Công cụ tìm kiếm cũng sử dụng <strong>thẻ để xác định nội dung quan trọng tương tự như cách họ sử dụng thẻ tiêu đề <h1>, <h2>, vv (mặc dù <b>cũng sẽ có ý nghĩa tương tự như công cụ tìm kiếm). Nếu bạn muốn nhấn mạnh tầm quan trọng của văn bản, hãy sử dụng <strong>. Nếu bạn không muốn nhấn mạnh tầm quan trọng, hãy sử dụng <b>thẻ hoặc sử dụng font-weight:bold;kiểu trên phần tử hoặc trong CSS.

Mặc dù, nếu bạn đang in đậm toàn bộ đoạn văn, có lẽ tốt hơn nên sử dụng tùy chọn CSS. Điều này sẽ làm giảm ảnh hưởng đến trình đọc màn hình và có lẽ không có ý nghĩa gì khi nhấn mạnh toàn bộ một đoạn văn. Nhưng mặt khác, tôi đã thấy chữ đậm được sử dụng để nhấn mạnh cả một đoạn văn trước đây vì lý do chính đáng. Trong trường hợp đó, font-weight:bold;là những gì bạn muốn sử dụng, có thể là trong một lớp / phong cách.

Cuối cùng, <strong>, <b>hoặc font-weight:bold;sẽ tất cả công việc và hoàn thành một cái gì đó tương tự như trực quan (có thể giống hệt nhau), nhưng họ có ý nghĩa hơi khác nhau. Ngoài ra, hãy chắc chắn rằng nếu bạn đang bolding là một tiêu đề, sử dụng các thẻ tiêu đề: <h1>, <h2>vv


37
<b> KHÔNG được chấp nhận trong bất kỳ tiêu chuẩn HTML hoặc XHTML hiện tại nào, cũng như không được chấp nhận ngay cả trong HTML 5. <b> và <strong> có ý nghĩa riêng biệt; <b> có nghĩa là "văn bản được in đậm". <strong> có nghĩa là "nhấn mạnh hơn", nhưng không quy định kiểu văn bản; trình duyệt mặc định là in đậm.
thomasrutter

2
Việc sử dụng rộng rãi <b> đã giảm bớt, nhưng phần tử thực tế không bị phản đối theo thông số kỹ thuật của W3C.
alex

4
Thẻ <b> không được dùng nữa trong HTML5 ... và được thay thế bằng một thẻ <b> khác có ý nghĩa hơi khác. Đó là một lựa chọn kỳ lạ, nhưng về cơ bản đó là những gì họ đã làm. Ở bất kỳ mức độ nào, nó không nên được sử dụng để tạo kiểu chữ đậm.
Chuck

@Chuck: phần tử b mới nghĩa là gì?
alex

1
Lưu ý rằng trình đọc màn hình hiện đại (chẳng hạn như phiên bản mới nhất của JAWS và Window Eyes) không truyền tải nội dung của các phần tử <em> hoặc <strong> bất kỳ khác nào trong cài đặt thông thường. Người dùng phải chuyển sang chế độ Hiệu đính để đầu ra giọng nói bị ảnh hưởng. Đọc tốt: Trình đọc màn hình thiếu điểm nhấni, b, em và các yếu tố mạnh trong HTML5 .
Jon Gibbins

79

Bạn đang nghĩ đến thuộc tính CSS font-weight:

p { font-weight: bold; }

6
Vâng, hy vọng anh ấy không sao chép những gì bạn có chính xác ... sẽ lộn xộn một vài điều lên :)
Darryl Hein

6
Đó là một ví dụ đúng về mặt cú pháp. OP sẽ phải quyết định xem mình muốn nó được sử dụng như thế nào .
mipadi

6
"Cú pháp đúng" không phải là tất cả, tôi ước câu trả lời này tốt hơn, vì câu trả lời hàng đầu cho câu hỏi có nhiều khả năng hiển thị trong nhiệm vụ tìm lời giải cho thẻ b. Nó không thúc đẩy một kết quả tốt, cả vì nó ủng hộ việc tạo kiểu cho một phần tử có những công dụng khác quan trọng hơn nhiều (nói chung lập trình trong văn bản) và vì nó ủng hộ việc sử dụng kiểu css thay vì các lựa chọn thay thế sạch sẽ hơn như <strong>, <h1> <em> và <mark>. Về mặt kỹ thuật, nó hoàn toàn khả thi, nhưng trên thực tế, nó dẫn đến thảm họa.
Kzqai

4
@Tchalvak: Tôi đang sử dụng nó <p>làm ví dụ, vì OP đã sử dụng nó làm ví dụ. font-weighthoạt động trên bất kỳ phần tử nào.
mipadi

7
@mipadi Tôi hiểu điều đó, nhưng cá nhân nếu một người lạ yêu cầu tôi "một con dao thật sắc để cạo mặt", tôi sẽ bỏ qua thuật ngữ cụ thể của yêu cầu và đưa cho anh ta một dao cạo an toàn.
Kzqai

23

Nếu ý nghĩa của văn bản mạnh về mặt ngữ nghĩa , hãy sử dụng strongphần tử. Nếu không, hãy sử dụng một lớp được đặt tên theo ngữ nghĩa (lớp thể hiện rõ ràng ý nghĩa của phần tử, không trộn lẫn bản trình bày và dữ liệu bằng cách gọi nóbold v.v.) và tham chiếu nó trong CSS của bạn.

HTML

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

CSS

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

Một số người vẫn sử dụng bphần tử như một hook trình bày, nhưng nó không bị phản đối , mặc dù strongngày nay hầu hết mọi người đều ưa chuộng phần tử. Chỉ cần đảm bảo rằng chúng được sử dụng đúng cách.


4
<b> KHÔNG bị phản đối. Nó vẫn được hỗ trợ trong HTML 4.01, XHTML 1, XHTML 1.1 và thậm chí cả HTML 5. Việc ngừng sử dụng nó là một huyền thoại. Liệu nó có nên bị phản đối hay không là một vấn đề khác. Nó không phải. Xem thêm w3.org/TR/html401/index/elements.html
thomasrutter

Tính kỹ thuật nhỏ: tên lớp không thể được gọi là 'ngữ nghĩa' vì nó không phải là từ vựng được kiểm soát: không có tiêu chuẩn nào ở bất kỳ đâu xác định "thông điệp quan trọng" có nghĩa là gì trên các ứng dụng. Đặt tên cho các lớp của bạn theo chức năng của chúng vẫn là một ý tưởng hay vì nó thúc đẩy khả năng đọc và thực hành tốt nhất.
thomasrutter

@thomasrutter ... Đó là lý do tại sao tôi nói suy nghĩ . Tên không nhất thiết chỉ có ngữ nghĩa đối với máy tính; mọi người cũng đọc html.
alex

10

Thẻ <b> vẫn tồn tại và tốt. <b> không bị phản đối, nhưng việc sử dụng nó đã được làm rõ và hạn chế. <b> không có ý nghĩa ngữ nghĩa, cũng như không truyền đạt sự nhấn mạnh bằng giọng nói như có thể được nói bởi trình đọc màn hình. Tuy nhiên, <b> không chuyển tải dấu ấn đã in , cũng như thẻ <i>. Cả hai đều có một vị trí cụ thể trong nghệ thuật đánh máy, nhưng không phải trong giao tiếp nói, mes frères .

Trích dẫn từ http://www.whatwg.org/

Phần tử b đại diện cho một khoảng văn bản được bù đắp theo phong cách so với văn xuôi bình thường mà không truyền tải bất kỳ tầm quan trọng nào khác, chẳng hạn như các từ chính trong phần tóm tắt tài liệu, tên sản phẩm trong bài đánh giá hoặc các khoảng văn bản khác có phần trình bày kiểu chữ điển hình được tăng cường.

8

Bạn có thể tạo văn bản hoặc từ Boldbằng cách sử dụng<b>Text</b> thẻ.

Bạn cũng có thể dùng <strong>Text</strong> thẻ

Trưởng thẻ <h1>, <h2>,<h3> , ... là thẻ mặc định in đậm và làm cho văn bản của bạn Bold theo mặc định trừ khi bạn thay đổi phong cách của mình với CSS

Các thẻ trên có sẵn trong HTML nhưng nếu bạn muốn thay đổi kiểu, CSSbạn có thể sử dụng

font-weight:bold


7

Bạn có thể viết mã như bên dưới ..

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

  <body>
  <p class="boldstats"> The bold finder </p>
  </body>
</html>

6

Bạn có thể sử dụng thuộc tính font-weight trên

Ví dụ:

<p>This is my paragraph</p>

Bạn có thể có nội tuyến CSS của mình như sau:

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

Hoặc có nó trong biểu định kiểu CSS bên ngoài của bạn như bên dưới:

p{
  font-weight:bold;
}

5

Tất cả đều là lịch sử và có niên đại từ thời khủng long đi trên trái đất và CSS chưa tồn tại.

Nghiêm trọng hơn, hãy quên <b/>thẻ và sử dụng font-weight:boldtrong một quy tắc CSS :)


4

<b> là phương sách cuối cùng

Bạn có thể sử dụng <b>, nhưng chỉ là phương sách cuối cùng . Có nhiều yếu tố hoạt động như những lựa chọn thay thế tốt <b>, ở đây chúng theo thứ tự hữu ích nhất:

Các lựa chọn thay thế hữu ích hơn

  • Đối với văn bản quan trọng: <strong>
  • Đối với văn bản được nhấn mạnh trọng âm: <em>
  • Đối với tiêu đề, không chỉ tiêu đề trang mà tiêu đề đoạn văn và các loại khác: <h1> through <h6>

Vỏ cạnh thực tế để sử dụng <b>

Trường hợp duy nhất mà tôi ủng hộ việc sử dụng <b>là nếu

  1. bạn đã tạo kiểu theo <strong>một cách khác mà bạn không muốn hiển thị cho văn bản mà bạn nghĩ đến,

  2. bạn không muốn nhấn mạnh nghiêng hoặc một tiêu đề, và

  3. bạn sắp sử dụng một khoảng nội dòng hoặc một khoảng với một lớp chỉ để in đậm văn bản . (Ví dụ <span class='bold'>:)

Sau đó, sẽ hợp lý để sử dụng <b>thay thế, vì trong trường hợp đó, nó có thể sẽ rõ ràng hơn / ngắn hơn và nhiều ngữ nghĩa hơn một khoảng không có ngữ nghĩa và độ lớn / dễ đọc là lý do chính đáng để đưa ra lựa chọn đó, vì b đã được định nghĩa lại để sử dụng như một phần tử biểu thị sự nhấn mạnh được in .


4

bạn cũng có thể làm <p style="font-weight:bold;"> bold text here </p>


1
inline style được về để được tán thành trong html 5: P
khóa

Bạn có chắc không? Tôi nghĩ rằng chỉ có thẻ kiểu nội tuyến là không được dùng nữa, tức là. (lớn, s, đình công, tt, u)
John Boker

2
Ngay cả khi chúng không bị phản đối, chúng luôn là một ý tưởng tồi. Bạn cũng có thể quay lại sử dụng thẻ <font>.
tgecho

kiểu nội tuyến vẫn được đề xuất cho các tệp css nhỏ. Kiểm tra Yslow và PageSpeed ​​của Google. Điều đó kỳ lạ nhưng nghe có vẻ hợp lý (ít cuộc gọi hơn?)
Yannis Dran

@Kzqai: Tôi đồng ý 100%. Đối với trường hợp cụ thể của tôi, tôi phải loại bỏ mọi kiểu nội tuyến do tải quá nhiều yêu cầu ajax trên div. Chỉ bằng cách loại bỏ bất kỳ kiểu nội tuyến nào, nó giúp tôi tiết kiệm một số mili giây thời gian tải.
Adrian P.

1

Có thể bạn muốn sử dụng các lớp CSS?

p.bold { font-weight:bold; }

Bằng cách đó bạn vẫn có thể sử dụng <p>như bình thường.

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

Mang đến cho bạn:

Đây là văn bản bình thường.

Đây là Chữ in đậm.


1

Một chủ đề rất cũ, tôi biết. - nhưng để hoàn thiện:

tôi sử dụng <span class="bold">my text</span>    

khi tôi tải lên bốn kiểu phông chữ: normal; Dũng cảm; in nghiêng và in nghiêng đậm vào trang web của tôi qua css.

Tôi cảm thấy kết quả đầu ra tốt hơn so với việc chỉ đơn giản là sửa đổi một phông chữ và gần với ý định của các nhà thiết kế về cách phông chữ tăng cường trông như thế nào.

Tất nhiên, điều tương tự cũng áp dụng cho chữ in nghiêng và chữ đậm, điều này giúp tôi linh hoạt hơn.


1

Những gì bạn sử dụng thay vì bphần tử phụ thuộc vào ngữ nghĩa của nội dung phần tử đó.

  • Các yếu tố bstrongđã cùng tồn tại trong một thời gian dài cho đến nay. Trong HTML 4.01 , đã được thay thế bởi HTML5, strongđược sử dụng cho "sự nhấn mạnh mạnh mẽ", tức là sự nhấn mạnh mạnh mẽ hơn emphần tử (chỉ sự nhấn mạnh). Trong HTML 5.2 , strong"thể hiện mức độ quan trọng, nghiêm túc hoặc khẩn cấp đối với nội dung của nó"; các khía cạnh "nghiêm túc" và "khẩn cấp" là điểm mới trong đặc tả so với HTML 4.01. Vì vậy, nếu bạn đã từng bthể hiện nội dung quan trọng, nghiêm trọng hoặc khẩn cấp, bạn nên sử dụng strongthay thế. Nếu muốn, bạn có thể phân biệt giữa các ngữ nghĩa khác nhau này bằng cách thêm các thuộc tính lớp có ý nghĩa, ví dụ: <strong class="urgent">...</strong><strong class="warning">...</strong>và sử dụng các bộ chọn CSS thích hợp để tạo kiểu cho các kiểu "nhấn mạnh" này khác nhau, ví dụ: sử dụng các màu và kích thước phông chữ khác nhau (ví dụ: trong tệp CSS của bạn:. strong.warning { color: red; background-color: transparent; border: 2px solid red; }).
    Một thay thế khác bemphần tử , trong HTML 5.2 "đại diện cho sự nhấn mạnh căng thẳng của nội dung của nó". Lưu ý rằng phần tử này thường được hiển thị bằng chữ nghiêng (và do đó thường được đề xuất thay thế cho iphần tử).
    Tôi sẽ chống lại sự cám dỗ để làm theo lời khuyên từ một số câu trả lời khác để viết một cái gì đó như thế nào <strong class="bold">...</strong>. Thứ nhất, thuộc tính class không có ý nghĩa gì trong các ngữ cảnh phi hình ảnh (nghe sách ePub, nói chung chuyển văn bản thành giọng nói, trình đọc màn hình, chữ nổi Braille); thứ hai, lý do tại sao một cái gì đó được in đậm.
  • Nếu bạn đã sử dụng bcho toàn bộ đoạn văn hoặc tiêu đề (trái ngược với các đoạn văn bản ngắn hơn, đó là trường hợp sử dụng trong gạch đầu dòng trước đó), tôi sẽ thay thế nó bằng các classthuộc tính thích hợp hoặc nếu có, các vai trò WAI-ARIA chẳng hạn như alertđối với trực tiếp khu vực "có thông tin quan trọng và thường nhạy cảm về thời gian". Như đã đề cập ở trên, bạn nên sử dụng classcác giá trị thuộc tính "ngữ nghĩa" để những người duy trì mã (bao gồm cả bản thân trong tương lai của bạn) có thể tìm ra lý do tại sao một cái gì đó được in đậm.
  • Không phải tất cả các cách sử dụng bcó thể đại diện cho một cái gì đó ngữ nghĩa. Ví dụ: khi bạn đang chuyển đổi tài liệu in thành HTML, văn bản có thể được in đậm vì những lý do không liên quan gì đến sự nhấn mạnh hoặc tầm quan trọng mà là hướng dẫn trực quan. Ví dụ: các từ tiêu đề trong từ điển không "nghiêm trọng", "khẩn cấp" hơn nội dung khác, vì vậy bạn có thể giữ bphần tử đó và tối ưu thêm một thuộc tính lớp có ý nghĩa, ví dụ: <b class="headword">hoặc thay thế thẻ bằng <span class="headword">dựa trên đối số bcó không có ý nghĩa trong bối cảnh không trực quan.

Trong tệp CSS của bạn (thay vì sử dụng stylethuộc tính, như một số câu trả lời khác đã đề xuất), bạn có một số tùy chọn để tạo kiểu cho văn bản "in đậm" hoặc văn bản quan trọng:

  • chỉ định các màu khác nhau (tiền cảnh và / hoặc hậu cảnh);
  • xác định các mặt phông chữ khác nhau;
  • xác định đường viền (xem ví dụ ở trên);
  • sử dụng trọng lượng phông chữ khác nhau bằng cách sử dụng font-weightbất động sản , cho phép nhiều giá trị hơn là chỉ normalbold, cụ thể là normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,
  • Vân vân.

Lưu ý rằng hỗ trợ cho các giá trị trọng số phông chữ số không phải lúc nào cũng tốt.


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>

Tôi hy vọng nó hoạt động


0

Trên một chú thích bên dưới, mã dưới đây cũng sẽ làm cho nó in đậm.

<strong> text here </strong> 

1
... trong hầu hết các trình duyệt ... nhưng chỉ là một tác dụng phụ của việc mô tả văn bản có điểm nhấn mạnh hơn.
Quentin


0

Bạn có thể sử dụng sau:

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

HOẶC LÀ

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

HOẶC LÀ

Bạn có thể sử dụng <h1> tagnó hơi tương tự như bold


1
Vì p có thể là mức khối, bạn muốn mạnh vào bên trong p.
Kzqai

0

Ngày nay mọi người có xu hướng sử dụng các trình xây dựng trang web (CMS như Wordpress) thay vì viết mã blog của riêng họ từ đầu. Ngay cả các nhà phát triển web chuyên nghiệp cũng làm điều đó vì nó nhanh hơn.

Sẽ thật tuyệt nếu bạn có thể đề cập đến những ưu điểm và những điều cần lưu ý khi viết mã blog của riêng bạn trong cuộc sống thực, ví dụ:

  • Linh hoạt hơn (tùy chỉnh)
  • Trả tiền tên miền
  • Thanh toán và chọn dịch vụ lưu trữ web
  • Bảo mật và bảo trì
  • Bản quyền và giấy phép của một số mẫu và đồ họa của nhà xây dựng trang web. Trang web của bạn có thể bị khóa đối với một máy chủ web cụ thể nếu bạn sử dụng trình tạo trang web của máy chủ lưu trữ. Vì vậy, bạn không thể chuyển sang máy chủ web khác, bởi vì nếu bạn làm vậy, bạn không thể sử dụng mẫu đó nữa.
  • Gặp sự cố khi yêu cầu hỗ trợ kỹ thuật của người xây dựng trang web khi trang web gặp sự cố.
  • Một số mẫu không thân thiện với công cụ tìm kiếm và điều này ảnh hưởng đến xếp hạng trang web của bạn (SEO)

Dù sao, bạn có thể sử dụng css / css3 hoặc JavaScript để tạo trang web tương tác. Thậm chí bạn có thể tải tất cả các loại mã của mình lên một máy chủ định dạng chủ đề blog mặc định.


-2

Câu trả lời của @Darryl Hein là đúng mặc dù có một điểm - hoàn toàn <b>không được khuyến khích kể từ XHTML, vì nó không có ngữ nghĩa .

<strong> nghĩa là văn bản được đánh dấu ngữ nghĩa

font-weight: bold nghĩa là văn bản được đánh dấu trực quan

<strong>có thể được điều chỉnh css để không in đậm, mặc dù đó là một mặc định thông thường. Nó có thể được làm màu đỏ, hoặc nghiêng, hoặc gạch chân (mặc dù tất cả những khả năng này không thực sự thân thiện với người dùng). Sử dụng nó cho các cụm từ / từ trong văn bản, không phải vì thiết kế trực quan mà liên quan đến ý nghĩa của chúng

font-weight: bold nên được sử dụng cho các phần in đậm liên quan đến thiết kế, như tiêu đề, tiêu đề phụ, ô tiêu đề bảng, v.v.


Tôi không tin điều đó là đúng trong định nghĩa đã sửa đổi cho <b> trong html5.
Kzqai

Đồng thời, bạn đã viết rằng đó <b>là biện pháp cuối cùng, và tôi đã viết rằng b không được khuyến khích. Mâu thuẫn ở đâu?
Bảo vệ

3
Xin lỗi, lẽ ra phải cụ thể hơn ở chỗ tôi muốn nói rằng nó có ý nghĩa ngữ nghĩa được điều chỉnh lại trong html 5: ...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]”.trong html5, theo dev.w3.org/html5/markup/b.html#b . Đó là lý do mà tôi coi <b>là: hợp lệ / phương sách cuối cùng / không phải ngữ nghĩa / được định nghĩa lại thành ngữ nghĩa, v.v. Chỉ là một sự khác biệt nhỏ.
Kzqai

-3

Sử dụng <strong>thẻ vì nó mang nhiều ngữ nghĩa hơn. <b>đã bị mất giá nên tốt nhất bạn không nên sử dụng. Ngoài ra chữ in đậm được đưa ra nhiều Search Engine Optimization (SEO) trọng lượng vì vậy nó luôn luôn tốt nhất để sử dụng một thực <strong>chứ không phải là thực hiện một <p>hoặc <span>đậm CSS bằng.


4
Đừng sử dụng những thứ vì chúng "nhiều ngữ nghĩa hơn" - hãy sử dụng chúng vì chúng có ngữ nghĩa áp dụng cho những gì bạn đang viết. Chúng tôi không biết ngữ nghĩa của văn bản OP có là gì.
Quentin
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.