Khác nhau giữa <strong> vs <b> trong HTML

Trong HTML, có hai thẻ (tags) làm phông chữ được in đậm là thẻ <b> và thẻ <strong>, ngoài ra chúng ta cũng có thể sử dụng thuộc tính CSS font-weight. Vậy sự khác nhau giữa hai thẻ <b> và thẻ <strong> trong HTML là gì thì chúng ta cùng tìm hiểu trong bài này nhé!

Thẻ <b> trong HTML

Thẻ <b> trong HTML được sử dụng để in đậm văn văn bản. Đây là một inline element, có nghĩa là khi sử dụng các thẻ <b> sẽ nằm trên cùng một dòng chứ không phải trên dòng tiếp theo. Thẻ này cũng có thể được sử dụng bên trong các thẻ như <p>, <span>, <div>...

Ví dụ:

<div>Học <b>HTML</b> tại <b>homiedev.com</b></div>
<h5>Bài viết: khác nhau giữa thẻ <b>b</b> và <b>strong</b></h5>

Kết quả sẽ như bên dưới:

Bài viết: khác nhau giữa thẻ b và strong

Ở ví dụ trên, khi kết hợp thẻ <b> với thẻ <h5>. Với style mặc định, chúng ta sẽ không thấy được sự khác nhau khi hiển thị văn bản. Đó là vì cả <b> và <h5> có sử dụng thuộc tính css font-weight: bold;.

Thẻ <strong> trong HTML

Thẻ <strong> trong HTML cũng được sử dụng để làm cho văn bản được in đậm. Theo mặc định, các trình duyệt sẽ hiển thị văn bản của thẻ <strong> bằng kiểu chữ in đậm. Tuy nhiên, thẻ <strong> dùng với mục đích nhấn mạnh tầm quan trọng, mức độ khẩn cấp hoặc mức độ nghiêm trọng cho văn bản.

Ví dụ:

<div>
  <strong>Bài viết nên đọc:</strong>
  <ul>
      <li><a href="https://homiedev.com/tat-tan-tat-ve-this-trong-javascript">Tất tần tật về this trong JavaScript - Homiedev</a></li>
      <li><a href="https://homiedev.com/style-console-log-su-dung-css-ban-da-biet-chua/">Style console.log sử dụng CSS bạn đã biết chưa?</a></li>
  </ul>
</div>

Kết quả đoạn HTML trên:

Như vậy sự khác nhau giữa hai thẻ <b> và thẻ <strong> là:

1. Thẻ <strong> được sử dụng để nhấn mạnh tầm quan trọng, mức độ khẩn cấp hoặc mức độ nghiêm trọng cho văn bản.
2. Thẻ <b> dùng với mục đích in đậm văn bản.

Ngoài ra, nếu một văn bản có sử dụng cả hai thẻ <b> và thẻ <strong>, chúng ta có thể style cho hai thẻ này. Ví dụ:

<div>
  <p>
    <span>👉</span>
    <b>Homiedev</b> là blog mình tạo ra với mong muốn giúp các bạn Front-end developer có thể học Front-end dễ dàng hơn 
    <span>😄</span>.
  </p>
  <p>
    <span>⚡</span>Trang web này có thể xuất hiện quảng cáo ở một số vị trí, vì bài viết ở blog này là <strong style="text-shadow: 2px 3px 4px rgb(45 62 80 / 56%); color: #2d3e50">free</strong> nên để duy trì website mình đã đặt quảng cáo ở trang này. Mong các bạn thông cảm. 
    <br>
    <b>Chúc các bạn học tập tốt </b><span>🎉🎉</span>
  </p>
</div>

Kết quả đoạn HTML trên:

Như vậy là chúng ta đã tìm hiểu về sự khác nhau giữa <b> và <strong> trong HTML. Hi vọng bài viết giúp ích cho các bạn. Chúng ta sẽ gặp lại nhau trong các bài viết sắp tới nhé 😄.