우리가 크롬, 익스플로러와 같은 웹브라우저를 통해 보는 모든 웹사이트들은 HTML이라는 문서로 되어 있다. HTML(Hyper Text Markup Language)은 마크업 언어인데, 마크업 언어는 태그를 이용해서 문서나 데이터를 구조화 시키는 것을 말한다. 하이퍼텍스트는 지금 보고 있는 문서에서 즉시 다른 문서로 이동할 수 있는 것을 말한다. 하이퍼텍스트 요소는 우리가 평소에 사용하는 아래한글이나 파워포인트 같은 프로그램에서도 사용하고 있다. 그래서 HTML은 문서간의 이동이 자유로울 수 있도록 태그로 만든 언어를 뜻한다.
<!DOCTYPE html>
<html>
<head>
<title>웹사이트 타이틀</title>
</head>
<body>
<h1>제목</h1>
<p>내용</p>
</body>
</html>위의 예시가 HTML이다.
<> 홑화살괄호(앵글 브래킷)을 열고 닫아 태그를 만드는데, 대부분의 태그는 여는 태그와 닫는 태그가 한 쌍으로 이루어져 있다. 예외로 몇몇 태그는 여는 태그만으로 만들어지기도 한다.
<태그이름> 내용 </태그이름>위와 같이 여는 태그는 <태그이름> 으로 쓰고, 닫는 태그는 </태그이름> 으로 쓰는데, 여는 태그는 태그의 시작을 알리고, 닫는 태그는 태그의 끝을 알린다.
다시 돌아가 처음의 HTML 예시를 해석 해 보자.
<!DOCTYPE html><!DOCTYPE html> 태그는 HTML문서의 시작을 알린다.
그리고 이 문서는 HTML5로 만들어져 있음을 나타낸다.
<html>
...
</html><html>과 </html> 태그 안에 들어가 있는 내용이 하나의 문서를 구성한다. HTML문서의 뿌리요소 또는 루트 엘리먼트(root element)라고 한다.
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html><html>요소 안에는 <head>요소와 <body>가 들어가는데, <head>요소는 html문서의 타이틀을 비롯해 메타정보를 담고 있다. <body>요소는 페이지에 보여지는 요소들을 담는다.
댓글