HTML 요소(Elements)란 무엇일까?

HTML 요소의 의미
html에서의 요소(Elements)는 일반적으로 중간에 삽입된 시작태그와 종료태그로 구성된 것을 말한다. 더 구체적으로 설명하면 <tagname>컨텐츠 내용…</tagname> 에서 시작태그와 종료 태그까지의 모든 것을 뜻한다. 일반적 요소 = 태그 표현하기도 한다. 태그를 요소라고 말하고, 요소를 태그라고 해도 된다.

예제

<p>첫번째 단락이다.</p>

이것이 요소(Elements)이다.

※내용이 없는 html 요소는 빈 요소라고 한다. 빈 요소에서는 < br> 요소(줄 바꿈)와 같은 종료 태그가 없는 경우도 있다.

중첩된 HTML 요소

html 요소는 중첩되어서 사용할 수 있다. 이미 우리는 지난시간에서 중첩된 요소를 사용하였다. 모든 html 문서의 요소들은 서로 중첩되어 구성된다.

아래는 총 4개의 html 요소가 포함되어 있는걸 확인할 수 있다.

예제

<!DOCTYPE html>
<html>
<body>

<h1>큰 제목요소이다.</h1>
<p>단락 요소이다.</p>

</body>
</html>

예제 설명

<html> 요소는 전체 문서를 정의한다. 이것은 시작 태그 <html>…</html> 형식으로 나타낸다. <html> 요소안에 <body> 요소가 들어가 있는걸 확인할 수 있다.

<html>
<body>

<h1>큰 제목요소이다.</h1>
<p>단락 요소이다.</p>

</body>
</html>

<body> 요소는 문서 본문을 정의한다. 이것은 시작 태그 <body>…</body> 형태로 나타내게 된다. 다음 <body> 요소안에 2개의 다른 html 요소인 <h1>, <p>가 존재한다.

<body>

<h1>큰 제목요소이다.</h1>
<p>단락 요소이다.</p>

</body>

<h1> 요소는 제목을 정의하게 된다. 이것의 시작 태그는 <h1>…</h1> 형태로 나타낸다. 요소의 내용은 “큰 제목요소이다”라고 표시된다.

<h1>큰 제목요소이다.</h1>

<p> 요소는 단락을 정의하게 된다. 이것의 시작 태그는 <p>…</p> 형태로 나타내게 된다. 요소의 내용은 “단락 요소이다.”라고 표시된다.

<p>단락 요소이다.</p>

HTML 종료 태그

일반적으로 html 태그를 사용할때에 종료 태그도 함께 사용해야되지만 종료 태그를 잊어버리고 적지 않아도 html 요소는 올바르게 표시되게 된다.

예제

<!DOCTYPE html>
<html>
<body>

<p>종료 태그 없이 된다.
<p>아무런 문제가 없다.

</body>
</html>

위 예제는 모든 브라우저에서 정상작동 되게 된다. 그 이유는 종료 태그는 선택 사항으로 간주되기 때문이다. 하지만 종료 태그를 사용하지 않는다면, 프로그램 상 문제가 발생할 수 있고 각종 오류가 생길수 있기 때문에 꼭 종료태그를 사용할 것을 권장한다.

HTML 빈 요소

내용이 없는 html 요소를 빈 요소라고 한다. <br> 줄 바꿈 요소의 경우 닫는 태그 없는 빈 요소이다.

예제

<!DOCTYPE html>
<html>
<body>

<p>IT opening 사이트<br>방문해주셔서 정말 감사합니다. 더욱 열심히 하겠습니다.</p>

</body>
</html>

비어 있는 요소는 시작태그에서는 닫을수 있게 된다. 예를 들어 <br>…</br> 형식으로는 가능하다. 하지만 html5에서는 빈 요소를 닫을 필요는 없다.

다만, 조금 더 엄격하게 유효성 검사를 원하거나 XML 파서로 문서를 읽을 수 있도록해야되는 경우 모든 html 요소를 올바르게 사용하는것이 바람직 하다.

HTML 대소문자 구분을 할까?

html 태그는 대소문자 구분 하지 않는다. 가령 <P> 와 <p>는 같은 것이다.

다만, html5 표준에서는 소문자 태그를 필요하지는 않지만, xhtml과 같은 조금 더 엄격한 문서 유형에서는 소문자 태그를 사용할 것을 요구하기도 한다.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다