<footer> for footers

The footer element is the complement to header and represents the footer for a section. A footer usually contains summary information about a section.

The footer element cannot be a descendent of the address or header element and cannot be a descendant of another footer element.

 
<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
body > header *, footer > * { background:transparent; color:red;} 
body > header, body > footer { 
    border: medium solid black; padding-left: 5px; margin: 30px 0 10px 0; 
} 
</style> 
</head> 
<body> 
    <header> 
        <hgroup> 
            <h1>H1</h1> 
            <h2>H2</h2> 
        </hgroup> 
    </header> 
    <section> 
        <header> 
            <hgroup> 
                <h1>H1</h1> 
                <h2>H2</h2> 
            </hgroup> 
        </header> 
        <p>This is a text.</p>
        <section> 
            <p>This is a text.</p>
            <section> 
                <h1>H1</h1> 
                <p>This is a text.</p>
            </section> 
        </section> 
    </section> 
    <section> 
        <header> 
            <h1>H1</h1> 
        </header> 
        <section> 
            <p>This is a text.</p>
            <h1>H1</h1> 
            <p>This is a text.</p>
            <section> 
                <h1>H1</h1> 
                <p>This is a text.</p>
            </section> 
        </section> 
    </section> 
    <footer id="mainFooter"> 
        <p>This is a text.</p>
    </footer> 
</body> 
</html>
  
Click to view this demo.
Home 
  HTML CSS Book 
    HTML  

Related: