HTML 특성 참고서

HTML의 요소들은 특성을 가지고 있습니다. 특성은 사용자가 원하는 기준에 맞도록 요소를 설정하거나 다양한 방식으로 요소의 동작을 조절하기 위한 값을 말합니다.

특성 목록

특성 이름 요소 설명
accept <form>, <input> 서버에서 허용하는 유형의 목록. 보통 파일 유형을 의미합니다.
accept-charset <form> 지원하는 문자 집합의 목록.
accesskey 전역 특성 해당 요소로 초점을 이동시키거나 활성화시키기 위한 키보드 단축키를 정의합니다.
action <form> 폼(form)으로부터 전송된 정보를 처리할 프로그램의 URI입니다.
align <applet>, <caption>, <col>, <colgroup>, <hr>, <iframe>, <img>, <table>, <tbody>, <td>, <tfoot> , <th>, <thead>, <tr> 해당 요소의 가로 정렬 방식을 명시합니다.
allow <iframe> Specifies a feature-policy for the iframe.
alt <applet>, <area>, <img>, <input> 이미지를 표시할 수 없는 경우 표시할 대체 문구입니다.
async <script> 해당 스크립트는 비동기적으로 실행되어야함을 나타냅니다.
autocapitalize 전역 특성 사용자가 입력하거나 편집하는 문구를 자동으로 대문자로 바꿀지 여부와 방법을 제어합니다.
autocomplete <form>, <input>, <textarea> 이 폼 내의 컨트롤에 대해 브라우저가 지원하는 값 자동완성 기능을 기본으로 설정할 것인지를 나타냅니다.
autofocus <button>, <input>, <select>, <textarea> 페이지가 로드된 후 자동으로 해당 요소로 초점이 이동합니다.
autoplay <audio>, <video> 오디오나 비디오가 가능한 빠른 시점에 재생됩니다.
background <body>, <table>, <td>, <th> Specifies the URL of an image file.
Note: Although browsers and email clients may still support this attribute, it is obsolete. Use CSS background-image instead.
bgcolor <body>, <col>, <colgroup>, <marquee>, <table>, <tbody>, <tfoot>, <td>, <th>, <tr>

요소의 배경색입니다.

주: 이 속성은 더 이상 사용하지 않습니다. CSS의 background-color 속성을 대신 사용하시기 바랍니다.

border <img>, <object>, <table>

선의 굵기입니다.

주: 이 속성은 더 이상 사용하지 않습니다. CSS의 border 속성을 대신 사용하시기 바랍니다.

buffered <audio>, <video> 이미 버퍼링된 미디어의 시간 범위를 가집니다.
capture <input> From the media capture spec, specifies a new file can be captured.
charset <meta>, <script> 페이지 또는 스크립트의 문자 인코딩을 선언합니다.
checked <command>, <input> 페이지가 로딩될 때, 해당 요소가 체크되어 있어야하는지를 나타냅니다.
cite <blockquote>, <del>, <ins>, <q> 변경 또는 인용구문의 출처를 가리키는 URI를 가집니다.
class 전역 특성 공통적인 속성으로 요소의 스타일을 지정할 때 CSS와 함께 자주 사용됩니다.
code <applet> 로딩 후 실행할 애플릿의 클래스 파일의 URL을 명시합니다.
codebase <applet> 이 속성은 코드(code) 속성이 참조하는 애플릿의 .class 파일이 저장되어 있는 디렉토리의 절대경로 또는 상대경로 URL을 제공합니다.
color <basefont>, <font>, <hr>

이 속성은 미리 정의된 색상 명칭 또는 #RRGGBB 형식의 16진수로 명시된 색상으로 텍스트 색상을 설정한다.

주: 이 속성은 더 이상 사용하지 않습니다. CSS의 color 속성을 대신 사용하시기 바랍니다.

