HTML은 'HyperText Markup Language'의 약어로, 웹 사이트를 구축하는 데 가장 기본이 되는 컴퓨터 언어입니다. HTML은 버전에 따라 문법이 약간씩 다른데 2014년 10월 제정된 HTML5가 현재의 최신 버전입니다. HTML 문서, 즉 웹 페이지는 기본적으로 HTML 태그(Tag)를 뼈대로 하여 구성됩니다.
다음 예제를 통하여 HTML 문서의 구조에 대해 알아봅니다.
HTML은 버전 별로 지원하는 태그가 조금씩 다르기 때문에 웹 브라우저에게 해석하고자 하는 HTML 문 서의 버전을 알릴 필요가 있습니다. <!DOCTYPE html>은 현재의 HTML 문서가 HTML5임을 나타냅 니다. 웹 브라우저는 이 HTML 문서를 HTML5의 문법에 따라 해석하여 결과를 브라우저 화면에 표시합니다.
<html>과 </html>은 각각 HTML 문서의 시작과 끝을 나타냅니다.
<head> 태그는 HTML 문서에서 브라우저 메인 창에는 보이지 않지만 HTML 문서에 CSS, 자바스크립 트, 제이쿼리, 리액트 등의 프로그램 코드를 삽입하거나 관련 파일을 연결하는데 사용됩니다. 또한 한글 문자셋이나 웹 브라우저의 제목 등을 설정하는 데에도 사용됩니다.
<meta> 태그는 데이터를 표현하는 메타 데이터를 설정할 때 사용되는데 문자셋을 설정하는 것이 주요 한 역할 중의 하나입니다. charset=”utf-8”은 문자셋을 HTML5의 표준 문자셋인 UTF-8로 설정합니 다.
이와 같이 HTML 문서가 UTF-8로 설정되면 HTML 문서 파일을 텍스트 에디터로 저장할 때도 반드시 UTF-8 방식으로 저장하여야 합니다. 비주얼 스튜디오 코드를 포함한 대부분의 텍스트 에디터는 기본 문자셋이 UTF-8입니다.
<style> 태그 내에는 HTML 문서를 꾸미는 CSS 코드가 삽입됩니다. <style> 태그는 <head> 태그 내에 삽입되어야 합니다. color: red;는 <h3> 태그 영역 , 즉 글 제목 ‘고양이’의 글자 색상을 빨간색으로 설정합니다.
<body> 태그는
와 에 들어가 있는 내용이 브라우저 메인 창에 보여지게 합니다. 달리 말하면 브라우저의 메인 창에 들어갈 내용은 모두 이 태그의 영역 내에 삽입되어야 합니다.<h3> 태그는 HTML 문서에서 글 제목을 표현하는 데 사용됩니다. 글 제목 ‘고양이’를 볼드체로 표시합니다. HTML에서는 웹 페이지에서 글 제목을 만들기 위해 <h1> ~ <h6>, 즉 6개의 태그가 준비되어 있습니다.
<p> 태그는 HTML 문서에서 단락을 표현하는 데 사용됩니다. 단락 ‘고양이과에 .... 동물이다.’를 단락 형태로 화면에 표시합니다.
<title> 태그는 브라우저 상단의 탭 버튼에 나타나는 웹 페이지의 제목을 설정하는데 사용됩니다.
위의 예에서 <body> 태그 안에는 내용이 없기 때문에 위의 결과에서와 같이 브라우저 메인 화면에는 아무것도 나타나지 않습니다. '새 창에서 보기'를 클릭해서 브라우저 화면에서 보면 상단의 탭 버튼에 브라우저 제목으로 '웹 페이지 제목'이라고 표시됩니다.
HTML 문서에서 프로그램 설명을 위해 추가되는 문장을 주석문이라 하는데 다음 예제를 통해 HTML의 주석문에 대해 알아봅니다.
<!-- 는 주석문의 시작을 나타내고, -->는 주석문의 끝을 나타냅니다. 이와 같이 주석문은 프로그램 내에서 프로그램을 작성한 작성일자, 작성자, 파일명 등을 기술하는데 사용될 수 있다. 그림에 나타난 것과 같이 주석 처리된 내용은 브라우저 화면에 나타나지 않습니다.