Figuring out Figures

Images form a major part of what makes the internet such a delightful and terrifying place in equal measure. On sites like this one and similar small web auspices, you’ll likely find all kinds of images, but much will just be cruft. I use the term here in a non-derogatory way, though. I’m referring to the pretty icons and such that blend into the user interface of the website. These are important, but that’s not what we’re talking about today.

A second category of image that goes on your pages, of course, will be those that you want to show your visitors for illustrative purposes. This could be anything from a photo of an interesting rock you’ve found to a graph showing the rise of income inequality in America. Most people just insert these into their pages with an <img src=“path”> tag - and you quite well should. There is, however, an addition to the equation that can be rather helpful, but has been forgotten by many - <figure> tags.

Back in the Before Times, <figure> and related tags were intended to separate images (and some other stuff) from the rest of the content (both stylistically and in terms of functionality). These include the <figcaption> tag, which (perhaps most importantly) provides extra information (a title, for example) about the contents of the <figure>.

View a live preview of two versions of this on Codepen... content warning: sad architecture.

HTML

In this example, and on my sites in general, I use <figure> to surround images, but playing with it a bit will allow for more. Here, I’ve created a <figure> configuration (pun intended) displaying an image. The image itself is linked, both as itself and within a descriptive caption, to a source for it, so that the user knows where to find more about it quickly, as does the browser itself. You can and obviously should include both the image and proper, useful information in the caption when rendering your own version of this - otherwise, what’s the point of using <figure> tags?

<!-- start with the figure tag -->
    <figure>
    <!-- following the figure tag, by inserting the image, and linking it to itself (or, if you choose, the original source) -->
    <a href="https://en.wikipedia.org/wiki/Brutalist_architecture#/media/File:Talnakh.jpg">
    <img src="https://fabled.day/image/examples/brutalist.jpg" alt="Talnakh, a Russian suburb of Norilsk, is an example of Brutalist architecture." />
    </a>
    <!-- next, add the caption, which should simply say a little bit about the image and where it originates, why you're including it, etc... -->
    <figcaption>
    Talnakh, a Russian suburb of Norilsk, is an <a href="https://en.wikipedia.org/wiki/Brutalist_architecture#/media/File:Talnakh.jpg">example of Brutalist architecture.</a>
    </figcaption>
    </figure>
    <!-- close both tags and insert the text you'd like to follow the figure -->

CSS

This will work without CSS to a degree as most things on the web will; however, here are some basic aesthetic (sort of) stylings for figures. The below brutalist-themed example hopefully explains well enough how you might go about customizing the appearance of these things. I believe customization of some sort is ideal - at least add borders to distinguish things.


      /* below, the figure element styles a container of sorts, including both the image and the caption. in this example, it includes a background color, margins, border, etc, as well as a drop shadow for the aesthetics  */
        figure {
            border: 3px solid #333;
            margin: 2em auto;
            max-width: 40%; /* this is important - it controls the size of the figure on your page. Feel free to set it to 100%, in which case it will be the same size as your image, but it may look ridiculous. between 40% and 80% works well depending on the size of the container that the figure inhabits */
            padding: 1em;
            background: #ddd;
            text-align: left;
            box-shadow: 5px 5px 0 #666;
        }
        /* below, of course, styles the image within the figure container */
        figure img {
            width: 100%; /* you really ought to leave this at 100%; it simply ensures that the image will fill the entirety of the figure's usable space outside of the caption */
            margin: 0;
            border: 3px solid #333;
            padding: 0;
            box-sizing: border-box;
        }
        /* we here begin styling the caption and links within it */
        figcaption {
            background-color: #c0c0c0;
            color: #111;
            text-align: center;
            font-family: "Courier New", monospace;
            font-size: 1em;
            padding: 0.5em;
            margin-top: 0.5em;
            border-top: 3px solid #333;
            border-bottom: 3px solid #333;
        }
        
        figcaption a {
            color: #333;
            text-decoration: none;
            border-bottom: 3px solid #333;
            transition: 0.3s;
        }
        
        figcaption a:hover {
            background-color: #acacac;
        }

The example above will position the <figure> element and its contents central within the page on their own line. You might also want to (in certain contexts) float the figure or caption to the right or left within the flow of the text. In order to do that (with the exact same stylings as above, give the below styles a go…


                /* below, the figure element styles a container of sorts, including both the image and the caption. in this example, it includes a background color, margins, border, etc, as well as a drop shadow for the aesthetics  */
                figure {
                    border: 3px solid #333;
                    /* the below two lines make your figure inline with the text */
                    display: inline-block;
                    float: left;
                    /* the below two lines control margins associated with the figure; this setup assumes the figure is positioned at the top of the page or section and will need to be changed if that is not the case. for example, if your figure is in the midst of a block of text, try a 1em setting on all margins except the direction it's floated to, which can have 0em. play with it a bit... */
                    margin: 1em;
                    margin-top: 0px;
                    max-width: 30%; /* this is important - it controls the size of the figure on your page. Feel free to set it to 100%, in which case it will be the same size as your image, but it may look ridiculous. between 40% and 80% works well depending on the size of the container that the figure inhabits */
                    padding: 1em;
                    background: #ddd;
                    text-align: left;
                    box-shadow: 5px 5px 0 #666;
                }
                /* below, of course, styles the image within the figure container */
                figure img {
                    width: 100%; /* you really ought to leave this at 100%; it simply ensures that the image will fill the entirety of the figure's usable space outside of the caption */
                    margin: 0;
                    border: 3px solid #333;
                    padding: 0;
                    box-sizing: border-box;
                }
                /* we here begin styling the caption and links within it */
                figcaption {
                    background-color: #c0c0c0;
                    color: #111;
                    text-align: center;
                    font-family: "Courier New", monospace;
                    font-size: 1em;
                    padding: 0.5em;
                    margin-top: 0.5em;
                    border-top: 3px solid #333;
                    border-bottom: 3px solid #333;
                }
                
                figcaption a {
                    color: #333;
                    text-decoration: none;
                    border-bottom: 3px solid #333;
                    transition: 0.3s;
                }
                
                figcaption a:hover {
                    background-color: #acacac;
                }