Content Categories

HTML 태그는 컨텐츠의 종류에 따라 정의 할 수 있습니다. 이러한 요소는 콘텐츠 모델로 정의 할 수 있습니다. 컨텐츠 요소는 Metadata Content, Flow Content, Section Conetnt, Heading Content, Phrasing Content, Embedded Content, Interactive Content, Palpable Content 등으로 분류됩니다.

메타데이터 콘텐츠 (Metadata Content)

• 웹 문서와 관련된 정보를 표현하는 콘텐츠와 다른 문서와의 관계를 유지하는 콘텐츠입니다.

요소	설명
<base>	<base> 태그는 문서의 모든 URL의 기본이 되는 기본 URL을 설정합니다.
<command>	<command> 태그는 사용자가 호출 할 수 있는 명렁어를 설정합니다.
<link>	<link> 태그는 문서와 외부 파일 연결 할 때 설정합니다.
<meta>	<meta> 태그는 문서에 대한 정보를 제공합니다.
<noscript>	<noscript> 태그는 스크립트를 지원하지 않는 브라우저를 위한 대체 태그입니다.
<script>	<script> 태그는 스크립트를 정의합니다.
<style>	<style> 태그는 문서에 대한 스타일 정보를 정의합니다.
<title>	<title> 태그는 웹 문서의 타이틀을 정의합니다.

플로우 콘텐츠 (Flow Content)

• 대분분 body요소 안에서 사용하는 요소들입니다.
• a, abbr, address, area(map 요소의 자식 요소인 경우), article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, style (scoped 속성이 있으면), sub, sup, svg, table, textarea, time, ul, var, video, wbr

요소	설명
<a>	<a> 태그는 하이퍼 링크를 정의합니다.
<abbr>	<abbr> 태그는 생략된 글자나 머리글자를 표시하는데 사용합니다.
<address>	<address> 태그는 웹 페이지의 연락처 정보를 설정합니다.
<area>	<area> 태그는 이미지 맵의 영역을 정의합니다.
<article>	<article> 태그는 웹 문서 내에 독립적인 컨텐츠를 정의합니다.
<aside>	<aside> 태그는 웹 문서 내에 사이드 컨텐츠를 정의합니다.
<audio>	<audio> 태그는 오디오 파일을 정의합니다.
<b>	<b> 태그는 글씨를 두껍게 표현할 때 사용합니다.
<bdi>	<bdi> 태그는 텍스트의 출력 방향을 브라우저가 판단해 표현합니다.
<bdo>	<bdo> 태그는 텍스트의 방향을 설정합니다.
<blockquote>	<blockquote> 태그는 긴 문장의 인용문을 정의합니다.
<br>	<br> 태그는 텍스트를 줄바꿈 할 때 사용합니다.
<button>	<button> 태그는 클릭 할 수 있는 버튼을 설정합니다.
<canvas>	<canvas> 태그는 비트맵 방식의 그림을 정의합니다.
<cite>	<cite> 태그는 작품의 제목을 정의합니다.
<code>	<code> 태그는 마크업 코드를 정의합니다.
<command>	<command> 태그는 사용자가 호출 할 수 있는 명렁어를 설정합니다.
<datalist>	<datalist> 태그는 <input> 요소의 미리 정의된 옵션의 리스트를 정의합니다.
<del>	<del> 태그는 문서의 삭제된(delete) 텍스트를 정의합니다.
<details>	<details> 태그는 컨텐츠를 숨기거나 보여줄 수 있습니다.
<dfn>	<dfn> 태그는 전문적인 용어를 정의할 때 사용합니다.
<div>	<div> 태그는 문서의 영역을 나누거나 그룹화 할 때 사용합니다.
<dl>	<dl> 태그는 설명 목록을 정의합니다.
<em>	<em> 태그는 텍스트를 강조하는데 사용합니다.
<embed>	<embed> 태그는 외부 어플리케이션을 연결합니다.
<fieldset>	<fieldset> 태그는 폼 요소의 그룹 내부 영역을 설정합니다.
<figure>	<figure> 태그는 그림, 도표, 사진, 코드 등의 표현을 정의합니다.
<footer>	<footer> 태그는 웹 문서 내에 사이트 푸터 영역을 정의합니다.
<form>	<form> 태그는 웹 서버에 정보를 제공하는 폼 컨트롤 유형을 정의합니다.
<h1>~<h6>	<h1> ~ <h6> 태그는 제목 영역을 설정합니다.
<header>	<header> 태그는 웹 문서 내에 소개 및 내비 영역을 정의합니다.
<hgroup>	<hgroup> 태그는 제목 요소 그룹화를 정의합니다.
<hr>	<hr> 태그는 단란간의 주제별 구분을 나타냅니다.
<i>	<i> 태그는 기술적인 구문, 다른 언어 및 사상, 선박이름에 정의합니다.
<iframe>	<iframe> 태그는 HTML문서 내에 다른 문서를 포함하는데 사용합니다.
<img>	<img> 태그는 문서에 이미지를 표현할 때 사용합니다.
<input>	<input> 태그는 데이터를 입력할 수 있는 폼 컨트롤을 정의합니다.
<ins>	<ins> 태그는 문서에 삽입된 텍스트를 정의합니다.
<kbd>	<kbd> 태그는 키보드 입력을 정의합니다.
<keygen>	<keygen> 태그는 보안키를 생성하고 컨트롤합니다.
<label>	<label> 태그는 <input> 요소의 라벨을 지정합니다.
<map>	<map> 태그는 이미지 맵을 정의합니다.
<mark>	<mark> 태그는 참조용 표시를 정의합니다.
<menu>	<menu> 태그는 메뉴 리스트를 정의합니다.
<meter>	<meter> 태그는 범위를 측정하는 게이지 정보를 정의합니다.
<nav>	<nav> 태그는 웹 문서 내에 네비게이션 링크를 정의합니다.
<noscript>	<noscript> 태그는 스크립트를 지원하지 않는 브라우저를 위한 대체 태그입니다.
<object>	<object> 태그는 문서내에 포함된 멀티미디어 요소를 정의합니다.
<ol>	<ol> 태그는 순서가 있는 목록(ordered list)을 정의합니다.
<output>	<output> 태그는 계산의 결과를 보여줍니다.
<p>	<p> 태그는 문단(paragraph)을 정의합니다.
<pre>	<pre> 태그는 마크업의 공백 및 줄바꿈을 정의합니다.
<progress>	<progress> 태그는 작업의 진행상태를 정의합니다.
<q>	<q> 태그는 짧은 인용을 정의합니다.
<ruby>	<ruby> 태그는 루비 주석을 정의합니다.
<s>	<s> 태그는 정확하지 않거나 올바르지 않은 텍스트를 정의합니다.
<samp>	<samp> 태그는 컴퓨터 프로그램의 샘플 출력을 식별하기위한 요소입니다.
<script>	<script> 태그는 스크립트를 정의합니다.
<section>	<section> 태그는 주제별 그룹의 콘텐츠 섹션을 정의합니다.
<select>	<select> 태그는 선택 목록을 정의합니다.
<small>	<small> 태그는 저작권 또는 법적인 텍스트를 정의합니다.
<span>	<span> 태그는 인라인 요소 그룹화를 정의합니다.
<strong>	<strong> 태그는 중요한 의미를 갖는 텍스트를 정의합니다.
<style>	<style> 태그는 문서에 대한 스타일 정보를 정의합니다.
<sub>	<sub> 태그는 텍스트 아래첨자(subscript)를 정의합니다.
<sup>	<sup> 태그는 텍스트 위첨자(superscript)를 정의합니다.
<table>	<table> 태그는 표를 정의합니다.
<textarea>	<textarea> 태그는 여러줄의 텍스트를 편집할 수 있는 컨트롤을 정의합니다.
<time>	<time> 태그는 날자와 시간을 정의합니다.
<ul>	<ul> 태그는 순서가 없는 목록을 정의합니다.
<var>	<var> 태그는 프로그램 코드에서 변수를 정의합니다.
<video>	<video> 태그는 미디어 영상을 재생합니다.
<wbr>	<wbr> 태그는 줄바꿈 할 위치를 정의할 때 사용합니다.

