HTML은 버젼마다 제공하는 태그들이 다른데, 각 버젼에 따른 Doctype을 선언해줌으로써 HTML의 버젼을 알려준다. Doc의 Document를 HTML이라고 보아도 무방할 것이다.
그렇다면 그 종류에는 무엇이 있는가? 가장 최근 버젼인 HTML5의 선언 방법은 다음과 같다. (그 외 HTML 4.01 등 다양한 버젼을 선언하는 방법이 있지만, 검색을 통해 알 수 있는 부분이므로 다루지 않겠다)
<!DOCTYPE html>
또한 이 외에도 HTML5(발표일 2014년 10월 28일)에서 추가된 태그들을 살펴봄으로써 웹이 어떠한 측면에서 개선을 위해 노력했는지도 살펴볼 수 있다.
Sementics
1) 섹션 구분 태그
기존에는 div태그로 내용들을 나누어 주었다. 그러나 컴퓨터에게 아무런 의미가 없는 태그에 불과하다. 해당 영역이 어떠한 기능을 가지고 있는지 나타내주기 위해선, 아래와 같은 시맨틱 태그들을 사용해야 한다. 이는 HTML4(출시일 1999년 12월)에서 5로 변화하는 과정에서, 의미론적인 요소가 웹에서 중요해졌음을 알 수 있는 부분이기도 하다.
<article> : 신문의 기사처럼 내용을 쪼갤 때 사용한다.
<aside > : 나머지 문서와는 아주 조금, 거의 연관이 없는 컨텐츠 부분을 나타낸다.
<footer> : 섹션의 footer글 또는 작성자, 저작권 등의 정보를 나타낸다.
<header> : 소개 또는 네비게이션 도구의 그룹을 나타낸다.
<nav> : 상단 Navigation 바를 만들 때 사용한다.
<section> : 일반적인 문서나 앱의 섹션을 나타낸다. h1, h2, h3, h4, h5, h6등과 같은 태그와 함께 문서의 구조를 나타낼때 사용할 수 있다.
2) 시멘틱 태그
<mark> 태그: 다른 컨텐츠와의 연관성을 문서 내부에 나타내기 위한 태그
<progress> 태그: 다운로드 등을 할 때 얼마나 진행되었는지 보여주는 태그
<meter> 태그: 디스크 사용량 등과 같은 측정치를 나타내는 태그
<time> 태그: 날짜와 시간을 나타내는 태그
<output> 태그: 스크립트 등을 통해 계산된 결과를 나타내는 태그, input type으로도 쓸 수 있다.
3) 폼 양식 개선
CONNECTIVITY
1) 웹 소켓
2) 웹 RTC(Real-time Communication)
MULTIMEDIA
1) 멀티미디어 태그
HTML5부터는 플러그인 없이 최신 멀티미디어를 재생할 수 있게 한다. 이전에는 동영상을 재생하려면 Flash를 설치해야만 했다. 동영상을 재생하는 시간도 오래 걸리고, 설치하는 부가적인 절차에 대한 불편함 등이 해소된 것이다. 이와 관련하여, 애플의 스티브잡스가 Adobe Flash에 대하여 자사 제품과의 호환성이 낮고 사용자에게 불편함을 안겨주는 기술이라 비판한 적이 있다.
<audio> : 오디오를 재생한다.
<video> : 비디오를 재생한다.
<source> 태그: <video>나 <audio>의 소스를 나타낸다.
<track> 태그: 비디오를 위한 텍스트 트랙 제공한다.
그 외
<embed> 태그: 플러그인 컨텐츠를 위한 태그
<ruby>, <rt>, <rp> 태그: Ruby 를 표시하는 태그
<bdi> 태그: 주위와 독립적으로 흐르는 텍스트를 나타내는 태그
<wbr> 태그: 라인을 바꿀 수 있는 위치를 나타내는 태그
<command> 태그: 사용자가 호출할 수 있는 커맨드를 나타내는 태그
<details> 태그: 추가 정보나 사용자가 획득할 수 있는 컨트롤을 나타내는 태그
<datalist> 태그: input의 list 속성과 함께 콤보박스를 만드는 태그
<keygen> 태그: key pair를 생성하는 컨트롤 태그
<input> 태그: 새로운 type들이 추가
2D/3D GRAPHICS AND EFFECTS
1) 캔버스 요소
<canvas> : 동적인 비트맵 그래픽을 활용하는 캔버스 공간을 제공한다.
2) WebGL
3) SVG
PERFORMANCE AND INTEGRATION
1) 드래그 앤 드롭
2) XMLHttpRequest
3) Web Workers
STYLING
1) Background Styling
2) Border Styling
3) 애니메이션
참고 사이트 (더욱 자세한 내용을 알고 싶다면, 참고 바랍니다)
HTML5 - New Tags (Elements) - Tutorialspoint
HTML5 - New Tags (Elements) The following tags (elements) have been introduced in HTML5 − Tags (Elements) Description Represents an independent piece of content of a document, such as a blog entry or newspaper article Represents a piece of content that i
www.tutorialspoint.com
[HTML5 튜토리얼] HTML5에 추가된 Element들 그리고 문서의 구조화
* 이번에는 HTML5에 새로 추가된 문서 규격과 관련된 태그들과 문서의 구조화에 대해서 살펴보자. 2012/10/07 - [HTML5 튜토리얼] 공부 시작 - 계획 2012/10/25 - [HTML5 튜토리얼] HTML5의 등장 배경과 여러 가
unikys.tistory.com
HTML5
HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts. It is a new version of the language HTML, with new elements, attributes, and behaviors, and a larger set of technologies that allows the building o
developer.mozilla.org
'Web > HTML' 카테고리의 다른 글
| 프론트엔드 면접 질문 정리 ① HTML 질문 (0) | 2021.05.10 |
|---|---|
| [기타] script, script async, script defer의 차이점 (0) | 2020.11.20 |
| [HTML] HTML 요소들 정리하기 : 구획, 메타데이터, 멀티미디어 등 (0) | 2020.11.11 |
| [WEB] Adobe Flash Player와 HTML5 & WebGL (0) | 2020.11.10 |
| [웹 개발 기록기]HTML을 통해, 개인 웹페이지 만들기 (0) | 2020.06.06 |
댓글