HTML 전역 특성

HTML 전역 특성(전역 속성)은 모든 HTML 요소가 지원하는 특성입니다. 그러나 일부 요소에서는 효과가 없을 수 있습니다.

전역 특성은 모든 HTML 요소에 지정할 수 있으며, 심지어 표준에 명시되지 않은 요소에도 지정할 수 있습니다. 비록 비표준 요소를 사용하는 순간 문서는 HTML 표준을 준수하지 않는 것이지만, 그렇다고 해도 모든 비표준 요소는 전역 특성을 허용해야 합니다. 예를 들어, <foo>라는 이름의 유효하지 않은 HTML 태그를 사용한 문서에서도, HTML 표준을 준수하는 브라우저라면 hidden 특성을 지정한 <foo hidden>...</foo> 콘텐츠를 화면에 그리지 않습니다.

기본 HTML 전역 특성 외에도 접근성 향상을 위해 사용하는 다양한 aria-* 특성이 존재합니다.

전역 특성 목록

일반 특성

accesskey

현재 요소에 대한 키보드 단축키 생성을 위한 힌트를 제공합니다. 이 특성은 공백으로 구분한 문자 목록으로 구성됩니다. 브라우저는 주어진 여러 개의 값 중 장치의 키보드 레이아웃에 존재하는 첫 번째 키를 사용해야 합니다.

autocapitalize

사용자가 입력 또는 수정하는 텍스트를 자동으로 대문자로 변환할지 여부와 변환하는 방법을 제어합니다. 다음 값 중 하나를 사용해야 합니다.

off 또는 none: 대소문자 자동 변환이 발생하지 않습니다. (모든 글자의 기본값이 소문자)
on 또는 sentences: 각 문장의 첫 문자를 대문자로 변환합니다. 나머지 글자의 기본값은 소문자입니다.
words: 각 단어의 첫 글자를 대문자로 변환합니다. 나머지 글자의 기본값은 소문자입니다.
characters: 모든 글자의 기본값이 대문자입니다.

autofocus

페이지를 불러온 직후, 또는 요소가 속한 <dialog>가 나타나는 순간 자동으로 포커스를 부여할지 나타내는 불리언 특성입니다.

class

요소의 클래스를 나타내는 공백 구분 목록입니다. 요소 클래스를 사용하면 CSS 클래스 선택자와 JavaScript의 Document.getElementsByClassName() 등의 함수로 특정한 요소를 구별해 접근할 수 있습니다.

contenteditable

해당 요소를 사용자가 편집할 수 있는지 지정합니다. 편집 가능하도록 지정한 경우, 브라우저는 해당 요소의 위젯을 수정해 내용을 수정할 수 있도록 만듭니다. 다음 값 중 하나를 사용해야 합니다.

true 또는 빈 문자열: 요소가 편집 가능합니다.
false: 요소를 편집할 수 없습니다.

data-*

사용자 지정 데이터 특성(custom data attribute)이라는 특성 클래스를 형성해서, 임의의 데이터를 HTML과 DOM 사이에서 교환할 수 있도록 합니다. 모든 커스텀 데이터는 해당 요소의 HTMLElement 인터페이스 내 dataset 속성으로 접근할 수 있습니다.

dir

요소의 쓰기 방향을 지정합니다. 다음 값 중 하나를 사용해야 합니다.

ltr: 왼쪽에서 시작해 오른쪽으로 씁니다. 한국어와 영어가 왼쪽에서 오른쪽으로 쓰는 언어입니다.
rtl: 오른쪽에서 시작해 왼쪽으로 씁니다. 아랍어가 오른쪽에서 왼쪽으로 쓰는 언어입니다.
auto: 사용자 에이전트가 쓰기 방향을 결정합니다. 요소 내의 문자를 순회하다가, 뚜렷한 쓰기 방향을 가진 문자를 발견하면 그 방향을 요소 전체로 적용하는 알고리즘을 사용합니다.

draggable

Drag and Drop API를 사용해 요소를 드래그할 수 있는지 지정합니다. 다음 값 중 하나를 사용해야 합니다.

true: 요소를 드래그할 수 있습니다.
false: 요소를 드래그할 수 없습니다.

enterkeyhit

가상 키보드의 엔터 키에 표시할 액션 레이블 또는 아이콘을 지정합니다.

hidden

해당 요소가 현재 문서와는 아직 관련되지 않았거나, 더 이상 필요하지 않음을 나타내는 불리언 특성입니다. 예를 들어, 사용자가 로그인한 후에 보여줘야 하는 부분을 로그인 전에 숨길 때 사용할 수 있습니다. 브라우저는 hidden 특성을 지정한 요소를 렌더링하지 않습니다. 현재 문서와 관련 있는 요소를 오직 화면에서 숨기기 위한 용도로 사용해선 안됩니다.

id

