HTML5 태그 일람표

출처 : http://xeguidebook.com/Html5_css3/1006


■ HTML5에 새로 추가된 태그와 삭제된 태그


태그

속성

설명

버전

<!-- -->

-

주석 comment   

4 / 5

<DOCTYPE>

-

문서 형식 docment type

4 / 5

<a>

 

href="URL"

hreflang

name="이름"

media

ping

rel

taget="_blank" , "_parent" , "_self" "_top"

type

하이퍼링크  hyperlink

하이퍼링크로 호출되는 파일 경로

 

중간 부분을 지정하기 위한 HTML 도큐먼트 이름

 

 

 

대상 프레임 지정(새창/상위/현재/전체페이지)

4 / 5

<abbr>

Global Attributes

약어, 약자 abbreviation  

4 / 5

<acronym>

 

두문자어

4

<address>

Global Attributes

 

4 / 5

<applet>

 

applet 애플릿

 4

<area>

 

alt="텍스트"

coords="좌표1.좌표2,좌표3..."

href="URL"

hreflang

nohref

shape="rect" , "circle" , "poly"

target="_blank" , "_parent" , "_self""_top"

type

<map>태그의 이미지 맵 내에 링크 영역지정

텍스트 브라우저에 표시될 텍스트 

영역의 경계선에 대한 좌표

링크된 파일의 URL

링크를 갖고 있지 않도록 하는 영역을 정의

정의될 형태의 유형

대상 프레임 지정(새창/상위/현재/전체페이지)

  4 / 5

<article>

Global Attributes

article 구역, 섹션

5

<aside>

Global Attributes  

outside the main flow of the narrative

5

<b>

Global Attributes

bold text 텍스트 진하게

4 / 5

<base>

href

target

base URL for all the page links 페이지내 기본 링크

4 / 5

<basefont>

 

base for the document 문서내 기본 폰트

4

<bb>

 

type

유저 에이전트 호출 invoked user agent

5

<bdo>

dir

텍스트 출력 방향 direction of text display

4 / 5

<big>

 

큰 크기로 텍스트를 나타냄 big text

4

<blockquote>

cite

긴 인용문 long quotation

4 / 5

<body>

 

alink="색상코드" or "영문 색상이름"

background="URL"

bgcolor="색상코드" or "영문 색상이름"

bgpropertes="fixed"

leftmargin=수치

link="색상코드" or "영문 색상이름"

tx="색상코드" or "영문 색상이름"

topmargin=수치

vlink="색상코드" or "영문 색상이름

브라우저에 표시될 부분 body element

클릭된 링크의 색상, 16진수의 RGB값이나 색이름

배경으로 사용될 이미지파일

배경색 

배경 이미지가 스크롤되지 않음 

왼쪽 여백 크기, 픽셀 수 

하이퍼 링크의 색상 

일반적 텍스트의 색상

상단의 여백, 픽셀 수

방문한 링크의 색상

4 / 5

<br>

Global Attributes

한 줄 바꿈 insert a single line break

4 / 5

<button>

 

autofocus

disabled

form

formaction

formenctype

formmethod

formnovalite

formtarget

name

type

value

버튼 push button

4 / 5

<canvas>

width

height

그래픽 범위 canvas area

5

<caption>

Global Attributes 

테이블 제목 table caption

4 / 5

<center>

 

텍스크 중앙 정렬 centerd text

4

<cite>

Global Attributes

인용문을 설정 citation

4 / 5

<code>

Global Attributes

컴퓨터 코드로 텍스트 표시 computer code text

4 / 5

<col>

span

테이블 컬럼 속성 attributes for table columns

4 / 5

<colgroup>

span  

테이블 컬럼 그룹 groups of table columns

4 / 5

<command>

  

checked

default

disabled

hidden

icon

label

radiogroup

type

명령 버튼 command button

5

<datagrid>

 

disbled

트리, 리스트, 테이블의 데이터 data in a tree, list or tsbular

5

<datalist>

Global Attributes 

드롭다운 리스트 dropdown list

5

<dd>

Global Attributes 

정의 목록에서 정의 설명 definition description

4 / 5

<del>

cite

datetime

삭제된 데이터 deleted text

4 / 5

<details>

open

요소의 세부 항목 details of an element

5

<dialog>

Global Attributes

대화(회화) dialog(conversation)

5

<dir>

 

디렉토리 리스트 directory list