섹션 콘텐츠 (Sectioning content)

• 웹 문서의 섹션 영역을 정의하는 요소입니다.

요소	설명
<article>	<article> 태그는 웹 문서 내에 독립적인 컨텐츠를 정의합니다.
<aside>	<aside> 태그는 웹 문서 내에 사이드 컨텐츠를 정의합니다.
<nav>	<nav> 태그는 웹 문서 내에 네비게이션 링크를 정의합니다.
<section>	<section> 태그는 주제별 그룹의 콘텐츠 섹션을 정의합니다.

헤드 콘텐츠 (Heading content)

• 웹 문서의 제목 영역을 정의하는 요소입니다.

요소	설명
<h1>~<h6>	<h1> ~ <h6> 태그는 제목 영역을 설정합니다.
<hgroup>	<hgroup> 태그는 제목 요소 그룹화를 정의합니다.

프레이징 콘텐츠 (Phrasing content)

• 프레이징 콘텐츠는 문장과 텍스트가 관련된 요소입니다.

요소	설명
<base>	<base> 태그는 문서의 모든 URL의 기본이 되는 기본 URL을 설정합니다.
<abbr>	<abbr> 태그는 생략된 글자나 머리글자를 표시하는데 사용합니다.
<audio>	<audio> 태그는 오디오 파일을 정의합니다.
<b>	<b> 태그는 글씨를 두껍게 표현할 때 사용합니다.
<b>	<b> 태그는 글씨를 두껍게 표현할 때 사용합니다.
<bdo>	<bdo> 태그는 텍스트의 방향을 설정합니다
<br>	<brgt; 태그는 텍스트를 줄바꿈 할 때 사용합니다.
<button>	<button> 태그는 클릭 할 수 있는 버튼을 설정합니다.
<canvas>	<canvas> 태그는 비트맵 방식의 그림을 정의합니다.
<cite>	<cite> 태그는 작품의 제목을 정의합니다.
<code>	<code> 태그는 마크업 코드를 정의합니다.
<data>	<data> 태그는 주어진 내용을 기계가 읽을 수 있도록 설정합니다.
<datalist>	<datalist> 태그는 <input> 요소의 미리 정의된 옵션의 리스트를 정의합니다.
<dfn>	<dfn> 태그는 전문적인 용어를 정의할 때 사용합니다.
<em>	<em> 태그는 텍스트를 강조하는데 사용합니다.
<embed>	<embed> 태그는 외부 어플리케이션을 연결합니다.
<i>	<i> 태그는 음성이나 분위기 등의 텍스트를 정의합니다.
<iframe>	<iframe> 태그는 HTML문서 내에 다른 문서를 포함하는데 사용합니다.
<img>	<img> 태그는 문서에 이미지를 표현할 때 사용합니다.
<input>	<input> 태그는 데이터를 입력할 수 있는 폼 컨트롤을 정의합니다.
<kbd>	<kbd> 태그는 키보드 입력을 정의합니다.
<keygen>	<keygen> 태그는 보안키를 생성하고 컨트롤합니다.
<label>	<label> 태그는 <input> 요소의 라벨을 지정합니다.
<mark>	<mark> 태그는 참조용 표시를 정의합니다.
<meter>	<meter> 태그는 범위를 측정하는 게이지 정보를 정의합니다.
<noscript>	<noscript> 태그는 스크립트를 지원하지 않는 브라우저를 위한 대체 태그입니다.
<object>	<object> 태그는 문서내에 포함된 멀티미디어 요소를 정의합니다.
<output>	<output> 태그는 계산의 결과를 보여줍니다.
<progress>	<progress> 태그는 작업의 진행상태를 정의합니다.
<q>	<q> 태그는 짧은 인용을 정의합니다.
<ruby>	<ruby> 태그는 루비 주석을 정의합니다.
<samp>	<samp> 태그는 컴퓨터 프로그램의 샘플 출력을 식별하기위한 요소입니다.
<script>	<script> 태그는 스크립트를 정의합니다.
<select>	<select> 태그는 선택 목록을 정의합니다.
<small>	<small> 태그는 저작권 또는 법적인 텍스트를 정의합니다.
<span>	<span> 태그는 인라인 요소 그룹화를 정의합니다.
<strong>	<strong> 태그는 중요한 의미를 갖는 텍스트를 정의합니다.
<sub>	<sub> 태그는 텍스트 아래첨자(subscript)를 정의합니다.
<sup>	<sup> 태그는 텍스트 위첨자(superscript)를 정의합니다.
<textarea>	<textarea> 태그는 여러줄의 텍스트를 편집할 수 있는 컨트롤을 정의합니다.
<time>	<time> 태그는 날자와 시간을 정의합니다.
<var>	<var> 태그는 프로그램 코드에서 변수를 정의합니다.
<video>	<video> 태그는 미디어 영상을 재생합니다.
<wbr>	<wbr> 태그는 줄바꿈 할 위치를 정의할 때 사용합니다.

