이번은 HTML 강좌 4장 포스팅입니다. 내용은 HTML element에 대한 것인데요. 이전 포스팅에서도 잠깐 언급하고 지나왔지만 크게 어려운 것은 없을 거에요.
HTML Elements
이전 포스팅에선 HTML element와 HTML tag에 대해 대충 설명하고 지나 와서 초보자 분들은 이 둘의 차이가 참 애매하셨을 거라 생각되네요.
저 역시도 처음 배울 땐 그랬으니깐요. 하하.. ^^;
여러분들은 이번 강좌를 통해 HTML element와 HTML tag 사이에 어떤 차이가 있는지 배우시게 될 거에요.
HTML Elements
HTML element는 start tag와 end tag, 그리고 이 둘 사이의 contents로 이루어져 있습니다.
무슨 말이냐면 ‘<p> ~ 내용 ~ </p>’라고 하는 것이 있다면 <p>와 </p>, 그리고 이 둘 사이에 있는 것들을 모두 포함해 ‘HTML <p> element‘라고 한다는 것이죠.
이제 element와 tag의 차이를 분명히 아시겠죠?
참고로, <img> 태그나 <br> 태그처럼 end tag가 없는 것들을 볼 수 있는데요. 이들을 가리켜 ‘empty element‘라고 부릅니다. start tag만 있고 내용이 없는 빈 요소라는 것이죠.
Nested HTML Elements
중첩된? 내포된? 포함된? 둥지를 튼? 하하.. 허 참.. 영어로 된 용어를 한글로 풀어 설명하려니 참 어색하네요.
Nested HTML element란 HTML 요소 안에 또 다른 HTML 요소가 포함되어 있는 형태를 말합니다.
상자를 비유로 설명하면 큰 상자 속에 작은 상자가 담겨지는 것과 같은 모양이랄까…
중첩이라고 하기에는 의미가 좀 애매한 것 같고… 암튼 한글식 표현은 각자 알아서 하시고요. 이것이 뜻하는 바가 무엇인지 그 의미만 정확히 파악하시면 되리라 봅니다.
저는 그냥 속 편하게 영어식 표현을 쓰도록 할 거에요. ^^
<html>
<body>
<h1>머리말, <h1> 태그 연습</h1>
<p>단락, <p> 태그 연습</p>
</body>
</html>
위 예제에서 <html> element 안에 <body> element가 포함되어 있고, 또 다시 <body> element 안에 <h1> element와 <p> element가 포함되어 있는 것을 볼 수 있습니다.
이 모습은 마치 큰 상자(<html> ~ </html>) 안에 작은 상자(<body> ~ </body>)가 들어가 있고, 또 다시 이 작은 상자 안에 이보다 더 작은 상자(<h1> ~ </h1>, <p> ~ </p>)가 들어가 있는 모습과 유사한 것 같죠?
예제 설명
정리하는 의미에서 앞의 예제를 ‘<tagname> ~ content ~ </tagname>’의 형태로 설명해 드릴께요.
<html> element는 전체 문서를 나타내며, start tag <html>과 end tag </html>을 가지고 있고, 이것의 content에 해당되는 것은 <body> element이네요.
<body> element는 document body를 나타내며, start tag <body>와 end tag </body>를 가지고 있고, 이것의 content에 해당되는 것은 <h1> element와 <p> element이네요.
<h1> element는 머리말을 나타내며, start tag <h1>과 end tag </h1>을 가지고 있고, 이것의 content는 ‘머리말, <h1> 태그 연습‘이네요.
<p> element는 단락을 나타내며, start tag <p>와 end tag </p>를 가지고 있고, 이것의 content는 ‘단락, <p> 태그 연습‘이네요.
이제 HTML element가 무엇인지 명확히 아시겠죠? 그리고, 위 과정을 통해 HTML element의 content로 다른 HTML element가 사용되는 것도 배울 수 있었네요.
End tag를 빼먹지 말자
HTML 문서를 작성하다 보면 간혹 실수로 end tag를 빼먹는 경우가 종종 생깁니다.
그럼에도 <p> element와 같은 일부 HTML element들에 대해서 브라우저가 웹 페이지에 이들을 바르게 표시해 주는 것을 볼 수 있습니다.
이런 점을 악용해 자꾸 end tag를 빼먹게 된다면 나중에 뜻하지 않은 어려움에 빠질 수도 있으니 애초에 HTML을 배울 때부터 end tag를 꼭 넣는 습관을 들이도록 하세요.
Empty HTML Elements
앞에서도 잠시 언급했지만 content가 없는 HTML element들을 가리켜 ‘empty element‘라고 합니다.
이런 empty element들 중 하나가 <br>인데요.
이것은 <br />처럼 사용될 수도 있습니다.
HTML element들이 start tag로 시작해서 end tag로 끝나는 것처럼 empty element들도 시작했으니 끝내야 한다는 의미로 start tag 안에 <br />처럼 ‘/’을 넣어 닫아주는 거에요.
물론 HTML5에서는 empty element들을 사용함에 있어 반드시 이들을 닫아야 할 필요는 없습니다.
그래서, <br>로 사용하든 <br />로 사용하든 HTML5에서는 아무런 상관이 없는 거죠.
다만, 제 생각에는 추후 발생할지 모를 여러 문제점 등을 고려한다면 모든 HTML element들을 사용할 때 반드시 닫아주는 습관을 갖는 게 좋지 않을까 싶네요.
영문 소문자 Tag를 사용하자
HTML tag는 영문 대소문자를 구분하지 않습니다. 대문자 <P>를 사용하든 소문자 <p>를 사용하든 결과는 같다는 뜻이죠.
더구나 HTML5 표준 역시 반드시 소문자 tag를 사용하라고 하지는 않거든요. 그럼에도 불구하고 저는 HTML 문서를 작성할 때 소문자 tag를 사용할 것을 추천드립니다.
W3C에서도 HTML에서 소문자 사용을 추천하고 있고요.
XHTML처럼 더욱 엄격한 document type들에서는 대소문자를 구별하기 때문이죠.
HTML 강좌 4장 포스팅은 여기까지 할께요. 그럼 다음 포스팅에서 뵐께요.