Div or Figure as Logo Wrapper

HTML-CSS
1 
<header>
  <div class="logo-wrapper">
    <img
      id="logo"
      src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg"
      alt="Website Logo"
    />
  </div>
  <h1>Webpage Heading</h1>
  <nav>
    <ul class="nav-items">
      <li><a href="index.html" title="Home">Home</a></li>
      <li><a href="about.html" title="About">About</a></li>
      <li><a href="contact.html" title="Contact">Contact</a></li>
    </ul>
  </nav>
</header>

I have this header formation and inside it, there is an image tag which is used as logo. Div there stands for as a flex wrapper to wrap image tag.

So I want to change that wrapper DIV into a tag so that it gets more semantic but is it good to use a figure element as a wrapper in header tag? It seems when I use figure tag it adds 40px margin too. So it seems it is not suitable for wrapping image as logo.

The eventual code will be this:

<header>
  <figure class="logo-wrapper">
    <img
      id="logo"
      src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg"
      alt="Website Logo"
    />
  </figure>
  <h1>Webpage Heading</h1>
  <nav>
    <ul class="nav-items">
      <li><a href="index.html" title="Home">Home</a></li>
      <li><a href="about.html" title="About">About</a></li>
      <li><a href="contact.html" title="Contact">Contact</a></li>
    </ul>
  </nav>
</header>
2

Different web browsers will add padding and margins to some tags automatically.

the body tag is a great example of this

Personally I like to start with a blank slate, so will use CSS to change them.

You can write CSS in the HTML document aswell.

use the style tag in the head area of your HTML document.
you can then place styles between those tags

this example shows how to take away margins from the body element.

<style>
    body {
       margin: 0px;
    }
</style>

you can also style within each tag.
however doing so may prevent other styles being applied from the head or CSS document.

<h1 style="margin: 0px"></h1>

here’s a link that explains it in full:
HTML Styles CSS (w3schools.com)

3

The figure element is probably overkill here and I wouldn’t use it in this scenario. Not all images need to be in figure. If the image has a caption with it then yes, use a figure. But usually the logo in the header acts as a link and it would be wrapped in an anchor element, so you definitely would not want to use a figure in that case.

If you do end up using it as a link then you’ll need to change the alt text so that it reflects where the link takes you, such as “Home page”.

1 Like
4

Thank you so much. I replaced it with an anchor tag now.

Then I want to ask. Can I turn the anchor into a display:flex? Does this change affect the semantic meaning of the anchor tag because it is already an inline tag?

5

Yes, you can set display: flex on the link. It does not change the meaning of the anchor.

1 Like
6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.