88

최근 30분 동안 방문한 사용자 수를 표시합니다. (~)

30분 동안 최고 사용자 수 -
어제: 0명 / 오늘: 0명

HTML 주요 요소와 속성, 한눈에 보기

HTML 주요 요소와 속성, 한눈에 보기

# 개요

웹 개발 프로젝트에 필요한 HTML 요소(Elements)와 속성(Attributes)에 대해 간단한 개요와 설명을 통해 웹 페이지를 설계하고 구현하는 데 필요한 정보를 알아봅니다.
이를 통해 웹 표준을 준수하는 동시에, 효과적이고 의미론적(Semantic) 마크업 구조를 구현할 수 있도록 돕습니다.

  • HTML5 기준으로 작성합니다.
  • 모든 브라우저에서 사용할 수 있어야 합니다.(IE 지원 불가는 별도 표시)
  • Deprecated(더 이상 사용되지 않는) 요소나 속성은 제외합니다.
  • 의미론적(Semantic)인 내용 위주로 작성합니다.
  • 표시적 의미(화면에 표시되는 방식)로 사용되지 않음을 전제하므로 그에 대한 내용은 최대한 생략합니다.
  • 빈 태그(Empty Tags)는 <TAG />와 같이 /를 포함하여 표시합니다.
  • 해당 요소에 필수적으로 사용되어야 하는 속성(Required Attributes)은 설명에 (필수)를 표시합니다.(그 외는 모두 선택 속성)
  • 개인적 경험에 의해 사용 빈도, 중요도, 난이도가 높은 요소는 강조/첨언 합니다.
  • 개인적 경험에 의해 사용 빈도, 중요도, 난이도가 낮은 요소는 생략/간소화 합니다.

# 주요 범위 요소

HTML 문서의 기본 구조(범위)를 형성하는 요소입니다.
lang 속성은 전역 속성으로, <html>에서 사용하면 문서 전체의 언어를 지정합니다.

HTML
content_copy
L
L
L
L
L
1
2
3
4
5
<!DOCTYPE html> <html lang="ko"> <head></head> <body></body> </html>
문서의 기본 구조
요소 설명 표시 특성 참조
<html> HTML 문서의 범위를 지정. MDN
<head> HTML 문서의 정보를 지정. MDN
<body> HTML 문서의 구조를 지정. block MDN

# 메타데이터 요소

문서의 기본 정보를 지정하거나 다른 리소스와의 관계를 지정합니다.
일부 메타데이터 요소는 브라우저와 검색 엔진 등에 제공하며 효과적인 SEO 최적화와 사용자 경험 향상에 기여합니다.
모두 <head> 요소 내에 포함돼야 합니다.

요소 설명 표시 특성 참조
<title> 브라우저의 제목 표시줄이나 페이지 탭에 보여지는 문서의 제목을 지정. MDN
<base /> HTML 문서에 포함된 모든 상대 URL들의 기준 URL를 지정.
한 문서에 하나의 <base /> 요소만 포함 가능.
- href: 기준 URL
- target: target 속성을 사용하는 요소(<a>)의 기본값
MDN
<link /> 외부 리소스(HTML, CSS, Icon 등)의 연결 및 현재 문서와의 관계를 명시.
- rel: (필수)현재 문서와 외부 리소스와의 관계(Link Types)
- href: 외부 리소스의 URL
- type: 외부 리소스의 MIME 타입
MDN
<meta /> 기타 메타데이터를 나타내기 위해 지정.
(검색엔진이나 브라우저에 정보 제공)
- charset: 문자인코딩 방식
- name: 메타 데이터의 이름(정보의 종류)
- http-equiv: 서버/사용자 에이전트의 작동방식 변경에 대한 지시(HTTP 응답 헤더 제공)
- content: name, http-equiv의 값
MDN
<style> 문서나 문서 일부에 대한 스타일 정보(CSS)를 지정.
- type: MIME 타입
MDN

# 콘텐츠 구분 요소

