HTML5 새 요소(HTML5 New Elements)

Below is a list of the new HTML5 elements, and a description of what they are used for.

다음은 새로운 HTML5 요소 목록과 HTML5 요소가 사용 된 요소에 대한 설명입니다.

---

New Semantic/Structural Elements

새로운 시맨틱 / 구조 요소

HTML5 offers new elements for better document structure:

HTML5는 더 나은 문서 구조를위한 새로운 요소를 제공합니다.

Tag	Description
<article>	Defines an article in a document 문서에 기사 정의
<aside>	Defines content aside from the page content 페이지 콘텐츠를 제외하고 콘텐츠를 정의합니다.
<bdi>	Isolates a part of text that might be formatted in a different direction from other text outside it 다른 텍스트와 다른 방향으로 서식이 지정된 텍스트의 일부를 격리합니다.
<details>	Defines additional details that the user can view or hide 사용자가 보거나 숨길 수있는 추가 세부 정보를 정의합니다.
<dialog>	Defines a dialog box or window 대화 상자 또는 창을 정의합니다.
<figcaption>	Defines a caption for a <figure> element <figure> 요소에 대한 캡션을 정의합니다.
<figure>	Defines self-contained content 자체 포함 된 컨텐츠 정의
<footer>	Defines a footer for a document or section 문서 또는 섹션에 대한 바닥 글을 정의합니다.
<header>	Defines a header for a document or section 문서 또는 섹션의 머리글을 정의합니다.
<main>	Defines the main content of a document 문서의 주요 내용을 정의합니다.
<mark>	Defines marked/highlighted text 강조 표시된 텍스트를 정의합니다.
<meter>	Defines a scalar measurement within a known range (a gauge) 알려진 범위 (계기) 내에서 스칼라 측정을 정의합니다.
<nav>	Defines navigation links 탐색 링크 정의
<progress>	Represents the progress of a task 작업 진행 상황을 나타냅니다.
<rp>	Defines what to show in browsers that do not support ruby annotations 루비 주석을 지원하지 않는 브라우저에서 보여줄 것을 정의합니다.
<rt>	Defines an explanation/pronunciation of characters (for East Asian typography) 문자의 설명 / 발음을 정의합니다 (동아시아 타이포그래피의 경우).
<ruby>	Defines a ruby annotation (for East Asian typography) 루비 주석을 정의합니다 (동아시아 타이포그래피 용).
<section>	Defines a section in a document 문서의 섹션을 정의합니다.
<summary>	Defines a visible heading for a <details> element <details> 요소에 대한 눈에 보이는 제목을 정의합니다.
<time>	Defines a date/time 날짜 / 시간을 정의합니다.
<wbr>	Defines a possible line-break 가능한 줄 바꿈을 정의합니다.

Read more about HTML5 Semantics.

HTML5 의미 에 대해 자세히 알아보십시오 .

---

New Form Elements

새 양식 요소

Tag	Description
<datalist>	Specifies a list of pre-defined options for input controls 입력 컨트롤에 대해 미리 정의 된 옵션 목록을 지정합니다.
<output>	Defines the result of a calculation 계산 결과를 정의합니다.

Read all about old and new form elements in HTML Form Elements.

HTML 양식 요소 에서 이전 및 새 양식 요소에 대한 모든 것을 읽으십시오 .

---

New Input Types

새로운 입력 유형

New Input Types	New Input Attributes
color date datetime datetime-local email month number range search tel time url week	autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height and width list min and max multiple pattern (regexp) placeholder required step

Learn all about old and new input types in HTML Input Types.

HTML 입력 유형 에서 이전 및 새 입력 유형에 대해 모두 배웁니다 .

Learn all about input attributes in HTML Input Attributes.

HTML 입력 속성의 입력 속성에 대해 모두 배웁니다 .

---

HTML5 - New Attribute Syntax

HTML5 - 새로운 속성 구문

HTML5 allows four different syntaxes for attributes.

HTML5는 속성에 대해 네 가지 구문을 허용합니다.

This example demonstrates the different syntaxes used in an <input> tag:

이 예제는 <input>태그에 사용 된 다양한 구문을 보여줍니다 .

Type	Example
Empty	<input type="text" value="John" disabled>
Unquoted	<input type="text" value=John>
Double-quoted	<input type="text" value="John Doe">
Single-quoted	<input type="text" value='John Doe'>

In HTML5, all four syntaxes may be used, depending on what is needed for the attribute.

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

---

HTML5 Graphics

HTML5 그래픽

Tag	Description
<canvas>	Draw graphics, on the fly, via scripting (usually JavaScript) 스크립팅을 통해 즉석에서 그래픽을 그립니다 (일반적으로 JavaScript).
<svg>	Draw scalable vector graphics 확장 가능한 벡터 그래픽 그리기

Read more about HTML5 Canvas.

HTML5 Canvas 에 대해 자세히 알아보십시오 .

Read more about HTML5 SVG.

HTML5 SVG 에 대해 자세히 알아보십시오 .

---

New Media Elements

새로운 미디어 요소

Tag	Description
<audio>	Defines sound content 사운드 컨텐트 정의
<embed>	Defines a container for an external (non-HTML) application 외부 (HTML이 아닌) 응용 프로그램에 대한 컨테이너를 정의합니다.
<source>	Defines multiple media resources for media elements (<video> and <audio>) 미디어 요소 (<video> 및 <audio>)에 대한 여러 미디어 리소스를 정의합니다.
<track>	Defines text tracks for media elements (<video> and <audio>) 미디어 요소 (<video> 및 <audio>)에 대한 텍스트 트랙을 정의합니다.
<video>	Defines video or movie 비디오 또는 영화를 정의합니다.

Read more about HTML5 Video.

HTML5 비디오 에 대해 자세히 알아보십시오 .

Read more about HTML5 Audio.

HTML5 오디오 에 대해 자세히 알아보십시오 .

---

출처 : https://www.w3schools.com/html/html5_new_elements.asp