HTML 기본 태그 설명 및 예제

구분

HTML 태그

태그설명

HTML Tag Reference

HTML
구조

<html>

HTML 문서를 정의하고 시작을 알림

<body>

HTML 문서의 내용부를 정의

<h1> to <h6>

단계별 타이틀을 정의

<hr />

수평선

<!-->

주석

<p>

문단임을 정의

<br />

한 줄 개행

HTML Text Formatting Tags

글자
출력
형태

<b>

굵게

<big>

Defines big text

<em>

강조(이탤릭)

<i>

이탤릭

<small>

Defines small text

<strong>

강하게(굵게)

<sub>

아랫 첨자

<sup>

윗 첨자

<ins>

Defines inserted text

<del>

취소선

HTML "Computer Output" Tags

컴퓨터
코드
형태

<code>

Defines computer code text

<kbd>

Defines keyboard text

<samp>

Defines sample computer code

<tt>

Defines teletype text

<var>

Defines a variable

<pre>

pre태그 안의 내용 그대로 화면에 출력(안에서는 태그 x)

HTML Citations, Quotations, and Definition Tags

인용구

마우스
오버

<abbr>

마우스 오버시 약어 풀네임 툴팁 기능

<acronym>

마우스 오버시 각 단어의 맨 앞글자어의 전체 문장 툴팁

<address>

Defines contact information for the author/owner of a document

<bdo>

Defines the text direction

<blockquote>

여러줄 인용구

<q>

한줄 인용구

<cite>

Defines a citation

<dfn>

Defines a definition term

HTML Style Tags

스타일

<style>

Defines style information for a document

<link />

Defines the relationship between a document and an external resource

HTML Link Tags

링크

<a>

연결할 대상, 포인트 설정

HTML Image Tags

그림

<img />

Defines an image

<map>

Defines an image-map

<area />

Defines a clickable area inside an image-map

HTML Table Tags

테이블

<table>

테이블 생성을 정의

<th>

각 행이나 열의 제목 정의

<tr>

테이블의 한 행

<td>

한 행 안에 있는 각각의 셀을 정의

<caption>

Defines a table caption

<colgroup>

Defines a group of columns in a table, for formatting

<col />

Defines attribute values for one or more columns in a table

<thead>

Groups the header content in a table

<tbody>

Groups the body content in a table

<tfoot>

Groups the footer content in a table

HTML List Tags

리스트

<ol>

순서있는 리스트

<ul>

순서없는 리스트

<li>

리스트 요소를 등록한다

<dl>

정의 리스트

<dt>

정의할 요소 등록

<dd>

요소에 대한 설명 등록

HTML Grouping Tags

그룹

<div>

Defines a div

<span>

Defines a span

HTML Layout Tags

화면구성

<div>

Defines a section in a document

<span>

Defines a section in a document

HTML Form Tags

입력창

<form>

Form의 사용 정의

<input />

한 줄 입력창

<textarea>

여러줄 텍스트 입력창

<label>

Defines a label for an input element

<fieldset>

Defines a border around elements in a form

<legend>

Defines a caption for a fieldset element

<select>

Defines a select list (drop-down list)

<optgroup>

Defines a group of related options in a select list

<option>

Defines an option in a select list

<button>

Defines a push button

HTML iframe Tag

내부프레임

<iframe>

Defines an inline sub window (frame)

HTML Headings

< HTML 태그 내용 >

< 웹에서 보여지는 내용 >

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

HTML Paragraphs

< HTML 태그 내용 >

< 웹에서 보여지는 내용 >

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

This is a paragraph.

This is a paragraph.

This is a paragraph.

HTML Links

< HTML 태그 내용 >

< 웹에서 보여지는 내용 >

<a href="http://www.w3schools.com">
This is a link</a>

This is a link

HTML Images

< HTML 태그 내용 >

< 웹에서 보여지는 내용 >

<img src="w3schools.jpg" width="104" height="142" />

HTML Lines

< HTML 태그 내용 >

< 웹에서 보여지는 내용 >

<p>The hr tag defines a horizontal rule:</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>

The hr tag defines a horizontal rule:

This is a paragraph

This is a paragraph

This is a paragraph

HTML Comments

< HTML 태그 내용 >

< 웹에서 보여지는 내용 >


<p>This is a regular paragraph</p>

This is a regular paragraph

HTML Line Breaks

< HTML 태그 내용 >

< 웹에서 보여지는 내용 >

<p>This is<br />a para<br />graph with line breaks</p>

This is
a para
graph with line breaks

HTML Output - Useful Tips

< HTML 태그 내용 >

