본문으로 건너뛰기
Advertisement

HTML5 (시맨틱 웹 & 폼)

HTML5는 현대 웹의 표준으로, 다양한 멀티미디어 요소와 의미 있는 구조(Semantic)를 제공합니다.

1. HTML 기본 구조​

모든 HTML 문서는 다음의 기본 형태를 가집니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>웹 페이지 제목</title>
</head>
<body>
    <h1>내용이 들어가는 곳</h1>
</body>
</html>

2. 시맨틱 태그 (Semantic Tags)​

시맨틱 태그는 브라우저와 개발자에게 태그의 의미를 명확히 전달합니다. 이는 SEO(검색 엔진 최적화)에 매우 중요합니다.

  • <header>: 머리말 (로고, 메뉴 등)
  • <nav>: 내비게이션 링크
  • <main>: 문서의 주요 콘텐츠
  • <article>: 독립적인 콘텐츠 (뉴스 기사, 블로그 포스트)
  • <section>: 문서의 특정 부분(섹션)
  • <aside>: 사이드바 (광고, 링크 등)
  • <footer>: 바닥글 (연락처, 저작권 정보)

3. 웹 폼 (Web Forms)​

사용자로부터 데이터를 입력받기 위해 사용합니다.

<form action="/submit" method="POST">
    <label for="username">사용자명:</label>
    <input type="text" id="username" name="username" required>
    
    <label for="email">이메일:</label>
    <input type="email" id="email" name="email">
    
    <button type="submit">제출</button>
</form>

4. 자주 사용하는 태그들​

  • 텍스트: <h1>~<h6>, <p>, <span>, <strong>
  • 목록: <ul>, <ol>, <li>
  • 멀티미디어: <img>, <video>, <audio>
  • 링크: <a href="url">

다음 장에서는 이 HTML 요소들을 아름답게 꾸미는 CSS에 대해 배웁니다.

Advertisement
Advertisement