HTML5("HTML"과 "5" 사이에 공백 없음)는 World Wide Web에서 콘텐츠를 구성하고 표시하는 데 사용되는 마크업 언어입니다.
2014년 10월 28일에 게시되었으며 W3C는 2016년 6월 21일에 HTML 5.1 후보 권장 사항도 게시했습니다.

최신 버전의 Apple Safari, Google Chrome, Mozilla Firefox 및 Opera는 모두 많은 HTML5 기능을 지원하며 Internet Explorer 9.0도 일부 HTML5 기능을 지원합니다.
iPhone, iPad 및 Android 휴대폰에 사전 설치된 모바일 웹 브라우저는 모두 HTML5를 훌륭하게 지원합니다.

HTML5는 다음과 같은 오디오 태그를 제공합니다.
<audio> - 사운드 콘텐츠를 정의합니다.
<video> - 동영상 콘텐츠를 정의합니다.
<source> - <video> 및 <audio>와 같은 미디어 요소에 대한 여러 미디어 리소스를 정의합니다.

이 태그는 자체 포함된 흐름 콘텐츠를 나타냅니다. 문서의 주요 흐름을 참조로 단일 단위로 주로 사용됩니다.

HTML5의 새로운 Form 요소는 이전 버전보다 훨씬 더 나은 기능을 제공합니다.
이러한 기능을 수행하기 위해 제공된 태그는 다음과 같습니다.
-, <datalist> – 이 태그는 입력 컨트롤에 대한 옵션 목록을 지정하는 데 사용됩니다.
-, <keygen> – 이 태그는 키 쌍 ​​생성기 필드를 나타냅니다.
-, <output> – 스크립팅 계산의 결과를 나타냅니다.

다음은 HTML5에서 제공하는 중요하고 새로운 데이터 유형입니다.
-, date : 사용자가 날짜를 선택할 수 있습니다.
-, datetime-local : 이 입력 유형을 사용하면 사용자가 시간대 없이 날짜와 시간을 선택할 수 있습니다.
-, datetime : 이 입력 유형을 사용하면 사용자가 시간대와 함께 날짜와 시간을 선택할 수 있습니다.
-, month : 사용자가 월과 연도를 선택할 수 있습니다.
-, email : 이메일 주소를 포함하는 데 사용되는 입력 필드입니다.

쿠키에는 다음과 같은 몇 가지 단점이 있습니다.
-, 쿠키는 모든 HTTP 요청에 포함되므로 동일한 데이터를 전송하여 웹 애플리케이션의 속도를 늦춥니다.
-, 쿠키는 모든 HTTP 요청에 포함되어 인터넷을 통해 암호화되지 않은 데이터를 보냅니다.
-, 쿠키는 약 4KB의 데이터로 제한됩니다. 필요한 데이터를 저장하기에 충분하지 않습니다.

WHATWG(Web Hypertext Application Technology Working Group)는 HTML 및 관련 기술의 발전에 관심이 있는 사람들의 커뮤니티입니다.
WHATWG는 2004년 Apple, Mozilla Foundation 및 Opera Software의 개인이 설립했습니다.

DOM은 W3C(World Wide Web Consortium) 표준입니다.
DOM은 문서 액세스에 대한 표준을 정의합니다.
"W3C DOM(문서 개체 모델)은 프로그램과 스크립트가 문서의 콘텐츠, 구조 및 스타일에 동적으로 액세스하고 업데이트할 수 있도록 하는 플랫폼 및 언어 중립적 인터페이스입니다."

WHATWG Web Applications 1.0은 HTML5와 함께 웹 서버에서 웹 브라우저로 흐르는 이벤트를 도입했으며 이를 SSE(Server-Sent Events)라고 합니다.
SSE를 사용하면 웹 서버에서 방문자의 브라우저로 DOM(Document Object Model) 이벤트를 계속해서 푸시할 수 있습니다.
이벤트 스트리밍 접근 방식은 서버에 대한 지속적인 연결을 열어 새로운 정보를 사용할 수 있을 때 클라이언트에 데이터를 전송하므로 지속적인 폴링이 필요하지 않습니다.
서버에서 보낸 이벤트는 서버에서 클라이언트로 데이터를 스트리밍하는 방법을 표준화합니다.

사인파는 일정한 시간 간격으로 반복되는 수학 함수입니다. 이 함수는 수학, 물리학, 공학 등 다양한 분야에서 활용되고 있습니다. 사인파는 부드러운 파동이라고 말할 수도 있습니다.
다음과 같은 속성이 있습니다.
-, 값이 양수일 때마다 사인파는 파란색입니다.
-, 값이 빨간색일 때마다 사인파가 빨간색입니다.
-, 선의 굵기는 파동 크기의 절대값에 정비례합니다. 예를 들어 사인 값이 0에 도달하면 파동이 없습니다.
X축에서 각도 Theta를 매핑합니다. ta는 0도에서 1040도까지 다양합니다.
Y축에서 sin(Theta)을 매핑합니다. 이를 위해 Math 함수 Math.sin을 사용합니다. Math.sin 함수는 각도를 복사합니다. 따라서 각도에 먼저 PI / 180을 곱합니다.