< 웹에서 보여지는 내용 >

<p>
    My Bonnie lies over the ocean.

    My Bonnie lies over the sea.

    My Bonnie lies over the ocean.


    Oh, bring back my Bonnie to me.
</p>

<p>Note that your browser ignores the layout!</p>

My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me.

Note that your browser ignores the layout!

HTML Text Formatting

< HTML 태그 내용 >

< 웹에서 보여지는 내용 >

<p><b>This text is bold</b></p>
<p><strong>This text is strong(권장)</strong></p>
<p><big>This text is big</big></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized(권장)</em></p>
<p><code>This is computer output</code></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

This text is bold

This text is strong(권장)

This text is big

This text is italic

This text is emphasized(권장)

This is computer output

This is_subscript and ^superscript

HTML Preformatted Text

< HTML 태그 내용 >

< 웹에서 보여지는 내용 >

<pre>
This is
preformatted text.
It preserves both spaces
and line breaks.
</pre>

<p>The pre tag is good for displaying computer code:</p>

<pre>
for i = 1 to 10
print i
next i
</pre>

This is preformatted text. It preserves both spaces and line breaks.

The pre tag is good for displaying computer code:
for i = 1 to 10 print i next i

HTML Address

< HTML 태그 내용 >

< 웹에서 보여지는 내용 >

<address>
Written by W3Schools.com<br />
<a href="mailto:us@example.org">Email us</a><br />
Address: Box 564, Disneyland<br />
Phone: +12 34 56 78
</address>
Written by W3Schools.com
Email us
Address: Box 564, Disneyland
Phone: +12 34 56 78

HTML Abbreviations and acronyms(마우스 커서 올려봐)

< HTML 태그 내용 >

< 웹에서 보여지는 내용 >

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

<p>Can I get this <acronym title="as soon as possible">ASAP</acronym>?</p>

<p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p>

The WHO was founded in 1948.

Can I get this ASAP?

The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.

HTML Dleted and inserted text

< HTML 태그 내용 >

< 웹에서 보여지는 내용 >

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

<p>Notice that browsers will strikethrough deleted text and underline inserted text.</p>

My favorite color is ~~blue~~ red!

Notice that browsers will strikethrough deleted text and underline inserted text.

HTML Layout

< HTML 태그 내용 >

< 웹에서 보여지는 내용 >

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright � W3Schools.com</div>

</div>

Main Title of Web Page

Menu
HTML
CSS
JavaScript

Content goes here

Copyright � W3Schools.com

HTML Forms - The Input Element

< HTML 태그 내용 >

< 웹에서 보여지는 내용 >

<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>

<form>
Password: <input type="password" name="pwd" />
</form>

<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>

<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
</form>

<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

First name:
Last name:

Password:

Male
Female

I have a bike
I have a car

Username:

Use iframe as a Target for a Link

< HTML 태그 내용 >

< 웹에서 보여지는 내용 >

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

<p><b>Note:</b> Because the target of the link matches the name of the iframe, the link will open in the iframe.</p>

W3Schools.com

Note: Because the target of the link matches the name of the iframe, the link will open in the iframe.

Color Values

Color Color HEX Color RGB

#000000 rgb(0,0,0)

#FF0000 rgb(255,0,0)

#00FF00 rgb(0,255,0)

#0000FF rgb(0,0,255)

#FFFF00 rgb(255,255,0)

#00FFFF rgb(0,255,255)

#FF00FF rgb(255,0,255)

#C0C0C0 rgb(192,192,192)

#FFFFFF rgb(255,255,255)

Color	Color HEX	Color RGB
	#000000	rgb(0,0,0)
	#FF0000	rgb(255,0,0)
	#00FF00	rgb(0,255,0)
	#0000FF	rgb(0,0,255)
	#FFFF00	rgb(255,255,0)
	#00FFFF	rgb(0,255,255)
	#FF00FF	rgb(255,0,255)
	#C0C0C0	rgb(192,192,192)
	#FFFFFF	rgb(255,255,255)

HTML Links - The name Attribute

< HTML 태그 내용 >

< 웹에서 보여지는 내용 >

<p><a name="tips">Useful Tips Section</a></p>
<p><a href="#tips">Visit the Useful Tips Section</a></p>
<p><a href="http://www.w3schools.com/html_links.htm#tips">
Visit the Useful Tips Section</a></p>
Useful Tips Section

Visit the Useful Tips Section

Visit the Useful Tips Section

HTML Links - Image

< HTML 태그 내용 >

< 웹에서 보여지는 내용 >

<p>Create a link of an image:
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" width="32" height="32" />
</a></p>

