2. HTML의 구성 요소 -바닥부터 시작하는 HTML-

2. HTML의 구성 요소     -바닥부터 시작하는 HTML-

 

HTML을 구성하는 것들은 다음과 같다.

영어표기를 구태여 한 이유는 엘리먼트, 어트리뷰트 등과같이 영발음으로도 많이 표현이 되기 때문이다. 요소(Elements)와 태그(Tag)는 많이 혼동되는 부분이므로 여기서 그 차이를 확실히 알고 넘어갔으면 한다.

 

1. 요소 : (Elements:엘리먼트)

예) <p>문단내용</p>

요소(Elements)는 "<p>문단내용</p>" 전체를 의미한다.

 

 

2. 태그 : (Tag)

"<>"로 묶인 일련의 명령어로 시작태그"<태그명>"와 종료태그"</태그명>"로 이루어져 있다.

 

예) <p>문단내용</p>

여기서 태그는 "<p>"와 "</p>"만을 의미한다.

 

<br />, <embed />, <hr />, <img />, <input />, <link />, <meta />, <param />, <source />, <wbr />등과 같이 하나의 태그만으로 되어 있는 것도 있고 이런 것들은 빈 요소(empty element)라고 하여 내용(Contents)이 없는 경우를 말하며 이 자체로 요소(Self-Closing Elements)가 된다.

 

3. 속성 : (Attributes:어트리뷰트)

요소의 시작태그 안에 사용되는 것으로 그 내용에 좀 더 자세한 성격과 의미를 정의할 수 있다.

<태그명 속성명1="속성값1" 속성명2="속성값2"> 내용 </태그명>

예) <p align="center">태그에 속성을 부여한 예</p>

<p>태그안에 "align"이라는 속성(Attributes)을 사용해서 그 내용의 정렬방식을 정의 할 수 있다. 여기서는 "center"라는 속성값을 사용해서 내용을 중앙정렬하게 한다.

 

 

4. 변수 또는 값 : (Arguments:아규먼트) 또는 (value)

각 속성에 들어갈 수 있는 변수(Arguments) 또는 값(value)을 의미한다. 위의 예제에서 "align"이라는 속성에 "center"라는 값을 지정했다.

 

 

5. 내용 : (Contents:컨텐츠)

시작태그와 종료태그 사이에 들어가 있는 내용. (설명이 뭐 이래!) 예를 들어보자.

예) <p>문단내용</p>

"문단내용"이 내용이 되겠다.

 

 

참고:

<br/>과 <br />의 차이는 무엇일가요?

결론은 <br />이 더 호환성이 좋다. 공백이 없을 경우 아주 오래된 브라우저의 경우(넷스케이프 등)

<br/> 태그를 "/"까지 모두 태그 명으로 간주해서 br/로 인식해버린다. 따라서 공백을 통해 br임을 명시해주는 것이다.

하지만 HTML5에서는 그냥 <br/>을 사용해도 무방하다!(정확한 HTML5 표준은 <br>이다. /가 없어도 된다! 슬러시는 xhtml의 유산이기 때문이다!) 옛날 브라우저와의 호환성까지 염두에 둔다면 <br />을 사용하면 되지만 꼭 그럴 필요가 있으려나...