cols <textarea> textarea에 표시할 컬럼의 수를 정의한다.
colspan <td>, <th> colspan 속성은 어떤 셀이 확장되어야 할 컬럼의 수를 정의한다.
content <meta> A value associated with http-equiv or name depending on the context.
contenteditable 전역 특성 Indicates whether the element's content is editable.
contextmenu 전역 특성 Defines the ID of a <menu> element which will serve as the element's context menu.
controls <audio>, <video> Indicates whether the browser should show playback controls to the user.
coords <area> A set of values specifying the coordinates of the hot-spot region.
crossorigin <audio>, <img>, <link>, <script>, <video> How the element handles cross-origin requests
csp <iframe> Specifies the Content Security Policy that an embedded document must agree to enforce upon itself.
data <object> Specifies the URL of the resource.
data-* 전역 특성 Lets you attach custom attributes to an HTML element.
datetime <del>, <ins>, <time> Indicates the date and time associated with the element.
decoding <img> Indicates the preferred method to decode the image.
default <track> Indicates that the track should be enabled unless the user's preferences indicate something different.
defer <script> Indicates that the script should be executed after the page has been parsed.
dir 전역 특성 Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
dirname <input>, <textarea>
disabled <button>, <command>, <fieldset>, <input>, <optgroup>, <option>, <select>, <textarea> Indicates whether the user can interact with the element.
download <a>, <area> Indicates that the hyperlink is to be used for downloading a resource.
draggable 전역 특성 Defines whether the element can be dragged.
dropzone 전역 특성 Indicates that the element accept the dropping of content on it.
enctype <form> Defines the content type of the form date when the method is POST.
enterkeyhint <textarea>, contenteditable The enterkeyhint specifies what action label (or icon) to present for the enter key on virtual keyboards. The attribute can be used with form controls (such as the value of textarea elements), or in elements in an editing host (e.g., using contenteditable attribute).
for <label>, <output> Describes elements which belongs to this one.
form <button>, <fieldset>, <input>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea> Indicates the form that is the owner of the element.
formaction <input>, <button> Indicates the action of the element, overriding the action defined in the <form>.
formenctype <button>, <input> If the button/input is a submit button (type="submit"), this attribute sets the encoding type to use during form submission. If this attribute is specified, it overrides the enctype attribute of the button's form owner.
formmethod <button>, <input> If the button/input is a submit button (type="submit"), this attribute sets the submission method to use during form submission (GET, POST, etc.). If this attribute is specified, it overrides the method attribute of the button's form owner.
formnovalidate <button>, <input> If the button/input is a submit button (type="submit"), this boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the novalidate attribute of the button's form owner.
formtarget <button>, <input> If the button/input is a submit button (type="submit"), this attribute specifies the browsing context (for example, tab, window, or inline frame) in which to display the response that is received after submitting the form. If this attribute is specified, it overrides the target attribute of the button's form owner.
headers <td>, <th> IDs of the <th> elements which applies to this element.
height <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>

Specifies the height of elements listed here. For all other elements, use the CSS height property.

Note: In some instances, such as <div>, this is a legacy attribute, in which case the CSS height property should be used instead.