4

<div>

Global Attributes 

문서 섹션 section in a document

4 / 5

<dfn>

 

title

용어 정의 definition term

4 / 5

<dl>

Global Attributes 

정의 목록 definition list

4 / 5

<dt>

Global Attributes 

용어 정의 definition term

4 / 5

<em>

Global Attributes 

텍스트 강조 emphasized text

4 / 5

<embed>

height

src

type

width

외부  플러그인 external interactive content of plugin

5

<fieldset>

 

disbled

form

name

필드셋 fieldset

4 / 5

<figure>

Global Attributes 

미디어 콘텐츠 그룹과 제목

group of media content, and, their caption

5

<font>

 

텍스트 폰트 사이즈 색상 text font, size, and color

4

<footer>

Global Attributes

섹션 또는 페이지의 풋 footer for a section or page

5

<form>

 

action="URL" 

data

replace

accept

accept-charset

enctype

method="get" , "post"

target

서식 form

버튼 클릭시 데이터가 보내져야 하는 스크립트

데이터를 전송하는 방식

4 / 5

<frame>

 

서브 윈도우 sub window

4

<frameset>

 

프레임세트 set of frames

4

<h1>~<h6>

Global Attributes

헤드 요소 header 1 to 6

4 / 5

<head>

 

문서의  정보 information about the document

4 / 5

<header>

Global Attributes 

페이지 헤더  

5

<hggroup>

Global Attributes 

헤딩 섹션 heading section

5

<hr>

 

align="left", "right", "center"

color="색상코드" 또는 "색이름"

noshade

size=수치

width=수치

수령선 horizontal rule

문서내 수평선의 정렬

선 색깔

선의 3d 음영을 없앰

선의 길이, 픽셀값

선의 굵기, 픽셀값

4 / 5

<html>

manifest

HTML 문서 html document

4 / 5

<i>

Global Attributes

이탤릭체 텍스트 italic text

4 / 5

<iframe>

src

name

sandbox

seamless

width

height

내부 서브 윈도우(프레임) inline sub window(frame)

4 / 5

<img>

align="top","middle","bottom","left","right","center"

alt="텍스트"

border=수치

controls

dynsrc="URL"

height=수치, width=수치

hspace=수치, vspace=수치

ismap

loop=수치 또는 "infinite"

src="URL"

start="fileopen" , "mouseover"

uesmap="#이름"

이미지 image

문서속에서 이미지나 비디오 클립의 정렬

이미지가 제대로 로드되지 않을 시 표시될 텍스트

테두리의 두께, 픽셀값 (초기값 border=1)

비디오 조절, dynsrc 와 함께 사용

삽입될 AVI파일을 지정

이미지나 비디오 클립의 가로와 세로 크기, 픽셀값

주변 텍스트와 사이의 가로와 세로 공간, 픽셀값

이미지가 서버 측 이미지 맵임을 지정

dynsrc=와 함께 사용, 비디오 클립이 반복되는 횟수

삽입될 이미지의 URL

dynsrc와 사용, 비디오가 작동되게 해주는 이벤트

이미지 맵으로 사용될 맵의 명칭

4 / 5

<input>

type="tx","button","checkbox","radio","submit",

        "image", "reset", "hidden"

checked

maxlength="길이"

name="이름"

size="크기"

src="URL"

value="이름"

입력 필드 input field

삽입할 입력 요소의 유형

 

초기값으로 선택해 놓을 박스나 버튼을 지정 

type=tx에 대하여, 엔트리의 최대 길이, 글자수

입력 내용이 CGI 등으로 보내질 때 변수의 이름

type=tx에 대하여, 텍스트 상자의 길이

type=image에 대해, 버튼으로 사용될 이미지 호출

type=checkbox : 상자가 체크시 보내지는 변수 값,

type=tx : 텍스트 란에 들어 있는 초기 값.

type=submit, reset, button : 버튼에 표시된 텍스트

4 / 5

<ins>

cite

datetie

삽입된 텍스트 inserted text

4 / 5

<isindex>

 

한줄 입력 필드 single-line input field

4

<kbd>

Global Attributes

키보드 텍스트 keyboard text

4 / 5

<label>

 

for

폼 컨트롤에 대한 라벨 label for a form control

4 / 5

<legend>

Global Attributes

필드셋 타이틀 fieldset title

4 / 5

<li>

 

value

