HTML (HyperText Markup Language)은 월드 와이드 웹(World Wide Web)의 핵심 마크업 언어로, 웹 페이지의 구조와 콘텐츠를 정의하는 데 사용됩니다. 이 문서는 HTML의 기본 개념부터 고급 기능까지, 웹 개발의 필수 요소인 HTML에 대해 종합적으로 설명합니다. HTML은 웹 브라우저가 콘텐츠를 올바르게 해석하고 표시할 수 있도록 표준화된 방법을 제공하며, CSS(스타일) 및 JavaScript(상호작용)와 함께 웹의 3대 핵심 기술 중 하나입니다.
HTML은 웹 페이지의 뼈대를 구성하는 언어입니다. HyperText는 문서 간의 연결(링크)을 의미하며, Markup Language는 텍스트를 태그를 사용하여 구조화하고 의미를 부여하는 언어를 뜻합니다. HTML은 프로그래밍 언어가 아니며, 웹 브라우저가 텍스트, 이미지, 비디오, 링크 등 다양한 웹 콘텐츠를 어떻게 배치하고 보여줄지 지시하는 역할을 합니다.
HTML의 주된 목적은 웹 문서의 구조를 정의하고, 브라우저가 해당 구조에 따라 콘텐츠를 렌더링하도록 지시하는 것입니다. 예를 들어, 어떤 텍스트가 제목인지, 어떤 것이 단락인지, 이미지가 어디에 위치해야 하는지 등을 HTML 태그를 통해 명시합니다.
HTML은 다음과 같은 주요 기능을 제공합니다:
HTML 문서는 여러 핵심 구성 요소로 이루어져 있으며, 이를 이해하는 것이 중요합니다.
HTML 요소는 웹 페이지의 구성 요소를 나타냅니다. 대부분의 HTML 요소는 시작 태그, 내용, 그리고 종료 태그로 구성됩니다.
<p>이것은 단락입니다./)가 붙습니다. 예: </p>예시:
<p>이것은 단락 요소입니다.</p>
태그는 꺾쇠괄호(<''>) 안에 요소 이름을 넣어 표현합니다. 태그는 크게 두 가지 종류가 있습니다:
<p></p>, <a></a><img />, <br />, <hr />
속성은 HTML 요소에 추가 정보를 제공합니다. 속성은 항상 시작 태그 안에 이름=“값” 형식으로 정의됩니다.
href: 앵커(링크) 태그(<a>)에서 링크의 목적지 URL을 지정합니다.src: 이미지 태그(<img>)에서 이미지 파일의 경로를 지정합니다.alt: 이미지 태그(<img>)에서 이미지를 표시할 수 없을 때 대체 텍스트를 제공하여 접근성을 높입니다.class / id: 요소를 식별하거나 CSS 스타일을 적용하는 데 사용됩니다.예시:
<a href="https://www.dokuwiki.org">DokuWiki 공식 웹사이트</a> <img src="image.jpg" alt="예시 이미지" />
모든 HTML 문서는 웹 브라우저가 올바르게 해석할 수 있도록 특정 구조를 따릅니다.
HTML 문서의 가장 첫 줄에는 항상 <!DOCTYPE html> 선언이 있어야 합니다. 이는 브라우저에게 문서가 HTML5 표준을 따르는 HTML 문서임을 알려주는 역할을 합니다.
<html> 태그는 HTML 문서의 모든 내용을 포함하는 최상위(루트) 요소입니다. lang 속성을 사용하여 문서의 기본 언어를 지정하는 것이 권장됩니다 (예: <html lang=“ko”>).
<head> 태그는 웹 페이지에 대한 메타데이터(데이터에 대한 데이터)를 포함합니다. 이 섹션의 내용은 웹 브라우저에 직접 표시되지 않지만, 문서의 설정, 제목, 스타일 시트 링크, 스크립트 등을 정의합니다.
<title>: 브라우저 탭이나 창에 표시될 문서의 제목을 정의합니다.<meta>: 문서의 메타데이터를 정의합니다 (예: 문자 인코딩, 뷰포트 설정, 검색 엔진 키워드).<link>: 외부 스타일 시트(CSS) 파일을 연결합니다.<script>: JavaScript 코드를 포함하거나 외부 JavaScript 파일을 연결합니다.
<body> 태그는 웹 페이지에 실제로 표시될 모든 콘텐츠를 포함합니다. 제목, 단락, 이미지, 링크, 목록, 테이블 등 사용자가 볼 수 있는 모든 요소는 이 <body> 태그 안에 위치해야 합니다.
예시:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>나의 첫 DokuWiki HTML 문서</title>
</head>
<body>
<h1>환영합니다!</h1>
<p>이것은 DokuWiki에서 작성된 HTML 문서의 예시입니다.</p>
</body>
</html>
HTML은 웹 콘텐츠를 구조화하기 위한 다양한 태그를 제공합니다. 다음은 가장 일반적으로 사용되는 몇 가지 태그입니다.
<h1>부터 <h6>까지 있으며, <h1>이 가장 중요하고 <h6>이 가장 덜 중요합니다. <h1>가장 큰 제목</h1>
<h3>중간 크기 제목</h3>
<h6>가장 작은 제목</h6>
<p> 태그는 텍스트 단락을 정의합니다. <p>이것은 일반적인 텍스트 단락입니다.</p>
<strong>: 중요한 텍스트를 나타내며, 일반적으로 굵게 표시됩니다.<em>: 강조된 텍스트를 나타내며, 일반적으로 기울임꼴로 표시됩니다.<br />: 강제 줄 바꿈을 삽입합니다.<hr />: 주제별 구분을 나타내는 수평선을 그립니다.<a> (anchor) 태그는 다른 웹 페이지나 문서 내 섹션으로 이동하는 하이퍼링크를 만듭니다. href 속성으로 목적지를 지정합니다. <a href="https://www.google.com">Google로 이동</a>
<a href="#section2">문서 내 섹션 2로 이동</a>
<img> 태그는 웹 페이지에 이미지를 삽입합니다. src 속성으로 이미지 파일의 경로를 지정하고, alt 속성으로 대체 텍스트를 제공합니다. <img src="path/to/my_image.jpg" alt="아름다운 풍경 사진" />
<ul> 태그로 정의하며, 각 항목은 <li> (list item) 태그로 표시됩니다. 일반적으로 글머리 기호로 표시됩니다. <ul>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
</ul>
<ol> 태그로 정의하며, 각 항목은 <li> 태그로 표시됩니다. 일반적으로 숫자나 알파벳으로 순서가 매겨집니다. <ol>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
</ol>
<table> 태그는 행과 열로 데이터를 정리하여 표시합니다.
<thead>: 테이블의 헤더 부분을 정의합니다.<tbody>: 테이블의 본문 내용을 정의합니다.<tr>: 테이블 행(table row)을 정의합니다.<th>: 테이블 헤더 셀(table header)을 정의합니다.<td>: 테이블 데이터 셀(table data)을 정의합니다.예시:
<table>
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>직업</th>
</tr>
</thead>
<tbody>
<tr>
<td>김철수</td>
<td>30</td>
<td>개발자</td>
</tr>
<tr>
<td>이영희</td>
<td>25</td>
<td>디자이너</td>
</tr>
</tbody>
</table>
위 HTML 코드는 DokuWiki에서 다음과 같이 렌더링될 수 있습니다:
| 이름 | 나이 | 직업 |
|---|---|---|
| 김철수 | 30 | 개발자 |
| 이영희 | 25 | 디자이너 |
<form> 태그는 사용자 입력을 위한 폼을 생성하는 데 사용됩니다.
<input>: 다양한 유형의 입력 필드(텍스트, 비밀번호, 버튼, 체크박스 등)를 만듭니다. type 속성으로 종류를 지정합니다.<textarea>: 여러 줄의 텍스트 입력을 위한 영역을 만듭니다.<button>: 클릭 가능한 버튼을 만듭니다.<label>: 폼 컨트롤에 대한 설명을 제공합니다.예시:
<form action="/submit-form" method="post">
<label for="username">사용자 이름:</label><br>
<input type="text" id="username" name="username"><br><br>
<label for="password">비밀번호:</label><br>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="제출">
</form>
현대 웹 개발에서 HTML은 단독으로 사용되지 않고, CSS와 JavaScript와 긴밀하게 협력하여 기능적인 웹 페이지를 만듭니다.
세 가지 기술은 웹을 구성하는 핵심 기둥이며, 각각의 역할을 명확히 구분하여 웹 페이지를 개발하는 것이 효율적입니다.
HTML은 웹 개발에서 보편적으로 사용되는 만큼 여러 가지 강력한 장점을 가지고 있습니다.
HTML은 전 세계적으로 웹 문서의 표준으로 인정받고 있으며, 모든 웹 브라우저가 HTML을 이해하고 렌더링할 수 있습니다. 이는 웹 콘텐츠가 어떤 기기나 브라우저에서든 일관되게 표시될 수 있도록 보장합니다.
HTML은 검색 엔진이 웹 페이지의 내용을 이해하고 색인화하는 데 중요한 역할을 합니다. 의미론적인 HTML 태그(예: <header>, <article>, <footer>)를 사용하면 검색 엔진이 콘텐츠의 중요성을 더 잘 파악하여 검색 순위를 높이는 데 도움이 됩니다.
올바르게 구조화된 HTML은 스크린 리더와 같은 보조 기술이 웹 페이지의 내용을 해석하고 시각 장애인이나 다른 장애를 가진 사용자에게 정보를 전달하는 데 필수적입니다. alt 속성, label 태그 등은 웹 접근성을 향상시키는 데 기여합니다.
HTML은 지속적으로 발전해 왔으며, 2014년에 공식적으로 권고된 HTML5는 웹 개발에 혁신적인 변화를 가져왔습니다.
HTML5는 웹 페이지의 구조를 더 명확하게 정의할 수 있는 새로운 의미론적 태그를 도입했습니다.
<header>: 문서나 섹션의 머리글을 정의합니다.<nav>: 탐색 링크를 포함하는 섹션을 정의합니다.<article>: 독립적이고 자체 포함된 콘텐츠를 정의합니다.<section>: 문서의 독립적인 섹션을 정의합니다.<aside>: 문서의 주 콘텐츠와 간접적으로 관련된 콘텐츠를 정의합니다.<footer>: 문서나 섹션의 바닥글을 정의합니다.이전에는 플러그인(예: Flash)이 필요했던 멀티미디어 콘텐츠를 HTML5는 네이티브로 지원합니다.
<audio>: 오디오 콘텐츠를 삽입합니다.<video>: 비디오 콘텐츠를 삽입합니다.HTML5는 웹 애플리케이션 개발을 위한 다양한 새로운 API(Application Programming Interface)를 제공합니다.
HTML은 웹의 근간을 이루는 마크업 언어로, 웹 페이지의 구조와 콘텐츠를 정의하는 데 필수적인 역할을 합니다. 간단한 텍스트부터 복잡한 웹 애플리케이션에 이르기까지, 모든 웹 콘텐츠는 HTML을 기반으로 구축됩니다. CSS와 JavaScript와 함께 HTML은 현대 웹의 상호작용적이고 시각적으로 풍부한 경험을 가능하게 하는 핵심 기술입니다. 지속적인 발전(HTML5 및 이후 버전들)을 통해 HTML은 더욱 강력하고 유연한 웹 개발 환경을 제공하며, 앞으로도 웹의 미래를 이끌어 나갈 것입니다.