<p>No border around the image, but still a link:
<a href="default.asp">
<img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32" />
</a></p>

Create a link of an image:

No border around the image, but still a link:

HTML Image - Align

< HTML 태그 내용 >

< 웹에서 보여지는 내용 >

<p>An image
<img src="smiley.gif" alt="Smiley face" align="bottom" width="32" height="32" />
with align="bottom".</p>

<p>An image
<img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32" />
with align="middle".</p>

<p>An image
<img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32" />
with align="top".</p>

<p><b>Tip:</b> align="bottom" is default!</p>

<p><img src="smiley.gif" alt="Smiley face" width="32" height="32" />
An image before the text.</p>

<p>An image after the text.
<img src="smiley.gif" alt="Smiley face" width="32" height="32" /></p>

An image  with align="bottom".

An image  with align="middle".

An image  with align="top".

Tip: align="bottom" is default!

An image before the text.

An image after the text.

HTML Use Image-Map

< HTML 태그 내용 >

< 웹에서 보여지는 내용 >

<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>

Click on the sun or on one of the planets to watch it closer:
Planets

HTML Table

< HTML 태그 내용 >

< 웹에서 보여지는 내용 >

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Header 1 Header 2

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

HTML List

< HTML 태그 내용 >

< 웹에서 보여지는 내용 >

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

<dl>
<dt>Coffee</dt>
    <dd>- black hot drink</dd>
  <dt>Milk</dt>
    <dd>- white cold drink</dd>
</dl>

Coffee

Milk

Coffee

Milk

Coffee

- black hot drink

Milk

- white cold drink

HTML

< HTML 태그 내용 >

< 웹에서 보여지는 내용 >

저작자표시 비영리

'Dev. 웹 > HTML.JSP' 카테고리의 다른 글

[HTML 예제] a 태그 (anchor tag) - 책갈피 기능 (0)	2012.09.12
[HTML 예제] 폼태그 (form tag) (2)	2012.09.12
HTML 참고자료 (태그 리스트, 속성표, 이벤트, 색상표, 문자셋, 특수기호, ASCII, URL Encode 등) (0)	2012.09.09
HTML 기초 간단 정리 Quick List (0)	2012.09.09
html 연습장 (코드 작성 및 바로 확인) (0)	2012.09.09

구분	HTML 태그	태그설명
HTML Tag Reference
HTML 구조	<html>	HTML 문서를 정의하고 시작을 알림
	<body>	HTML 문서의 내용부를 정의
	<h1> to <h6>	단계별 타이틀을 정의
	<hr />	수평선
	<!-->	주석
	<p>	문단임을 정의
	<br />	한 줄 개행
HTML Text Formatting Tags
글자 출력 형태	<b>	굵게
	<big>	Defines big text
	<em>	강조(이탤릭)
	<i>	이탤릭
	<small>	Defines small text
	<strong>	강하게(굵게)
	<sub>	아랫 첨자
	<sup>	윗 첨자
	<ins>	Defines inserted text
	<del>	취소선
HTML "Computer Output" Tags
컴퓨터 코드 형태	<code>	Defines computer code text
	<kbd>	Defines keyboard text
	<samp>	Defines sample computer code
	<tt>	Defines teletype text
	<var>	Defines a variable
	<pre>	pre태그 안의 내용 그대로 화면에 출력(안에서는 태그 x)
HTML Citations, Quotations, and Definition Tags
인용구 마우스 오버	<abbr>	마우스 오버시 약어 풀네임 툴팁 기능
	<acronym>	마우스 오버시 각 단어의 맨 앞글자어의 전체 문장 툴팁
	<address>	Defines contact information for the author/owner of a document
	<bdo>	Defines the text direction
	<blockquote>	여러줄 인용구
	<q>	한줄 인용구
	<cite>	Defines a citation
	<dfn>	Defines a definition term
HTML Style Tags
스타일	<style>	Defines style information for a document
스타일	<link />	Defines the relationship between a document and an external resource
HTML Link Tags
링크	<a>	연결할 대상, 포인트 설정
HTML Image Tags
그림	<img />	Defines an image
	<map>	Defines an image-map
	<area />	Defines a clickable area inside an image-map
HTML Table Tags
테이블	<table>	테이블 생성을 정의
	<th>	각 행이나 열의 제목 정의
	<tr>	테이블의 한 행
	<td>	한 행 안에 있는 각각의 셀을 정의
	<caption>	Defines a table caption
	<colgroup>	Defines a group of columns in a table, for formatting
	<col />	Defines attribute values for one or more columns in a table
	<thead>	Groups the header content in a table
	<tbody>	Groups the body content in a table
	<tfoot>	Groups the footer content in a table
