고두

원문 : https://morioh.com/p/6d422fc49bd2

웹 언어인 HTML은 가장 잘 알려진 웹 기술 중 하나입니다. HTML은 도입된 이후로 인터넷을 구축하기 위해 지속적으로 사용되고 있습니다.

많은 새로운 기술들이 웹사이트 생성 프로세스를 보다 간단하고 효율적으로 만들었지만, HTML은 그 중에 항상 핵심이었습니다.

HTML5는 2014년에 나왔습니다. 하이퍼텍스트 마크업 언어의 표준화를 향한 또 다른 단계였습니다. 2014년 10월에 개정된 HTML 사양은 합리적이었습니다.

사람들은 이제 또 다른 업그레이드를 기다리고 있는데, 무엇일까요? 바로 HTML6가 오고 있습니다.

WHATWG - HTML 사양을 규제하는 기관은 HTML 사양을 한 번에 광범위하게 변경하지 않고, 천천히 시간이 지남에 따라 지속적으로 변경하고 있습니다. (출처에서 알 수 있듯이)

이 아티클에서는 HTML6의 새로운 점과 가장 많이 바뀔 사항들을 살펴보겠습니다.

목차

• 익스프레스 태그 (Express Tags)

• 기본 모달 지원 (Native Modals Support)

• 자유로운 이미지 크기 조정 (Freedom to Resize Image)

• HTML6 전용 라이브러리 (HTML6 Dedicated Libraries)

• 이미지 및 비디오에 대한 주석 (Annotations for Images and Videos)

• 인증 향상 (Authentication Enhancement)

• HTML6의 사용자 메뉴 (Customized Menus in HTML6)

• HTML6 통합 카메라 (HTML6 Integrated Camera)

• 유용한 마이크로포맷 (Good Microformats)

• 자바스크립트 없는 단일 페이지 애플리케이션 (Single-Page Apps without JavaScript)

• 결론

익스프레스 태그 (Express Tags)

이름에서 유추할 수 있듯이, 이 태그는 표현식으로 쓰입니다. 웹 페이지의 로고와 같은 태그를 사용할 수 있습니다.

또한 , , 와 같은 태그를 사용할 수 있습니다.

기본 모달 지원 (Native Modals Support)

dialog 요소는 HTML6에서 사용합니다. 이 요소는 자바스크립트 기반의 모달 창과 동등한 것으로 간주됩니다.

dialog 요소는 이미 표준화 되었지만, 크롬과 삼성 인터넷 브라우저와 같은 일부 브라우저에서만 완벽히 지원합니다. 그렇더라도 곧 모든 브라우저에서 작동할 것입니다.

기본 포맷으로 된 해당 요소는 배치된 위치 위로 띄어서 노출될 것입니다.

보다 일반적인 모달과 같은 인터페이스를 사용하려면, 자바스크립트를 통해 모달 메서드를 열 수 있습니다.

<dialog>
  <form method="dialog">
    <input type="submit" value="Ok" />
    <input type="submit" value="Cancel" />
  </form>
</dialog>

기본 양식에서 요소는 비대화형인 컨텐츠가 포함된 회색 배경을 만듭니다.

dialog 요소 내의 양식에서 메소드 속성을 사용할 수 있습니다. 이것은 값을 제출하고 값을 다시 대화 상자 객체로 전달합니다.

전반적으로, 이 dialog 요소는 사용자와의 상호작용 및 UI 향상에 유리합니다.

표준 HTML 형식으로 open 속성을 토글시켜 dialog 요소를 열고 닫을 수 있습니다.

<dialog open>
  <p>Dialog Box Built with HTML 6</p>
</dialog>

자유로운 이미지 크기 조정 (Freedom to Resize Image)

전문가들은 브라우저가 최상의 뷰 환경을 위해 이미지 크기를 조정할 수 있는 업데이트가 진행되고 있다고 생각합니다.

브라우저는 장치 및 윈도우 창 크기에 따른 최상의 이미지 크기를 표시하기가 어렵습니다.

src 및 img 태그는 이 문제를 처리하는데 그다지 효율적이지 않습니다. 새로운 태그 <srcset>를 사용하면 가능할 것입니다.

이 태그를 사용하면 브라우저에서 최상의 뷰를 보여주기 위해 둘 이상의 이미지 중에서 하나를 선택할 수 있습니다.

HTML6 전용 라이브러리 (HTML6 Dedicated Libraries)

HTML6에 캐시 가능한 라이브러리를 도입하는 것은 웹 디자이너와 사용자의 생산성을 향상시키는 단계가 될 것입니다.

이미지 및 비디오에 대한 주석 (Annotations for Images and Videos)

