HTML : 웹을 지탱하는 가장 강력한 뼈대

HTML(HyperText Markup Language)은 웹 페이지의 구조와 의미를 정의하는 마크업 언어입니다. 우리가 보는 모든 웹사이트는 결국 HTML이라는 뼈대 위에 CSS(디자인)와 JavaScript(기능)가 입혀진 결과물입니다.

이 글에서는 HTML의 핵심 개념과 필수 태그, 그리고 기본 구조에 대해 알아봅니다.

1. HTML의 기본 구조

HTML 문서는 정해진 표준 구조를 따릅니다. 브라우저는 이 구조를 해석하여 화면을 그립니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>나의 첫 웹페이지</title>
</head>
<body>
    <h1>안녕하세요!</h1>
    <p>이것은 본문 내용입니다.</p>
</body>
</html>

<!DOCTYPE html>: 이 문서가 HTML5 표준을 따름을 브라우저에 알립니다.
<html>: 전체 페이지를 감싸는 최상위 요소(Root Element)입니다.
<head>: 페이지의 메타 데이터(제목, 인코딩, CSS 파일 링크 등)를 담는 곳입니다. 화면에 직접 보이지 않습니다.
<body>: 텍스트, 이미지, 버튼 등 실제 브라우저 화면에 보이는 모든 내용이 들어갑니다.

2. 태그(Tag)와 속성(Attribute)

HTML은 태그를 사용하여 요소를 정의합니다. 태그는 꺾쇠 괄호 < >를 사용합니다.

2.1 태그의 형태

대부분의 태그는 시작 태그와 종료 태그의 쌍으로 이루어집니다. * <h1>제목입니다</h1> (O) * <p>문단입니다</p> (O)

일부 태그는 닫는 태그가 없는 빈 태그(Empty Tag)입니다. * <br> (줄바꿈) * <img> (이미지 삽입) * <hr> (가로 구분선)

2.2 속성 (Attribute)

태그에 추가적인 정보를 제공할 때 사용하며, 시작 태그 안에 작성합니다.

<a href="https://google.com" target="_blank">구글로 이동</a>
<img src="logo.png" alt="사이트 로고" width="100">

href: 링크의 목적지 주소
src: 이미지 파일의 경로
alt: 이미지가 로드되지 않을 때 보여줄 대체 텍스트 (웹 접근성에 중요)

3. 자주 사용하는 핵심 태그 5가지

① 제목 (Headings)

<h1>부터 <h6>까지 있으며, 숫자가 작을수록 중요한(큰) 제목입니다. 검색엔진 최적화(SEO)에 매우 중요합니다.

<h1>메인 제목 (페이지당 1개 권장)</h1>
<h2>섹션 제목</h2>
<h3>소제목</h3>

② 문단과 텍스트 (Paragraph & Text)

<p>일반적인 문단을 작성할 때 사용합니다.</p>
<b>굵게(Bold)</b> 처리하거나 <i>기울임(Italic)</i> 처리를 할 수 있습니다.
<strong>중요한 내용은 strong 태그를 쓰는 것이 의미론적으로 좋습니다.</strong>

③ 목록 (Lists)

<ul> (Unordered List): 순서가 없는 목록 (점 등으로 표시)
<ol> (Ordered List): 순서가 있는 목록 (1, 2, 3... 으로 표시)
<li> (List Item): 각 항목

<ul>
    <li>사과</li>
    <li>바나나</li>
</ul>

④ 링크 (Anchor)

다른 페이지로 이동하는 하이퍼링크를 만듭니다.

<a href="https://www.naver.com">네이버로 가기</a>

⑤ 이미지 (Image)

<img src="images/photo.jpg" alt="여행 사진">

4. 시맨틱(Semantic) 태그란?

최신 HTML5에서는 단순히 <div>로 구역을 나누는 것보다, 태그의 이름만 봐도 어떤 역할을 하는지 알 수 있는 시맨틱 태그 사용을 권장합니다.

태그	역할
`<header>`	사이트의 헤더 (로고, 메뉴 등)
`<nav>`	내비게이션 링크 모음
`<main>`	문서의 핵심 콘텐츠 (페이지당 1번 사용)
`<section>`	주제별 콘텐츠 영역
`<article>`	독립적으로 배포 가능한 콘텐츠 (블로그 글, 뉴스 등)
`<footer>`	사이트의 하단 정보 (저작권, 연락처 등)

Tip: 시맨틱 태그를 잘 사용하면 코드의 가독성이 높아지고, 검색 엔진이 내 사이트를 더 잘 이해하게 되어 노출 순위가 올라갑니다.

마무리

HTML은 웹 개발의 시작점입니다. 뼈대를 튼튼하게 세웠다면, 이제 CSS로 살을 입히고 JavaScript로 생명을 불어넣을 차례입니다.