HTML page with ALL HTML ELEMENTS (html template, html page template, full html, all html elements)

<!--You can use for any purpose, think it is MIT license or no license-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>HTML for styling</title>

<!-- CSS -->
<link rel="stylesheet" href="http://mrmrs.io:80/html/css/i.css">

</head>

<body>

    <h1>Heading level 1</h1>
    <h2>Heading level 2</h2>
    <h3>Heading level 3</h3>
    <h4>Heading level 4</h4>
    <h5>Heading level 5</h5>
    <h6>Heading level 6</h6>

    <h2>Paragraph</h2>
    <p>
        Lorem ipsum <strong>consectetur</strong> adipiscing elit.
    </p>

    <p>
        Normal, <abbr title="Abbreviations">abbr</abbr>,
        <del>del</del>
        ,
        <dfn>dfn</dfn>
        , <em>em</em>,
        <ins>ins</ins>
        ,
        <mark>mark</mark>
        , <s>strike through</s>, <small>small</small>, <strong>strong</strong>,
        <sub>sub</sub>, <sup>sup</sup>, <u>u</u>
    </p>

    <!-- CHECK UNICODE SUPPORT\multi-languages support-->
    <h3>Thai language</h3>
    <p>กาญจน์ ซังเตผลักดันม้ง แฟนซีอิ่มแปร้ นายพรานยูโร เมคอัพ
        แรงใจซัพพลายเจ็ต ลอจิสติกส์ ค
    <p>แอปเปิ้ลแมกกาซีนยาวี ไอซียูปัจเจกชนเป่ายิ้งฉุบไฮไลท์เตี๊ยม
        ซีรีส์กัมมันตะแม่ค้าโอเลี้ยงวิน เลิฟต่อยอดผลไม้ พงษ์ดิกชันนารีซูม
    <p>
        By <a href="http://lorem.in.th/" onclick="return false;">lorem.in.th</a>
    </p>

    <h2>Links</h2>
    <p>
        These are links: <a href="?2017-06-2703%3A30%3A17"
            onclick="return false;">never visited link (just don't click or
            it will becomes visited)</a>, <a href=".">visited link</a>. Mouse hover
        to see effects.
    </p>

    <h2>Lists</h2>
    <h3>Unordered list</h3>
    <ul>
        <li>List item with a much longer description or more content.</li>
        <li>List item</li>
        <li>List item
            <ul>
                <li>Nested list item</li>
                <li>Nested list item</li>
                <li>Nested list item</li>
            </ul>
        </li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
    </ul>
    <h3>Ordered list</h3>
    <ol>
        <li>List item with a much longer description or more content.</li>
        <li>List item</li>
        <li>List item
            <ol>
                <li>Nested List Item</li>
                <li>Nested List Item</li>
                <li>Nested List Item</li>
            </ol>
        </li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
    </ol>
    <h3>Mixed</h3>
    <ul>
        <li>List item with a much longer description or more content.</li>
        <li>List item</li>
        <li>List item
            <ol>
                <li>Nested list item</li>
                <li>Nested list item</li>
                <li>Nested list item</li>
            </ol>
        </li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
    </ul>
    <ol>
        <li>List item with a much longer description or more content.</li>
        <li>List item</li>
        <li>List item
            <ul>
                <li>Nested List Item</li>
                <li>Nested List Item</li>
                <li>Nested List Item
                    <ol>
                        <li>Nested List Item</li>
                        <li>Nested List Item</li>
                        <li>Nested List Item
                            <ol>
                                <li>Nested List Item</li>
                                <li>Nested List Item</li>
                                <li>Nested List Item
                                    <ul>
                                        <li>Nested list item</li>
                                        <li>Nested list item</li>
                                        <li>Nested list item</li>
                                    </ul>
                                </li>
                            </ol>
                        </li>
                    </ol>
                </li>
                <li>Nested List Item</li>
                <li>Nested List Item</li>
            </ul>
        </li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
    </ol>

    <h3>Definition list</h3>
    <dl>
        <dt>Definition list</dt>
        <dd>Consectetur adipisicing elit, sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo consequat.</dd>
        <dt>Lorem ipsum dolor sit amet</dt>
        <dd>Consectetur adipisicing elit, sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo consequat.</dd>
    </dl>

    <h3>Details &amp; Summary</h3>
    <details>
        <summary>Question 1</summary>
        <p>
            <strong>Pellentesque </strong> senectus et netus et malesuada <em>Aenean
                ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit
            amet est
            <code>commodo vitae</code>
            , ornare sit tempus lacus enim ac dui. <a href="#"
                onclick="return false;">Donec enim</a> in turpis pulvinar facilisis.
            Ut felis.
        </p>

        <details>
            <summary>Related documents</summary>
            <ul>
                <li><a href="#" onclick="return false;">Lorem ipsum dolor
                        sit amet, consectetuer adipiscing elit.</a></li>
                <li><a href="#" onclick="return false;">Aliquam tincidunt
                        mauris eu risus.</a></li>
                <li><a href="#" onclick="return false;">Lorem ipsum dolor
                        sit amet, consectetuer adipiscing elit.</a></li>
                <li><a href="#" onclick="return false;">Aliquam tincidunt
                        mauris eu risus.</a></li>
            </ul>
        </details>
    </details>

    <details>
        <summary>Question 2</summary>
        <p>Duis consequat metus et eros rutrum, interdum facilisis urna
            interdum. Etiam facilisis diam in libero varius ultricies id id est.
            Sed lacinia pellentesque sem vel sagittis.</p>
    </details>

    <h2>Blockquote</h2>
    <blockquote>
        Those people who think they know everything are a great annoyance to
        those of us who do.<cite>Isaac Asimov</cite>
    </blockquote>

    <h2>Code</h2>
    <p>
        This is inline code
        <code>&lt;div&gt;div element&lt;/div&gt;</code>
        . This is sample output
        <samp>sample</samp>
        And below is block code.
    </p>

    <pre>
