Những thẻ thuộc nhóm inline

Những thẻ thuộc nhóm inline

  • Những thẻ thuộc nhóm inline là những thẻ cơ bản của HTML/XHTML, chỉ được dùng để chứa nội dung cho text hoặc các thẻ inline khác.
  • Bản thân text cũng có thể coi thuộc nhóm inline.
  • Những thẻ thuộc nhóm inline nên được bao ngoài bởi nhóm các thẻ block, vì các thẻ block sẽ lo nhiệm vụ dàn trang web, còn các thẻ thuộc nhóm inline chỉ để hiển thị nội dung cho văn bản.

<p>Học <strong>HTML</strong> rất dễ.</p>
<p><img src="images/img_sakura.jpg" alt="Sakura" /></p>
<p>Đây là một <a href="www.hocwebchuan.com">liên kết</a>.</p>

Hiển thị trình duyệt:

Học HTML rất dễ.

Sakura

Đây là một liên kết.

  • Những thẻ thuộc nhóm inline có thể được lồng vào nhau.

<a href="hocwebchuan.com"><img src="images/img_sakura.jpg" alt="Sakura" /></a>

  • Không được sử dụng các thẻ khác bên trong các thẻ inline, cách sử dụng sau đây là không đúng chuẩn:

<a href="www.hocwebchuan.com"><p>Đây là cấu trúc sai.</p></a> <span><div>Đây là cấu trúc sai</div></span>

Các thẻ sau đây thuộc nhóm inline:

Trong phạm vi bài học, chúng ta chỉ đề cập tới một số thẻ inline thông dụng sau:

Thẻ liên kết <a></a>

  • Thẻ liên kết <a></a> dùng để tạo một liên kết từ trang web này sang trang web khác, từ vị trí này sang vị trí khác hay dùng để mở ra một object nào đó (có thể là file words, excel, pdf, mp3, movie,...), thẻ này có một thuộc tính bắt buộc:

    • href: Chứa đường dẫn cụ thể tới mục tiêu liên kết.
  • Tham khảo thêm về thẻ liên kết <a></a>.

HTML viết

<p><a href="www.hocwebchuan.com">Đây là một liên kết</a></p>

Hiển thị trình duyệt:

Xem thêm ví dụ

Thẻ hiển thị một image <img />

  • Thẻ hiển thị một image <img /> dùng để nhúng một ảnh thông qua thuộc tính src, thẻ này có 2 thuộc tính bắt buộc:

    • src: Chứa đường dẫn tham chiếu tới image.
    • alt: Được sử dụng như một văn bản thay thế khi image không hiển thị (hoặc không có sẵn).
  • Cấu trúc của thẻ <img /> không có sử dụng thẻ đóng (không dùng <img></img>), mà sử dụng ký tự kết thúc là một khoảng trắng và ký tự "/".
  • Tham khảo thêm về thẻ <img />.

HTML viết

<p><img src="img_sakura.jpg" alt="Sakura" /></p>

Hiển thị trình duyệt:

Sakura

Xem thêm ví dụ

Thẻ ngắt đoạn văn bản <br />

  • Thẻ ngắt đoạn văn bản <br /> dùng để xuống dòng văn bản trong cùng một đoạn văn.
  • Cấu trúc của thẻ <br /> không có sử dụng thẻ đóng (không dùng <br></br>), mà sử dụng ký tự kết thúc là một khoảng trắng và ký tự "/".
  • Tham khảo thêm về thẻ <br />.

HTML viết

<p>Đây là đoạn văn dài rất dài rất dài rất dài<br />
rất dài rất dài rất dài rất dài.</p>

Hiển thị trình duyệt:

Đây là đoạn văn dài rất dài rất dài rất dài
rất dài rất dài rất dài rất dài.

Thẻ nhóm các inline <span></span>

  • Thẻ nhóm các inline <span></span> dùng để nhóm một hay nhiều thẻ inline khác nhau, thẻ này không có ý nghĩa về mặt hiển thị, chỉ hỗ trợ định dạng các inline thông qua CSS hoặc Javascript.
  • Tham khảo thêm về thẻ <span></span>.

HTML viết

<p>Đây là đoạn text có <span class="red">sử dụng</span> span.</p>

Hiển thị trình duyệt:

Đây là đoạn text có sử dụng span.

Thẻ hiển thị hình ảnh mạnh <strong></strong>

  • Thẻ hiển thị hình ảnh mạnh <strong></strong> mục đích đánh dấu văn bản, văn bản được đánh dấu sẽ hiển thị dạng in đậm.
  • Tham khảo thêm về thẻ <strong></strong>.

HTML viết

<p>Đây là text được <strong>nhấn mạnh</strong>.</p>

Hiển thị trình duyệt:

Đây là text được nhấn mạnh.

Thẻ dùng để nhấn mạnh nội dung văn bản <em></em>

  • Thẻ dùng để nhấn mạnh nội dung văn bản <em></em> mục đích nhấn mạnh văn bản nhằm gây chú ý cho người xem, văn bản được đánh dấu sẽ hiển thị bằng hình dạng, in nghiên, màu sắc.
  • Tham khảo thêm về thẻ <em></em>.

HTML viết

<p>Đây là dòng text được <em>nhấn mạnh</em>.</p>

Hiển thị trình duyệt:

Đây là dòng text được nhấn mạnh.