HTML List Tags
리스트	<ol>	순서있는 리스트
	<ul>	순서없는 리스트
	<li>	리스트 요소를 등록한다
	<dl>	정의 리스트
	<dt>	정의할 요소 등록
	<dd>	요소에 대한 설명 등록
HTML Grouping Tags
그룹	<div>	Defines a div
그룹	<span>	Defines a span
HTML Layout Tags
화면구성	<div>	Defines a section in a document
화면구성	<span>	Defines a section in a document
HTML Form Tags
입력창	<form>	Form의 사용 정의
	<input />	한 줄 입력창
	<textarea>	여러줄 텍스트 입력창
	<label>	Defines a label for an input element
	<fieldset>	Defines a border around elements in a form
	<legend>	Defines a caption for a fieldset element
	<select>	Defines a select list (drop-down list)
	<optgroup>	Defines a group of related options in a select list
	<option>	Defines an option in a select list
	<button>	Defines a push button
HTML iframe Tag
내부프레임	<iframe>	Defines an inline sub window (frame)

< HTML 태그 내용 >	< 웹에서 보여지는 내용 >
<p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p>	This is a paragraph. This is a paragraph. This is a paragraph.

< HTML 태그 내용 >	< 웹에서 보여지는 내용 >
<a href="http://www.w3schools.com"> This is a link</a>	This is a link

< HTML 태그 내용 >	< 웹에서 보여지는 내용 >
<img src="w3schools.jpg" width="104" height="142" />

< HTML 태그 내용 >	< 웹에서 보여지는 내용 >
<p>The hr tag defines a horizontal rule:</p> <hr /> <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p>	The hr tag defines a horizontal rule: This is a paragraph This is a paragraph This is a paragraph

< HTML 태그 내용 >	< 웹에서 보여지는 내용 >
<!--This comment will not be displayed--> <p>This is a regular paragraph</p>	This is a regular paragraph

< HTML 태그 내용 >	< 웹에서 보여지는 내용 >
<p>This is<br />a para<br />graph with line breaks</p>	This is a para graph with line breaks

< HTML 태그 내용 >	< 웹에서 보여지는 내용 >
<p> My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. </p> <p>Note that your browser ignores the layout!</p>	My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. Note that your browser ignores the layout!

< HTML 태그 내용 >	< 웹에서 보여지는 내용 >
<address> Written by W3Schools.com<br /> <a href="mailto:us@example.org">Email us</a><br /> Address: Box 564, Disneyland<br /> Phone: +12 34 56 78 </address>	Written by W3Schools.com Email us Address: Box 564, Disneyland Phone: +12 34 56 78

HTML Headings

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

HTML Paragraphs

This is a paragraph. This is a paragraph. This is a paragraph.

HTML Links

This is a link

HTML Images

HTML Lines

The hr tag defines a horizontal rule: This is a paragraph This is a paragraph This is a paragraph

HTML Comments

This is a regular paragraph

HTML Line Breaks

This isa paragraph with line breaks

HTML Output - Useful Tips

My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. Note that your browser ignores the layout!

HTML Text Formatting

HTML Preformatted Text

HTML "Computer output" tags

HTML Address

HTML Abbreviations and acronyms(마우스 커서 올려봐)

The WHO was founded in 1948. Can I get this ASAP? The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.

HTML Dleted and inserted text

HTML Layout

Main Title of Web Page

HTML Forms - The Input Element

First name: Last name:

Use iframe as a Target for a Link

W3Schools.com Note: Because the target of the link matches the name of the iframe, the link will open in the iframe.

Color Values

HTML Links - The name Attribute

HTML Links - Image

Create a link of an image: No border around the image, but still a link:

HTML Image - Align

HTML Use Image-Map

HTML Table

HTML List

Coffee Milk

HTML

'Dev. 웹 > HTML.JSP' 카테고리의 다른 글

공유 대상을 선택하세요

소셜

메시지

기록

다른 카테고리의 글 목록

티스토리툴바

This is a paragraph.

This is a paragraph.

This is a paragraph.

The hr tag defines a horizontal rule:

This is a paragraph

This is a paragraph

This is a paragraph

This is
a para
graph with line breaks

My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me.

Note that your browser ignores the layout!

The WHO was founded in 1948.

Can I get this ASAP?

The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.

First name:
Last name:

W3Schools.com

Note: Because the target of the link matches the name of the iframe, the link will open in the iframe.

Create a link of an image:

No border around the image, but still a link:

Coffee

Milk