HTML 개요
HyperText 마크업 언어(HTML)는 웹에 표시되는 문서의 구조를 설명하는 표준 마크업 언어이다. HTML은 의미 있는 방식으로 문서를 구조화하기 위해 문서의 모든 구성요소를 마크업하는데 사용되는 일련의 요소와 속성으로 구성된다.
HTML 문서는 기본적으로 HTML요소와 텍스트 노드를 포함한 노드의 트리다. HTML요소는 단락,목록, 표 만들기, 이미지 삽입, 양식 컨트롤 삽입, 등 문서에 대한 의미와 서식을 제공한다. 각 요소는 여러 속성을 지정할 수 있다. 다른 요소 및 텍스트를 여러 요소에 콘텐츠가 있을 수 있다. 다른 요소는 비어 있으며 태그와 속성이 기능을 정의한다.
요소에는 메타데이터, 섹션 지정, 텍스트, 인라인 의미 체계, 양식, 양방향, 미디어, 구성요소, 스크립팅 등 여러 카테고리가 있다.
텍스트 노드(text node): 요소 노드 안에 있는 텍스트, 즉 HTML 내에 있는 모든 텍스트를 뜻하는 노드.
요소
HTML은 일련의 요소로 구성되며 여러 부분을 묶거나 래핑하여 특정 방식으로 표시되거나 작동하도록 한다. HTML요소는 꺾쇠괄호 (< 및 >)를 사용하여 작성된 태그로 구분한다.
페이지 제목은 제목 수준 1이며 <h1> 태그를 사용한다. 실제 제목인 '머신러닝 워크숍'은 요소의 콘텐츠다. 콘텐츠는 여는 태그와 닫는 태그 사이에 위치한다. 여는 태그, 닫는 태그, 콘텐츠 전체가 바로 요소이다.
닫는 태그는 여는 태그와 같은 태그이며, 앞에 슬래시가 붙는다.
요소와 태그가 정확히 같은 것은 아니지만, 많은 사람들이 서로 같은 용어를 사용합니다. 태그 이름은 괄호 안의 내용입니다. 태그에 대괄호가 포함되어 있습니다. 이 경우 <h1>입니다. '요소' 는 여는 태그와 닫는 태그와 이러한 태그 사이의 모든 콘텐츠(중첩된 요소 포함)다.
대체된 요소
<input type="range">
<img src="switch.svg" alt="light switch">이 예에서는 대체된 두 요소 img와 input가 텍스트가 아닌 콘텐츠, 즉 이미지와 그래픽 사용자 인터페이스 객체로 각각 대체된다.
대체된 요소와 void 요소는 자주 혼동된다. void 요소는 모두 자동으로 닫히는 요소이며 하나의 태그로 표현된다. 즉, void 요소에 닫는 태그가 없다. 원하는 경우 태그 끝에 슬래시를 포함할 수 있다. 그러면 많은 사용자가 마크업을 쉽게 읽을 수 있다. 계속해서 이 예에서 슬래시를 사용하여 태그를 자동으로 닫는다.
끝에 있는 슬래시는 요소가 자동으로 닫히며 일치하는 끝 또는 닫는 태그가 없음을 나타내는 방법이다.
Void 요소는 텍스트 콘텐츠 또는 중첩된 요소를 포함할 수 없다. Void 요소에는 br, col, embed, hr, img, input, link, meta, source, track, wbr 등이 있다.
