HTML 태그란 무엇인가?
그냥 무작정 태그를 공부하기 보단 그 전에 왜 태그라는 것이 존재하는가에 대해서 나름 개인적으로 생각한 바를 이야기해 보겠습니다.
HTML(Hyper Text Markup Language)은 웹문서를 작성하는 언어입니다. HTML은 프로그래밍 언어의 범주에 들어있지만 범용적인 프로그래밍 언어와 달리 문서를 작성하는데 특화된 언어입니다. 그래서 범용적인 프로그래밍 언어와는 구조적으로 많은 차이가 있습니다.
우선 HTML은 구조가 단순합니다. 문서를 만드는 언어이므로 가장 중요한 것은 문서의 내용입니다. HTML은 여기에 보조적인 역할을 하는 것이죠. 예를들어 특정 텍스트에 링크가 걸려있는 것은 웹 문서에서 흔하게 볼 수 있습니다. 바로 HTML 태그를 사용해서 이런 기능을 추가하는 것입니다.
비슷한 맥락으로 태그를 붙여 놓아서 이 부분이 문장인지 그림인지, HTML 문서인지, 표인지 리스트인지 구별할 수도 있고 태그에 속성이라는 것을 추가해서 속성을 설정할 수 있습니다.
이렇게 HTML 문서는 문서를 만드는데 특화시키기 위해서 대부분 태그로 이루어져 있습니다. 태그가 없다고 문서의 내용이 변하는 것이 아니기 때문에 태그는 일종의 문서 양식을 만드는 역할을 하는 것이라 볼 수 있습니다.
웹 문서를 만들 때 HTML는 꼭 필요한가?
일반적인 문서를 만들때 목적에 부합되는 양식에 따라서 문서를 작성합니다. 이력서 양식을 생각해보면 쉽게 이해할 수 있습니다.
HTML 역시 정해진 양식이 있는데 사실 단순히 텍스트의 내용만 html파일로 저장해 놓아도 브라우저가 읽어서 문서를 표시해줄 수 있습니다.
다음은 위키백과에서 HTML에 대한 내용을 소개하는 페이지의 일부입니다. 큰 제목으로 HTML이라고 표시되어 있고 구분선이 그어져 있습니다. 그 다음 내용이 들어가 있고 오른쪽에는 박스와 그 안에 내용들이 있는데 이 부분은 지금 생각하지 않겠습니다.
이번에는 위 내용을 복사해서 html 확장자를 파일로 저장해서 웹 브라우저로 열어보겠습니다.
(한글이 혹시 깨져보일 수도 있습니다. 이럴 경우 태그로 문자셋(charset을 지정해 주어야합니다.) 우선 넘어가겠습니다.)
위 문서는 무엇이 제목인제 어디에서 줄바꿈이 일어나는지 알 수가 없습니다.
위 두 문서의 차이는 HTML 태그의 사용유무 입니다.
브라우저는 HTML 문서를 해석할 때 HTML 태그를 가지고 해석합니다. 줄 바꿈 역시 태그로 표시하고 글자의 크기나 문자열에 연결된 링크를 만들려 해도 역시 HTML 태그가 필요한 것이죠. 이미지를 불러오거나, 표를 만들고 리스트를 만드는 작업 역시 태그가 필요합니다.
위 문서처럼 HTML 태그 없이 내용만 있는 문서는 글자와 공백(한칸 이상 띄어 쓸 수 없음)으로만 표현되게 됩니다.
HTML 문서의 기본 구조
위 내용에 태그를 붙여서 HTML 기본 구조를 만들어 보겠습니다.
태그는 <태그> 의 형식으로 표현합니다. 시작 태그와 끝나는 태그가 쌍으로 존재하는 데 끝나는 태그는 태그이름 앞에 /(슬래시)를 붙입니다.
<태그> 내용 </태그>
<HTML>
....
</HTML>은 HTML 문서라는 것을 표시하는 태그입니다. 따라서 HTML문서의 내용은 HTML 태그로 둘러쌓여 있습니다.
HTML 태그 내부를 보면 <HEAD>라는 태그와 <BODY>라는 태그가 있습니다.
HEAD 태그에는 문서의 정보를 알려주는 메타 정보들이 주를 이루고 BODY 태그는 문서의 내용을 기술합니다. 이 형식이 절대적이라기 보다는 일종의 약속입니다.
<HEAD> 내부에 <meta charset="UTF-8">이라는 녀석이 보이는데 이 것은 meta라는 태그에 속성이 추가된 것입니다.
meta라하면 데이터를 설명해주는 정보를 의미하는데 meta 태그는 문서의 정보를 기술해줍니다. 예를들어 meta 태그의 charset 속성은 문서의 인코딩이 어떻게 되어있는지를 알려주는 속성입니다. 보통 웹 상에서 문서가 깨져보이는 경우 charset이 제대로 설정되어 있지 않은 경우입니다. 한글이 깨져보인다면 위와 같이 설정해 주시길 바랍니다.
meta 뿐만아니라 다른 태그들도 태그에 속성이 추가될 수 있습니다. 속성에 대한 것은 나중에 설명합니다.
title 태그는 문서의 제목을 알려줍니다. 웹 문서에 표시되는 내용은 아니고 웹 문서에 대한 정보를 보여주므로 HEAD 태그 내에 넣어 줬습니다. 하지만 BODY태그에 넣어줘도 문서를 표시하는데는 지장이 없습니다. 하지만 양식대로 문서를 작성할 것을 권합니다.
<title> 제목 </title>
<title> 제목 </title>
앞서 그림에서처럼 웹 문서의 제목이 브라우저의 제목표시줄에 표시되는데 이것이 title 태그가 하는 일입니다.
이제 BODY 태그로 가보죠. <BODY> 태그 내부에는 문서의 실질적인 내용을 기술합니다.
H1 태그가 보이죠? headline으로 머릿말을 뜻합니다. H1부터 H6까지의 태그가 존재하는데 H1이 제일 큰 글씨로 표시되고 H6가 가장 작은 글씨로 표시됩니다.
그 밑에 <HR/>이라는 표시는 내용 구분선입니다. 일종의 나홀로 태그인데 이런 태그는 시작과 끝이 없이 단독으로 사용됩니다.
참고로 띄어쓰기를 위한 <br/>태그가 있습니다. 이 태그는 나홀로태그입니다. 즉 시작과 끝이 없이 단독으로 쓰는 태그죠.
는 띄어쓰기를 나타냅니다.
그리고 p 태그가 보이는데 <p> 태그는 한 문단을 의미합니다. 위 그림처럼 문단과 문단간에는 구분될 정도의 띄어쓰기가 되어있습니다.
<p> 태그를 사용하여 구분하는 것과 <br/>태그를 사용해서 문단을 구분하는 것 중에 어느 것이 옳은가에 대해서는 정답은 없습니다. 다만 내용을 태그로 묶어 놓게 되면 태그에 속성을 지정하여 일괄적으로 속성값을 줄 수 있다는 편리성이 있습니다. 문단을 일괄적으로 관리하는 측면에서 <p>태그를 사용하는 편이 좋습니다.
a태그
추가적으로 링크를 한번 달아보겠습니다. HTML이라는 문자열에 하이퍼링크를 달아서 다른 사이트의 주소를 연결해보겠습니다.
<a href="htt://thrillfighter.tistory.com"> HTML </a>
a태그는 meta 태그 처럼 속성을 추가적으로 사용해야 의미가 있습니다. href는 바로 링크시킬 주소를 설정하는 속성입니다. 이렇게 링크를 걸어놓으면 HTML에 링크가 표시됩니다. 클릭하면 해당 웹페이지로 이동합니다.
여기에 target이라는 속성을 추가적으로 붙여보겠습니다.
<a href="htt://thrillfighter.tistory.com" target="_blank"> HTML </a>
target속성의 속성값이 "_blank"로 지정되면 하이퍼링크로 열리는 웹 문서가 새로운 창으로 열립니다.
이렇게 속성은 여러 개를 지정할 수도 있습니다.
HTML 문서에 주석 넣기
주석은 한마디로 설명입니다. 책의 내용 옆에 모르거나 중요한 내용을 메모해 놓죠? 바로 주석도 마찬가지로 주석을 달아두어서 이해하기 힘든 부분이나 해당 코드가 하는 기능 또는 나중에 수정되어야할 부분 표시 등을 표시해 놓기 위해서 주석을 사용할 수 있습니다.
주석은 웹 브라우저에 의해서 HTML코드가 해석될 때 무시되므로 문서에 영향을 미치지 않습니다.
<!-- 주석 내용 작성 -->
그렇다고 주석을 남발하는 것은 좋지 않습니다. 설명을 해 놓는 것은 좋지만 너무 많은 설명은 오히려 코드의 이해를 방해합니다. 주석을 작성하는 요령은 정말 필요한 내용만 그리고 설명은 심플하면서도 명확하게 하는 것입니다.