HTML로 이미지와 비디오에 주석을 달 수 있다면 좋을 것입니다. HTML5는 이미지, 비디오가 아닌 단어, 문장 및 단락을 해석 할 수있는 기능을 제공합니다.

이 분야의 많은 조직들이 솔루션을 제공했으며 WHATWG가 적어도 일부를 고려한 것처럼 보입니다.

곧 HTML에서 이미지와 동영상에 주석을 달 수 있을것입니다.

인증 향상 (Authentication Enhancement)

HTML5는 보안 측면에서 나쁘지 않지만, 브라우저와 웹 기술도 합리적인 보호 기능을 제공합니다. 의심 할 여지 없이 인증 및 보안 영역에서 더 많은 작업을 수행할 수 있습니다.

키는 오프라인 사이트에 저장할 수 있습니다. 이것은 권한이 없는 사람들의 접근을 막고 인증을 강화합니다. 쿠키 대신 내장되어 있는 키 사용, 디지털 서명 개선 등등

사람들과 싱크 탱크는 WHATWG가 수락하거나 거부 할 수있는 많은 솔루션을 제공합니다.

HTML6의 사용자 메뉴 (Customized Menus in HTML6)

The UL and OL tags are beneficial but do not fit well in every need. A tag or menu tag that could handle interactive elements better is the need of the hour.

<ul> 및 <ol> 태그는 유용하지만 모든 상황에 적합하지는 않습니다. 대화형 요소를 보다 잘 처리할 수있는 태그 혹은 <menu> 태그는 시간이 좀 더 필요합니다.

<menu> 요소는 메뉴 내부의 버튼으로 트리거 된 목록 요소를 처리 할 수 있습니다.

<menu type="toolbar">
  <li><button>Cut</button></li>
  <li><button>Copy</button></li>
  <li><button>Paste</button></li>
</menu>

이 메뉴는 HTML에서 목록의 기능을 향상시킬 수 있으며 일반적인 목록과 마찬가지로 잘 작동 할 수 있습니다.

HTML6 통합 카메라 (HTML6 Integrated Camera)

HTML6을 사용하면 사용자 기기에서 카메라와 미디어를 최대한 활용할 수 있습니다. 카메라 및 카메라의 효과, 모드, 파노라마 이미지, HDR 등을 제어할 수 있습니다.

모든 미디어를 사용하고 용도를 변경할 수 있습니다. 카메라와 HTML6으로 더 나아질 수있는 것들이 많이 있습니다.

유용한 마이크로포맷 (Good Microformats)

인터넷에서 일반적인 정보를 정의해야하는 경우가 많습니다. 일반정보는 전화번호, 이름, 주소 등과 같은 공개정보일 수 있습니다. 마이크로포맷은 일반 데이터를 정의할 수 있는 표준입니다.

마이크로포맷은 디자이너의 능력을 향상시키고 공개 정보를 추론하는데 필요한 검색 엔진의 노력을 줄일 수 있습니다.

자바스크립트 없는 단일 페이지 애플리케이션 (Single-Page Apps without JavaScript)

FutureClaw 잡지의 편집장인 Bobby Mozumder 는 다음과 같이 제안합니다.

앵커 요소를 JSON / XML, API 엔드 포인트에 연결하여 브라우저가 내부적으로 데이터를 새로운 데이터 구조로 로드하면,
브라우저는 DOM 요소를 필요에 따라 로드된 데이터로 바꿉니다. 
초기 데이터(및 표준 오류 응답)는 헤더 픽스처에 있을 수 있으며 원하는 경우 나중에 교체 할 수 있습니다.

그에 따르면, 이것은 자바스크립트를 로드 할 필요가 없기 때문에 응답성과 로딩 시간을 향상시키는 단일 페이지 앱 웹 디자인 패턴입니다.

결론

HTML도 완벽하지는 않습니다. 그러므로 HTML 사양을 개선 할 수 있는 사항들은 많이 있습니다.

HTML의 힘을 향상시키기 위해 몇 가지 유용한 규범들을 표준화해야 합니다. 작은 변화들은 이미 실행되기 시작했습니다.

기술 전문가들이 말하는 것을 고려하고 또한 일반 대중들의 의견을 듣는 것이 하나의 아이디어를 제공할 수 있습니다.

블루투스 지원 강화, p2p 파일 전송, 멀웨어 방지, 클라우드 스토리지 통합 등은 HTML의 다음 버전에서 고려해야 할 사항들입니다.

이것은 미래를 위한 것입니다. 그러나 이미 소개된 업데이트도 있고, 조만간 발표될 가능성이 가장 높은 반면, 단순한 예측에 불과한 업데이트도 있습니다.

이 기사가 당신이 HTML6에 대한 통찰력을 얻는데 도움이 되기를 바랍니다.