Example 1.1. Plain xhtml11_1.html, Not HTML5
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
<head>
<title>Your choice TITLE must go here</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
div {border: 1px solid mediumblue;}
#sidebar {float:left; width:20%;}
.post {float:right; width:79%;
margin-bottom: 3px;}
#footer {clear:both;}
</style>
</head>
<body>
<div id="header">
<h1>My interesting life</h1>
</div>
<div id="sidebar">
<h2>Menu</h2>
<ul>
<li><a href="last-week.html">Last week</a></li>
<li><a href="archive.html">Archives</a></li>
</ul>
</div>
<div class="post">
<h2>Yesterday</h2>
<p>
Today I drank coffee for breakfast. 14
hours later, I went to bed.
</p>
</div>
<div class="post">
<h2>Tuesday</h2>
<p>
Ran out of coffee, so had orange juice
for breakfast. It was from concentrate.
</p>
</div>
<div id="footer">
<p><small>
This is copyright by Bruce Sharp.
Contact me to negotiate movie rights.
</small></p>
</div>
</body>
</html>
Example 1.2. For modern browsers html5_2a.html
<!DOCTYPE html>
<html lang=en>
<head>
<title>Your choice TITLE must go here</title>
<meta charset=utf-8>
<style>
header,
nav,
footer,
article {display:block;
border:1px solid mediumblue;}
nav {float:left; width:20%;}
article {float:right; width:79%;
margin-bottom: 3px;}
footer {clear:both;}
</style>
</head>
<body>
<header>
<h1>My interesting life</h1>
</header>
<nav>
<h2>Menu</h2>
<ul>
<li><a href="last-week.html">Last week</a></li>
<li><a href="archive.html">Archives</a></li>
</ul>
</nav>
<article>
<h2>Yesterday</h2>
<p>
Today I drank coffee for breakfast. 14
hours later, I went to bed.
</p>
</article>
<article>
<h2>Tuesday</h2>
<p>
Ran out of coffee, so had orange juice
for breakfast. It was from concentrate.
</p>
</article>
<footer>
<p><small>
This is copyright by Bruce Sharp.
Contact me to negotiate movie rights.
</small></p>
</footer>
</body>
</html>
Example 1.3. Include IE html5_3.html
<!DOCTYPE html>
<html lang=en>
<head>
<title>Your choice TITLE must go here</title>
<meta charset=utf-8>
<style>
header,
nav,
footer,
article {display:block;
border:1px solid mediumblue;}
nav {float:left; width:20%;}
article {float:right; width:79%;
margin-bottom: 3px;}
footer {clear:both;}
</style>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('footer');
</script>
</head>
<body>
<header>
<h1>My interesting life</h1>
</header>
<nav>
<h2>Menu</h2>
<ul>
<li><a href="last-week.html">Last week</a></li>
<li><a href="archive.html">Archives</a></li>
</ul>
</nav>
<article>
<h2>Yesterday</h2>
<p>
Today I drank coffee for breakfast. 14
hours later, I went to bed.
</p>
</article>
<article>
<h2>Tuesday</h2>
<p>
Ran out of coffee, so had orange juice
for breakfast. It was from concentrate.
</p>
</article>
<footer>
<p><small>
This is copyright by Bruce Sharp.
Contact me to negotiate movie rights.
</small></p>
</footer>
</body>
</html>
Example 1.4. Form html5_4.html
<!DOCTYPE html>
<html lang=en>
<head>
<title>Your choice TITLE must go here</title>
<meta charset=utf-8>
<style>
header,
nav,
footer,
article {display:block;}
nav {float:left; width:20%;}
article {float:right; width:79%;
margin-bottom: 3px;}
footer {clear:both;}
</style>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('footer');
</script>
</head>
<body>
<header>
<h1>An interesting form</h1>
</header>
<nav>
<h2>Menu</h2>
<ul>
<li><a href="last-week.html">Last week</a></li>
<li><a href="archive.html">Archives</a></li>
</ul>
</nav>
<article>
<form action="http://eaaa.eu/hitme.php" method="post">
<fieldset>
<legend>Form part 1</legend>
<label for=myname>Name</label>
<input type=text id=myname name=name required />
<br/>
<label for=birthday>Birthday</label>
<input type=date
title="yyyy-mm-dd"
id=birthday name=date required />
<br/>
<label for=mail>Email</label>
<input type=email id=mail name=email required />
</fieldset>
<fieldset>
<legend>Form part 2</legend>
<label for=ranger>Range</label>
<input type=range
min=0 max=255 value=200
id=range name=range required />
<br/>
<label for=tele>Phone</label>
<input type=tel
pattern="[0-9]{4} [0-9]{4}"
title="nnnn nnnn"
id=tele name=phone />
</fieldset>
<input type=submit value=Send />
</form>
</article>
<footer>
<p><small>
This is copyright by Niels.
Contact me to negotiate movie rights.
</small></p>
</footer>
</body>
</html>
Example 1.5. Video html5_5.html
<!DOCTYPE html>
<html lang=en>
<head>
<title>Your choice TITLE must go here</title>
<meta charset=utf-8>
<style>
header,
nav,
footer,
article {display:block;}
nav {float:left; width:20%;}
article {float:right; width:79%;
margin-bottom: 3px;}
footer {clear:both;}
</style>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('footer');
</script>
</head>
<body>
<header>
<h1>An interesting form</h1>
</header>
<nav>
<h2>Menu</h2>
<ul>
<li><a href="last-week.html">Last week</a></li>
<li><a href="archive.html">Archives</a></li>
</ul>
</nav>
<article>
<video controls='controls'>
<source src='catvsseagull.ogv' />
<source src='catvsseagull.mp4' />
<source src='catvsseagull.wmv' />
No support yet for wanted encoding, talk to your supplier
</video>
</article>
<footer>
<p><small>
This is copyright by Niels.
Contact me to negotiate movie rights.
</small></p>
</footer>
</body>
</html>