Sự khác biệt giữa <strong> và <b> trong HTML?

In đậm (còn gọi là boldface) được coi là một loại nhấn mạnh mạnh trong điển hình. Trong HTML hiện đại có hai phần tử HTML mà theo mặc định áp dụng font-weight in đậm (còn gọi là "boldface") cho phần tử văn bản (trong hầu hết trình duyệt).

Bạn có thể dùng thẻ <strong> hoặc thẻ <b>, như sau:

<p>Thẻ strong dùng để <strong>nhấn mạnh</strong> văn bản.</p> <p>Thẻ b dùng để <b>nhấn mạnh</b> văn bản.</p>

Trong HTML hiện đại (HTML5), cả <strong> và <b> đều được coi là ngữ nghĩa và hợp lệ. Mặc dù chúng đều nhận được kiểu dáng trình bày boldface giống nhau trong trình duyệt hiện đại, chúng không có cùng ý nghĩa hoặc mục đích.

Vậy sự khác biệt giữa strong và b là gì, và bạn nên dùng cái nào cho trường hợp nào?

• Phần tử <strong> dùng cho nội dung có tầm quan trọng lớn (như cảnh báo).
• Phần tử <b> dùng để thu hút chú ý, mà không gợi ý tầm quan trọng.

Ví dụ dùng <b>:

Từ tiếng Tây Ban Nha <b>idioma</b> nghĩa là "ngôn ngữ". Nó xuất phát từ tiếng Hy Lạp.

Trong ví dụ trên, tôi, với tư cách là một nhà điển hình, quyết định làm nổi bật từ idioma không phải vì nó có tầm quan trọng lớn, mà vì đó là từ nước ngoài, không phải tiếng Anh, tôi muốn nó nổi bật so với văn bản xung quanh. Đó là quyết định về phong cách, chứ không phải điều tôi phải làm để truyền đạt ý nghĩa.

Vì vậy, nếu bạn muốn thu hút chú ý vào thứ gì đó, mà không có ý nghĩa ngữ nghĩa cụ thể đằng sau, <b> về mặt lịch sử (trước HTML5) sẽ đúng để dùng. Tuy nhiên, trong thời đại hiện đại, chúng ta không dùng HTML để trình bày, chúng ta dùng CSS, đó là lý do tôi không dùng <b>.

Ví dụ dùng <strong>:

Năm 2020, <strong>bảo mật</strong> và <strong>hiệu suất</strong> là cực kỳ quan trọng cho SEO của bạn.

Trong ví dụ trên, tôi quyết định nhấn mạnh mạnh bảo mật và hiệu suất vì những chủ đề đó thực sự có tầm quan trọng lớn cho SEO (và UX) của trang web bạn.

Mặc định, <strong> và <b> sẽ áp dụng cùng kiểu boldface cho văn bản trong hầu hết trình duyệt, điều này dễ hiểu gây nhiều nhầm lẫn. Tại sao làm chúng trông giống nhau khi chúng là công cụ khác nhau cho trường hợp sử dụng khác nhau?

Tôi đồng ý với bạn. Đó là điều khó chịu.

Đây là lý do bạn có thể muốn ghi đè mặc định trình duyệt và áp dụng kiểu dáng khác nhau cho chúng.

Một cách tốt để phân biệt <strong> và <b> về mặt trình bày, là áp dụng font-weight từ 500 đến 900 (tùy vào họ font) cho phần tử <strong> bằng CSS. Như sau:

strong { font-weight: 700; }

Sau đó dùng kiểu dáng khác cho <b>, ví dụ:

b { font-weight: 400; color: green; }

Trên không phải là gợi ý phong cách, mà là ví dụ về cách bạn có thể làm cho dễ nhớ cái nào bạn đã dùng khi xem trang đã render trong trình duyệt.

Nếu bạn dùng markdown

Nếu bạn thử chuyển đổi <b> hoặc <strong> sang markdown trong trình chuyển đổi HTML sang Markdown như Browserling, bạn sẽ thấy cả hai đều nhận được cùng ** ** — được render thành <strong> trong trình duyệt.

Vậy sao?

Tôi không chắc. Tôi không tìm thấy hướng dẫn markdown nào chỉ cách render <b> ra trình duyệt khi dùng markdown, ít nhất không bằng cú pháp markdown.

Đừng lo, bạn vẫn có thể áp dụng cú pháp HTML trực tiếp bên trong file markdown (trừ khi bạn dùng phiên bản cũ). Vì vậy, nếu bạn muốn hoặc cần dùng <b> thay vì <strong>, bạn chỉ cần thêm nó như sau:

Đây là một dòng văn bản bên trong một <b>markdown</b> file được tự động bọc bởi thẻ đoạn văn

Tôi đang viết hướng dẫn này bằng markdown. Bây giờ tôi sẽ làm nổi bật văn bản này với phần tử <b>. Nếu bạn bôi đen và chọn đoạn văn này và nhấp "Kiểm tra" (Inspect), bạn sẽ thấy nó thực sự dùng phần tử <b>.

Có thực sự quan trọng đến mức nào bạn dùng cái nào?

Rõ ràng đây không phải vấn đề sống còn, nếu không trình duyệt hiện đại sẽ không render <b> và <strong> với cùng kiểu boldface.

Tuy nhiên, về mặt ngữ nghĩa, có sự khác biệt, đó là thông điệp tôi muốn truyền đạt. Vì vậy, nếu bạn đi phỏng vấn việc, nơi họ quan tâm rất nhiều đến đánh dấu ngữ nghĩa, quan trọng là biết sự khác biệt.

Tóm tắt:

• <b> dùng để thu hút chú ý đến văn bản cụ thể.
• <strong> dùng cho văn bản quan trọng.
• Khi băn khoăn, hãy dùng <strong>.

Một quy tắc kinh nghiệm tốt là tránh lạm dụng nhấn mạnh hoàn toàn. Khi bạn cố nhấn mạnh quá nhiều, nhấn mạnh mất đi sức mạnh. Nếu bạn nhấn mạnh mọi thứ, bạn không nhấn mạnh gì cả (Tôi đang nhìn bạn, các trang web landing page marketing chung chung).