드래그 앤 드롭 작업의 모든 단계에서 브라우저가 실행할 JavaScript 코드를 알 수 있도록 다른 이벤트가 발생합니다. 이벤트는 다음과 같습니다.
dragStart :- 사용자가 요소를 끌기 시작하면 실행됩니다.
dragEnter :- 드래그 가능한 요소가 대상 요소 위로 처음 드래그될 때 실행됩니다.
dragOver :- 드래그가 발생할 때 요소 위로 마우스를 이동하면 실행됩니다.
dragLeave :- 드래그할 때 사용자의 커서가 요소를 떠나면 시작됩니다.
drag : - 요소를 드래그하는 동안 마우스를 움직일 때마다 실행됩니다.
drop : - 실제 드롭이 수행될 때 발생합니다.
dragEnd :- 사용자가 개체를 드래그하는 동안 마우스를 놓으면 실행됩니다.

HTML <details> 태그는 사용자가 요청 시 보거나 숨길 수 있는 추가 세부 정보를 지정합니다.
<details> 태그는 사용자가 열고 닫을 수 있는 대화형 위젯을 만드는 데 사용할 수 있습니다. 모든 종류의 콘텐츠를 <details> 태그 안에 넣을 수 있습니다.

HTML <dialog> 태그는 사용자가 상호 작용할 수 있는 응용 프로그램의 일부를 나타냅니다. 대화 상자의 예에는 대화 상자, 검사기 또는 창이 포함될 수 있습니다.
<dialog> 요소는 요소를 "active"으로 설정하고 사용자가 상호 작용할 수 있도록 하는 open이라는 부울 속성을 허용합니다.

PROGRESS 요소는 특정 작업의 완료 또는 진행 상황을 표시하는 데 사용됩니다.
웹사이트에서 텍스트나 동영상, 음악 파일을 다운로드하고 인터넷에 일부 콘텐츠를 업로드하는 동안에도 진행률 표시줄이 우리 앞에 나타나 현재 진행 상황이나 특정 작업의 완료를 표시합니다.

HTML 5에서 더 나은 구조화를 위해 제공되는 다양한 태그는 다음과 같습니다.

<article> - 이 태그는 기사를 정의합니다.
<aside> - 페이지 내용 이외의 내용을 정의합니다.
<bdi> - 이 태그는 다른 텍스트와 다른 방향으로 서식을 지정하기 위해 텍스트의 일부를 분리합니다.
<command> - 사용자가 호출할 명령 버튼을 정의합니다.
<details> - 사용자가 보거나 숨길 수 있는 추가 세부 정보를 정의합니다.
<dialog> - 대화 상자를 정의합니다.
<Figure> - 이 태그는 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 콘텐츠를 지정합니다.
<figcaption> - <Figure> 요소에 대한 캡션을 제공하는 데 사용됩니다.
<footer> - 이 태그는 문서 또는 섹션의 바닥글을 정의합니다.
<header> - 이 태그는 문서 또는 섹션의 헤더를 정의하는 데 사용됩니다.
<hgroup> - 한 제목에 여러 수준이 있는 경우 <h1> ~ <h6> 요소 집합을 그룹화합니다.

a. SVG는 Scalable Vector Graphics의 약자로 W3C에서 권장합니다.
b. 웹용 벡터 기반 그래픽을 정의하는 데 사용됩니다. SVG 파일의 모든 요소와 속성은 애니메이션할 수 있습니다.
c. 그래픽은 XML 형식으로 정의됩니다.
d. SVG 그래픽의 중요한 품질은 확대/축소하거나 크기를 조정해도 품질이 유지된다는 것입니다.

Geolocation API를 사용하면 사용자의 지리적 위치를 쉽게 가져올 수 있습니다. 브라우저가 Geolocation API를 지원하면 Javascript를 사용하여 경도와 위도를 쉽게 얻을 수 있습니다.
Geolocation API는 여러 소스를 사용하여 사용자의 가장 정확한 위치를 결정합니다. 위치 정확도는 사용 가능한 최상의 위치 소스에 따라 다릅니다.

이미지 맵은 URL과 이미지의 조합으로, 이러한 이미지(이미지의 클릭 가능한 영역)를 클릭하면 다른 새 웹 페이지가 열립니다.
HTML5에서는 두 가지 유형의 이미지 맵, 즉 클라이언트 측 이미지 맵과 서버 측 이미지 맵을 사용할 수 있습니다.
클라이언트 측 이미지 맵은 <area> 및 <map> 두 요소를 사용하여 생성됩니다. 여기서 맵은 맵 정보를 보유하고 area 요소는 속성을 사용하여 맵의 각 섹션을 정의합니다.
<usemap> 속성을 ​​사용하여 생성된 서버 측 이미지 맵에서 usemap 속성은 우리 맵의 이름입니다.

웹사이트 자산을 최적화하려면 몇 가지 기본 최적화 규칙을 이해해야 합니다.
처음에는 다운로드 크기를 줄이고 http 요청을 줄여야 합니다.
웹사이트 자산을 최적화하기 위해 다음 기술을 따를 수 있습니다.
-, 파일 압축
-, 파일 연결
-, CDN 호스팅
-, 자산 오프로드
-, Re-organizing
-, Refining code

