<!DOCTYPE html>
<html>
<head>
<script>
    function initCodeBlock(id); {
        var el = document.getElementById(id);
    }
</script>
<script> "hello < world" </script>
<style>
/* comment */
.syntax { color: #60a0b0; font-style: italic; }
</style>
<link rel="stylesheet" href="/assets/css/style.css?v=1">
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
</head>
<body>
  <h1>Hello world!</h1>

  <h2 class="outer">
    <span class="inner">Goodbye world!</span>
  </h2>

  <pre id = "code-block" class="syntax">
    <span class="cm"># -*- coding: utf-8 -*-</span>
    <span class="st st-db">&quot;&quot;&quot;</span><span class="st">
      hello.world.goodbye.world
    </span>
  </pre>
</body>
</html>

<!-- free-floating tags -->
<strong>Hello free-floating world!</strong>

<!-- different attribute styles -->
<span id=unquoted>Hello unquoted attribute world!</span>
<span id='single'>Hello single-quoted attribute world!</span>
<span id="double">Hello double-quoted attribute world!</span>
<span id = spaced>Hello spaced attribute world!</span>

<!-- broken tags -->
<\div>Hello broken world!</div>
<div>Hello broken world!<div\>

<!-- nested tags -->
<table><tr><td>Hello nested world!</td></tr></table>

<!-- no tags -->
Hello tagless world!

<!-- custom Angular 2-style tags -->
<custom-element *ng-structural-directive></custom-element>
<custom-element #ref></custom-element>
<custom-element [target]="expression"></custom-element>
<custom-element (target)="expression"></custom-element>

<!-- Unicode example -->
<œuvre>
	<书名 语言="français">Les Misérables</书名>
</œuvre>
