제5강.  HTML 요소(Element)

 

 

동영상 강좌보기

HTML 요소(Element)

HTML요소는 일반적으로 시작태그와 종료태그, 그 사이 내용으로 구성됩니다.

 <태그이름>내용...</태그이름>

HTML요소는 시작태그 + 내용 + 종료태그를 의미합니다.

(내용이 없는 html요소는 빈요소(empty elements)라고 합니다. <br>요소는 내용 및 종료태그가 없습니다.)

 

HTML요소의 중첩

HTML요소는 중첩될 수 있습니다. (요소안에 요소가 포함될 수 있습니다.)

모든 html문서는 중첩된 html요소로 구성됩니다.

아래 예제는 4개의 html요소가 포함되어 있습니다.

<!DOCTYPE html>
<html>
<body>

<h1>첫번째 표제</h1>
<p>첫번째 단락</p>

</body>
</html>
Markup

예제 설명

웹문서는 <html>시작태그로 시작하고 </html>종료태그로 끝납니다.

웹문서의 내용은 <body>요소 안에 들어갑니다.

내용은 <body>시작태그와 </body>종료태그 안에 들어갑니다.

위 예제에서는 내용안에 <h1>, <p>  두 개의 html 요소가 있습니다.

<h1>요소는 문단의 제목을 정의합니다.

<p>요소는 문단을 정의합니다.

 

종료태그를 잊지 마세요

종료태그를 잊어버린 경우에도 일부 html요소가 올바르게 표시됩니다.

<html>
<body>

<p>문단
<p>문단

</body>
</html>
Markup

위 예제는 모든 브라우저에서 정상인 것처럼 작동합니다. 이유는 종료태그(닫기태그)는 선택사항으로 간주되기 때문입니다.

그래도 이렇게 코딩을 하면 안됩니다. 종료태그를 생략하면 예기치 않은 결과 및 오류를 발생할 수 있습니다.

 

빈 HTML(empty element) 요소

내용이 없는 HTML요소를 빈요소라고 합니다.

<br>은 종료태그(닫는태그)가 없는 대표적인 빈요소입니다.(<br>태그는 줄바꿈을 정의합니다.)

빈요소는 다음과 같이 시작태그에서 강제로 닫을 수 있습니다. <br />

 

HTML5에서는 빈요소를 닫을 필요가 없습니다. 그러나 보다 엄격한 유효성 검사를 원하거나 XML파서로 문서를 읽을 수 있도록 해야 하는 경우 모든 HTML요소를 올바르게 닫아야 합니다.

 

소문자 태그 사용

HTML태그는 대소문자를 구분하지 않습니다. <P>와 <p>는 같습니다.

HTML5표준은 소문자 태그가 강제사항은 아니지만 W3C는 HTML에서 소문자를 권장합니다.

XHTML같은 엄격한 문서유형인 경우는 소문자를 요구합니다.