Horje
What is HTML <figure> Tag | HTML Tag Code
What is HTML <figure> Tag

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.

Tip: The <figcaption> element is used to add a caption for the <figure> element.


How to create HTML <figure> Tag

Use a <figure> element to mark up a photo in a document, and a <figcaption> element to define a caption for the photo
index.html
Example: HTML
<figure>
  <img src="https://horje.com/avatar.png" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

Output should be:

How to create HTML <figure> Tag

Which browser will support for HTML <figure> Tag

Which browser will support for HTML <figure> Tag

How to Use CSS to style <figure> and <figcaption>

The figure and figcaption elements + CSS
index.html
Example: HTML
<style>
figure {
  border: 1px #cccccc solid;
  padding: 4px;
  margin: auto;
}

figcaption {
  background-color: black;
  color: white;
  font-style: italic;
  padding: 2px;
  text-align: center;
}
</style>

<figure>
  <img src="https://horje.com/avatar.png" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy</figcaption>
</figure>

Output should be:

How to Use CSS to style <figure> and <figcaption>

How to set Default CSS Settings

Most browsers will display the <figure> element with the following default values
index.html
Example: HTML
<style>
figure {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}
</style>

Output should be:

How to set Default CSS Settings



Read Full::
HTML Tag Code
Category:
HTML Code
Sub Category:
HTML Tag Code
Uploaded:
4 months ago
Uploaded by:
Admin
Views:
372

Related Articles
What is HTML <!--...--> Tag HTML Tag Code
What is HTML <!DOCTYPE> Declaration HTML Tag Code
What is HTML Elements and Doctypes HTML Tag Code
What is HTML <a> Tag HTML Tag Code
What is HTML <abbr> Tag HTML Tag Code
What is HTML <address> Tag HTML Tag Code
What is HTML <applet> Tag HTML Tag Code
What is HTML <area> Tag HTML Tag Code
What is HTML <article> Tag HTML Tag Code
What is HTML <aside> Tag HTML Tag Code
What is HTML <audio> Tag HTML Tag Code
What is HTML <b> Tag HTML Tag Code
What is HTML <base> Tag HTML Tag Code
What is HTML <basefont> Tag HTML Tag Code
What is HTML <bdi> Tag HTML Tag Code
What is HTML <bdo> Tag HTML Tag Code
What is HTML <big> Tag HTML Tag Code
What is HTML <blockquote> Tag HTML Tag Code
What is HTML <body> Tag HTML Tag Code
What is HTML <br> Tag HTML Tag Code
What is HTML <button> Tag HTML Tag Code
What is HTML <canvas> Tag HTML Tag Code
What is HTML <caption> Tag HTML Tag Code
What is HTML <center> Tag HTML Tag Code
What is HTML <cite> Tag HTML Tag Code
What is HTML <code> Tag HTML Tag Code
What is HTML <col> Tag HTML Tag Code
How to create HTML <colgroup> Tag HTML Tag Code
What is HTML <data> Tag HTML Tag Code
What is HTML <datalist> Tag HTML Tag Code
What is HTML <dd> Tag HTML Tag Code
What is HTML <del> Tag HTML Tag Code
What is HTML <details> Tag HTML Tag Code
What is HTML <dfn> Tag HTML Tag Code
What is HTML <dialog> Tag HTML Tag Code
What is HTML <dir> Tag HTML Tag Code
What is HTML <div> Tag HTML Tag Code
What is HTML <dl> Tag HTML Tag Code
What is HTML <dt> Tag HTML Tag Code
What is HTML <em> Tag HTML Tag Code
What is HTML <embed> Tag HTML Tag Code
What is HTML <fieldset> Tag HTML Tag Code
What is HTML <figcaption> Tag HTML Tag Code
What is HTML <figure> Tag HTML Tag Code
What is HTML <font> Tag HTML Tag Code
What is HTML <footer> Tag HTML Tag Code
What is HTML <form> Tag HTML Tag Code
What is HTML <frame> Tag HTML Tag Code
What is HTML <frameset> Tag HTML Tag Code
What is HTML <h1> to <h6> Tags HTML Tag Code
What is HTML <head> Tag HTML Tag Code
What is HTML <header> Tag HTML Tag Code
What is HTML <hgroup> Tag HTML Tag Code
What is HTML <hr> Tag HTML Tag Code
What is HTML <html> Tag HTML Tag Code
What is HTML <i> Tag HTML Tag Code
What is HTML <iframe> Tag HTML Tag Code
What is HTML <img> Tag HTML Tag Code
What is HTML <input> Tag HTML Tag Code
What is HTML <ins> Tag HTML Tag Code
What is HTML <kbd> Tag HTML Tag Code
What is HTML <label> Tag HTML Tag Code
What is HTML <legend> Tag HTML Tag Code
What is HTML <li> Tag HTML Tag Code
What is HTML <link> Tag HTML Tag Code

Single Articles
How to create HTML <figure> Tag
Which browser will support for HTML <figure> Tag
How to Use CSS to style <figure> and <figcaption>
How to set Default CSS Settings

Share on: