HTML and CSS Reference
In-Depth Information
Using the <div> element
The new HTML5 semantic elements don't (with the exception of the <progress> element)
necessarily provide any default or altered behavior. Instead, they provide a stronger semantic
definition to your webpages. This, in turn, gives you a more reliable and maintainable way to
structure your pages and style them consistently. The goal of these elements is to replace the
older method of structuring pages—prior to HTML5—by using <div> elements and naming
them according to their function. However, note that the <div> element is still part of HTML5
and still plays an important role. Use the new semantic elements as appropriate, but remember
that the <div> element is still quite useful for styling content.
This section explored the new semantic elements in HTML5. In the next section, you learn
how to create and work with layout containers.
Creating a layout container in HTML
You can lay out a webpage in various ways. An important aim here is to urge you to give
serious thought to layout so that your page presentation is user friendly. If users can't find
what they are looking for because the entire page is styled as a single <p> element inside the
<body> element, they aren't likely to keep coming back. In this section, you look at a couple
of layout options available in HTML. Chapter 4, “Use CSS in applications,” explains how to use
cascading style sheets (CSS) to implement your layouts.
The two most common methods of creating a layout in HTML involve using <div> and
<table> elements. In either case, more than likely you will still use CSS to help with positioning
and sizing. Chapter 4 goes into more detail about CSS; this section looks specifically at the
layout, using only HTML.
Still the catchall container elements, the familiar <div> s are often used to divide the page
into various sections to create the layout. For example, you might see this sort of HTML used
to achieve layout:
<div id="PageHeader"></div>
<div id="LeftSide"></div>
<div id="RightSide"></div>
<div id="Footer"></div>
The rendering engine displays each <div> according to its rules. To position the divisions
dynamically would require CSS.
The main issue with using <div> elements to structure the document is their inability to
impart standard semantic meaning to each section. You'll revisit these examples later, when
you explore creating layouts in CSS.
Search WWH ::

Custom Search