HTML
Posted on 2012. 2. 6. 14:30
Filed Under Web Programming/기초부터
참고 사이트
도구들
HTML 태그/속성/이벤트/기호 테이블
HTML 용어 정리
▼ 참고 사이트
http://www.w3schools.com/html
HTML연습장 http://htmltutor.co.kr/new/zero/htmlexe.htm
▼ Tools
W3C's Validator
HTML Color Picker
▼ HTML 태그/속성/이벤트/기호 테이블
HTML Symbol Entities Reference
HTML Symbol Entities
This entity reference includes mathematical symbols, Greek characters, various arrows, technical symbols and shapes.
Note: Entity names are case sensitive.
Math Symbols Supported by HTML
Character | Entity Number | Entity Name | Description |
---|---|---|---|
∀ | ∀ | ∀ | for all |
∂ | ∂ | ∂ | part |
∃ | ∃ | ∃ | exists |
∅ | ∅ | ∅ | empty |
∇ | ∇ | ∇ | nabla |
∈ | ∈ | ∈ | isin |
∉ | ∉ | ∉ | notin |
∋ | ∋ | ∋ | ni |
∏ | ∏ | ∏ | prod |
∑ | ∑ | ∑ | sum |
− | − | − | minus |
∗ | ∗ | ∗ | lowast |
√ | √ | √ | square root |
∝ | ∝ | ∝ | proportional to |
∞ | ∞ | ∞ | infinity |
∠ | ∠ | ∠ | angle |
∧ | ∧ | ∧ | and |
∨ | ∨ | ∨ | or |
∩ | ∩ | ∩ | cap |
∪ | ∪ | ∪ | cup |
∫ | ∫ | ∫ | integral |
∴ | ∴ | ∴ | therefore |
∼ | ∼ | ∼ | similar to |
≅ | ≅ | ≅ | congruent to |
≈ | ≈ | ≈ | almost equal |
≠ | ≠ | ≠ | not equal |
≡ | ≡ | ≡ | equivalent |
≤ | ≤ | ≤ | less or equal |
≥ | ≥ | ≥ | greater or equal |
⊂ | ⊂ | ⊂ | subset of |
⊃ | ⊃ | ⊃ | superset of |
⊄ | ⊄ | ⊄ | not subset of |
⊆ | ⊆ | ⊆ | subset or equal |
⊇ | ⊇ | ⊇ | superset or equal |
⊕ | ⊕ | ⊕ | circled plus |
⊗ | ⊗ | ⊗ | circled times |
⊥ | ⊥ | ⊥ | perpendicular |
⋅ | ⋅ | ⋅ | dot operator |
Greek Letters Supported by HTML
Character | Entity Number | Entity Name | Description |
---|---|---|---|
Α | Α | Α | Alpha |
Β | Β | Β | Beta |
Γ | Γ | Γ | Gamma |
Δ | Δ | Δ | Delta |
Ε | Ε | Ε | Epsilon |
Ζ | Ζ | Ζ | Zeta |
Η | Η | Η | Eta |
Θ | Θ | Θ | Theta |
Ι | Ι | Ι | Iota |
Κ | Κ | Κ | Kappa |
Λ | Λ | Λ | Lambda |
Μ | Μ | Μ | Mu |
Ν | Ν | Ν | Nu |
Ξ | Ξ | Ξ | Xi |
Ο | Ο | Ο | Omicron |
Π | Π | Π | Pi |
Ρ | Ρ | Ρ | Rho |
undefined | Sigmaf | ||
Σ | Σ | Σ | Sigma |
Τ | Τ | Τ | Tau |
Υ | Υ | Υ | Upsilon |
Φ | Φ | Φ | Phi |
Χ | Χ | Χ | Chi |
Ψ | Ψ | Ψ | Psi |
Ω | Ω | Ω | Omega |
α | α | α | alpha |
β | β | β | beta |
γ | γ | γ | gamma |
δ | δ | δ | delta |
ε | ε | ε | epsilon |
ζ | ζ | ζ | zeta |
η | η | η | eta |
θ | θ | θ | theta |
ι | ι | ι | iota |
κ | κ | κ | kappa |
λ | λ | λ | lambda |
μ | μ | μ | mu |
ν | ν | ν | nu |
ξ | ξ | ξ | xi |
ο | ο | ο | omicron |
π | π | π | pi |
ρ | ρ | ρ | rho |
ς | ς | ς | sigmaf |
σ | σ | σ | sigma |
τ | τ | τ | tau |
υ | υ | υ | upsilon |
φ | φ | φ | phi |
χ | χ | χ | chi |
ψ | ψ | ψ | psi |
ω | ω | ω | omega |
ϑ | ϑ | ϑ | theta symbol |
ϒ | ϒ | ϒ | upsilon symbol |
ϖ | ϖ | ϖ | pi symbol |
Other Entities Supported by HTML
Character | Entity Number | Entity Name | Description |
---|---|---|---|
Œ | Œ | Œ | capital ligature OE |
œ | œ | œ | small ligature oe |
Š | Š | Š | capital S with caron |
š | š | š | small S with caron |
Ÿ | Ÿ | Ÿ | capital Y with diaeres |
ƒ | ƒ | ƒ | f with hook |
ˆ | ˆ | ˆ | modifier letter circumflex accent |
˜ | ˜ | ˜ | small tilde |
  |   | en space | |
  |   | em space | |
  |   | thin space | |
