HTML - tags - figure tag

revision:

Content

"figure" tag and "figcaption" tag : marks self-contained content syntax some examples

"figure" tag and "figcaption" tag : marks self-contained content

top

The <figure> HTML element represents self-contained content, potentially with an optional caption, which is specified using the <figcaption> element. The figure, its caption, and its contents are referenced as a single unit and specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
The <figcaption> element is used to add a caption for the <figure> element.

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.

The difference with <img> is that <figure> with all its content is treated as a unit.

Attributes: this element only includes the global attributes. Commonly used attributes are: "id", "class", "style", "data-*", "hidden", and "title"

syntax

top 
        <figure> 
            <figcaption>. . . . . . . .
            </figcaption> 
                . . 
        </figure>

some examples

top
on the beach
Spending a good time on the beach
code:
                <figure>
                <img src="../../pics/8.jpg"  alt="on the beach">
                <figcaption>Spending a good time on the beach</figcaption>
            </figure>
Get browser div using navigator.
                function NavigatorExample() {
                    var txt;
                    txt = "Browser CodeName: " + navigator.appCodeName + "; ";
                    txt+= "Browser Name: " + navigator.appName + "; ";
                    txt+= "Browser Version: " + navigator.appVersion  + "; ";
                    txt+= "Cookies Enabled: " + navigator.cookieEnabled  + "; ";
                    txt+= "Platform: " + navigator.platform  + "; ";
                    txt+= "User-agent header: " + navigator.userAgent  + "; ";
                    console.log("NavigatorExample", txt);
                }
            
code:
        <figure>
            <figcaption>Get browser div using <code>navigator</code>.</figcaption>
            <pre>
                function NavigatorExample() {
                    var txt;
                    txt = "Browser CodeName: " + navigator.appCodeName + "; ";
                    txt+= "Browser Name: " + navigator.appName + "; ";
                    txt+= "Browser Version: " + navigator.appVersion  + "; ";
                    txt+= "Cookies Enabled: " + navigator.cookieEnabled  + "; ";
                    txt+= "Platform: " + navigator.platform  + "; ";
                    txt+= "User-agent header: " + navigator.userAgent  + "; ";
                    console.log("NavigatorExample", txt);
                }
            </pre>
        </figure>

Edsger Dijkstra:
If debugging is the process of removing software bugs, then programming must be the process of putting them in.
code:
        <figure>
            <figcaption><cite>Edsger Dijkstra:</cite></figcaption>
            <blockquote>If debugging is the process of removing software bugs,
            then programming must be the process of putting them in.</blockquote>
        </figure>
Fig.1 - Sunset on the river
Fig.2 - A good time on the beach
code:
            <figure style="display: flex; padding:1vw;border:0.3vw solid lightblue;">
                <img src="../../pics/1.jpg" width="200" height="140"/>
                <figcaption>Fig.1 - Sunset on the river</figcaption>
                <img src="../../pics/2.jpg" width="200" height="140"/>
                <figcaption>Fig.2 - A good time on the beach</figcaption>
            </figure>
        
            
                p {
                    color: #333;
                    font-family: Helvetica, sans-serif;
                    font-size: 1rem;
                }
            
            
code:
        <figure>
            <pre>
                <code>
                p {
                    color: #333;
                    font-family: Helvetica, sans-serif;
                    font-size: 1rem;
                }
                </code>
            </pre>
        </figure>