HTML 요소(Elements)
HTML 요소(HTML 엘리먼트, HTML element)는 HTML 문서나 웹 페이지를 이루는 개별적인 요소를 의미하며, 문서 객체 모델(DOM)으로 파싱된다
HTML 요소 - 위키백과
요소(Elements)와 태그(TAG)
요소와 태그는 널리 혼동되는 용어들이다. HTML 문서들은 태그를 포함하지만 요소를 포함하지는 않는다. 요소는 구문 분석 단계 "이후"에 이 태그들로부터 생성된다.
HTML 요소 - 위키백과
요소의 위치는 시작 태그로부터 신장되며 일부 차일드 콘텐츠를 포함할 수 있으며 종료 태그로 종료된다. HTML 문서 내의 다수의 요소에 해당되지만 모든 요소에 해당되는 것은 아니다.
HTML 요소 - 위키백과
빈 태그
닫는 태그가 없는 태그를 말합니다.
빈 태그, 공백 태그, Empty Tag라고 부릅니다.
작성 방식은 <태그> or <태그 />
슬래시(/)를 붙이거나 붙히지 않아도 되지만 일반 태그와 혼동이 올 수도 있으니 슬래시를 붙혀 <태그 />로 사용하는 것을 추천 합니다.
빈 태그의 종류는 빈 태그 목록 - MDN 을 참고.
Inline 요소와 Block 요소
Inline 요소
글자를 만들기 위한 요소, 콘텐츠의 흐름을 끊지 않고 요소를 구성하는 태그에 할당된 공간만 차지합니다.
Inline 요소의 특징
- 요소가 수평으로 쌓여갑니다.
- 글자로 취급되기 때문에 태그에 가로/세로 크기를 지정해도 제대로 적용되지 않습니다.
- 포함한 콘텐츠 만큼 크기가 자동 조절됩니다.
- margin, padding 속성으로 내/외부 여백을 지정할때 좌/우 여백은 지정이되나 위/아래 여백은 정상적으로 적용되지 않습니다.
- Inline 요소는 Block 요소(Ex. div)를 자식으로 포함할 수 없습니다.
Inline 요소 목록 - MDN에서 해당되는 태그들을 확인할 수 있습니다.
Block 요소
상자(레이아웃)을 만들기 위한 요소, 부모 요소의 전체 공간을 차지하여 "블록"을 만듭니다.
Block 요소의 특징
- 요소가 수직으로 쌓여갑니다.
- 언제나 새로운 줄에서 시작하고 부모 요소의 크기만큼 자동으로 최대한 늘어납니다.
- 요소에 가로/세로 크기 지정이 가능합니다
- 내/외부 여백 지정이 가능합니다.
- 자식으로 Inline, Block 요소 모두 포함할 수 있습니다.
Block 요소 목록 - MDN에서 해당되는 태그들을 확인할 수 있습니다.
HTML5에서의 Inline 요소와 Block 요소??
HTML5 이전에는 HTML 태그들을 Inline과 Block 요소 두 종류로만 구분했습니다.
하지만 HTML5 버전에 들어서면서 Inline, Block 구분이 아닌 태그의 특성에 따라 총 7종류의 카테고리로 분류하고 있습니다.
- Metadata Content(메타 데이터 콘텐츠)
문서의 표현이나 동작을 설정하거나 다른 문서와의 관계를 설정하고 정보를 전달하는 콘텐츠
base, command, link, meta, noscript, script, style...- Flow Content(플로우 콘텐츠)
문서나 애플리케이션(Application)의 본문(body 태그) 안에서 사용되는 콘텐츠
div, span, img, input, a, audio, b, ul ...- Sectioning Content(구획 콘텐츠)
Heading Content와 Footer를 정의하는 콘텐츠
article, aside, nav, section- Heading Content(제목 콘텐츠)
Sectioning Content의 header를 정의하는 콘텐츠
h1~6- Phrasing Content(구문 콘텐츠)
텍스트와 텍스트가 포함된 마크업을 정의하는 콘텐츠
br, command, em, igm, strong, label, script...- Embeded Content(임베디드 콘텐츠)
다른 리소스나 콘텐츠를 문서에 삽입하는 콘텐츠
audio, canvas, embed, iframe, img, math...- Interactive Content(인터렉티브 콘텐츠)
사용자와의 상호작용을 위해 사용되는 콘텐츠
button, details, embed, select, keygen, label...자세한 내용은 콘텐츠 카테고리-MDN를 참고해주세요.
