Figure Tags

Updated: February 17, 2022
No Credit Card Required


I was able to convert my about me mockup into HTML and CSS. But I know a couple of ways I can make my code even better. I put my first section inside of div tags so that I could style it differently than my second section. But there's actually a better tag for the content in my first section, called a figure.

A figure illustrates something in the main content. Since I have a paragraph about me, I put an image next to it to show my users what I look like. Another important part of a figure is that if you move it around, it doesn't affect the flow of your main content. I could have put my figure to the right of my paragraph, or even above my paragraph, and my paragraph would still read the same. I put it on the left because I think it looks nice there.

Let me show you a simple example of something that's not a figure. I'm sure you've heard of emojis. emojis are little images that we use to represent ideas or emotions. Check this out. I am so smiley face. See, that means I'm happy. But what happens if I move the smiley to the beginning of the sentence, all of a sudden, it doesn't make that much sense anymore. Moving the emoji breaks the flow of the content. A figure on the other hand can be moved around without breaking the flow of the content.

Now we'll go back to my code. I'll start by deleting the div tags. Then I'll change the section to a figure. You can also describe what's in a figure using a fig caption. I'll change this paragraph to a fig caption. I'll have to change the div section selector to a figure type selector. Now my code is more D.R.Y. It's easier to read and I don't have to use a div tag.

HTML/CSS AdvancedCoding Exercises, Quizzes and Projects are available at with your free membership