Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. HTML

Mẹo nhỏ: Cân nhắc đặt code của bạn trong phần tử "figure"

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Strange and Unusual HTML.
Build a Custom HTML5 Video Player
Quick Tip: Remember to Style Your ALT Text

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Thẻ <figure> được giới thiệu cùng với HTML5 một thời gian khá lâu trước đây, tuy vậy bạn có thể vẫn chưa quen với những gì mà nó làm, hoặc làm thế nào nó có thể được sử dụng trong rất nhiều tình huống khác nhau. Trong hướng dẫn này, bạn sẽ tìm hiểu sự khác biệt giữa thẻ <figure> so với các thẻ khác, và làm thế nào bạn có thể bắt đầu sử dụng nó để nâng cao cách bạn nhóm các phần tử trong mã đánh dấu của bạn.

Đây là một bài hướng dẫn ở cấp độ cơ bản, nhưng cũng sẽ đóng vai trò như là một bài tham khảo hữu ích dành cho những đối tượng khác.

Trường hợp sử dụng điển hình của thẻ <figure>

Đầu tiên hãy xem những gì HTML5 Doctor đã nói về vấn đề này:

Thẻ figure trình diễn một đơn vị nội dung, có thể đi kèm với một chú thích, tự xác định nội dung của riêng nó, thường được xem như là một đơn vị độc lập khỏi dòng chảy chính của tài liệu, và có thể được di chuyển khỏi dòng chảy chính của tài liệu mà không làm ảnh hưởng đến ý nghĩa của tài liệu. -Richard Clark

Vì vậy, phần tử figure xác định nội dung của riêng nó, chẳng hạn như hình minh họa và các hình ảnh. Điều này có nghĩa rằng bạn sẽ luôn luôn sử dụng thẻ figure để chứa thứ gì đó khác.

Một trong những quan niệm sai lầm thường gặp đó là thẻ figure chỉ có thể được sử dụng cho hình ảnh. Trong thực tế, nó có thể được dùng để nhóm bất kỳ thứ gì lại nhau với nhau, gồm có, nhưng không giới hạn, hình ảnh, video, âm thanh, và các đoạn code.

Xác định cấu trúc trang

Thẻ figure là một phần riêng, có nghĩa là nó có thể cô lập nội dung của nó khỏi cấu trúc của phần tử cha. Bất cứ thứ gì bên trong thẻ figure không đóng góp vào đề cương tài liệu bên ngoài nó. Nó hoạt động như là một phần tử cấu trúc của trang và do đó có thể chứa các tiêu đề của riêng mình, bắt đầu với một <h1> và phân cấp xuống <h2>, <h3> và vân vân, nhưng điều này không ảnh hưởng đến hệ thống phân cấp bên ngoài nó:

sectioning root
Hệ thống phân cấp trong thẻ figure không ảnh hưởng lên cấu trúc của phần tử cha.

Các phần tử như thế này thường được sử dụng để giới thiệu các nội dung bên ngoài tài liệu như trích dẫn một ví dụ. <fieldset> là một ví dụ khác về một phần tử riêng.

Hình ảnh

Dưới đây là một ví dụ điển hình về cách thẻ figure có thể được sử dụng để hiển thị một hình ảnh.

Bây giờ, bạn có thể nghĩ, "Tại sao phải gói thẻ img của tôi trong một mã đánh dấu phụ?" Đó là một câu hỏi hợp lý, nhưng bạn sẽ hiểu một khi bạn nhận ra rằng một <figure> có thể chứa nhiều hơn một phần tử con, chẳng hạn như một chú thích.

Cũng có một thẻ cho một chú thích, hay đúng hơn là, figcaption. Xét đến điều này, bạn sẽ có thể sử dụng nó theo cách sau đây.

Nhiều hình ảnh

Sử dụng một loạt các phần tử img để hiển thị hình ảnh cùng nhau cũng rất tốt, mặc dù mỗi hình ảnh riêng độc lập như là khối mã của riêng nó, hoàn toàn không liên quan đến bất kỳ cái khác. Trong trường hợp nơi mà những hình ảnh chia sẻ một mối quan hệ nào đó thì thẻ figure là vị cứu tinh. Ba hình ảnh này có liên quan và chia sẻ một bản tóm tắt duy nhất trong figcaption.

Sử dụng <figure> cho khối mã

Khả năng nhóm các phần tử của thẻ figure không dừng lại ở đây. Có thể bạn muốn nhóm một số code trực tiếp, cùng với một chú thích, trong hướng dẫn, ví dụ vậy, thì bạn có thể sử dụng figurefigcaption theo cách sau đây:

figure có thể được sử dụng theo cách này với code, presamp, giúp dễ dàng nhóm các khối code.

Tổng kết

Rất đơn giản! Bạn đã học được cách sử dụng phần tử figure, cùng với figcaption và các phần tử khác để nhóm nhiều phần tử lại với nhau. Hiện bạn đang sử dụng phần tử figure như thế nào? Liệu nó có thay đổi sau khi bạn đọc hướng dẫn nhanh này? Hãy nói cho chúng tôi biết trong phần bình luận nhé!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.