문서의 각 콘텐츠 구조를 의미론적으로 구분하기 위해 사용합니다.
기능적 차이는 없습니다.

요소 설명 표시 특성 참조
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
문서의 정보 계층을 구조화.(Heading)
문서나 구분된 영역의 제목을 지정, 문서의 목차.
숫자가 낮을수록 높은 단계(중요한)의 제목.
한 문서에 하나의 <h1> 요소만 포함 가능.
block MDN
<header> 문서의 헤더를 지정.
주로 로고, 제목, 검색 등을 포함.
block MDN
<footer> 문서의 푸터를 지정.
주로 작성자, 저작권, 관련 문서 등을 포함.
block MDN
<main> 문서의 주 콘텐츠를 지정.
한 문서에 하나의 <main> 요소만 포함 가능.
block MDN
<article> 독립적으로 구분되거나 재사용 가능한 영역을 지정.
매거진, 신문 기사, 블로그 등.
Heading(<h1>) 요소를 포함하여 식별.
작성일자와 시간을 <time>datetime 속성으로 작성.
block MDN
<section> 문서의 일반적인 영역을 지정.
Heading(<h1> ~ <h6>) 요소를 포함하여 식별.
block MDN
<aside> 문서의 별도 콘텐츠를 지정.
주로 광고나 기타 링크 등의 사이드바를 지정.
block MDN
<nav> 다른 페이지 링크를 제공하는 영역을 지정.(Navigation)
주로 메뉴, 목차, 색인 등을 지정.
block MDN
<address> 연락처 정보를 제공하기 위해 포함하여 사용. block MDN
<div> 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 지정.(Division) block MDN
HTML
content_copy
L
L
L
L
L
1
2
3
4
5
<section> <h2>Title</h2> <div>Contents1</div> <div>Contents2</div> </section>
제목과 함께 사용하는 섹션 구분

# 텍스트 콘텐츠 요소

텍스트를 구조화하고 의미를 부여합니다.
정보의 가독성과 접근성을 향상시키는 역할을 합니다.

요소 설명 표시 특성 참조
<ol> 정렬된 목록을 지정.(Ordered List)
자식으로 <li>만 포함 가능.
항목 순서는 중요도를 의미할 수 있음.
start: 항목에 매겨지는 번호의 시작 값
type: 항목에 매겨지는 번호의 유형
block MDN
<ul> 정렬되지 않은 목록을 지정.(Unordered List)
자식으로 <li>만 포함 가능.
block MDN
<li> 목록의 각 항목.(List Item)
단독으로 사용할 수 없으며, <ol> 혹은 <ul> 자식으로 포함돼야 함.
value: 항목의 순서를 지정.
list-item MDN
<dl> 용어와 정의(설명)의 그룹을 지정.(Description List)
<dt>, <dd>만 포함 가능.
키(key)/값(value) 형태를 표시할 때 유용.
block MDN
<dt> 용어를 지정.(Definition Term) block MDN
<dd> 정의(설명)를 지정.(Definition Details) block MDN
<p> 하나의 문단을 지정.(Paragraph)
일반적으로 정보통신보조기기 등은 다음 문단으로 넘어갈 수 있는 단축키를 제공함.
block MDN
<hr /> 문단의 분리를 위해 지정.(Horizontal Rule)
표현적 관점에서 수평선으로 표시되지만, 의미적 관점으로만 사용해야 함.
block MDN
<pre> 서식이 미리 지정된 텍스트를 지정.(Preformatted Text)
텍스트의 공백과 줄바꿈을 유지하며 표시할 수 있음.
기본적으로 Monospace 글꼴로 표시됨.
block MDN
<blockquote> 일반적인 인용문을 지정.(Block Quotation)
-cite: 인용된 정보의 URL
block MDN
HTML
content_copy
L
L
L
L
L
L
1
2
3
4
5
6
<dl> <dt>Coffee</dt> <dd>Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain Coffea species.</dd> <dt>Milk</dt> <dd>Milk is a nutrient-rich, white liquid food produced by the mammary glands of mammals.</dd> </dl>
용어와 설명을 표시

