Học HTML, CSS từ Zero Tới Hero
- Thẻ figure
- Thẻ figcaption
- Vấn đề trong HTML4?
Thẻ figure
Thẻ <figure> được sử dụng để thể hiện hình ảnh trong nội dung tài liệu như hình minh họa, biểu đồ, khối code, v.v. Đây là một thẻ có từ phiên bản HTML5.
Cách sử dụng:
<figure>
<img src="https://example.com/images/appple.png" alt="Apple" />
</figure>
Ví dụ:
<h1>Neil Armstrong</h1>
<p>
Neil Alden Armstrong là một phi hành gia và kỹ sư kỹ thuật hàng không vũ trụ người Mỹ, và cũng là người đầu tiên đặt chân lên Mặt Trăng. Ông cũng là một phi công hải quân, phi công thử nghiệm, và giáo sư đại học.
</p>
<figure>
<img src="https://files.fullstack.edu.vn/f8-prod/public-images/630dd1d998b21.png" alt="Neil Armstrong">
</figure>
<p>
Neil Alden Armstrong (5 tháng 8 năm 1930 – 25 tháng 8 năm 2012) là một phi hành gia và kỹ sư kỹ thuật hàng không vũ trụ người Mỹ, và cũng là người đầu tiên đặt chân lên Mặt Trăng.
</p>
Thẻ <img> dùng để hiển thị một hình ảnh, trong khi <figure> dùng để bổ sung ngữ nghĩa cho một hình ảnh. Vì vậy, 2 thẻ này không thể thay thế cho nhau.
Thẻ <figure> không chỉ dùng với hình ảnh, bạn cũng có thể dùng với âm thanh, video, biểu đồ, v.v.
Không nên sử dụng thẻ <figure> cho những hình ảnh không nằm trong nội dung tài liệu như:
- Các biểu tượng
- Avatar, ảnh bìa, banner quảng cáo, v.v
- Các hình ảnh mang tính trang trí
Thẻ figcaption
Thẻ <figcaption> dùng để bổ sung chú thích cho nội dung được thể hiện bằng thẻ <figure>. Ví dụ như chú thích cho một hình ảnh, video, biểu đồ, v.v.
Cách sử dụng:
<figure>
<img src="https://example.com/images/appple.png" alt="Apple" />
<figcaption>An Apple</figcaption>
</figure>
Ví dụ:
<h1>Neil Armstrong</h1>
<p>
Neil Alden Armstrong là một phi hành gia và kỹ sư kỹ thuật hàng không vũ trụ người Mỹ, và cũng là người đầu tiên đặt chân lên Mặt Trăng. Ông cũng là một phi công hải quân, phi công thử nghiệm, và giáo sư đại học.
</p>
<figure>
<img src="https://files.fullstack.edu.vn/f8-prod/public-images/630dd1d998b21.png" alt="Neil Armstrong">
<figcaption>
Neil Armstrong - Người đầu tiên đặt chân lên mặt trăng.
</figcaption>
</figure>
<p>
Neil Alden Armstrong (5 tháng 8 năm 1930 – 25 tháng 8 năm 2012) là một phi hành gia và kỹ sư kỹ thuật hàng không vũ trụ người Mỹ, và cũng là người đầu tiên đặt chân lên Mặt Trăng.
</p>
Một số lưu ý khi sử dụng thẻ <figcaption>:
- Không bắt buộc sử dụng
- Luôn nằm trong thẻ
<figure> - Đặt trước hoặc sau thẻ
<img>đều được
Vấn đề trong HTML4?
Trước khi có thẻ <figure>, để thể hiện hình ảnh và chú thích trong bài viết chúng ta sẽ dùng một thẻ <div> hoặc thẻ <p> để bao bọc một hình ảnh và nội dung chú thích của nó.
Ví dụ:
<body>
<p>Dưới đây là hình ảnh của Laptop Razer Blade 15 2022.</p>
<div>
<img src="images/razer-blade-15.jpg" alt="Razer Blade 15 2022" />
<p>Laptop Razer Blade 15 2022.</p>
</div>
</body>
hoặc:
<body>
<p>Dưới đây là hình ảnh của Laptop Razer Blade 15 2022.</p>
<p>
<img src="images/razer-blade-15.jpg" alt="Razer Blade 15 2022" />
Laptop Razer Blade 15 2022.
</p>
</body>
hoặc:
<body>
<p>Dưới đây là hình ảnh của Laptop Razer Blade 15 2022.</p>
<p><img src="images/razer-blade-15.jpg" alt="Razer Blade 15 2022" /></p>
<p>Laptop Razer Blade 15 2022.</p>
</body>
Những cách trên chưa rõ ràng về ngữ nghĩa cho phần chú thích của hình ảnh. Vì vậy, trong HTML5 thẻ <figure> và <figcaption> đã được thêm vào để giải quyết vấn đề này.
Ví dụ:
<body>
<p>Dưới đây là hình ảnh của Laptop Razer Blade 15 2022.</p>
<figure>
<img src="images/razer-blade-15.jpg" alt="Razer Blade 15 2022" />
<figcaption>Laptop Razer Blade 15 2022.</figcaption>
</figure>
</body>
Thay đổi rõ ràng là: chỉ cần nhìn vào đoạn code trên, chúng ta có thể hiểu được nội dung của nó qua ngữ nghĩa của <figure> và <figcaption> mang lại.
Tóm tắt
- Thẻ
<figure>được sử dụng để thể hiện hình ảnh trong nội dung tài liệu như hình minh họa, biểu đồ, khối code, v.v. Đây là một thẻ có từ phiên bản HTML5. - Thẻ
<img>dùng để hiển thị một hình ảnh, trong khi<figure>dùng để bổ sung ngữ nghĩa cho một hình ảnh. Vì vậy, 2 thẻ này không thể thay thế cho nhau. - Thẻ
<figcaption>dùng để bổ sung chú thích cho nội dung được thể hiện bằng thẻ<figure>. Ví dụ như chú thích cho một hình ảnh, video, biểu đồ, v.v.
Nhận xét