<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>This is a title</title>
    <style>
    /* comment */
    #xyz { color: red; }
    h1 { font: "Comic Sans"; }
    </style>
  </head>
  <body class="ui main">
    <p *ngFor="let name of names">Hello, {{ name }}!</p>
  </body>

  <!-- JavaScript code -->
  <script>
    document.body.appendChild(document.createTextNode('Hello World!')); // comment
  </script>

  <!-- TypeScript code -->
  <script type="text/typescript">
    class Student {
        fullName: string;
        constructor(public firstName: string, public middleInitial: string, public lastName: string) {
            this.fullName = firstName + " " + middleInitial + " " + lastName;
        }
    }
    let a: null = null;
    let b: number = 12___3;
  </script>

  <!-- JSX code -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script type="text/babel">
    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('root')
    );
    function Story(props) {
      const SpecificStory = components[props.storyType];
      return <SpecificStory story={ props.story } attr2="&ref;" attr3="Hello\n" />;
    }
  </script>

  <!-- Mustache/Handlebars -->
  <script type="x-tmpl-mustache">
    {{#movie}}
        <div>
            <h1>{{title}}</h1>
            <img src="{{poster}}" alt="{{title}}"/>
        </div>
        <div>
            Rating - {{ratings.critics_rating}}
        </div>
    {{/movie}}
    {{^movie}}
        <div>
            Movie Does Not Exist :(
        </div>
    {{/movie}}
    {{! comment }}
  </script>

  <!-- HTML template -->
  <script type="text/html">
    <li><a href="link">Hello</a></li>
  </script>

  <!-- Close the block correctly after "?" in the JavaScript highlighter -->
  <script>
    ?
  </script>

</html>
<!--

HTML Syntax Highlight Sample File (Standard)

- Follow HTML5 standard.
- Contain some valid, but not recommended syntax.
- Can be rendered by modern web browsers.

@author Guo Yunhe guoyunhebrave@gmail.com
@date   2016-09-17

-->

<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8">
<title>HTML Syntax Highlight Sample File (Standard)</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>

<body>

<!-- HTML5 defined elements -->

<div>
    This is a div. <span>This is a span</span>
    <div>
        This is a div.
    </div>
</div>

<p>
    This is a paragraph. <em></em>
</p>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

<a href="http://www.w3schools.com">This is a link</a>

<br>

<img src="http://placehold.it/200x150" alt="This is an image" width="200" height="150">

<hr>

<ul>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>

<ol>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ol>

<table>
    <tr>
        <th>Table head</th>
        <th>Table head</th>
        <th>Table head</th>
    </tr>
    <tr>
        <td>Table head</td>
        <td>Table head</td>
        <td>Table head</td>
    </tr>
</table>

<form>
    <input type="email" name="author"/>
    <input type="text" name="message"/>
    <button type="button">Send</button>
</form>

<main>
    <header>This is a header.</header>

    <nav>This is a nav.</nav>

    <article>
        <h2>This is an article.</h2>
        <p>This is an article.</p>
    </article>

    <aside>
        <h2>This is an aside.</h2>
    </aside>

    <footer></footer>

</main>

<!-- Custom elements -->

<booklist>
    <book>
        <booktitle>Just For Fun: The Story of an Accidental Revolutionary</booktitle>
        <author>Linus Torvalds</author>
        <description
            class="featured" title="Click to read full text...">
            A humorous autobiography of Linus Torvalds, the creator of the Linux
            kernel, co-written with David Diamond. The book primarily theorizes
            the Law of Linus that all evolution contributed by humanity starts
            for survival, sustains socially and entertains at last. As well as
            this the book explains Torvalds' view of himself, the free software
            movement and the development of Linux.</description>
    </book>
</booklist>

<large-space/>

<!-- Ends for single tag elements -->
<br>
<br/>
<br />
<br></br>

<!-- Uppercase elements -->

<DIV>
    THIS IS A DIV.
    <P>THIS IS A PARAGRAPH.</P>
    <H2>THIS IS A HEADING.</H2>
</DIV>

<!-- Arrtibutes -->

<a href="#" style="background-color:rgba(0,0,0,0.3)" title="Click me">Magic button</a>

<img src="http://placehold.it/200x150" alt="This is an image" width="200"
     height="150" title="This is an image">

<!-- Attribute without value -->

<select>
    <option selected>GNU/Linux</option>
    <option>BSD</option>
    <option>Windows</option>
    <option>macOS</option>
</select>

<!-- Attribute without quotes -->

<div id=name class=a-sweet-block data-counter=175>This is a div.</div>

</body>

</html>
