figure & figcaption 、details & summary 、 mark

HTML <figure> Tag & <figcaption> Tap

Use a <figure> element to mark up a photo in a document:

Use a <figure> element to mark up a photo in a document. The <figure> element also contains a caption:

Definition and Usage 

The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

While the content of the <figure> element is related to the main flow, its position is independent of the main flow, and if removed  it should not affect the flow of the document. A figure element is only allows one figcapiton.

The <figcaption> tap defines a caption for a <figure> element.

The <figcaption> element can be placed as the first or last child of the <figure> element.

Differences between <figure> and <aside>

*If the contents is simply related and not essential, use <aside>

*If the contents is essential but its position in the flow of content isn't important, use <figure>

HTML <details> Tag & <summary> Tap

Using the <details> element & <summary> element

Definition and Usage 

The <detail> tag specifies details that the user can view or hide on demand.

The <detail> tag can be used to create an interactive widget that the user can open and close.Any sort of content can be put inside the <details> tag.

The content of a <details> element should not be visible unless the open attribute is set.

HTML <mark> Tag

Highlight parts of a text: