HTML 요소

관련 출처 :

• [위키백과] HTML 요소
• [위키백과] 문서 객체 모델
• [생활코딩] WEBn - 혁명적인 변화
• [생활코딩] WEBn - 통계에 기반한 학습
  
• [The average web page] Overview
• [홈짱 닷컴 홈페이지 제작가이드] HTML의 구성요소 태그(Tag), 요소(Element), 속성(Attribute), 변수(Arguments)
• [Clearboth] 요소와 태그

크롬에서 마우스 오른쪽 클릭 후 [페이지 소스보기(View Page Source)] 또는 단축키 Ctrl+U를 통해 소스 확인이 가능하다. 아래는 티스토리 메인 화면(www.tistory.com)의 소스를 확인한 결과이다.

또는 [F12]를 누르거나 크롬 [메뉴]의 [도구 더보기]-[개발자 도구]를 실행시키면 아래와 같이 현재 페이지와 소스 코드가 함께 나타난다.

하나의 페이지는 다양한 태그들로 구성되어 있는 것을 확인할 수 있다. 각각의 태그들은 그에 해당하는 의미를 담고 있으며 HTML 문서를 이루는 구조가 된다.

DOM

HTML은 W3C(World Wide Web Consortium)에서 지정한 표준에 맞춰 작성된다. 그 중, DOM은 W3C가 표준화한 여러 개의 API의 기반이 된다.

DOM은 플랫폼/언어 중립적으로 구조화된 문서를 표현하는 W3C의 공식 표준으로, 문서 객체 모델(DOM; Document Object Model)은 객체 지향 모델로써 구조화된 문서를 표현하는 형식이다.

DOM은 HTML 문서의 요소를 제어하기 위해 웹 브라우저에서 처음 지원되었다. DOM은 동적으로 문서의 내용, 구조, 스타일에 접근하고 변경하는 수단이었다. 브라우저 사이에 DOM 구현이 호환되지 않음에 따라, W3C에서 DOM 표준 규격을 작성하게 되었다.

DOM은 문서의 기반이 되는 데이터 구조에 제한을 두지 않는다. 잘 구조화된 문서는 DOM을 사용하여 아래와 같은 트리 구조를 얻어낼 수 있다.

태그(Tag) & 요소(Element)

태그와 요소는 엄밀히 말하면 다른 용어이다. 실제로 W3C의 HTML 4.01 Specification를 살피면 아래와 같이 태그와 요소가 다름을 언급하고 있다.

Elements are not tags. Some people refer to elements as tags (e.g., “the P tag”). Remember that the element is one thing, and the tag (be it start or end tag) is another. For instance, the HEAD element is always present, even though both start and end HEAD tags may be missing in the markup.

각각을 정의하자면 아래와 같다.

• 요소 : 시작 태그(또는 여는 태그)와 종료 태그(또는 닫는 태그)로 이루어진 모든 명령어. 태그에 쌓인 내용까지 해당된다.
• 태그 : 시작 태그와 종료 태그. 내용은 해당되지 않는다.

먼저 아래의 예시를 살펴보자. 예시는 티스토리의 웹 페이지 타이틀을 나타낸 것이다.

<title>TISTORY</title>

태그란 꺾쇠 괄호 <> 에 둘러싸인 것을 의미하므로 <title>과 </title>이 태그가 된다. 그리고 태그로 둘러쌓인 내용인 "TISTORY"까지 포함된 <title>TISTORY</title> 전체가 요소가 된다. 여기서 앞에 존재하는 <title>이 요소의 시작을 알리는 시작 태그이고, 뒤에 존재하는 </title>이 요소의 끝을 알리는 종료 태그이다.

즉, 요소는 의미적인 하나의 덩어리를 뜻하고, 태그는 하나의 덩어리로 묶어주는 도구이다.

속성(Attribute) & 변수(Arguments)

속성(Attributes)은 주로 요소의 시작 태그 안에서 사용되는 것으로 태그의 성격을 좀 더 구체화시킨다. 아래의 예시는 티스토리의 메인 페이지에 있는 사진 부분을 나타낸 것이다.

<img src="https://t1.daumcdn.net/cfile/tistory/9964F44F5B07729A01"

class="img_g" alt="제3회 스토리글판 당선작 - 삶은 계속되고 아직 꿈꿀 시간은 많아요. 당신은 생각보다 잘하고 있어요."width="925" height="400">

해당 요소는 이미지를 삽입하는 태그인 <img /> 태그로 이루어져 있다. 종료 태그 없이 단독으로 사용되는 태그로 만약 <img /> 로만 사용한다면 어떤 사진을 불러와야 할지, 해당 사진의 크기는 어느 정도로 지정해 줘야 할지 알 수 없다. 따라서, 여기에 필요한 것이 속성이다.

예시를 보면 먼저, 경로를 지정해 주기 위해 src 속성을 부여해 주었다. 그리고 크기를 지정해 주기 위해 가로 속성인 width, 세로 속성인 height 속성을 부여해 줬다. 그 외에도 코드 관리를 위해 class와 alt 속성을 추가로 지정해주었다.

그리고 이 속성에 관련된 값이 바로 변수이다. "https://t1.daumcdn.net/cfile/tistory/9964F44F5B07729A01"가 src 속성의 변수이다. 그리고 "925"와 "400"이 각각 속성 width와 height의 변수이다.

이처럼 속성과 변수를 통해 태그를 구체적이고 상세히 지정해 줄 수 있음을 확인했다.

문법

HTML 문법에서 대부분의 요소들은 시작 태그와 종료 태그로 작성되며 그 사이에 내용이 들어간다. 앞서 살펴본 바와 같이 요소는 아래와 같은 구조를 띈다.

<tag attribute="arguments"...> contents </tag>

시작 태그와 종료 태그는 아래와 같이 정의된다.

• 시작 태그 (<tag>) : 요소의 시작을 알리며 수많은 속성을 포함할 수 있다.
• 종료 태그 (</tag>) : 요소의 종료를 알리며 슬래시를 포함하고 있다.

그러나 모든 요소에 종료 태그가 "필수"인 것은 아니다. 앞서 살펴본 <img /> 태그의 경우 종료 태그가 존재하지 않는다. 또한 일부 요소들의 경우 시작 태그와 종료 태그를 둘 다 생략할 수도 있다.

HTML에서 주석은 아래와 같이 작성한다.

<!-- 주석 -->

주석은 문서 내 어디든 올 수 있으며 doctype 선언 이전에도 올 수 있다.

태그의 종류

HTML의 태그에는 <title></title>, <img /> 태그 외에도 수없이 많은 종류가 존재한다. 이 모든 태그를 외울 수는 없다.

아래의 그래프는 구글에서 전 세계에 있는 수많은 웹페이지를 분석한 결과이다. 전 세계에 있는 웹페이지들이 몇 종류의 태그로 이루어져 있는지를 분석한 것으로, 이에 따르면 평균적으로 사이트에서 25개의 태그를 사용함을 확인할 수 있다.

(출처 : https://www.advancedwebranking.com/html/#overview)

25개의 태그들의 사용 빈도는 아래와 같다.

통계에서 확인한 바와 같이 자주 사용되는 태그에 대해서만 인지하고 외워두고 있어도 괜찮다. 만약 모르는 태그가 존재한다면 검색하는 방법도 한 방법이다.