type="A","a","I","i","disc","circle","square"

리스트 아이템 list item

<OL>과 함께 사용시 항목에 대한 수치

항목에 대한 수치나 방점 스타일을 지정

4 / 5

<link>

 

href

rel

media

hreflang

type

sizes

참조 리소스 resourse reference

4 / 5

<map>

 

id

이미지 맵 image map

4 / 5

<mark>

Global Attributes

기호 텍스트 marked text

5

<marquee>

align="top" , "middle" , "bottom"

behavior="scroll" , "slide" , "alternate"

bgcolor="#RRGGBB" or "색상명"

direction="left" , "right"

height=수치 or %, weight=수치 or %

hspace=수치, vspace=수치

loop=수치 or "infinite"

scrollamount=수치

scrlldelay=수치

움직이는 텍스트, 이미지

문서에서의 정렬 상태를 지정

스크롤 행동 : 기본값/움직인후 멈춤/좌우왕복

배경색 지정, RGB값이나 색상명을 사용

스크롤 방향

가로와 세로 크기, 픽셀 또는 백분율로 지정

주변 텍스트 사이의 가로와 세로 공간, 픽셀값

반복 횟수

텍스트가 이동할 간격 크기를 픽셀 단위로 지정(0-99999)

텍스트가 움직이기 시작할 때까지의 지연시간 지정

4 / 5

<menu>

id

메뉴 리스트 menu list

4 / 5

<meta>

charset

content="값"

http-equiv="http 행동"

url="URL"

name  

메타 정보 mate information

 

http-squiv으로 지정된 용도의 값. 로드시 기다리는 시간

규정해 놓아야 할 HTTP행동.

http-equiv="refresh"와 함께 사용, 로드될 파일 지정

4 / 5

<meter>

Global Attributes

정의된 범위내에서의 측정

measurement within a predefined range

5

<nav>

Global Attributes

내비게이션 링크 툴 navigation links

5

<noframes>

 

노프레임 섹션 noframe section

4

<noscript>

 

노스크립트 섹션 noscript section

4 / 5

<object>

align="left","right","center","top","middle","bottom" 

border=수치

classid="class 지정자"

codebase="URL"

codetype="MIME 유형"

data="URL"

height=수치,width=수치

hspace=수치,vspace=수치

name="이름"

shapes

standby="텍스트"

type="MIME 유형"

usemap="이름"

이미지, 매체 파일 등 개체 삽입 embeded object

문서에서 오브젝트의 정렬

오브젝트 테두리의 두께, 픽셀값

플러그 인이나 프로그램에 대한 지정 

프로그램을 담고 있는 디렉토리

프로그램의 MIME 유형

페이지에 삽입될 오브젝트의 URL

오브젝트의 가로와 세로 크기, 픽셀값

오브젝트와 텍스트 사이 가로와 세로 간격, 픽셀값

프로그램이 개체를 참조하는데 사용하는 이름 

오브젝트가 하이퍼 링크 형태가 되도록 지정

오브젝트가 로드되는 동안 디스플레이되는 텍스트

오브젝트의 MIME유형.

클라이언트 측 이미지 맵의 이름.

4 / 5

<ol>

 

start =숫자

type="A" , "a" , "I" , "I"

reversed

순서가 있는 리스트 ordered list

시작번호 지정

번호의 종류를 지정

4 / 5

<optgroup>

disbled

label

옵션 그룹 option group

4 / 5

<option>

 

disbled

label

selected

value="텍스트"

드롭다운 리스트 옵션 option in a drop-down list

초기값으로 선택될 옵션을 지정

옵션을 선택하면 보내지는 값

4 / 5

<output>

form

출력 형식 some types of output

5

<p>

Global Attributes

단락 paragraph  

4 / 5

<param>

name="명칭"

value="값"

valuetype="data" , "ref" , "object"

type="MIME유형"

프로그램에 변수를 전달, parameter for an object  

값이 배정될 매개변수의 이름

매개 변수의 값

값이 해석되는 방법 (초기값, URL, 오브젝트의 URL)

데이터의 MIME 유형

4 / 5

<pre>

Global Attributes

설정된 텍스트 prefomatted text

4 / 5

<progress>

Global Attributes

작업의 진행사항 progress of a task of any kind

4 / 5

<q>

 

cite

짧은 인용문 short qiotation

 

4 / 5

<ruby>

Global Attributes

