HTML(하이퍼텍스트 마크업 언어, Hypertext Markup Language)은 웹 페이지의 구조를 정의하는 마크업 언어입니다. 웹 페이지의 텍스트, 이미지, 링크, 버튼, 비디오 등 여러 요소를 구성하고 표시하는 데 사용됩니다. HTML은 인터넷에서 문서를 만들고 정보를 표시하는 기본 언어로, 브라우저가 웹 페이지의 콘텐츠를 올바르게 해석하고 렌더링할 수 있도록 돕습니다.
HTML 문서의 기본 구조
HTML 문서는 다음과 같은 기본적인 구조로 이루어집니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹 페이지 제목</title>
</head>
<body>
<header>
<h1>페이지의 제목</h1>
</header>
<main>
<p>여기에 본문 콘텐츠가 들어갑니다.</p>
</main>
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>
기본 요소 설명
<!DOCTYPE html>: HTML5 문서를 선언하는 구문입니다. 브라우저가 이 문서를 HTML5로 해석하도록 지시합니다.<html>: 모든 HTML 문서의 루트 요소입니다. 이 요소 내에서 웹 페이지의 내용이 작성됩니다.<head>: 메타데이터, 문서의 제목, 스타일시트 연결, 스크립트 등을 포함하는 섹션입니다. 이 부분은 사용자에게 직접 표시되지 않습니다.<meta charset="UTF-8">: 문서의 문자 인코딩을 설정하는 태그로, UTF-8은 전 세계적으로 가장 널리 사용되는 인코딩 방식입니다.<title>: 브라우저 탭에 표시될 웹 페이지의 제목을 정의합니다.<body>: 웹 페이지에 실제로 표시될 모든 콘텐츠가 위치하는 곳입니다.<header>,<main>,<footer>: HTML5에서 도입된 의미론적 태그로, 각각 페이지의 상단, 주요 콘텐츠, 하단 부분을 나타냅니다.
HTML 태그의 종류
- 텍스트 요소:
<p>,<h1>,<h2>등 텍스트를 구조화하고 표시하는 태그. - 링크 요소:
<a>태그를 사용해 다른 페이지나 외부 사이트로 연결하는 하이퍼링크를 생성. - 이미지 요소:
<img>태그로 웹 페이지에 이미지를 삽입. - 폼 요소:
<form>,<input>등을 사용해 사용자가 데이터를 입력할 수 있는 폼을 만듭니다. - 멀티미디어 요소:
<video>,<audio>태그로 비디오와 오디오 파일을 웹 페이지에 포함.
HTML의 발전
HTML은 계속해서 발전하며 웹 표준을 준수합니다. 현재 가장 널리 사용되는 버전은 HTML5로, 멀티미디어 지원이 강화되고, 의미론적 마크업 요소들이 추가되었습니다. 이러한 기능 덕분에 HTML은 더 풍부한 웹 경험을 제공할 수 있습니다.
HTML은 웹 개발의 기초로서 다른 웹 기술인 CSS(스타일링)와 JavaScript(인터랙티브 기능)와 함께 웹 페이지를 완성하는 중요한 역할을 합니다.
웹 개발에 관심이 있다면 HTML을 배우는 것은 필수적입니다. 이를 통해 웹 페이지를 만들고, 수정하며, 나만의 콘텐츠를 웹 상에 표현할 수 있는 능력을 갖출 수 있습니다.