🌐
웹개발
HTML
HyperText Markup Language
HTML은 웹 페이지의 구조와 콘텐츠를 정의하는 마크업 언어입니다. 시맨틱 태그로 문서의 의미를 전달하고, 접근성과 SEO의 기초가 됩니다. CSS, JavaScript와 함께 웹의 3대 핵심 기술입니다.
📖 상세 설명
HTML(HyperText Markup Language)은 1991년 팀 버너스리가 발명한 웹의 핵심 기술입니다. 웹 페이지의 골격을 정의하며, 텍스트, 이미지, 링크, 폼 등의 콘텐츠를 구조화합니다. 현재 사용되는 HTML5는 2014년 W3C에서 표준화되었으며, 멀티미디어, 캔버스, 로컬 스토리지 등 풍부한 기능을 제공합니다.
HTML은 태그(tag)로 구성됩니다. 태그는 <p>, <h1>, <div> 같은 형태로, 여는 태그와 닫는 태그 사이에 콘텐츠가 들어갑니다. 속성(attribute)을 통해 태그에 추가 정보를 부여하며, id, class, src, href 등이 대표적입니다. 브라우저는 HTML을 파싱하여 DOM(Document Object Model) 트리를 생성합니다.
시맨틱(Semantic) HTML은 현대 웹 개발의 핵심 원칙입니다. <header>, <nav>, <main>, <article>, <aside>, <footer> 같은 시맨틱 태그는 콘텐츠의 의미를 명확히 전달합니다. 스크린 리더가 문서 구조를 파악할 수 있어 접근성이 향상되고, 검색 엔진이 콘텐츠를 이해하여 SEO에도 유리합니다.
HTML5에서 추가된 중요한 기능으로는 <video>, <audio>(플러그인 없는 미디어), <canvas>(2D 그래픽), <svg>(벡터 그래픽), 새로운 폼 타입(email, date, range), 그리고 data-* 커스텀 속성이 있습니다. Web Components 표준과 결합하면 재사용 가능한 커스텀 엘리먼트도 만들 수 있습니다.
💻 코드 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="페이지 설명 (SEO용)">
<title>페이지 제목 | 사이트명</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<!-- 시맨틱 구조 -->
<header>
<nav aria-label="메인 네비게이션">
<ul>
<li><a href="/">홈</a></li>
<li><a href="/about">소개</a></li>
<li><a href="/contact">문의</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>기사 제목</h1>
<p>본문 내용...</p>
<!-- 이미지 with 접근성 -->
<figure>
<img src="/images/photo.jpg"
alt="사진에 대한 설명 (스크린 리더용)"
loading="lazy"
width="800"
height="600">
<figcaption>이미지 캡션</figcaption>
</figure>
<!-- HTML5 폼 -->
<form action="/submit" method="POST">
<label for="email">이메일</label>
<input type="email" id="email" name="email"
required placeholder="you@example.com">
<label for="date">날짜</label>
<input type="date" id="date" name="date">
<button type="submit">제출</button>
</form>
</article>
<aside>
<h2>관련 링크</h2>
<ul>
<li><a href="#">관련 기사 1</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2024 회사명. All rights reserved.</p>
</footer>
<script src="/js/app.js" defer></script>
</body>
</html>🗣️ 실무 대화 예시
👨💻 주니어 개발자
👩💻 시니어 개발자
👨💼 기술 면접관
👨💻 지원자
⚠️ 주의사항
- DOCTYPE 선언 필수: <!DOCTYPE html> 없이 시작하면 브라우저가 호환 모드(Quirks Mode)로 동작하여 CSS 레이아웃이 예상대로 작동하지 않을 수 있습니다. 항상 문서 최상단에 DOCTYPE을 선언하세요.
- 이미지 alt 속성: 장식용 이미지는 alt=""로 비워두고, 정보를 전달하는 이미지는 반드시 의미 있는 대체 텍스트를 제공하세요. "image.jpg" 같은 파일명은 alt로 부적절합니다.
- Heading 계층 준수: h1은 페이지당 하나, h2-h6은 순서대로 사용하세요. h1 다음에 바로 h3이 오면 스크린 리더 사용자가 문서 구조를 파악하기 어렵습니다.