MathML(Mathematical Markup Language)이라는 단어는 웹상에서 과학적, 수학적 표현을 보여주기 위해 사용되는 마크업 언어입니다.
MathML은 Math 표기법을 설명하기 위한 XML(extensible markup language)의 한 형태입니다.
MathML 요소를 구현하기 위해 HTML5 문서 내에서 <math>…</math> 태그를 사용할 수 있습니다.
예: HTML5 코드를 사용하여 a²+2b+5=0을 인쇄합니다.

HTML5는 애니메이션, 그리기, 오디오, 비디오 등을 지원하며 웹 페이지에 비디오를 쉽게 임베딩합니다.
비디오 시청을 위해 Flash와 같은 추가 소프트웨어가 필요하지 않습니다.
HTML5를 사용해야 하는 몇 가지 중요한 이유는 다음과 같습니다.
-, 레거시 및 브라우저 간 지원
-, 더 나은 상호 작용
-, 더 스마트한 스토리지
-, 클리너 코드

HTML5는 Canvas와 SVG의 두 가지 그래픽 유형을 지원합니다.
a) Canvas : <canvas> 요소는 웹 페이지에서 그래픽을 디자인하는데 사용되며, 원, 상자 그리기, 이미지 추가, 텍스트 추가 등의 다양한 방법을 사용할 수 있습니다. 300px X 150px(너비 X 높이)는 캔버스의 기본 픽셀 크기입니다.
캔버스 요소를 사용하여 사각형 상자를 그리는 예는 다음과 같습니다.

<!DOCTYPE HTML>
<html>
  <head>
    <style> #mycanvas{border:2px solid pink;} </style>
  </head>
  <body>
    <canvas id = “mycanvas” width = “150” height = “150”></canvas>
  </body>
</html>
          

b) SVG : <svg> 확장 가능한 벡터 그래픽은 X, Y 좌표 시스템, 2차원 및 파이 차트와 같은 그래픽 응용 프로그램 및 확장 가능한 벡터 유형 다이어그램에 주로 사용됩니다. 이것은 더 빠르고 가볍게 만듭니다. SVG는 XML 형식을 따릅니다.
SVG element를 사용하여 Rectangle을 그리는 예는 아래와 같습니다.

<!DOCTYPE html>
<html>
<body>
  <svg width = “400” height = “150”> <rect width = “400” height = “150” style = “fill:rgb(200,220,255);stroke-width:10;stroke:rgb(0,0,0)”/> </svg>
</body>
</html>
          

대부분의 최신 버전의 Apple Safari, Google Chrome, Opera, Edge 및 Mozilla Firefox는 HTML5에서 지원됩니다.

HTML5 <Datalist> 요소에서 텍스트 상자에 자동 완성 기능을 제공합니다.

마이크로데이터는 일반적으로 페이지 콘텐츠를 기반으로 하는 데이터의 이름 및 값 쌍의 중첩 그룹을 문서에 추가하는 데 사용되는 새로운 단순 의미 체계입니다.
마이크로데이터는 새로운 전역 속성에 사용됩니다.

HTML5의 API(응용 프로그래밍 인터페이스)는 미리 구축된 구성 요소를 사용하여 다양한 응용 프로그램을 구축하는 방법입니다.
개발자는 기존 API의 관련 기능을 새 웹사이트에 통합할 수 있습니다.

HTML5의 API는 다음과 같습니다.
-, HTML Web Workers
-, HTML Drag and Drop
-, HTML Application Cache
-, HTML Local Storage
-, HTML SSE * HTML Geolocation

자산을 최적화하고 웹사이트의 페이지 로드 시간을 줄이려면 다음 단계를 따르세요.
-, etag 비활성화.
-, 모든 자산의 이름을 올바르게 지정합니다.
-, 이미지에 CSS 스프라이트 사용하기.
-, 코드에서 JS 사용을 최소화합니다.
-, 미디어 파일에 콘텐츠 전송 네트워크(CDN) 사용.
-, 인라인 CSS를 최소화하고 내부 및 외부 스타일 시트를 사용합니다.
-, DNS 조회를 줄이면서 다른 도메인에서 자산 호스팅
-, 쿠키가 없는 도메인을 사용하여 자산을 배치하고 도메인 간에 분할

Canvas	SVG
해상도에 따라 다름 이벤트 핸들러에 대한 지원 없음 그래픽 집약적인 작업에 적합 작은 렌더링 영역에 가장 적합	해상도 독립 이벤트 핸들러 지원 제공 CAD 소프트웨어와 유사한 그래픽 생성에 이상적 큰 렌더링 영역에서도 작동

HTML5에서 데이터는 session storage와 local storage의 두 가지 방식으로 저장할 수 있습니다.
Session Storage : 현재 탐색 세션의 데이터 또는 세부 정보가 저장됩니다. 브라우저가 사용자로 인해 닫히면 스토리지 데이터가 제거됩니다.
Local Storage : 사용자가 브라우저를 닫아도 데이터가 자동으로 지워지지 않습니다.