hidden 전역 특성 Prevents rendering of given element, while keeping child elements, e.g. script elements, active.
high <meter> Indicates the lower bound of the upper range.
href <a>, <area>, <base>, <link> 링크된 리소스의 URL
hreflang <a>, <area>, <link> 링크된 리소스의 언어를 나타냄
http-equiv <meta>
icon <command> Specifies a picture which represents the command.
id 전역 특성 일반적으로, 특정한 요소를 스타일하기 위해 CSS와 함꼐 사용됨. 이 속성의 값은 유일해야함.
importance <iframe>, <img>, <link>, <script> Indicates the relative fetch priority for the resource.
integrity <link>, <script> Specifies a Subresource Integrity value that allows browsers to verify what they fetch.
intrinsicsize <img> This attribute tells the browser to ignore the actual intrinsic size of the image and pretend it's the size specified in the attribute.
inputmode <textarea>, contenteditable Provides a hint as to the type of data that might be entered by the user while editing the element or its contents. The attribute can be used with form controls (such as the value of textarea elements), or in elements in an editing host (e.g., using contenteditable attribute).
ismap <img> Indicates that the image is part of a server-side image map.
itemprop 전역 특성
kind <track> Specifies the kind of text track.
label <track> Specifies a user-readable title of the text track.
lang 전역 특성 요소에서 사용된 언어를 정의합니다.
language <script> 요소에서 사용된 스크립트 언어를 정의합니다.
list <input> Identifies a list of pre-defined options to suggest to the user.
loading <img>, <iframe> Indicates if the element should be loaded lazily (loading="lazy") or loaded immediately (loading="eager").
list <input> Identifies a list of pre-defined options to suggest to the user.
loop <audio>, <bgsound>, <marquee>, <video> 미디어가 재생을 완료했을때 다시 재생을 시작해야할지를 나타냅니다.
low <meter> Indicates the upper bound of the lower range.
manifest <html> 문서의 캐시 매니페스트의 URL을 가리킵니다.
max <input>, <meter>, <progress> 허용되는 최대 값을 나타냅니다.
maxlength <input>, <textarea> 요소에 허용되는 문자의 최대 길이를 나타냅니다.
minlength <input>, <textarea> Defines the minimum number of characters allowed in the element.
media <a>, <area>, <link>, <source>, <style> Specifies a hint of the media for which the linked resource was designed.
method <form> 폼을 제출할때 사용할 HTTP 메소드를 정의함. GET(기본값) 또는 POST 가 될수 있음.
min <input>, <meter> 허용되는 최소 값을 나타냄.
multiple <input>, <select> Indicates whether multiple values can be entered in an input of the type email or file.
muted <audio>, <video> Indicates whether the audio will be initially silenced on page load.
name <button>, <form>, <fieldset>, <iframe>, <input>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param> 요소의 이름. For example used by the server to identify the fields in form submits.
novalidate <form> This attribute indicates that the form shouldn't be validated when submitted.
open <details> Indicates whether the details will be shown on page load.
optimum <meter> Indicates the optimal numeric value.
pattern <input> Defines a regular expression which the element's value will be validated against.
ping <a>, <area>
placeholder <input>, <textarea> 필드에 무엇이 들어갈수 있는지 사용자에게 힌트를 제공합니다.
poster <video> A URL indicating a poster frame to show until the user plays or seeks.
preload <audio>, <video> 전체,부분,또는 아무런 리소스가 미리 로드되어야하는지를 나타냅니다.
radiogroup <command>
readonly <input>, <textarea> 요소가 수정될 수 있는지를 나타냅니다.
rel <a>, <area>, <link> Specifies the relationship of the target object to the link object.
required <input>, <select>, <textarea> 이 요소가 채워져야 하는지를 나타냅니다.
reversed <ol> Indicates whether the list should be displayed in a descending order instead of a ascending.
rows <textarea> textarea의 줄 개수를 정의합니다.
rowspan <td>, <th> Defines the number of rows a table cell should span over.
sandbox <iframe>
scope <th>
scoped <style>
selected <option> Defines a value which will be selected on page load.
shape <a>, <area>
size <input>, <select> Defines the width of the element (in pixels). If the element's type attribute is text or password then it's the number of characters.
sizes <link>
slot 전역 특성 Assigns a slot in a shadow DOM shadow tree to an element.
span <col>, <colgroup>
spellcheck 전역 특성 Indicates whether spell checking is allowed for the element.
src <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video> 내장 컨텐츠의 URL
srcdoc <iframe>
srclang <track>
srcset <img>
start <ol> Defines the first number if other than 1.
step <input>
style 전역 특성 이전 스타일을 오버라이드할 CSS 스타일을 정의함.
summary <table>
tabindex 전역 특성 Overrides the browser's default tab order and follows the one specified instead.
target <a>, <area>, <base>, <form>
title 전역 특성 요소 위에 호버링했을떄 표시될 툴팁의 텍스트
translate 전역 특성 Specify whether an element's attribute values and the values of its Text node children are to be translated when the page is localized, or whether to leave them unchanged.
type <button>, <input>, <command>, <embed>, <object>, <script>, <source>, <style>, <menu> 요소의 타입을 정의함
usemap <img>, <input>, <object>
value <button>, <option>, <input>, <li>, <meter>, <progress>, <param> 페이지가 로드된뒤 요소에 표시될 기본값을 지정합니다.
width <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> Note: In some instances, such as <div>, this is a legacy attribute, in which case the CSS width property should be used instead. In other cases, such as <canvas>, the width must be specified with this attribute.
wrap <textarea> Indicates whether the text should be wrapped.

Content versus IDL attributes

In HTML, most attributes have two faces: the content attribute and the IDL attribute.

The content attribute is the attribute as you set it from the content (the HTML code) and you can set it or get it via element.setAttribute() or element.getAttribute(). The content attribute is always a string even when the expected value should be an integer. For example, to set an <input> element's maxlength to 42 using the content attribute, you have to call setAttribute("maxlength", "42") on that element.

The IDL attribute is also known as a JavaScript property. These are the attributes you can read or set using JavaScript properties like element.foo. The IDL attribute is always going to use (but might transform) the underlying content attribute to return a value when you get it and is going to save something in the content attribute when you set it. In other words, the IDL attributes, in essence, reflect the content attributes.

Most of the time, IDL attributes will return their values as they are really used. For example, the default type for <input> elements is "text", so if you set input.type="foobar", the <input> element will be of type text (in the appearance and the behavior) but the "type" content attribute's value will be "foobar". However, the type IDL attribute will return the string "text".

IDL attributes are not always strings; for example, input.maxlength is a number (a signed long). When using IDL attributes, you read or set values of the desired type, so input.maxlength is always going to return a number and when you set input.maxlength ,it wants a number. If you pass another type, it is automatically converted to a number as specified by the standard JavaScript rules for type conversion.

IDL attributes can reflect other types such as unsigned long, URLs, booleans, etc. Unfortunately, there are no clear rules and the way IDL attributes behave in conjunction with their corresponding content attributes depends on the attribute. Most of the time, it will follow the rules laid out in the specification, but sometimes it doesn't. HTML specifications try to make this as developer-friendly as possible, but for various reasons (mostly historical), some attributes behave oddly (select.size, for example) and you should read the specifications to understand how exactly they behave.

같이 보기