Building the User Interface by Using HTML5: Organization ... - server

54 | Lesson 3
■ Choosing and Configuring HTML5 Tags to Organize Content and Forms
THE BOTTOM LINE
HTML5 introduces several new elements for organizing content and forms. They represent
the new semantic markup that’s an important part of HTML5.
LICENSED PRODUCT NOT FOR RESALE
HTML5 markup introduces many new markup tags for organizing the structure of HTML
documents, which makes documents easier to create and modify. The new tags have more
intuitive names than similar constructs in previous HTML specifications; the tags are named
more appropriately for the part of the page they apply to, such as , ,
and .
HTML5 has also streamlined table creation, moving many of the table attributes that affect
width, cell padding, and vertical and horizontal alignment to the CSS file.
Understanding Semantic HTML
Semantic markup uses tag names that are intuitive, making it easier to build and modify
HTML documents, and for Web browsers and other programs to interpret.
CERTIFICATION READY
What is semantic
markup?
2.4
One of the very handy new features of HTML5 is the use of semantic markup, which gives
better meaning, or definition, to several tags so they make more sense to humans, programs,
and Web browsers. As mentioned in Lesson 2, not all HTML tags have been replaced or
updated for HTML5, but some new tags introduced in HTML5 make the work of creating
Web pages a lot easier.
In HTML 4.01 and prior specifications, a developer creating the structure of an HTML
document uses the tag frequently throughout. The tag often includes a class or
ID attribute, which may also include CSS styles such as background-color, height, and
width. A simple example of a tag is:
This is a header
TAKE NOTE
*
class and id are global attributes, which means they can be used with any HTML
element. You can see the complete list of global HTML attributes at http://dev.w3.org/
html5/markup/global-attributes.html.
The div element alone doesn’t have much meaning without the id or class attribute. Even
the ID can be assigned a value of your choice, such as "header", "header_inner", "slogan",
"content", "style", and many more. An example from an HTML 4.01 document
is shown as follows:
Happy dogs are good dogs
HTML5 uses simpler tags to replace many of the div tags, some of which are shown in
Figure 3-1.