Editing

플로우 콘텐츠(flow content)

플로우 콘텐츠(flow content)는 문서 및 애플리케이션 본문에 사용되는 대부분의 요소들을 대상으로 한다.

개요

HTML5에서는 태그 분류를 새롭게 도입했다. 분류 개념으로 가장 넓은 범위를 가진 것은 플로우 콘텐츠(flow content)이다. 과거에는 볼록 레벨(block level) 요소로 불리었으나 현재의 W3C 명세에서는 플로우 콘텐츠( flow content)로 새롭게 분류했다. 과거의 볼록 레벨(block level) 대부분의 요소는 이제 플로우 콘텐츠(flow content)를 불리게 되었다.

플로우 콘텐츠(flow content) 내에 헤딩(heading), 대화(interactive), 구문(phrasing), 구획(section), 엠베디드(embeded), 메타데이터(metadata)가 있다. 사실 각 태그가 명확하게 하나의 분류만을 갖는 것이 아니다. 사용되는 것에 따라 상위 분류가 달라질 수 있기도 하다. 다음 다이어그램은 그러한 분류 체계를 잘 보여주고 있다.

Contents Categories

[출처] W3C

조건에 따른 플로우 콘텐츠(flow content)로 분류

<area>: <map> 요소의 자식인 경우
<link>: <body> 요소에 위치하는 경우
<main>: 계층적으로 올바른 요소인 경우
<meta>: itemprop 속성이 있는 경우; {{conn_doc_7737}}

플로우 콘텐츠(flow content) 태그

다른 네임스페이스를 갖는 콘텐츠를 수용

MathML의 <math>, SVG의 <svg>가 대표적이다. <math>와 <svg>는 각각 해당 콘텐츠의 최상위 요소이며 HTML과는 다른 네임스페이스를 가지고 있다. HTML의 태그는 아니지만 현재 분류에서 수용 가능한 콘텐츠로 포함된다.

〈a〉

href 애트리뷰트 명시 유무에 따라 역할이 다르다. href 애트리뷰트가 명시되면 하이퍼링크(hyperlink)로 작동하는 콘텐츠의 일부가 되지만 그렇지 않다면 하이퍼링크(hyperlink)의 목적지가 되는 자리 표시자 역할을 한다.

〈abbr〉

선택적으로 확장과 함께 약어 또는 두문자어를 나타낸다.

〈address〉

HTML 문서와 직접 연관된 사람 또는 조직의 연락처 정보를 나타낸다.

〈article〉

문서, 페이지, 응용 프로그램 또는 웹사이트의 완전하거나 독립적인 구성을 나타낸다. 원칙적으로 독립적으로 배포하거나 재사용할 수 있다.

포럼 게시물, 잡지 또는 신문 기사, 블로그 항목, 커뮤니티 댓글, 대화형 위젯(widget) 또는 가젯(gadget) 또는 기타 독립적인 콘텐츠 항목이 될 수 있다.

〈aside〉

페이지에서 기본 콘텐츠와 접선적으로 관련되어 있으며 별개로 간주될 수 있는 콘텐츠로 구성된 페이지 섹션을 나타낸다.

〈audio〉

사운드 또는 오디오 스트림(stream)을 나타낸다.

〈b〉

문서 요약의 핵심 단어, 리뷰의 제품 이름, 대화형 텍스트 기반 소프트웨어의 실행 가능한 단어 또는 기사 리드와 같이 추가적인 중요성을 전달하지 않고 대체 음성이나 분위기의 영향 없이 실용적인 목적으로 주의를 끄는 텍스트 범위를 나타낸다.

〈bdo〉

자식에 대한 명시적 텍스트 방향성 서식 컨트롤을 나타낸다. 개발자는 방향 재정의를 명시적으로 지정하여 유니코드 양방향 알고리즘을 재정의할 수 있다.

〈bdi〉

양방향 텍스트 서식 지정을 위해 주변과 격리될 텍스트의 범위를 나타낸다.

〈blockquote〉

다른 소스에서 인용된 섹션을 나타낸다.

〈br〉

줄 바꿈을 나타낸다.

〈button〉

하위 요소의 콘텐츠로 지정된 버튼을 나타낸다.

〈canvas〉

Canvas API 또는 WebGL API를 사용해서 그래픽 처리와 애니메이션 등 시각적 이미지를 즉시 렌더링하는 데 사용한다.

〈cite〉

작품(책, 논문, 에세이, 시, 악보, 노래, 대본, 영화 등)의 제목을 나타낸다. 자세히 인용되거나 참조되는 저작물일 수도 있고 단순히 언급되는 저작물일 수도 있다.

〈code〉

컴퓨터 코드의 조각을 나타낸다. XML 요소 이름, 파일 이름, 컴퓨터 프로그램 또는 컴퓨터가 인식할 수 있는 기타 문자열일 수 있다.

〈data〉

기계가 읽을 수 있는 값을 제공하는 용도로 사용된다.

〈del〉

문서에서 제거를 나타낸다. 암시된 단락 경계를 넘지 않아야 한다.

