HTML and CSS Reference
In-Depth Information
This HTML produces the same output as shown earlier in Figure 1-13. The difference is
that now each
<section>
element creates a new page section rather than rely on the header
elements to create the sections. Screen readers can parse the semantic elements to create the
document outline and eventually can provide a much richer user experience because of how
HTML5 allows webpage designers to lay out the pages.
Thought experiment
Converting a website to HTML5
In this thought experiment, apply what you've learned about this objective. You can
find answers to these questions in the “Answers” section at the end of this chapter.
You have just been hired to convert an existing website to the new HTML5 seman-
tic markup. Analyze the following HTML and determine what elements should be
updated to fully leverage the HTML5 semantic markup:
<html>
<head>
<title>Experimentations</title>
</head>
<body>
<table>
<tr>
<td colspan="3">
<div id="header">
<h1>A Thoughtful Experiment</h1>
</div>
</td>
</tr>
<tr>
<td>
<a href="">Home</a>
<a href="">Page 1</a>
<a href="">Page 2</a>
<a href="">Page 3</a>
</td>
<td>
<div id="content">
<div id="anArticle">
<h1>An Article regarding thought is
presented here.</h1>
<h2>Thought as a provoking element.</h2>
.....................
<div id="moreInfo">Here are some
reference material.</div>
</div>
</div>
</td>
Search WWH ::
Custom Search