&lt;div&gt;
    div element
    &lt;p&gt;paragraph&lt;/p&gt;
&lt;/div&gt;</pre>

    <p>
        The input keyboard
        <kbd>Ctrl</kbd>
        +
        <kbd>S</kbd>
        . This is variable:
        <var>y</var>
        =
        <var>m</var>
        <var>x</var>
        +
        <var>b</var>
    </p>

    <h2>Table</h2>
    <table>
        <thead>
            <tr>
                <th>Table heading</th>
                <th>Table heading</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Table footer</th>
                <th>Table footer</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Table data</td>
                <td>Table data</td>
            </tr>
            <tr>
                <td>Table data</td>
                <td>Table data</td>
            </tr>
            <tr>
                <td>Table data</td>
                <td>Table data</td>
            </tr>
            <tr>
                <td>Table data</td>
                <td>Table data</td>
            </tr>
        </tbody>
    </table>

    <h2>Form elements</h2>
    <form>
        <fieldset>
            <legend>Input types</legend>
            <p>
                <label for="input-type-color">Input Color</label><br> <input
                    id="input-type-color" type="color">
            </p>
            <p>
                <label for="input-type-date">Input Date</label><br> <input
                    id="input-type-date" type="date">
            </p>
            <p>
                <label for="input-type-datetime-local">Input Datetime-local</label><br>
                <input id="input-type-datetime-local" type="datetime-local">
            </p>
            <p>
                <label for="input-type-email">Input Email</label><br> <input
                    id="input-type-email" type="email">
            </p>
            <p>
                <label for="input-type-file">Input File</label><br> <input
                    id="input-type-file" type="file">
            </p>
            <p>
                <label for="input-type-hidden">Input Hidden</label><br> <input
                    id="input-type-hidden" type="hidden">
            </p>
            <p>
                <label for="input-type-month">Input Month</label><br> <input
                    id="input-type-month" type="month">
            </p>
            <p>
                <label for="input-type-number">Input Number</label><br> <input
                    id="input-type-number" type="number">
            </p>
            <p>
                <label for="input-type-password">Input Password</label><br> <input
                    id="input-type-password" type="password">
            </p>
            <p>
                <label for="input-type-range">Input Range</label><br> <input
                    id="input-type-range" type="range">
            </p>
            <p>
                <label for="input-type-search">Input Search</label><br> <input
                    id="input-type-search" type="search">
            </p>
            <p>
                <label for="input-type-tel">Input Tel</label><br> <input
                    id="input-type-tel" type="tel">
            </p>
            <p>
                <label for="input-type-text">Input Text</label><br> <input
                    id="input-type-text" type="text">
            </p>
            <p>
                <label for="input-type-time">Input Time</label><br> <input
                    id="input-type-time" type="time">
            </p>
            <p>
                <label for="input-type-url">Input Url</label><br> <input
                    id="input-type-url" type="url">
            </p>
            <p>
                <label for="input-type-week">Input Week</label><br> <input
                    id="input-type-week" type="week">
            </p>

        </fieldset>
        <p>
            <label fpr="input-type-text-readonly">Input Text read only</label><br>
            <input id="input-type-text-readonly" type="text" readonly="">
        </p>
        <p>
            <label><input type="radio" name="input-radio" value="1">
                Input radio option 1</label><br> <label><input type="radio"
                name="input-radio" value="2"> Input radio option 2</label>
        </p>
        <p>
            <label><input type="radio" name="input-radio-disabled"
                value="1" disabled=""> Input radio option 1</label><br> <label><input
                type="radio" name="input-radio-disabled" value="2" disabled="">
                Input radio option 2</label>
        </p>
        <p>
            <label><input type="checkbox"> Input checkbox 1</label><br>
            <label><input type="checkbox"> Input checkbox 2</label>
        </p>
        <p>
            <label><input type="checkbox" disabled=""> Input
                checkbox 1</label><br> <label><input type="checkbox"
                disabled=""> Input checkbox 2</label>
        </p>
        <p>
            <label for="input-textarea">Textarea</label><br>
            <textarea id="input-textarea"></textarea>
        </p>
        <p>
            <label for="input-textarea-disabled">Textarea disabled</label><br>
            <textarea id="input-textarea-disabled" disabled=""></textarea>
        </p>
        <p>
            <label for="input-textarea-readonly">Textarea readonly</label><br>
            <textarea id="input-textarea-readonly" readonly=""></textarea>
        </p>
        <p>
            <label for="input-select">Select box</label><br> <select
                id="input-select">
                <optgroup label="Group1">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </optgroup>
                <optgroup label="Group2">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </optgroup>
                <option>out of optgroup</option>
            </select>
        </p>
        <p>
            <label for="input-select-multiple">Select multiple</label><br> <select
                id="input-select-multiple" multiple="">
                <option>Use Ctrl+click to select multiple options</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
            </select>
        </p>
        <p>
            <label for="input-select-disabled">Select disabled</label><br> <select
                id="input-select-disabled" disabled="">
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
        </p>
        <p>
            <button type="button">Normal button</button>
            <button type="submit" onclick="return false;">Submit button</button>
            <button type="reset" onclick="return false;">Reset button</button>
            <button type="button" disabled="">Disabled button</button>
        </p>
        <p>
            <input type="button" value="Input normal button"> <input
                type="submit" value="Input submit button" onclick="return false;">
            <input type="reset" value="Input reset button"
                onclick="return false;"> <input type="button"
                value="Input disabled button" disabled="">
        </p>
        <p>
            <a class="button" href="#" onclick="return false;">Anchor button</a>
            <a class="button disabled" href="#" onclick="return false;">Anchor
                disabled button</a>
        </p>
    </form>


    <!--JAVASCRIPT HERE -->

    <!-- HTML5 -->
    <script src="mycode.js"></script>

    <!-- HTML4 -->
    <script type="text/javascript" src="javascript.js"></script>

    </body>

</html>