루비 주석 ruby annotations  

 5

<rp>

Global Attributes

루비 텍스트 주위로 괄호 생성

provide parentheses around a ruby text

 5

<rt>

Global Attributes

루비 텍스트 컴포넌트 ruby text component

 5

<s>

 

중간라인 텍스트 strikethrough text

4

<samp>

Global Attributes

샘플 컴퓨터 코드 sample computer code

4 / 5

<script>

language="명칭"

scr="URL"

async

type

defer

charset

스크립트 script

스크립트가 쓰여질 언어를 지정

외부 스크립트 파일을 지정

4 / 5

<section>

cite

섹션 section

5

<select>

autofocus

data

disabled

form

multiple

name

size="크기"

선택 가능한 메뉴  selectable list

스크롤 메뉴에 복수 선택 기능

내용이 CGI 등으로 보낼 때 변수명의 이름

지정된 크기로 스크롤 메뉴를 만든다 

4 / 5

<small>

Global Attributes

작은 텍스트 small text

4 / 5

<sound>

autobuffer

autoplay

controls

loops

src

sound content 사운드 콘텐츠

5

<source>

media

src

type

미디어 리소스 media resourse

5

<span>

Global Attributes

내부 섹션 inline section

4 / 5

<strike>

 

중간라인 텍스트 strikethrough text

4

<strong>

Global Attributes  

굵은 글씨 strong text

4 / 5

<style>

  

media

type

scoped

스타일 선언 style definition

4 / 5

<sub>

Global Attributes

아래 첨자 subscripted text

4 / 5

<sup>

Global Attributes

위 첨자 superscripted text

4 / 5

<table>

align="left" ,"right" ,"center"

bgcolor="색상 코드" or "색이름"

border=수치

bordercolor="색상 코드" or "색이름"

cellpadding=수치

cols=수치

width=수치 또는 %

테이블 table

문서내에서의 정렬

표의 배경색

행의 테두리의 두께, 픽셀값

테이블의 테두리 색

각 셀의 테두리와 내용 사이의 간격, 픽셀값

테이블에서 열으 수

테이블의 전체 폭

4 / 5

<tbody>

Global Attributes

테이블 바디  table body

4 / 5

<td>

 

colspan

rowspan

align="left" , "right" , "center"

valign="top" , "middle" , "bottom" , "baseline"

bgcolor="색상 코드" or "색이름"

bordercolor="색상 코드" or "색이름"

height=수치

width=수치

nowrap

headers

테이블 셀  table cell

좌우의 셀 합치기

위아래 셀 합치기

셀에서의 데이터 정렬

셀의 내용들의 수직 정렬

셀의 배경색

셀의 테두리 색

표의 셀의 높이로, 픽셀값으로 나타냄

셀의 폭으로, 픽셀값이나 백분율로서 지정

셀에서 행을 감싸지 못하게 함 

4 / 5

<textarea>

autofocus

cols=수치

disabled

form

name="이름"

readonly

required

rows=수치  

maxlength

placeholder

wrap

텍스트 text area

텍스트 영역의 폭

 

내용을 CGI로 보낼 때 사용하는 텍스트영역 이름

텍스트 영역의 높이

 

4 / 5

<tfoot>

Global Attributes

테이블 풋 table footer

4 / 5

<th>

colspan

rowspan

scope

테이블 헤더 table header

4 / 5

<thead>

Global Attributes

테이블 헤더 table header

4 / 5

<time>

Global Attributes

날짜/시간  date/time

5

<title>

  

문서 타이틀 document title

4 / 5

<tr>

 

align="left" 또는"right" or "center"

bgcolor="색상 코드" or "색이름" 

bordercolor="색상 코드" or "색이름"

valign="top" , "middle" , "bottom" , "baseline"

테이블 행 table row

가로 방향으로 높여진 셀들의 내용들의 정렬

표의 행의 배경색

행의 테두리 색상

셀의 테두리에 대한 행의 내용들의 세로 정렬 

4 / 5

<tt>

 

텔레타이프 텍스트 teletype text

4

<u>

 

텍스트 밑줄 underlined text

4

<ul>

Global Attributes

비 규칙 리스트 unordered list

4 / 5

<var>

Global Attributes

변수 variable

4 / 5

<video>

src

oster

autobuffer

autoplay

loop

controls

width

height

비디오 video

5

<xmp>

 

preformatted text

4

위로 스크롤