Giới thiệu

Thẻ iframe trong HTML là thành phần hay thẻ tag của một HTML element dùng để nhúng HTML, hình ảnh, video hay trang web khác vào website của mình. iframe viết tắt của cụm từ Inline Frame và tạm dịch là khung nội tuyến.

---

Cú pháp

<iframe src="url" title="description">

Mẹo: Hãy ghi nhớ thêm thuộc tính tiêu đề cho thẻ iframe. Điều này được sử dụng bởi trình đọc màn hình để đọc nội dung của iframe là gì, giúp các Search Engine có thể tìm thấy nhanh hơn vì thẻ iframe có tầm quan trọng lớn đến việc SEO website đó.

Ví dụ: Nhúng trang web hocjavascript.net bên trong bài viết thẻ iframe trong HTML

---

Chiều cao và chiều rộng của iframe

Sử dụng thuộc tính height và width để chỉ định kích thước của iframe.

Chiều cao và chiều rộng mặc định tính bằng pixel:

<iframe src="hocjavascript.net/html" height="400" width="500" title="Iframe Example">
</iframe>

Hoặc sử dụng thuộc tính style để chỉ định kích thước iframe:

<iframe src="hocjavascript.net/html" style="height:400px;width:500px;" title="Iframe Example">
</iframe>

Kết quả:

---

Xoá đường viền của iframe

Mặc định, iframe sẽ có đường viền bao quanh nó. Để xoá đường viền đó đi, ta thêm style="border:none;" vào bên trong thẻ iframe:

<iframe src="hocjavascript.net/html" style="border:none;" title="Iframe Example">
</iframe>

Kết quả:

Ngoài ra, bạn cũng có thể chỉnh kích cỡ, màu sắc cho đường viền của thẻ iframe:

<iframe src="hocjavascript.net/html" style="border:2px solid red;" title="Iframe Example">
</iframe>

Kết quả:

---

Sử dụng frame chứa đường dẫn

iframe có thể dùng để chứa nội dung đường dẫn URL. Thuộc tính target phải có giá trị trùng với giá trị của thuộc tính name ở iframe.

<iframe src="hocjavascript.net/html" name="iframe_a" height="300px" width="100%" title="Iframe Example">
</iframe>

<p>
<a href="https://codegym.vn" target="iframe_a">CodeGym</a>
</p>

Ở ví dụ này, khi bạn nhấn lên liên kết CodeGym thì nội dung website codegym.vn sẽ được hiển thị trong iframe.

CodeGym

---

Tóm tắt

• Thẻ iframe trong HTML chỉ định khung nội tuyến
• Thuộc tính src xác định URL của trang để nhúng
• Luôn bao gồm thuộc tính title (dành cho trình đọc màn hình)
• Thuộc tính height và width chỉ định kích thước của iframe
• Sử dụng border:none; để xóa đường viền xung quanh iframe

Kết luận

Qua đây là một số chia sẻ về thẻ iframe trong HTML, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về HTML.

Các bạn có thể tham khảo các bài viết hay về HTML tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.