Adding two headers and footers, one for screen and print

Question

As far as I understand in HTML5, you should only have one header tag and one footer tag in a document (or at least in a section). But what if you want one footer to appear on screen and a different one to appear when printing. As far as the HTML is concerned, you are adding two footers together, even though only one would appear at a time.

Would screen readers, for example, ignore the print version?

Answer 1

One way of doing this is to put two sections in each, one to be displayed on screen (.noprint) and the other to be displayed for print (.print). Display .noprint as you would and set .print to display none except for when being printed using an '@media print' query.

like this:

<header>

    <div class="noprint">
        <p>stuff for screen only goes here</p>
    </div>

    <div class="print">
        <p>stuff for print only goes here</p>
    </div>

</header>

<style>
.print {
    display: none;
}

@media print {
    .print {
        display: inherit;
    }
    .noprint {
        display: none;
    }
}
</style>

Also, to answer your question about screen readers: they usually will not read an element set to display:none and I believe that to be true in this case. Here's a more comprehensive guide on how screen readers deal with display:none:

http://juicystudio.com/article/screen-readers-display-none.php

good luck!