HTML5는 이전 버전과 달리 구조(HTML), 디자인(CSS), 동작(JavaScript)을 명확히 구분합니다. HTML은 문서의 의미와 구조만을 담당하도록 변경되었습니다.
<!-- 옛날 방식 -->
<table width="100%" bgcolor="#ffffff">
<tr>
<td align="center">
<font size="6" color="blue">제목</font>
</td>
</tr>
</table>
<!-- 현대 HTML + CSS 방식 -->
<header>
<h1>제목</h1>
</header>
시맨틱 태그는 “의미가 있는 태그”로, 문서의 구조를 더 명확하게 표현합니다.
<!-- 전체 페이지 레이아웃 예제 -->
<body>
<header>
<h1>웹사이트 제목</h1>
<nav>
<ul>
<li><a href="#home">홈</a></li>
<li><a href="#about">소개</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>주요 기사</h2>
<p>기사 내용...</p>
</article>
<aside>
<h3>관련 링크</h3>
<ul>
<li><a href="#link1">링크1</a></li>
<li><a href="#link2">링크2</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2025 내 웹사이트</p>
</footer>
</body>
<!-- 블로그 포스트 예제 -->
<article>
<header>
<h1>블로그 포스트 제목</h1>
<time datetime="2025-01-14">2025년 1월 14일</time>
</header>
<section>
<h2>첫 번째 섹션</h2>
<p>섹션 내용...</p>
</section>
<section>
<h2>두 번째 섹션</h2>
<p>섹션 내용...</p>
</section>
<footer>
<address>
작성자: <a href="mailto:author@example.com">홍길동</a>
</address>
</footer>
</article>
<!-- 대화형 컨텐츠 예제 -->
<dialog open>
<h2>알림</h2>
<p>이것은 모달 창입니다.</p>
<button>닫기</button>
</dialog>
<details>
<summary>더 보기</summary>
<p>숨겨진 상세 내용입니다.</p>
</details>
<menu>
<li><button>저장</button></li>
<li><button>편집</button></li>
</menu>
<!-- 텍스트 구조화 예제 -->
<article>
<h1>제목</h1>
<p>일반 문단 텍스트입니다.</p>
<blockquote cite="http://example.com">
<p>인용문 내용입니다.</p>
<footer>
<cite>출처: 예제 사이트</cite>
</footer>
</blockquote>
<pre><code>
function example() {
console.log("코드 예제");
}
</code></pre>
</article>
<!-- 텍스트 의미 강화 예제 -->
<p>
<mark>형광펜 효과</mark>의 텍스트입니다.
이것은 <em>강조된</em> 텍스트이고,
이것은 <strong>매우 중요한</strong> 텍스트입니다.
</p>
<p>
영업시간: <time datetime="09:00">오전 9시</time>부터
<time datetime="18:00">오후 6시</time>까지
</p>
<p>
전문용어: <dfn>HTML</dfn>은 하이퍼텍스트 마크업 언어입니다.
<abbr title="Hypertext Markup Language">HTML</abbr>
</p>
<!-- 데이터 표현 예제 -->
<p>
가격: <data value="1000">1,000원</data>
</p>
<p>
진행도:
<meter value="0.8" min="0" max="1">80%</meter>
</p>
<p>
로딩중:
<progress value="70" max="100">70%</progress>
</p>
<!-- 다양한 목록 예제 -->
<nav>
<ul>
<li>순서 없는 목록 항목</li>
</ul>
</nav>
<ol>
<li>순서 있는 목록 항목</li>
</ol>
<dl>
<dt>용어</dt>
<dd>용어에 대한 설명</dd>
</dl>
<!-- figure와 figcaption -->
<figure>
<img src="photo.jpg" alt="설명">
<figcaption>이미지 설명</figcaption>
</figure>
<!-- 반응형 이미지를 위한 picture -->
<picture>
<source media="(min-width: 800px)" srcset="large.jpg">
<source media="(min-width: 400px)" srcset="medium.jpg">
<img src="small.jpg" alt="설명">
</picture>
<!-- 비디오 -->
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
</video>
<!-- 오디오 -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
</audio>
<form>
<input type="email" placeholder="이메일">
<input type="date">
<input type="tel">
<input type="color">
<input type="range" min="0" max="100">
<input type="search">
<input type="url">
<input type="file" multiple>
</form>
PWA(Progressive Web Apps) 기술을 사용하면 웹앱이 오프라인에서도 작동할 수 있습니다.
// Service Worker 등록
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(function(registration) {
console.log('서비스 워커 등록 성공');
});
}
// localStorage - 브라우저를 닫아도 유지
localStorage.setItem('username', '홍길동');
// sessionStorage - 탭을 닫으면 삭제
sessionStorage.setItem('temp', '임시데이터');