# 인라인 텍스트 요소

텍스트를 강조하거나 스타일을 적용해, 보다 가독성 높은 문서를 작성할 수 있습니다.

요소 설명 표시 특성 참조
<a> 다른 URL로 연결할 수 있는 하이퍼링크를 지정.(Anchor)
다른 페이지, 같은 페이지 위치(#, 해시 태그), 파일, 이메일 주소, 전화번호 등.
- download: 이 요소가 리소스를 다운로드하는 용도로 사용됨을 의미
- href: 링크 URL
- rel: 현재 문서와 링크 URL의 관계(Link Types)
- target: 링크 URL의 표시(브라우저 탭) 위치
- type: 링크 URL의 MIME 타입
inline MDN
<abbr> 약어를 지정.(Abbreviation)
주로 title 속성을 사용하여 전체 글자나 설명을 제공.
inline MDN
<b> 문체가 다른 글자의 범위를 지정.(Bring Attention)
특별한 의미를 가지지 않음.
읽기 흐름에 도움을 주는 용도로 사용.
다른 태그가 적합하지 않은 경우 마지막 수단으로 사용.
기본적으로 글자가 두껍게(Bold) 표시됨.
inline MDN
<mark> 사용자의 관심을 끌기 위해 하이라이팅할 때 사용.(Mark Text)
기본적으로 형광펜을 사용한 것처럼 글자 배경이 노란색(Yellow)으로 표시됨.
inline MDN
<em> 단순한 의미 강조를 표시.(Emphasis)
중첩할 수 있으며, 중첩될수록 강조 의미가 강해짐.
정보통신보조기기 등에서 구두 강조로 발음됨.
기본적으로 이탤릭체(Italic type)로 표시됨.
inline MDN
<strong> 의미의 중요성을 나타내기 위해 사용.(Strong Importance)
기본적으로 글자가 두껍게(Bold) 표시됨.
inline MDN
<i> 특별한 의미 없이, 평범한 글자와 구분(아이콘이나 특수기호 같은)하기 위해 사용.
기본적으로 이탤릭체(Italic type)로 표시됨.
inline MDN
<dfn> 용어를 정의할 때 사용.(Definition)
기본적으로 이탤릭체(Italic type)로 표시됨.
inline MDN
<cite> 창작물에 대한 참조를 지정.(Citation)
책, 논문, 영화, TV 프로그램, 노래, 게임 등.
기본적으로 이탤릭체(Italic type)로 표시됨.
inline MDN
<q> 짦은 인용문을 지정.(Inline Quotation)
긴 인용문을 지정할 경우 <blockquote>를 사용.
inline MDN
<u> 밑줄이 있는 글자를 지정.(Underline)
순수하게 꾸미는 용도의 요소로 사용.
<a>와 헷갈릴 수 있는 위치에서 사용하지 않도록 주의.
CSS text-decoration: underline; 사용을 권장함.
inline MDN
<code> 컴퓨터 코드 범위를 지정.(Inline Code)
기본적으로 Monospace 글꼴로 표시됨.
inline MDN
<kbd> 텍스트 입력 장치(키보드)에서 사용자 입력을 나타내는 텍스트 범위를 지정.(Keyboard Input) inline MDN
<sup> 위 첨자(<sup>)를 지정.(Superscripted text) inline MDN
<sub> 아래 첨자(<sub>)를 지정.(Subscript text) inline MDN
<time> 날짜나 시간을 나타내기 위한 목적으로 사용.
- datetime: 유효한 날짜 문자
inline MDN
<span> 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 지정. inline MDN
<br /> 줄바꿈을 지정. inline MDN
HTML
content_copy
L
1
Using <abbr title="HyperText Markup Language">HTML</abbr> is fun and easy!
약어를 표시
HTML
content_copy
L
1
<cite>The Scream</cite> by Edward Munch. Painted in 1893.
창작물 참조를 표시
HTML
content_copy
L
1
<p><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>K</kbd></p>, <kbd>ESC</kbd>
키보드 입력을 표시
HTML
content_copy
L
1
X<sup>4</sup> + Y<sup>2</sup>, H<sub>2</sub>O
위/아래 첨자로 수학식을 표시
HTML
content_copy
L
L
L
L
1
2
3
4
<p> The Cure will be celebrating their 40th anniversary on <time datetime="2018-07-07">July 7</time> in London's Hyde Park. </p>
날짜를 표시

# 텍스트 수정 요소

텍스트의 추가, 수정, 삭제를 표시해, 변경 사항을 명확하게 전달합니다.

요소 설명 표시 특성 참조
<ins> 새로 추가된(변경된) 텍스트의 범위를 지정.(Inserted Text)- cite: 변경을 설명하는 리소스의 URI
- datetime: 변경이 일어난 유요한 날짜 문자
inline MDN
<del> 삭제된(변경된) 텍스트의 범위를 지정.(Deleted Text)
- cite: 변경을 설명하는 리소스의 URI
- datetime: 변경이 일어난 유요한 날짜 문자
inline MDN

# 멀티미디어 요소

이미지, 오디오, 비디오 등 다양한 멀티미디어 콘텐츠를 웹 페이지에 삽입할 수 있습니다.

요소 설명 표시 특성 참조
<img /> 이미지를 삽입.
- src: 이미지 URL
- alt: 이미지 대체 텍스트
- width: 이미지 가로 너비
- height: 이미지 세로 너비
- srcset: 브라우저에게 제시할 이미지 URL과 원본 크기의 목록을 정의
- sizes: 미디어 조건과 해당 조건일 때 이미지 최적화 크기의 목록을 정의
inline MDN
<audio> 소리 콘텐츠(MP3)를 삽입.
autoplay가 지정된 경우, preload는 무시됨.
- autoplay: 준비되면 바로 재생
- controls: 제어 메뉴를 표시
- loop: 재생이 끝나면 다시 처음부터 재생
- preload: 페이지가 로드될 때 파일을 로드할지의 지정(힌트 제공)
- src: 콘텐츠 URL
- muted: 음소거 여부
inline MDN
<video> 동영상 콘텐츠(MP4)를 삽입.
- autoplay: 준비되면 바로 재생
- controls: 제어 메뉴를 표시
- loop: 재생이 끝나면 다시 처음부터 재생
- muted: 음소거 여부
- poster: 동영상 썸네일 이미지 URL
- preload: 페이지가 로드될 때 파일을 로드할지의 지정(힌트 제공)
- src: 콘텐츠 URL
- width: 동영상 가로 너비
- height: 동영상 세로 너비
inline MDN
<figure> 이미지나 삽화, 도표 등의 영역을 지정. block MDN
<figcaption> <figure>에 포함되어 이미지나 삽화 등의 설명을 표시.(Figure Caption) inline MDN
HTML
content_copy
L
L
L
L
1
2
3
4
<figure> <img src="milk.jpg" alt="A milk"> <figcaption>Milk is a nutrient-rich, white liquid food produced by the mammary glands of mammals.</figcaption> </figure>
이미지와 설명을 표시

# 내장 콘텐츠 요소

외부 콘텐츠나 다른 웹 페이지를 현재 문서에 통합해, 웹 페이지의 기능을 확장하고 사용자에게 추가 정보를 제공할 수 있습니다.

요소 설명 표시 특성 참조
<iframe> 다른 HTML 페이지를 현재 페이지에 삽입.
- name: 프레임의 이름
- src: 포함할 문서의 URL
- width: 프레임의 가로 너비
- height: 프레임의 세로 너비
- allowfullscreen: 전체 화면 모드 사용 여부
- frameborder: 프레임 테두리 사용 여부
- sandbox: 보안을 위한 읽기 전용으로 삽입
inline MDN
<canvas> Canvas API이나 WebGL API를 사용하여 그래픽이나 애니메이션을 랜더링.
- width: 캔버스의 가로 너비
- height: 캔버스의 세로 너비
inline MDN
HTML
content_copy
L
1
<iframe width="1920" height="765" src="https://www.youtube.com/embed/bdPug9IWz-g" frameborder="0" allowfullscreen></iframe>
유튜브 동영상을 삽입하는 예제

# 스크립트 요소

문서에서 자바스크립트 등의 스크립트(코드)를 직접 포함하거나 참조할 때 사용합니다.

요소 설명 표시 특성 참조
<script> 스크립트 코드를 문서에 포함하거나 외부 스크립트 참조.
- async: 스크립트의 비동기적(Asynchronously) 실행 여부
- defer: 문서 파싱(구문 분석) 후 작동 여부
- src: 참조할 외부 스크립트 URL
- type: MIME 타입
none MDN
<noscript> 스크립트를 지원하지 않는 경우에 삽입할 HTML을 정의. inline MDN

# 표 콘텐츠 요소

데이터를 구조화된 표 형태로 표현해, 정보를 체계적이고 이해하기 쉽게 정리합니다.

요소 설명 표시 특성 참조
<table> 표를 지정.
- border: 표 테두리 두께
table MDN
<tr> 표의 행을 지정.(Table Row) table-row MDN
<th> 표의 머리글 칸을 지정.(Table Header)
- abbr: 열에 대한 간단한 설명
- headers: 관련된 하나 이상의 다른 머리글 칸 id 속성 값
- colspan: 확장하려는(병합) 열의 수
- rowspan: 확장하려는(병합) 행의 수
- scope: 자신이 누구의 '머리글 칸'인지 명시
table-cell MDN
<td> 표의 일반 칸을 지정.(Table Data)
- headers: 관련된 하나 이상의 다른 머리글 칸 id 속성 값
- colspan: 확장하려는(병합) 열의 수
- rowspan: 확장하려는(병합) 행의 수
table-cell MDN
<caption> 표의 제목을 지정.
열리는 TABLE 태그 바로 다음에 작성.
table-caption MDN
<colgroup> 열의 집합(Column Group).
- span: 연속되는 열 수
table-column-group MDN
<col> 열을 지정.(Column)
<colgroup>의 자식 요소로 사용.
- span: 연속되는 열 수
table-column MDN
<thead> 표의 머리글을 지정.(Table Head) table-header-group MDN
<tbody> 표의 본문을 지정.(Table Body) table-row-group MDN
<tfoot> 표의 바닥글을 지정.(Table Foot) table-footer-group MDN
HTML
content_copy
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<table> <caption>Fruits</caption> <colgroup> <col span="2" style="background-color: yellowgreen;"> <col style="background-color: tomato;"> </colgroup> <thead> <tr> <th>ID</th> <th>Name</th> <th>Price</th> </tr> </thead> <tbody> <tr> <td>F123A</td> <td>Apple</td> <td>$22</td> </tr> <tr> <td>F098B</td> <td>Banana</td> <td>$19</td> </tr> </tbody> </table>
표 요소 예시

# 양식 요소

사용자에게 데이터를 입력받고 처리하는 양식을 구성합니다.
이를 통해 사용자와의 상호작용을 가능하게 하고, 데이터를 수집하고 처리할 수 있게 합니다.

요소 설명 표시 특성 참조
<form> 웹 서버에 정보를 제출하기 위한 양식 범위를 정의.
- action: 전송한 정보를 처리할 웹페이지의 URL
- autocomplete: 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부
- method: 서버로 전송할 HTTP 방식
- name: 고유한 양식의 이름
- novalidate: 서버로 전송시 양식 데이터의 유효성을 검사하지 않도록 지정
- target: 서버로 전송 후 응답받을 방식을 지정
block MDN
<input /> 사용자에게 입력 받을 데이터 양식.
- autocomplete: 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부
- autofocus: 페이지가 로드될 때 자동으로 포커스
- checked: 양식이 선택되었음을 표시
- disabled: 양식을 비활성화
- form: <form>id 속성 값
- list: 참조할 <datalist>id 속성 값
- max: 지정 가능한 최대 값
- min: 지정 가능한 최소 값
- maxlength: 입력 가능한 최대 문자 수
- multiple: 둘 이상의 값을 입력 할 수 있는지 여부
- name: 양식의 이름
- placeholder: 사용자가 입력할 값의 힌트
- readonly: 수정 불가한 읽기 전용
- step: 유효한 증감 숫자의 간격
- src: 이미지의 URL
- alt: 이미지의 대체 텍스트
- type: 입력 받을 데이터의 종류
- value: 양식의 초기 값
- type=button: 일반 버튼
- type=checkbox: 체크박스
- type=color: 색상
- type=email: 이메일
- type=file: 파일
- type=hidden: 보이지 않지만 전송할 양식
- type=image: 이미지 제출 버튼
- type=number: 숫자
- type=password: 비밀번호
- type=radio: 라디오 버튼
- type=range: 범위 컨트롤
- type=reset: 초기화
- type=search: 검색
- type=submit: 제출 버튼
- type=tel: 전화번호
- type=text: 일반 텍스트
- type=url: 절대 URL
inline-block MDN
label 라벨 가능 요소(labelable)의 제목(Caption).
for 속성으로 라벨 가능 요소를 참조하거나 콘텐츠로 포함.
- for: 참조할 라벨 가능 요소의 id 속성 값
inline MDN
button 선택 가능한 버튼을 지정.
- autofocus: 페이지가 로드될 때 자동으로 포커스
- disabled: 버튼을 비활성화
- form: <form>id 속성 값
- name: 폼 데이터와 함께 전송되는 버튼의 이름
- type: 버튼의 타입
inline-block MDN
textarea 여러 줄의 일반 텍스트 양식.
- autocomplete: 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부
- autofocus: 페이지가 로드될 때 자동으로 포커스
- disabled: 양식을 비활성화
- form: <form>id 속성 값
- maxlength: 입력 가능한 최대 문자 수
- name: 양식의 이름
- placeholder: 사용자가 입력할 값의 힌트
- readonly: 수정 불가한 읽기 전용
- rows: 양식의 줄 수
inline-block MDN
fieldset 양식의 관련 요소들을 그룹화.
- disabled: 그룹 내 모든 양식 요소를 비활성화
- form: 그룹이 속할 하나 이상의 <form>id 속성 값
- name: 그룹의 이름
block MDN
legend <fieldset>의 제목을 지정. block MDN
select 드롭다운 목록을 지정.
- autofocus: 페이지가 로드될 때 자동으로 포커스
- disabled: 양식을 비활성화
- form: <form>id 속성 값
- multiple: 여러 옵션을 선택할 수 있는지 여부
- name: 양식의 이름
- size: 한 번에 보여지는 옵션의 수
inline-block MDN
datalist 자동완성 목록을 지정.
- id: <input>list 속성과 바인딩
none MDN
optgroup <option>을 그룹화.
- disabled: 그룹을 비활성화
- label: 그룹의 이름
block MDN
option 드롭다운이나 자동완성 목록의 옵션을 지정.
- disabled: 옵션을 비활성화
- label: 표시될 옵션의 제목
- selected: 옵션이 선택되었음을 표시
- value: 양식으로 제출될 값
inline MDN
progress 작업의 완료 진행률을 표시.
- max: 작업의 총량
- value: 작업의 진행량
inline-block MDN
HTML
content_copy
L
L
L
L
1
2
3
4
<input type="button" /> <input type="checkbox" /> <input type="file" /> <input type="text" />
입력 요소의 다양한 데이터 타입 지정
HTML
content_copy
L
L
L
L
L
L
L
L
L
1
2
3
4
5
6
7
8
9
<!-- 라벨 가능 요소를 참조 --> <input type="checkbox" id="user-agreement" /> <label for="user-agreement">동의하십니까?</label> <!-- 라벨 가능 요소를 포함 --> <label> <input type="checkbox" /> 동의하십니까? </label>
라벨 가능 요소의 참조와 포함
HTML
content_copy
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<form> <fieldset> <legend>Coffee Size</legend> <label> <input type="radio" name="size" value="tall" /> Tall </label> <label> <input type="radio" name="size" value="grande" /> Grande </label> <label> <input type="radio" name="size" value="venti" /> Venti </label> </fieldset> </form>
같은 목적의 양식을 그룹화
HTML
content_copy
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<select> <optgroup label="Coffee"> <option>Americano</option> <option>Caffe Mocha</option> <option label="Cappuccino" value="Cappuccino"></option> </optgroup> <optgroup label="Latte" disabled> <option>Caffe Latte</option> <option>Vanilla Latte</option> </optgroup> <optgroup label="Smoothie"> <option>Plain</option> <option>Strawberry</option> <option>Banana</option> <option>Mango</option> </optgroup> </select>
선택 메뉴를 표시
HTML
content_copy
L
L
L
L
L
L
L
L
L
1
2
3
4
5
6
7
8
9
<input type="text" list="fruits"> <datalist id="fruits"> <option>Apple</option> <option>Orange</option> <option>Banana</option> <option>Mango</option> <option>Fineapple</option> </datalist>
자동완성 목록을 표시
HTML
content_copy
L
1
<progress value="70" max="100">70 %</progress>
작업의 진행률을 표시

# 전역 속성

모든 HTML 요소에서 공통으로 사용할 수 있는 전역 속성(Global Attributes)입니다.

속성 설명 참조
id 문서 전체에서 고유한 식별자(idenifier, ID)를 정의. MDN
class 공백으로 구분된 요소의 별칭을 지정. MDN
style 요소에 적용할 CSS를 선언. MDN
title 요소의 정보(설명)을 지정. MDN
lang 요소의 언어(ISO 639-1)를 지정. MDN
data-* 사용자 정의 데이터 속성을 지정.
HTML에 JS에서 이용할 수 있는 데이터를 저장하는 용도.
MDN
draggable 요소가 Drag and Drop API를 사용 가능한지 여부를 지정. MDN
hidden 요소를 숨김. MDN
tabindex Tab키를 이용해 요소를 순차적으로 포커스 탐색할 순서를 지정.
- 대화형 콘텐츠(Interactive Content)는 기본적으로 코드 순서대로 탭 순서가 지정됨.
- 비대화형 콘텐츠에 tabindex="0"을 지정하여 대화형 콘텐츠와 같이 탭 순서를 사용.
- tabindex="-1"을 통해 포커스는 가능하지만 탭 순서에서 제외 가능.
- tabindex="1" 이상의 양수 값은 논리적 흐름을 방해하기 때문에 사용을 추천하지 않음.
MDN
contenteditable 요소의 사용자 편집 여부를 지정. MDN
HTML
content_copy
L
L
L
1
2
3
<p lang="en">This paragraph is English</p> <p lang="ko">이 단락은 한글입니다.</p> <p lang="fr">Ce paragraphe est défini en français.</p>
각 요소의 언어를 지정
HTML
content_copy
L
L
L
L
L
L
L
1
2
3
4
5
6
7
<div id="me" data-my-name="Heropy" data-my-age="851">Heropy</div> <script> const meEl = document.getElementById('me') console.log(meEl.dataset.myName) // 'Heropy' console.log(meEl.dataset.myAge) // '851' </script>
사용자 정의 데이터 속성을 지정
HTML
content_copy
L
1
<div draggable="true">The element to drag.</div>
드래그앤드롭 가능
HTML
content_copy
L
L
L
L
1
2
3
4
<form id="hidden-form" action="/action" hidden> <!-- 숨겨진 양식.. --> </form> <button form="hidden-form" type="submit">전송</button>
양식 요소를 숨긴 상태로 '전송'만 가능
HTML
content_copy
L
L
L
L
L
1
2
3
4
5
<h1 tabindex="0">Sign In</h1> <label>Username: <input type="text"></label> <label>Password: <input type="password"></label> <label>PS: <input type="text" tabindex="-1"></label> <input type="submit" value="Sign In">
포커스 탐색 순서를 지정