| ‌ | ‌ | zero width non-joiner |
| ‍ | ‍ | zero width joiner |
| ‎ | ‎ | left-to-right mark |
| ‏ | ‏ | right-to-left mark |
– | – | – | en dash |
— | — | — | em dash |
‘ | ‘ | ‘ | left single quotation mark |
’ | ’ | ’ | right single quotation mark |
‚ | ‚ | ‚ | single low-9 quotation mark |
“ | “ | “ | left double quotation mark |
” | ” | ” | right double quotation mark |
„ | „ | „ | double low-9 quotation mark |
† | † | † | dagger |
‡ | ‡ | ‡ | double dagger |
• | • | • | bullet |
… | … | … | horizontal ellipsis |
‰ | ‰ | ‰ | per mille |
′ | ′ | ′ | minutes |
″ | ″ | ″ | seconds |
‹ | ‹ | ‹ | single left angle quotation |
› | › | › | single right angle quotation |
‾ | ‾ | ‾ | overline |
€ | € | € | euro |
™ | ™ | ™ | trademark |
← | ← | ← | left arrow |
↑ | ↑ | ↑ | up arrow |
→ | → | → | right arrow |
↓ | ↓ | ↓ | down arrow |
↔ | ↔ | ↔ | left right arrow |
↵ | ↵ | ↵ | carriage return arrow |
⌈ | ⌈ | ⌈ | left ceiling |
⌉ | ⌉ | ⌉ | right ceiling |
⌊ | ⌊ | ⌊ | left floor |
⌋ | ⌋ | ⌋ | right floor |
◊ | ◊ | ◊ | lozenge |
♠ | ♠ | ♠ | spade |
♣ | ♣ | ♣ | club |
♥ | ♥ | ♥ | heart |
♦ | ♦ | ♦ | diamond |
Standard Event Attributes
HTML 4 added the ability to let events trigger actions in a browser, like starting a JavaScript when a user clicks on an element.
To learn more about programming events, please visit our JavaScript tutorial and our DHTML tutorial.
Below is the standard event attributes that can be inserted into HTML / XHTML elements to define event actions.
<body> and <frameset> Events
The two attributes below can only be used in <body> or <frameset>:
Attribute | Value | Description |
---|---|---|
onload | script | Script to be run when a document load |
onunload | script | Script to be run when a document unload |
Form Events
The attributes below can be used in form elements:
Attribute | Value | Description |
---|---|---|
onblur | script | Script to be run when an element loses focus |
onchange | script | Script to be run when an element changes |
onfocus | script | Script to be run when an element gets focus |
onreset | script | Script to be run when a form is reset |
onselect | script | Script to be run when an element is selected |
onsubmit | script | Script to be run when a form is submitted |
Image Events
The attribute below can be used with the img element:
Attribute | Value | Description |
---|---|---|
onabort | script | Script to be run when loading of an image is interrupted |
Keyboard Events
Valid in all elements except base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title.
Attribute | Value | Description |
---|---|---|
onkeydown | script | Script to be run when a key is pressed |
onkeypress | script | Script to be run when a key is pressed and released |
onkeyup | script | Script to be run when a key is released |
Mouse Events
Valid in all elements except base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title.
Attribute | Value | Description |
---|---|---|
onclick | script | Script to be run on a mouse click |
ondblclick | script | Script to be run on a mouse double-click |
onmousedown | script | Script to be run when mouse button is pressed |
onmousemove | script | Script to be run when mouse pointer moves |
onmouseout | script | Script to be run when mouse pointer moves out of an element |
onmouseover | script | Script to be run when mouse pointer moves over an element |
onmouseup | script | Script to be run when mouse button is released |
DTD: indicates in which HTML 4.01 / XHTML 1.0 DTD the tag is allowed. S=Strict, T=Transitional, and F=Frameset
Tag | Description | DTD |
---|---|---|
<!--...--> | Defines a comment | STF |
<!DOCTYPE> | Defines the document type | STF |
<a> | Defines an anchor | STF |
<abbr> | Defines an abbreviation | STF |
<acronym> | Defines an acronym | STF |
<address> | Defines contact information for the author/owner of a document | STF |
<applet> | Deprecated. Defines an embedded applet | TF |
<area /> | Defines an area inside an image-map | STF |
<b> | Defines bold text | STF |
<base /> | Specifies the base URL/target for all relative URLs in a document | STF |
<basefont /> | Deprecated. Specifies a default color, size, or font for all the text in a document | TF |
<bdo> | Overrides the current text direction | STF |
<big> | Defines big text | STF |
<blockquote> | Defines a long quotation, 인용자 | STF |
<body> | Defines the document's body | STF |
<br /> | Defines a single line break | STF |
<button> | Defines a clickable button | STF |
<caption> | Defines a table caption | STF |
<center> | Deprecated. Defines centered text | TF |
<cite> | Defines a citation | STF |
<code> | Defines a piece of computer code | STF |
<col /> | Defines attribute values for one or more columns in a table | STF |
<colgroup> | Specifies a group of one or more columns in a table for formatting | STF |
<dd> | Defines a description of an item in a definition list | STF |
<del> | Defines text that has been deleted from a document | STF |
<dfn> | Defines a definition term | STF |
<dir> | Deprecated. Defines a directory list | TF |
<div> | Defines a section in a document | STF |
<dl> | Defines a definition list | STF |
<dt> | Defines a term (an item) in a definition list | STF |
<em> | Defines emphasized text | STF |
<fieldset> | Groups related elements in a form | STF |
<font> | Deprecated. Defines font, color, and size for text | TF |
<form> | Defines an HTML form for user input | STF |
<frame /> | Defines a window (a frame) in a frameset | F |
<frameset> | Defines a set of frames | F |
<h1> to <h6> | Defines HTML headings | STF |
<head> | Defines information about the document | STF |
<hr /> | Defines a horizontal line | STF |
<html> | Defines the root of an HTML document | STF |
<i> | Defines italic text | STF |
<iframe> | Defines an inline frame | TF |
<img /> | Defines an image | STF |
<input /> | Defines an input control | STF |
<ins> | Defines text that has been inserted into a document | STF |
<kbd> | Defines keyboard input | STF |
<label> | Defines a label for an <input> element | STF |
<legend> | Defines a caption for a <fieldset> element | STF |
<li> | Defines a list item | STF |
<link /> | Defines the relationship between a document and an external resource | STF |
<map> | Defines a client-side image-map | STF |
<menu> | Deprecated. Defines a menu list | TF |
<meta /> | Defines metadata about an HTML document | STF |
<noframes> | Defines an alternate content for users that do not support frames | TF |
<noscript> | Defines an alternate content for users that do not support client-side scripts | STF |
<object> | Defines an embedded object | STF |
<ol> | Defines an ordered list | STF |
<optgroup> | Defines a group of related options in a drop-down list | STF |
<option> | Defines an option in a drop-down list | STF |
<p> | Defines a paragraph | STF |
<param /> | Defines a parameter for an object | STF |
<pre> | Defines preformatted text | STF |
<q> | Defines a short quotation | STF |
<s> | Deprecated. Defines strikethrough text | TF |
<samp> | Defines sample output from a computer program | STF |
<script> | Defines a client-side script | STF |
<select> | Defines a drop-down list | STF |
<small> | Defines smaller text | STF |
<span> | Defines a section in a document | STF |
<strike> | Deprecated. Defines strikethrough text | TF |
<strong> | Defines strong text | STF |
<style> | Defines style information for a document | STF |
<sub> | Defines subscripted text | STF |
<sup> | Defines superscripted text | STF |
<table> | Defines a table | STF |
<tbody> | Groups the body content in a table | STF |
<td> | Defines a cell in a table | STF |
<textarea> | Defines a multiline input control (text area) | STF |
<tfoot> | Groups the footer content in a table | STF |
<th> | Defines a header cell in a table | STF |
<thead> | Groups the header content in a table | STF |
<title> | Defines a title for the document | STF |
<tr> | Defines a row in a table | STF |
<tt> | Defines teletype text | STF |
<u> | Deprecated. Defines underlined text | TF |
<ul> | Defines an unordered list | STF |
<var> | Defines a variable | STF |
<xmp> | Deprecated. Defines preformatted text |
The attributes listed below are standard, and are supported by all HTML and XHTML tags, with a few exceptions.
Core Attributes
Not valid in <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title> elements.
Attribute | Value | Description |
---|---|---|
class | classname | Specifies a classname for an element |
id | id | Specifies a unique id for an element |
style | style_definition | Specifies an inline style for an element |
title | text | Specifies extra information about an element (displayed as a tool tip) |
Language Attributes
Not valid in <base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param>, and <script> elements.
Attribute | Value | Description |
---|---|---|
dir | ltr rtl |
Specifies the text direction for the content in an element |
lang | language_code | Specifies a language code for the content in an element.Language code reference |
xml:lang | language_code | Specifies a language code for the content in an element, in XHTML documents. Language code reference |
Keyboard Attributes
Attribute | Value | Description |
---|---|---|
accesskey | character | Specifies a keyboard shortcut to access an element |
tabindex | number | Specifies the tab order of an element |
The table below lists all HTML/XHTML elements, and shows what Doctype (DTD) each element appears in.
Tag | HTML5 | HTML 4.01 / XHTML 1.0 | XHTML 1.1 | ||
---|---|---|---|---|---|
Transitional | Strict | Frameset | |||
<a> | Yes | Yes | Yes | Yes | Yes |
<abbr> | Yes | Yes | Yes | Yes | Yes |
No | Yes | Yes | Yes | Yes | |
<address> | Yes | Yes | Yes | Yes | Yes |
No | Yes | No | Yes | No | |
<area /> | Yes | Yes | Yes | Yes | No |
<article> | Yes | No | No | No | No |
<aside> | Yes | No | No | No | No |
<audio> | Yes | No | No | No | No |
<b> | Yes | Yes | Yes | Yes | Yes |
<base /> | Yes | Yes | Yes | Yes | Yes |
<basefont /> | No | Yes | No | Yes | No |
<bdi> | Yes | No | No | No | No |
<bdo> | Yes | Yes | Yes | Yes | No |
<big> | No | Yes | Yes | Yes | Yes |
<blockquote> | Yes | Yes | Yes | Yes | Yes |
<body> | Yes | Yes | Yes | Yes | Yes |
<br /> | Yes | Yes | Yes | Yes | Yes |
<button> | Yes | Yes | Yes | Yes | Yes |
<canvas> | Yes | No | No | No | No |
<caption> | Yes | Yes | Yes | Yes | Yes |
<center> | No | Yes | No | Yes | No |
<cite> | Yes | Yes | Yes | Yes | Yes |
<code> | Yes | Yes | Yes | Yes | Yes |
<col /> | Yes | Yes | Yes | Yes | No |
<colgroup> | Yes | Yes | Yes | Yes | No |
<command> | Yes | No | No | No | No |
<datalist> | Yes | No | No | No | No |
<dd> | Yes | Yes | Yes | Yes | Yes |
<del> | Yes | Yes | Yes | Yes | No |
<details> | Yes | No | No | No | No |
<dfn> | Yes | Yes | Yes | Yes | Yes |
<dir> | No | Yes | No | Yes | No |
<div> | Yes | Yes | Yes | Yes | Yes |
<dl> | Yes | Yes | Yes | Yes | Yes |
<dt> | Yes | Yes | Yes | Yes | Yes |
<em> | Yes | Yes | Yes | Yes | Yes |
<embed> | Yes | No | No | No | No |
<fieldset> | Yes | Yes | Yes | Yes | Yes |
<figcaption> | Yes | No | No | No | No |
<figure> | Yes | No | No | No | No |
<font> | No | Yes | No | Yes | No |
<footer> | Yes | No | No | No | No |
<form> | Yes | Yes | Yes | Yes | Yes |
<frame /> | No | No | No | Yes | No |
<frameset> | No | No | No | Yes | No |
<h1> to <h6> | Yes | Yes | Yes | Yes | Yes |
<head> | Yes | Yes | Yes | Yes | Yes |
<header> | Yes | No | No | No | No |
<hgroup> | Yes | No | No | No | No |
<hr /> | Yes | Yes | Yes | Yes | Yes |
<html> | Yes | Yes | Yes | Yes | Yes |
<i> | Yes | Yes | Yes | Yes | Yes |
<iframe> | Yes | Yes | No | Yes | No |
<img /> | Yes | Yes | Yes | Yes | Yes |
<input /> | Yes | Yes | Yes | Yes | Yes |
<ins> | Yes | Yes | Yes | Yes | No |
<isindex> | No | Yes | No | Yes | No |
<keygen> | Yes | No | No | No | No |
<kbd> | Yes | Yes | Yes | Yes | Yes |
<label> | Yes | Yes | Yes | Yes | Yes |
<legend> | Yes | Yes | Yes | Yes | Yes |
<li> | Yes | Yes | Yes | Yes | Yes |
<link /> | Yes | Yes | Yes | Yes | Yes |
<map> | Yes | Yes | Yes | Yes | No |
<mark> | Yes | No | No | No | No |
<menu> | Yes | Yes | No | Yes | No |
<meta /> | Yes | Yes | Yes | Yes | Yes |
<meter> | Yes | No | No | No | No |
<nav> | Yes | No | No | No | No |
<noframes> | No | Yes | No | Yes | No |
<noscript> | Yes | Yes | Yes | Yes | Yes |
<object> | Yes | Yes | Yes | Yes | Yes |
<ol> | Yes | Yes | Yes | Yes | Yes |
<optgroup> | Yes | Yes | Yes | Yes | Yes |
<option> | Yes | Yes | Yes | Yes | Yes |
<output> | Yes | No | No | No | No |
<p> | Yes | Yes | Yes | Yes | Yes |
<param /> | Yes | Yes | Yes | Yes | Yes |
<pre> | Yes | Yes | Yes | Yes | Yes |
<progress> | Yes | No | No | No | No |
<q> | Yes | Yes | Yes | Yes | Yes |
<rp> | Yes | No | No | No | No |
<rt> | Yes | No | No | No | No |
<ruby> | Yes | No | No | No | No |
<s> | Yes | Yes | No | Yes | No |
<samp> | Yes | Yes | Yes | Yes | Yes |
<script> | Yes | Yes | Yes | Yes | Yes |
<section> | Yes | No | No | No | No |
<select> | Yes | Yes | Yes | Yes | Yes |
<small> | Yes | Yes | Yes | Yes | Yes |
<source> | Yes | No | No | No | No |
<span> | Yes | Yes | Yes | Yes | Yes |
<strike> | No | Yes | No | Yes | No |
<strong> | Yes | Yes | Yes | Yes | Yes |
<style> | Yes | Yes | Yes | Yes | Yes |
<sub> | Yes | Yes | Yes | Yes | Yes |
<summary> | Yes | No | No | No | No |
<sup> | Yes | Yes | Yes | Yes | Yes |
<table> | Yes | Yes | Yes | Yes | Yes |
<tbody> | Yes | Yes | Yes | Yes | No |
<td> | Yes | Yes | Yes | Yes | Yes |
<textarea> | Yes | Yes | Yes | Yes | Yes |
<tfoot> | Yes | Yes | Yes | Yes | No |
<th> | Yes | Yes | Yes | Yes | Yes |
<thead> | Yes | Yes | Yes | Yes | No |
<time> | Yes | No | No | No | No |
<title> | Yes | Yes | Yes | Yes | Yes |
<tr> | Yes | Yes | Yes | Yes | Yes |
<track> | Yes | No | No | No | No |
<tt> | No | Yes | Yes | Yes | Yes |
<u> | No | Yes | No | Yes | No |
<ul> | Yes | Yes | Yes | Yes | Yes |
<var> | Yes | Yes | Yes | Yes | Yes |
<video> | Yes | No | No | No | No |
<wbr> | Yes | No | No | No | No |
- HTML stands for Hyper Text Markup Language
- HTML is not a programming language, it is a markup language
- A markup language is a set of markup tags
- HTML uses markup tags to describe web pages
- HTML tags are keywords surrounded by angle brackets like <html>
- HTML tags normally come in pairs like <b> and </b>
- The first tag in a pair is the start tag, the second tag is the end tag
- Start and end tags are also called opening tags and closing tags
- An HTML element starts with a start tag / opening tag
- An HTML element ends with an end tag / closing tag
- The element content is everything between the start and the end tag
- Some HTML elements have empty content
- Empty elements are closed in the start tag
- Most HTML elements can have attribute
- HTML Attributes: <a href=..>에서 a는 태그, href는 속성
- HTML elements can have attributes
- Attributes provide additional information about an element
- Attributes are always specified in the start tag
- Attributes come in name/value pairs like: name="value"