Home/ Questions/Q 6178807
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T00:31:42+00:00

This may be the simplest question ever, but try as I might I simply

  • 0

This may be the simplest question ever, but try as I might I simply couldn’t figure it out. I’m working on a website right now and I wish to use as few <div> elements as possible to keep the HTML pretty and easy to edit. At the moment I essentially have:

<html doctype etc etc>
<head>
    <title and meta tags>
</head>
<body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="body"></div>
        <div id="sidebar"></div>
        <div id="footer"></div>
    </div>
</body>
</html>

Very simple and elegant, yes? However the client wants their header to consist of a single large image which contains their company name and logo. So my options were pretty clear – either use an <img> tag, or set the background-image property on the header <div>. However then I got to thinking about SEO. For Google’s sake it would be nice if the header <div> contained an <h1> element with her website’s title, but then this element would have to be hidden so that human users only see the background image.

Although if you were to use the display:none; css property then the entire <div> disappears, including the background. Is there a good way to hide the contents of a <div> without hiding the <div> itself?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Have you tried to apply the hide on the H1 itself?

    <div id="header">
    <h1>Company title</h1>
</div>

    Your style would be: #header h1{display:none;visibility:hidden;}

    UPDATE
    Apparently, we’re both just having one of those days. If you want to make the H1 truly SEO/Screen reader friendly, it would be better to do this with your CSS:

    #header h1{
    width:XXXpx;
    hight:XXXpx;
    background:url('image/location.png');
    text-indent:-9999px;
    overflow:hidden;
}

    This way your text is actually there on the page and rendered, it’s just kind of off screen.

    • 0