Almost all websites have three things on them;
- A
header
- Some content
- And a
footer
.
Lets add them in to our index.html
.
Straight after your opening <body>
tag let's add a header…
<header>
<hgroup>
<h1>Site name</h1>
<h2>Page title</h2>
</hgroup>
</header>
Save your file and refresh the page in your browser.
You should now have two headings at the top of your page. Go and update the content with your page name.
The <header>
tag creates a header for your page… but now we need to create a footer for your page. Before the closing </body>
tag add this:
<footer>
<p>Made by [your-name] at LiveWires</p>
</footer>
As you can see content on a page can be grouped… The <header>
tag groups everything for your page header, and the <footer>
groups everything in your page footer.
There is another tag to group other items on the page called <section>
.
After your closing </header>
and before your opening <footer>
tag wrap the rest of your page content with a section tag:
…
</header>
<section>
<h1>Heading</h1>
<p>This is a paragraph. Really!</p>
</section>
<footer>
…
Save and refresh your page.
Not a huge amount will have changed… but this is an important set before we begin to add styling to our HTML
.