HTML and CSS Reference
In-Depth Information
plate. You will need to update the filenames and titles of any pages you create using this template. Don't worry, I'll
remind you.
Adding a <div> Element to Each Template
The
<div>
element (short for
document divisions
) has historically been the most commonly used element for de-
fining the sections of an HTML document, but with HTML5 it no longer plays such a big role. Best practice is to use
the new HTML5 semantic elements (you will look at these soon) such as
<header>
,
<footer>
,
<nav>
,
<sec-
tion>
, and
<article>
wherever possible, but there will be times when you just need an element to group a
number of other elements together. This is where the
<div>
element comes in. The element itself is generic; it has
no special semantic meaning.
You are going to use the
<div>
element to create a container for all of the page content. This will enable you to cen-
ter all of this content using Cascading Style Sheets (CSS) later in this chapter.
The code for this exercise can be found in folder 2.
1.
Open the
index.html
and
about.html
template files in your favorite text editor.
2.
Add the following code to the
<body>
elements in each of the files.
<body>
<!-- Page Container -->
<div id="container">
</div>
</body>
3.
Save the
index.html
and
about.html
files.
I highlight the new element in bold text so that it is easier for you to identify within the extract of code. Don't worry
about trying to make this text bold in your text editor.
You have then created a
<div>
element and given this element the ID
container
. This identifier will enable you
to target this specific element using CSS. As you go through the rest of this section, place all the new elements with-
in this container.
Now open your
index.html
file in your browser to see the sections you've just added. What, you can't see them?!
This is because most HTML layout elements are “invisible” by default. You won't be able to see the sections in a
browser until you add some content in them (or style them using CSS, as you learn later in this chapter).
