HTML and CSS Reference
In-Depth Information
Formatting the Web Page
In HTML 4.01, <div> </div> tags were introduced to separate sections within a Web page.
This works well, and we utilize the <div> tag throughout the topic. HTML5 has introduced
new semantic elements to help Web developers structure the layout of a Web page. These
tags are
semantic
in that the name of the tag reflects the purpose of the tag. For instance,
the new <footer> tag is used to display content at the bottom (or footer) of the Web page.
The <aside> tag is used to add content that is
tangential
or a side issue to the main Web
page content. These new HTML5 tags, including <article>, <aside>, <footer>, <header>,
<nav>, and <section>, are used for layout in the Web page projects in this topic. Although
the <div> tags, together with an id attribute (see Figure 2-8a), achieve the same results in
layout, the future of Web development includes the new HTML5 layout tags. Figure 2-8b
shows the new structural elements provided in HTML5 and how they help structure a
Web page. Note that the <nav> (navigation) tag can also be used across the top of the
page under the header depending on the Web page design.
<div id="header">
<div id="nav">
<div id="section">
<div id="aside">
<div id="article">
<div id="footer">
(a) Structural elements with HTML 4.01 tags
<header>
<nav>
<section>
<aside>
<article>
<footer>
(b) Structural elements with new HTML5 tags
Figure 2-8
The header section is the top area of a Web page and is generally used for company
logos, main heading text, or navigation. The <nav> tag identifies a section of the Web
page that can alternately be used for navigation. The <section> tag is used as a generic
document or application section. A section can be used to incorporate Web page content
together with heading tags (i.e., h1 through h6). Articles are inserted within sections,
adding to the content. An <aside> tag is used to represent content that is slightly related to
the rest of the page, such as comments, biography, or background information. The footer
is generally used for company information. Table 2-3 on the next page describes the
purpose for each of these new tags. The project in this chapter contains a header, a footer,
and one section that contains one article.
