html html5 tag

1. 글자 태그

1.1 제목

<h1> </h1>

첫번째 큰 제목 글자 태그

<h2> </h2>

두번째 큰 제목 글자 태그

<h3> </h3>

세번째 큰 제목 글자 태그

<h4> </h4>

네번째 큰 제목 글자 태그

<h5> </h5>

다섯번째 큰 제목 글자 태그

<h6> </h6>

여섯번째 큰 제목 글자 태그

1.2 본문

<p> </p>

paragraph 태그의 줄임말로 단락을 의미

<br />

개행 태그

<hr />

수평줄 태그

1.3 앵커 태그

<a href=#> </a>

서로 다른 웹페이지 사이를 이동하거나 웹페이지 내부에서 특정한 위치로 이동

href="link"

이동할 link를 지정

href=#

하이퍼링크 기능을 제거하고 사용시

href=#id

페이지 내부의 id로 이동, 원하는 위치의 태그에 id 속성을 부여하고 사용

1.4 글자 형태

대부분 스타일시트로 처리하므로 잘 사용하지 않음.

<b> </b>

굵은 글자(볼드체) 태그

<i> </i>

기울어진 글자(이텔릭체) 태그

<small> </small>

작은 글자 태그



아래첨자 글자 태그



윗첨자 글자 태그

<ins> </ins>

밑줄 글자 태그

<del> </del>

가운데 줄이 그어진 글자 태그

1.5 루비 문자

일본어에서 자주 사용되는 글자 형식으로 한자 위에 표시되는 글자를 의미.

<ruby> </ruby>

루비 문자 선언 태그

<rt> </rt>

위에 위치하는 작은 문자 태그

<rp> </rp>

ruby 태그를 지원할 경우 출력되지 않는 태그

2. 목록 태그

2.1 기본 목록

<ul> </ul>

순서가 없는 목록 태그, unordered list, 목록 요소에 기호가 붙음

<ol> </ol>

순서가 있는 목록 태그, ordered list, 목록 요소에 숫자가 붙음

<li> </li>

목록 요소 태그, list item

2.2 정의 목록

<dl> </dl>

정의 목록 태그

<dt> </dt>

정의 용어 태그

<dd> </dd>

정의 설명 태그

3. 테이블 태크

<table border="1"> <!-- table 테두리 속성 -->
	<caption> table caption </caption>
	
	<colgroup>
		<col span="2" style="background: red" />
		<col style="background: blue" />
	</colgroup>
	
	<thead>
		<tr>
			<th>컬럼 제목</th> <!-- tbody에 th를 쓸 수 있음 -->
			<th>컬럼 제목</th>
			<th>컬럼 제목</th>
		</tr>
	</thead>
	
	<tbody> <!-- tbody는 브라우저에서 자동 삽입됨 -->
		<tr>
			<td>컬럼 내용</td>
			<td colspan="2">컬럼 내용</td>
		</tr>
		<tr>
			<td>컬럼 내용</td>
			<td>컬럼 내용</td>
			<td rowspan="2">컬럼 내용</td>
		</tr>
		<tr>
			<td>컬럼 내용</td>
			<td>컬럼 내용</td>
		</tr>
	</tbody>
	
	<tfoot>
		<tr>
			<td>컬럼 내용</td>
			<td>컬럼 내용</td>
		</tr>
	</tfoot>
</table>

4. 이미지 태크

<img src="path" alt="string" width="px" heigth="px"/>

src

이미지 파일 경로

alt

이미지가 없을 때 표시할 문자

width

이미지의 너비

heigth

이미지의 높이

5. 오디오 태그

<audio src="path" preload="" autoplay="autoplay" loop="" controls="controls"> </audio>
다른 표기법
<audio src="path" autoplay controls> </audio>

src

오디오 파일 경로

preload

재생전 파일 전체 로드

autoplay

자동재생 여부

loop

반복재생 여부

controls

음악 재생 도구 출력 여부

브라우저별 지원하는 음악 파일 형식

file	IE	Crome	FireFox	Safari	Opera
mp3	O	O	X	O	X
ogg	X	O	O	O	O
wav	X	O	O	X	O
2012. 06. 기준

source tag

<!-- 모든 브라우저에서 지원하기 -->
<audio>
	<source src="path/*.mp3" type="audio/mp3" />
	<source src="path/*.ogg" type="audio/ogg" />
</audio>
<!-- type 속성이 없으면 파일을 받은 뒤 재생 가능 확인하므로 트래픽 낭비 -->

주의 : mp3 라이센스 제한, html5를 사용한 게임에서 5000번 이상 재생한 mp3 파일은 $2500의 라이센스 비용 지불해야함

6. 비디오 태그

<video src=""> </video>

src

비디오 파일 경로

poster

준비중일때 표시할 이미지 파일 경로

preload

비디오 재생전 로드 여부

autoplay

자동 재생 여부

loop

반복 재생 여부

controls

비디오 재생 도구 출력 여부

width

비디오의 너비 지정

height

비디오의 높이 지정

<video>
	<source src="path/*.mp4" type="video/mp4" />
	<source src="path/*.webm" type="video/webm" />
</video>

브라우저별 지원하는 동영상 파일 형식

file	IE	Crome	FireFox	Safari	Opera
mp4(H.264 + ACC)	O	O	X	O	X
WebM(VP8 + Vorbis)	X	O	O	X	O
OGV(Theora + Vorbis)	X	O	O	X	O
2012. 06. 기준