Web Development and Design Foundations with XHTML, 5th Edition

(Steven Felgate) #1
Appendix D Comparison of HTML 4, XHTML, and HTML 5^631

Figure D.1
This wireframe
indicates HTML 5
elements


So, now that you have a wireframe, how will current browsers “understand” the HTML
5 code? Remy Sharp has provided a “boilerplate” (see http://html5doctor.com/html-5-
boilerplates) that Web developers can use to manipulate current browsers to support
some of the basic structural elements such as <header>and <section>. Sharp’s tech-
nique uses CSS to configure these elements as block-level elements. For example:
header, section { display: block; }
However, a little bit more nudging is needed for Internet Explorer; you’ll also need to
include a <script>tag to invoke JavaScript code created by Sharp that Internet
Explorer is directed to process via conditional comments (see Chapter 11). See
Figure D.2 for a screen capture of a basic Web page created using an adaptation of
Sharp’s HTML 5 boilerplate.

Figure D.2
This Web page was
coded with HTML 5


The code is shown below:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="UTF-8">
<title>Experimenting with HTML 5</title>
<!——[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
Free download pdf