요소에 고유 식별자(ID)를 지정합니다. 문서 내에서 유일해야 합니다. 프래그먼트 식별자(#)를 사용한 링크 연결이나, 스크립트와 CSS에서 요소를 식별하기 위해 사용합니다.

inputmode

사용자가 요소나 요소의 콘텐츠를 편집할 때 제공해야 할 가상 키보드 설정을 브라우저에 알려줍니다. 주로 <input> 요소에 사용하지만, contenteditable 특성을 가진 요소라면 종류 불문하고 사용할 수 있습니다.

is

표준 HTML 요소가 사용자 정의 요소처럼 동작하도록 지정합니다. (자세한 내용은 사용자 정의 요소 사용하기를 참고하세요.)

lang

편집할 수 없는 요소가 포함한 언어, 또는 편집 가능한 요소에서 사용자가 사용해야 하는 언어를 지정합니다. BCP47에서 정의하는 언어 식별 태그 하나를 값으로 사용해야 합니다.

nonce

논스(일회용 숫자 값)를 지정합니다. 주어진 값은 콘텐츠 보안 정책에서 주어진 리소스를 허용할지 결정할 때 사용합니다.

part

요소의 파트 이름입니다. 공백으로 구분한 리스트입니다. 파트 이름을 사용하면 CSS의 ::part 의사 요소를 사용해서 섀도 트리 내의 특정 요소만 선택해 스타일을 적용할 수 있습니다.

slot

요소를 섀도 DOM의 섀도 트리 슬롯에 할당합니다. <slot> 중에서 name 특성의 값이 이 특성의 값과 일치하는 곳에 요소를 배치합니다.

spellcheck

요소의 맞춤법 검사 여부를 지정합니다. 다음 값 중 하나를 사용해야 합니다.

true 또는 빈 문자열: 가능하다면 맞춤법 검사를 수행해야 함을 나타냅니다.
false: 맞춤법 검사를 수행하지 않아야 함을 나타냅니다.

style

요소에 적용할 CSS 스타일 선언을 지정합니다.

tabindex

요소가 입력 포커스를 받을 수 있는지, 순차적 키보드 탐색에 참여하는지, 참여한다면 어떤 순서로 참여하는지 지정하는 정수형 특성입니다. 다음 값 중 하나를 사용해야 합니다.

음의 정수: 요소가 포커스를 받을 수 있지만 순차적 키보드 탐색으로는 접근할 수 없음을 나타냅니다.
0: 요소가 포커스를 받을 수 있으며 순차적 키보드 탐색으로 접근할 수 있지만, 그 순서는 플랫폼 관례에 따름을 나타냅니다.
양의 정수: 요소가 포커스를 받을 수 있고 순차적 키보드 탐색으로 접근할 수 있습니다. 탐색 순서는 tabindex 값의 오름차순입니다. 여러 요소가 같은 tabindex 값을 공유하면 그 순서는 문서 내의 상대적 위치와 동일합니다.

title

요소에 대한 추가 정보를 제공하는 텍스트입니다. 사용자에게는 보통 툴팁으로 보여집니다.

translate

페이지를 번역할 때, 요소의 번역 가능한 특성 값과 자식 Text 노드들을 번역해야 하는지, 아니면 그대로 둬야 하는지 지정하는 열거형 특성입니다. 다음 값 중 하나를 사용해야 합니다.

yes 또는 빈 문자열: 요소를 번역합니다.
no: 요소를 번역하지 않습니다.

마이크로데이터

마이크로데이터는 WHATWG HTML Microdata 명세의 일부입니다.

itemid: 아이템의 고유하고 전역적인 식별자입니다.
itemprop: 아이템에 속성을 추가합니다. 모든 HTML 요소에 사용할 수 있습니다.
itemref: itemscope 특성을 가진 요소를 해당 요소의 자손이 아닌 요소와 연결할 때 사용합니다. 요소의 id(itemid 아님)를 공백 구분 리스트로 지정해야 합니다.
itemscope: (대개) itemtype과 함께 사용해서, 이 요소에 속한 HTML이 특정 아이템을 서술함을 나타냅니다.
itemtype: itemprop을 정의할 어휘를 가리키는 URL을 지정합니다. 이 어휘의 적용 범위는 itemscope가 정의합니다.

명세

HTML Living Standard

브라우저 호환성

	IE	Edge	Chrome	Safari	Firefox	iOS Safari	Android WebView	Android Chrome	Android Firefox	Samsung Internet
`accesskey`
`anchor`
`autocapitalize`
`autofocus`
`class`
`contenteditable`
`contenteditable="plaintext-only"`
`data-*` attributes
`dir`
`draggable`
`enterkeyhint`
`exportparts`
`hidden`
`until-found` value
`id`
`inert`
`inputmode`
`invokeaction`
`invoketarget`
`is`
`lang`
`nonce`
`nonce` hiding behavior
`part`
`popover`
`slot`
`spellcheck`
`style`
`tabindex`
`title`
Multi-line titles
`translate`
`virtualkeyboardpolicy`

MDN browser-compat-data