HTML 강좌 / HTML의 개념과 웹페이지에서 하는 역할
HTML(HyperText Markup Language)은 웹페이지의 내용과 구조를 나타내는 마크업 언어입니다. 제목, 문단, 목록, 링크 같은 콘텐츠의 역할을 HTML 요소로 표시하면 브라우저가 이를 해석해 페이지를 구성합니다. 모양과 배치는 주로 CSS가, 사용자 동작에 대한 반응은 주로 JavaScript가 담당합니다.
HTML이란 무엇인가요?
HTML은 문서의 각 부분이 무엇을 뜻하는지 표시하는 언어입니다. 예를 들어 같은 문장이라도 페이지의 제목인지, 일반 문단인지, 다른 페이지로 이동하는 링크인지 HTML 요소로 구분합니다. HTML은 웹에서 문서를 서로 연결하는 링크도 만들 수 있습니다.
HTML은 계산이나 조건 처리 자체를 중심으로 하는 프로그래밍 언어와는 역할이 다릅니다. 웹페이지를 구성하는 콘텐츠에 구조와 의미를 부여하는 것이 핵심입니다. HTML의 정의와 요소별 의미는 WHATWG HTML 표준의 소개에서 확인할 수 있습니다.
HTML은 웹페이지에서 어떤 역할을 하나요?
웹페이지에는 제목, 본문, 탐색 링크, 이미지, 입력 양식처럼 역할이 다른 콘텐츠가 있습니다. HTML은 각각에 알맞은 요소를 사용해 콘텐츠의 종류와 관계를 나타냅니다.
- 콘텐츠 구분: 제목은
h1~h6, 문단은p, 목록은ul또는ol처럼 표시합니다. - 문서 구조: 머리말, 탐색 영역, 주요 내용 등 페이지의 영역을 구분할 수 있습니다.
- 연결과 입력:
a로 다른 문서에 연결하고,form과 입력 요소로 사용자에게 정보를 받을 수 있습니다.
이처럼 HTML이 나타내는 구조와 의미는 화면 디자인뿐 아니라 브라우저와 보조 기술이 콘텐츠를 이해하는 데에도 쓰입니다. 요소를 고를 때는 기본 모양보다 콘텐츠의 역할을 먼저 생각하는 것이 좋습니다.
HTML, CSS, JavaScript는 어떻게 다른가요?
세 기술은 웹페이지에서 주로 맡는 역할이 다릅니다. HTML은 콘텐츠의 구조와 의미를 정하고, CSS는 색·글꼴·간격·배치 같은 표현을 조정합니다. JavaScript는 클릭이나 입력에 반응해 콘텐츠를 바꾸는 등의 동작을 구현할 수 있습니다.
이 구분은 입문자를 위한 큰 그림입니다. 예를 들어 HTML에도 기본적인 상호작용을 제공하는 요소가 있고, CSS에도 상태에 따른 표현과 애니메이션 기능이 있습니다. 처음에는 HTML로 내용을 제대로 구성하는 데 집중하면 됩니다.
HTML 코드는 브라우저에서 어떻게 보이나요?
다음 HTML 조각은 h1로 제목을, p로 문단을, ul과 li로 목록을 표시합니다.
<h1>오늘의 메모</h1> <p>HTML은 내용을 구조화합니다.</p> <ul> <li>제목</li> <li>문단</li> </ul>
브라우저는 이 요소들을 해석해 제목, 문단, 글머리표가 있는 목록으로 보여줍니다. 아래 도해는 위 코드와 기본 표시 결과를 나란히 놓은 것입니다. 실제 글꼴과 간격은 브라우저와 적용된 CSS에 따라 달라질 수 있습니다.
간단한 HTML 파일을 만들어 보세요
앞의 조각에 문서의 기본 구조를 더하면 브라우저에서 바로 열 수 있는 파일이 됩니다. 다음 내용을 텍스트 편집기에 붙여 넣고 index.html이라는 이름으로 UTF-8 인코딩으로 저장한 뒤, 파일을 브라우저에서 열어 보세요.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>오늘의 메모</title>
</head>
<body>
<h1>오늘의 메모</h1>
<p>HTML은 내용을 구조화합니다.</p>
<ul>
<li>제목</li>
<li>문단</li>
</ul>
</body>
</html>
head에는 문서 제목이나 문자 인코딩 같은 정보가, body에는 페이지의 주요 콘텐츠가 들어갑니다. 코드에 CSS를 추가하지 않아도 브라우저는 기본 스타일로 내용을 표시합니다. 문서 구조와 각 태그의 쓰임은 다음 장에서 자세히 살펴봅니다.
다음에 읽을 글
HTML이 웹페이지에서 맡는 역할을 이해했다면 HTML 요소·태그·속성·주석을 설명한 문법 강좌로 이어가세요. 시작 태그와 종료 태그를 쓰는 방법, 속성을 추가하는 방법, 태그를 올바르게 중첩하는 방법을 배울 수 있습니다.
HTML 강좌 / HTML의 개념과 웹페이지에서 하는 역할
HTML은 웹페이지의 콘텐츠에 구조와 의미를 부여합니다. HTML·CSS·JavaScript의 역할을 비교하고, 간단한 코드가 브라우저에 표시되는 과정과 첫 HTML 파일을 만드는 방법을 알아봅니다.
HTML 목록은 순서가 중요하면 ol, 중요하지 않으면 ul, 이름과 값의 관계는 dl로 작성합니다. li·dt·dd 구조, start·value·reversed 속성, 중첩 목록과 CSS 마커 설정 방법을 예제로 설명합니다.
표는 table 태그로 만듭니다. 행은 tr 태그로 만듭니다. 열의 제목이 들어가는 셀은 th 태그로 만듭니다. 내용이 들어가는 셀은 td 태그로 만듭니다. 각 열의 의미에 따라 thead, tbody, tfoot 태그로 구분 지을 수도 있습니다.
HTML h1~h6 제목 태그와 p 문단 태그의 역할 및 올바른 구조를 예제로 설명합니다. 제목 단계 구성, br 줄바꿈과 자주 발생하는 작성 오류도 함께 확인할 수 있습니다.
HTML / Tutorial / 연속된 공백 넣는 방법
HTML에서 연속된 공백은 하나의 공백으로 처리합니다. 소스 코드에서 여러 칸을 띄어써도 브라우저에서는 한 칸을 띄어쓴 것으로 표현됩니다. 연속된 공백을 넣고 싶다면 특수 문자 를 사용합니다.
링크(link)는 a 태그로 만듭니다. 링크의 대상은 웹페이지, 파일, 이메일 등이 될 수 있습니다. href 속성의 값에는 웹페이지, 이미지, 동영상, 파일 등의 주소를 넣습니다. 웹페이지로 이동하거나, 동영상 플레이어가 실행되거나, 파일이 다운로드 되는 등 웹브라우저의 설정에 따라 처리됩니다.
HTML 문법의 기본인 요소·태그·속성·주석과 HTML 문서 구조를 예제로 설명합니다. 종료 태그가 없는 빈 요소, 속성값 따옴표 사용과 태그 중첩 시 주의점도 함께 확인할 수 있습니다.
HTML / Tutorial / 양식에 안내 문구 추가하는 방법
input 태그에 value를 이용해서 기본값을 만들 수 있습니다. 이 상태에서 버튼을 클릭하면 기본값이 전송됩니다. 만약 기본값이 아니라, 무엇을 입력해야 하는지 안내하는 문구를 넣고 싶다면 placeholder를 사용합니다. 화면 상에는 그 문자열이 보이지만, 버튼을 클릭했을 때 아무 값도 전송되지 않습니다.