semantic.html - Examples

  1<!DOCTYPE html>
  2<html lang="ko">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>시맨틱 HTML 예제</title>
  7    <style>
  8        /* 시맨틱 태그 시각화를 위한 간단한 스타일 */
  9        header, nav, main, article, section, aside, footer {
 10            border: 2px solid #333;
 11            margin: 10px;
 12            padding: 15px;
 13        }
 14        header { background-color: #f9e79f; }
 15        nav { background-color: #aed6f1; }
 16        main { background-color: #d5f5e3; }
 17        article { background-color: #fadbd8; }
 18        section { background-color: #e8daef; }
 19        aside { background-color: #fdebd0; }
 20        footer { background-color: #d5dbdb; }
 21
 22        .container {
 23            display: grid;
 24            grid-template-columns: 3fr 1fr;
 25            gap: 10px;
 26        }
 27    </style>
 28</head>
 29<body>
 30    <!-- ============================================
 31         시맨틱 HTML 예제
 32         의미를 가진 HTML5 태그들을 학습합니다.
 33    ============================================= -->
 34
 35    <!-- header: 페이지 또는 섹션의 헤더 -->
 36    <header>
 37        <h1>시맨틱 HTML5</h1>
 38        <p>의미 있는 태그로 웹 페이지 구조를 만듭니다.</p>
 39    </header>
 40
 41    <!-- nav: 네비게이션 링크 -->
 42    <nav>
 43        <h2>네비게이션 (nav)</h2>
 44        <ul>
 45            <li><a href="#article1">기사 1</a></li>
 46            <li><a href="#article2">기사 2</a></li>
 47            <li><a href="#about">소개</a></li>
 48            <li><a href="#contact">연락처</a></li>
 49        </ul>
 50    </nav>
 51
 52    <div class="container">
 53        <!-- main: 페이지의 주요 콘텐츠 -->
 54        <main>
 55            <h2>메인 콘텐츠 (main)</h2>
 56            <p>main 태그는 페이지당 하나만 사용하며, 고유한 콘텐츠를 담습니다.</p>
 57
 58            <!-- article: 독립적인 콘텐츠 -->
 59            <article id="article1">
 60                <h3>기사 (article)</h3>
 61                <header>
 62                    <h4>시맨틱 태그의 중요성</h4>
 63                    <p><time datetime="2024-01-15">2024년 1월 15일</time> 작성</p>
 64                </header>
 65                <p>
 66                    시맨틱 태그는 콘텐츠의 의미를 명확하게 전달합니다.
 67                    검색 엔진과 스크린 리더가 페이지 구조를 더 잘 이해할 수 있습니다.
 68                </p>
 69                <footer>
 70                    <p>작성자: 웹 개발자</p>
 71                </footer>
 72            </article>
 73
 74            <!-- section: 문서의 섹션 -->
 75            <section id="about">
 76                <h3>섹션 (section)</h3>
 77                <p>section은 관련된 콘텐츠를 그룹화합니다.</p>
 78
 79                <section>
 80                    <h4>하위 섹션 1</h4>
 81                    <p>섹션 안에 섹션을 중첩할 수 있습니다.</p>
 82                </section>
 83
 84                <section>
 85                    <h4>하위 섹션 2</h4>
 86                    <p>각 섹션은 일반적으로 제목을 가집니다.</p>
 87                </section>
 88            </section>
 89
 90            <!-- figure와 figcaption -->
 91            <article id="article2">
 92                <h3>figure와 figcaption</h3>
 93                <figure>
 94                    <img src="https://via.placeholder.com/300x200" alt="예제 이미지">
 95                    <figcaption>
 96                        그림 1: figure 태그로 이미지와 캡션을 그룹화합니다.
 97                    </figcaption>
 98                </figure>
 99            </article>
100        </main>
101
102        <!-- aside: 부가적인 콘텐츠 -->
103        <aside>
104            <h2>사이드바 (aside)</h2>
105            <p>메인 콘텐츠와 관련있지만 분리된 콘텐츠입니다.</p>
106
107            <section>
108                <h3>관련 링크</h3>
109                <ul>
110                    <li><a href="#">HTML 가이드</a></li>
111                    <li><a href="#">CSS 가이드</a></li>
112                    <li><a href="#">JS 가이드</a></li>
113                </ul>
114            </section>
115
116            <section>
117                <h3>광고</h3>
118                <p>광고나 프로모션 콘텐츠</p>
119            </section>
120        </aside>
121    </div>
122
123    <!-- details와 summary -->
124    <section>
125        <h2>details와 summary</h2>
126        <details>
127            <summary>클릭하여 더 보기</summary>
128            <p>숨겨진 콘텐츠가 여기에 표시됩니다.</p>
129            <p>details와 summary로 접이식 콘텐츠를 만들 수 있습니다.</p>
130        </details>
131
132        <details open>
133            <summary>기본으로 열린 상태</summary>
134            <p>open 속성을 사용하면 기본으로 열려있습니다.</p>
135        </details>
136    </section>
137
138    <!-- address -->
139    <section id="contact">
140        <h2>address 태그</h2>
141        <address>
142            <p>연락처 정보:</p>
143            <p>
144                이름: 홍길동<br>
145                이메일: <a href="mailto:hong@example.com">hong@example.com</a><br>
146                전화: <a href="tel:+821012345678">010-1234-5678</a>
147            </p>
148        </address>
149    </section>
150
151    <!-- time 태그 -->
152    <section>
153        <h2>time 태그</h2>
154        <p>
155            회의 일정: <time datetime="2024-02-20T14:00">2024년 2월 20일 오후 2시</time>
156        </p>
157        <p>
158            마감일: <time datetime="2024-03-01">3월 1일</time>
159        </p>
160        <p>
161            기간: <time datetime="P3D">3일</time>
162        </p>
163    </section>
164
165    <!-- footer: 페이지 또는 섹션의 푸터 -->
166    <footer>
167        <h2>푸터 (footer)</h2>
168        <p>&copy; 2024 시맨틱 HTML 예제</p>
169        <nav>
170            <a href="#">개인정보처리방침</a> |
171            <a href="#">이용약관</a> |
172            <a href="#">사이트맵</a>
173        </nav>
174    </footer>
175
176    <!-- 시맨틱 vs 비시맨틱 비교 -->
177    <section style="margin-top: 20px; padding: 20px; background: #fff;">
178        <h2>시맨틱 vs 비시맨틱 비교</h2>
179
180        <h3>비시맨틱 (나쁜 예)</h3>
181        <pre><code>&lt;div id="header"&gt;...&lt;/div&gt;
182&lt;div id="nav"&gt;...&lt;/div&gt;
183&lt;div id="main"&gt;
184    &lt;div class="article"&gt;...&lt;/div&gt;
185&lt;/div&gt;
186&lt;div id="footer"&gt;...&lt;/div&gt;</code></pre>
187
188        <h3>시맨틱 (좋은 예)</h3>
189        <pre><code>&lt;header&gt;...&lt;/header&gt;
190&lt;nav&gt;...&lt;/nav&gt;
191&lt;main&gt;
192    &lt;article&gt;...&lt;/article&gt;
193&lt;/main&gt;
194&lt;footer&gt;...&lt;/footer&gt;</code></pre>
195    </section>
196</body>
197</html>