〈details〉

사용자가 추가 정보를 선택적으로 보임과 숨김 처리를 할 수 있는 공개 위젯을 생성한다. 하나의 <summary> 요소를 자식으로 사용하여 추가 정보에 대한 요약 또는 레이블을 표시해야 한다.

〈dfn〉

정의 구문 또는 문장의 컨텍스트 내에서 정의되는 용어를 나타낸다. 가장 가까운 조상인 <p>, <dt>/<dd> 그룹, <section>은 용어의 정의로 간주된다.

〈div〉

콘텐츠의 기본적인 영역을 나누는 용도로 가장 광범위하게 사용된다.

〈dl〉

정의형 목록(definition list)을 생성하는 래퍼(wrapper) 요소이다.

〈em〉

텍스트 콘텐츠 일부에 대해 강조를 나타낸다.

〈embed〉

외부 애플리케이션 또는 대화형 콘텐츠에 대한 통합 지점을 제공한다.

〈fieldset〉

선택적인 캡션(<legend>)과 함께 그룹화된 양식(form) 요소 또는 컨텐츠 집합을 나타낸다.

〈figure〉

선택적으로 캡션(<figcaption>)을 추가해 피규어(figure)를 표시하는 플로우 콘텐츠(flow content)를 나타낸다.

〈footer〉

가장 가까운 상위 섹션 콘텐츠 요소의 바닥글을 나타내거나 상위 섹션이 없는 경우 <body> 요소의 바닥글을 나타낸다. <footer>에는 일반적으로 작성자, 관련 문서 링크, 저작권 데이터 등 해당 섹션에 대한 정보가 포함된다.

〈form〉

사용자로부터 정보를 입력 받는 양식을 작성하는 양식 그룹을 나타낸다. 양식 요소에 입력된 값은 서버에 전송될 수 있으며 자체적으로 사용하기도 한다.

〈h1〉~〈h6〉

6단계의 제목을 표시한다. <h1>이 가장 큰 크기의 제목이 표시되고 <h6>가 가장 작은 크기의 제목이 표시된다.

〈header〉

문서에서 소개 또는 탐색 지원 인터페이스를 가진 그룹을 나타낸다.

〈hgroup〉

제목 및 관련 콘텐츠를 나타낸다.

〈hr〉

단락 수준의 주제 구분을 위한 수평선을 생성한다. 또는 <select> 요소의 <option> 집합 사이의 구분선을 생성하기도 한다.

〈i〉

다른 음성이나 분위기의 텍스트 범위를 나타내거나 분류학적 지정, 기술 용어, 다른 언어의 관용구, 음역, 생각 또는 서양 텍스트의 선박 이름과 같은 텍스트의 다른 품질을 나타내는 방식으로 일반 구문에서 오프셋을 나타낸다.

〈iframe〉

문서 내에 프레임(frame)을 생성해 콘텐츠를 탐색할 수 있음을 나타낸다.

〈img〉

이미지를 출력한다.

〈input〉

입력 방식이 지정된 데이터 필드를 나타내며 일반적으로 사용자가 편집할 수 있는 양식 컨트롤을 나타낸다.

〈ins〉

문서에 대한 추가 사항을 나타낸다.

〈kbd〉

사용자 입력을 나타낸다. 일반적으로 키보드 입력이지만 음성 명령과 같은 다른 입력을 나타내는 데 사용될 수도 있다.

〈label〉

사용자 인터페이스 항목의 이름 또는 설명을 나타낸다.

〈main〉

문서의 중심 콘텐츠를 나타낸다.

〈map〉

<area> 요소와 함께 이미지의 특정 영역(맵)에 링크를 지정할 때 사용한다.

〈mark〉

다른 컨텍스트(context)와의 관련성으로 인해 참조 목적으로 표시되거나 강조 표시된 한 문서의 텍스트 실행을 나타낸다.

〈menu〉

정렬되지 않은 항목 목록(<li>) 형식의 콘텐츠로 구성된 도구 모음을 나타낸다. 각 항목은 사용자가 수행하거나 활성화할 수 있는 명령을 갖는다.

〈meter〉

알려진 범위 내의 스칼라(scalar) 측정 또는 분수 값을 나타낸다. value 값을 토대로 시각적 표시를 하는 <progress> 요소와 비슷해 보이지만 데이터(value)의 가치에 대한 시각적 표시를 차별화할 수 있다.

〈nav〉

다른 페이지 또는 페이지 내의 특정 위치로 연결되는 탐색 링크가 있는 섹션을 나타낸다.

〈noscript〉

유저 에이전트가 스크립트 유형을 지원하지 않거나 스크립트를 비활성화한 경우 하위 요소를 나타낸다. 그 반대의 경우는 아무것도 나타내지 않는다. 문서가 구문 분석되는 방식에 영향을 주어 스크립트를 지원하는 유저 에이전트와 지원하지 않는 유저 에이전트에 서로 다른 마크업을 제공하는 데 사용된다.

〈object〉