<!-- 루비 태그를 지원하는 경우 -->
    <ruby>
        <span>大韓民國</span>
        <rt>대한민국</rt>
    </ruby>

    <br />

    <!-- 루비 태그를 지원하지 않는 경우 -->
    <ruby>
        <span>大韓民國</span>
        <rp>(</rp>
        <rt>대한민국</rt>
        <rp>)</rp>
    </ruby>

    <ol>
        <li>A</li>
        <li>B</li>
        <li>C</li>
    </ol>

    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
    </ul>

    <dl>
        <dt>definition</dt>
        <dd>(특히 사전에 나오는 단어나 구의) 정의</dd>
        <dd>(어떤 개념의) 의미</dd>
        <dd>선명도</dd>
    </dl>

    <table border="1">
        <tr>
            <th style="background: cyan">Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
        <tr>
            <td>Data 1-1</td>
            <td>Data 1-2</td>
            <td rowspan="2">Data 1-2</td>
        </tr>
        <tr>
            <td>Data 2-1</td>
            <td>Data 2-2</td>
        </tr>
        <tr>
            <td colspan="3">Data 3</td>
        </tr>
    </table>

<!-- width, height 잘 사용하지 않음. Stylesheet를 이용하는 것이 일반적. -->
<img src="none" alt="이미지 없음" />

    <!-- 음원 출처 : https://en.wikipedia.org/wiki/File:My_Last_Serenade.ogg -->

    <!-- 일반적인 사용 -->
    <audio src="https://upload.wikimedia.org/wikipedia/en/7/7c/My_Last_Serenade.ogg" controls="controls"></audio>

    <!-- 특정 음악 포맷을 미지원할 경우 -->
    <!-- IE는 OGG, WAV / Oprea는 WAV 미지원 -->
    <audio controls="controls">
        <source src="sample.mp3" />
        <source src="https://upload.wikimedia.org/wikipedia/en/7/7c/My_Last_Serenade.ogg" />
    </audio>

    <!-- 영상 출처 : https://commons.wikimedia.org/wiki/File:Time_Lapse_of_New_York_City.ogv -->

    <!-- 일반적인 사용 -->
    <video src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Time_Lapse_of_New_York_City.ogv" controls="controls" width="240"></video>
    
    <!-- 특정 영상 포맷을 미지원할 경우 -->
    <video poster="http://placehold.it/200x100" controls="controls" width="240">
        <source src="sample.mp4" type="video/mp4" />
        <source src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Time_Lapse_of_New_York_City.ogv" type="video/ogg" />

        <track kind="subtitles" src="track.srt" srclang="ko" label="Korean" />
    </video>

<form method="get">
    <!-- HTML4 -->
    <input type="text" /><br />
    <input type="password" /><br />
    <input type="hidden" /><br />

    <input type="image" /><br />
    <input type="file" /><br />

    <input type="checkbox" /><br />
    <input type="radio" /><br />

    <input type="button" /><br />
    <input type="reset" /><br />
    <input type="submit" /><br />

    <br />

    <!-- HTML5 -->
    <input type="date" /><br />
    <input type="datetime" /><br />
    <input type="datetime-local" /><br />
    <input type="time" /><br />
    <input type="month" /><br />
    <input type="week" /><br />

    <input type="search" /><br />
    <input type="url" /><br />
    <input type="tel" /><br />
    <input type="email" /><br />

    <input type="color" /><br />
    <input type="number" /><br />
    <input type="range" /><br />

    <br />

    <!-- label : input Tag 설명-->
    <label for="age">나이</label>
    <input id="age" type="text" />
</form>

    <textarea cols="10" rows="3">
hello,
world!
    </textarea>

    <select>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>

    <br />

    <select multiple="multiple">
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>

    <br />

    <select>
        <optgroup label="Alphabet">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </optgroup>
        <optgroup label="Numeric">
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </optgroup>
    </select>

    <!-- block 형식 공간 분할 -->
    <div>동해물과</div>
    <div>백두산이</div>
    <div>마르고</div>
    <div>닳도록</div>

    <!-- inline 형식 공간 분할 -->
    <span>하느님이</span>
    <span>보우하사</span>
    <span>우리나라</span>
    <span>만세</span>

<header>
        <h1>HEADER</h1>
    </header>

    <nav>
        <ul>
            <li><a href="#">NAV Item1</a></li>
            <li><a href="#">NAV Item2</a></li>
            <li><a href="#">NAV Item2</a></li>
        </ul>
    </nav>

    <section>
        <h1>SECTION</h1>

        <article>
            <h1>ARTICLE1</h1>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </article>

        <article>
            <h1>ARTICLE2</h1>
            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
        </article>
    </section>

    <aside>
        <h1>ASIDE</h1>
        <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
    </aside>

    <footer>
        <address>가가도 나나시 다다동 123</address>
        <p>E-Mail : <a href="mailto:someone@example.com">someone@example.com</a>.</p>
    </footer>

<!DOCTYPE html>
<html>
<head>
    <style>
        .item {color: red;}
        .header {background-color: cyan;}
    </style>
</head>
<body>
    <h1 class="item header">HEADER</h1>
</body>
</html>

<html>
<head>
    <style>
        h1.header {color: red;}
    </style>
</head>
<body>
    <h1 class="header">HEADER</h1>
    <h1>HEADER</h1>
</body>
</html>

<html>
<head>
    <style>
        /* 단어 선택 */

        /* 값이 단어로 포함하는 태그 선택 (- 제외) */
        h1[title~=abc] {color: cyan;}

        /* 값이 단어로 포함하는 태그 선택 (- 포함) */
        h2[title|=abc] {color: red;}

        /* 값이 전체 문자열에서 시작하는 태그 선택 */
        h3[title^=abc] {color: blue;}

        /* 값이 전체 문자열에서 끝나는 태그 선택 */
        h4[title$=abc] {color: yellow;}

        /* 값이 전체 문자열에서 포함하는 태그 선택 */
        h5[title*=abc] {color: lightgreen;}
    </style>
</head>
<body>
    <h1 title="abc">Lorem</h1>
    <h1 title="abc-xyz">Lorem</h1>
    <h1 title="abc xyz">Lorem</h1>

    <br />

    <h2 title="abc">Lorem</h2>
    <h2 title="abc-xyz">Lorem</h2>
    <h2 title="abc xyz">Lorem</h2>

    <hr />

    <h3 title="abc">Lorem</h3>
    <h3 title="abc-xyz">Lorem</h3>
    <h3 title="abc xyz">Lorem</h3>

    <br />

    <h4 title="abc">Lorem</h4>
    <h4 title="abc-xyz">Lorem</h4>
    <h4 title="abc xyz">Lorem</h4>

    <br />

    <h5 title="abc">Lorem</h5>
    <h5 title="abc-xyz">Lorem</h5>
    <h5 title="abc xyz">Lorem</h5>
</body>
</html>

<html>
<head>
    <style>
        #header h1 {color:red;}

        #section > h1 {color:blue;}
        #section > .article1 > h1 {color:green;}
    </style>
</head>
<body>
    <div id="header">
        <h1>Lorem ipsum1</h1>
        <nav id="nav">
            <h1>Lorem ipsum2</h1>
        </nav>
    </div>

    <br />

    <div id="section">
        <h1>Lorem ipsum3</h1>
        <nav id="nav">
            <h1>Lorem ipsum4</h1>
        </nav>

        <br />

        <article class="article1">
            <h1>Lorem ipsum5</h1>
        </article>
    </div>
</body>
</html>