HTML and CSS Reference
In-Depth Information
Update your Starbuzz HTML
Let's go ahead and add these new elements to your Starbuzz HTML, starting with the
<header>
,
<footer>
, and
<aside>
elements. We'll come back and look at the
<section>
element in a bit, but
for now you can just leave the drinks and main content
<div>
s as they are. Go ahead and open up the
Starbuzz “index.html” file and make the following changes:
Add the header element
1
Start by replacing the
<div id="header">
with a
<header>
element. Like this:
<div id="header">
<header>
<img id="headerLogo"
src="images/headerLogo.gif" alt="Starbuzz Coffee logo image">
<img id="headerSlogan"
src="images/headerSlogan.gif" alt="Providing all the...">
</header>
</div>
Add the footer element
2
Do the same for the
<div id="footer">
, only replace it with a
<footer>
element:
<div id="footer">
<footer>
© 2012, Starbuzz Coffee
<br>
All trademarks and registered trademarks appearing on
this site are the property of their respective owners.
</footer>
</div>
Change the sidebar to an aside
3
Now let's change the “sidebar”
<div>
to an
<aside>
element:
<div id="sidebar">
<aside>
<p class="beanheading">
<img src="images/bag.gif" alt="Bean Machine bag">
...
</p>
<p>
...
</p>
</aside>
</div>
