HTML5 새로운 요소

HTML5의 새로운 요소

아래에 나열된 HTML5의 새로운 요소와 그 설명.

새로운 의미/구조 요소

HTML5에서 제공하는 새로운 요소는 더 나은 문서 구조를 만들 수 있습니다:

태그 설명
<article> 문서 내의 기사 정의.
<aside> 페이지 내용 외의 내용 정의.
<bdi> 기타 텍스트와 다른 텍스트 방향 정의.
<details> 사용자가 볼 수 있거나 숨길 수 있는 추가적인 상세정보 정의.
<dialog> 대화 상자나 창 정의.
<figcaption> <figure> 요소의 제목 정의.
<figure> 그래픽, 차트, 사진, 코드 목록 등과 같은 내용을 포함하는 자율적인 내용 정의.
<footer> 문서나 섹션의 푸터 정의.
<header> 문서나 섹션의 헤더 정의.
<main> 문서의 주 내용 정의.
<mark> 중요하거나 강조된 내용 정의.
<menuitem> 弹出菜单에서 호출할 수 있는 명령/메뉴 항목 정의.
<meter> 구간(추정) 내의 벡터 측정 정의.
<nav> 문서 내의 탐색 링크 정의.
<progress> 과업 진행 상황 정의.
<rp> ruby 주석을 지원하지 않는 브라우저에서 표시할 내용 정의.
<rt> 동양 글자에 대한 설명/발음 정의.
<ruby> 동양 글자에 사용되는 ruby 주석 정의.
<section> 문서 내의 섹션 정의.
<summary> <details> 요소의 보이는 제목 정의.
<time> 날짜/시간 정의.
<wbr> 가능한 줄 바꿈(line-break) 정의.

더 많은 내용을 읽어보세요 HTML5 의语义의 내용.

새로운 폼 요소

태그 설명
<datalist> 입력 컨트롤의 предопределенные 옵션 정의.
<keygen> 폼에 사용되는 키 Génératrice 필드(키 생성기) 정의.
<output> 계산 결과를 정의합니다。

더 많은 내용을 읽어보세요 HTML 양식 요소中新老元素。

새로운 입력 유형

새로운 입력 유형 새로운 입력 속성
  • 색상
  • 날짜
  • datetime
  • datetime-local
  • 이메일
  • 숫자
  • 범위
  • 검색
  • 전화번호
  • 시간
  • URL
  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • 높이와 너비
  • 리스트
  • min과 max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

학습 HTML 입력 유형의 모든 새로운 및 구형 입력 유형.

학습 HTML 입력 속성의 모든 입력 속성.

HTML5 - 새로운 속성 문법

HTML5는 네 가지 다른 속성 문법을 허용합니다.

이 예제는<input> 태그에서 사용하는 다양한 문법을 보여줍니다:

태그 설명
비어 있음 <input type="text" value="Bill Gates"> disabled>
비 quotes <input type="text"> value=Bill>
중 quotes <input type="text"> value="Bill Gates">
단 quotes <input type="text"> value='Bill Gates'>

HTML5에서는 필요한 속성에 따라 이 네 가지 문법을 모두 사용할 수 있습니다.

HTML5 이미지

태그 설명
<canvas> JavaScript를 사용하는 그래픽 렌더링을 정의합니다.
<svg> SVG를 사용하는 그래픽 렌더링을 정의합니다.

더 많은 내용을 읽어보세요 HTML5 Canvas 의 내용.

더 많은 내용을 읽어보세요 HTML5 SVG 의 내용.

새로운 미디어 요소

태그 설명
<audio> 소리나 음악 내용을 정의합니다.
<embed> 외부 애플리케이션의 컨테이너(예: 플러그인)를 정의합니다.
<source> <video>와<audio>의 소스를 정의합니다.
<track> <video>와<audio>의 트랙을 정의합니다.
<video> 비디오나 영화 내용을 정의합니다.

더 많은 내용을 읽어보세요 HTML5 비디오의 내용.

더 많은 내용을 읽어보세요 HTML5 오디오의 내용.