임베디드 콘텐츠 (Embedded content)

• 다른 소스를 가져오거나 삽입시키는 컨텐츠와 관련된 요소입니다.

요소	설명
<audio>	<audio> 태그는 오디오 파일을 정의합니다.
<canvas>	<canvas> 태그는 비트맵 방식의 그림을 정의합니다.
<embed>	<embed> 태그는 외부 어플리케이션을 연결합니다.
<iframe>	<iframe> 태그는 HTML문서 내에 다른 문서를 포함하는데 사용합니다.
<img>	<img> 태그는 문서에 이미지를 표현할 때 사용합니다.
<object>	<object> 태그는 문서내에 포함된 멀티미디어 요소를 정의합니다.
<svg>	<svg> 태그는 벡터 방식의 그림을 정의합니다.
<video>	<video> 태그는 미디어 영상을 재생합니다.

인터렉티브 콘텐츠 (Interactive content)

• 상호작용을하기 위한 컨텐츠 요소입니다.

요소	설명
<a>	<a> 태그는 하이퍼 링크를 정의합니다.
<button>	<button> 태그는 클릭 할 수 있는 버튼을 설정합니다.
<details>	<details> 태그는 컨텐츠를 숨기거나 보여줄 수 있습니다.
<embed>	<embed> 태그는 외부 어플리케이션을 연결합니다.
<iframe>	<iframe> 태그는 HTML문서 내에 다른 문서를 포함하는데 사용합니다.
<keygen>	<keygen> 태그는 보안키를 생성하고 컨트롤합니다.
<label>	<label> 태그는 <input> 요소의 라벨을 지정합니다.
<select>	<select> 태그는 선택 목록을 정의합니다.
<textarea>	<textarea> 태그는 여러줄의 텍스트를 편집할 수 있는 컨트롤을 정의합니다.