HTML과 HTML5의 차이점

HTML이란?

Hyper Text Markup Language의 약자이다.
웹 페이지 제작을 위한 표준 마크업 언어(markup language)로 HTML 요소를 사용해 섹션, 링크 등을 만들어 구조화할 수 있다.

또한 HTML은 동적 기능(dynamic functionality)을 할 수 없어 프로그래밍 언어로 간주되지 않는다.

1991년 HTML 1.0이 나오고 현재는 2014년에 출시된 HTML 5를 표준으로 사용하고 있다.

HTML과 HTML5의 차이점

멀티미디어 기능

HTML4까지 웹 브라우저에 멀티미디어 파일(3D, 오디오, 영상 등)을 재생하려면 브라우저가 아닌 별도의 플러그인(plug-in)이 필요했지만, HTML5에서는 웹 브라우저에서 직접 재생할 수 있다.

Web Storage

HTML5부터 해당 도메인과 관련된 데이터를 서버가 아닌 클라이언트의 웹 브라우저에 저장할 수 있도록 하는 기능이다.
기존의 쿠키와 세션의 한계를 해소한다.

쿠키의 단점
  • 4KB의 데이터 저장 제한
  • HTTP Request에 암호화 되지 않은 상태로 사용하기 때문에 보안에 취약
  • 쿠키는 모든 HTTP Request에 포함되어 있어 웹서비스 성능에 영향을 줄 수 있다.

웹 소켓 기능

웹 소켓은 실시간 양방향 데이터 전송을 위한 기술이다.
HTML5에 새로 추가된 기능으로 처음 웹 소켓 연결이 이루어지면 계속 연결된 상태로 있으며, 따로 업데이트가 있는지 요청을 보낼 필요가 없다.
그래서 업데이트할 내용이 생겼다면 서버에서 바로 클라이언트에게 알린다.
웹 소켓이 나오기 이전에는 HTTP 기술을 사용하여 실시간 데이터 전송을 구현했다. 이러한 방식은 단방향 통신이었기에 주기적으로 서버에 새로운 업데이트 사항이 있는지 확인하는 요청을 보내야 했다.

위치(Geolocation) 기능

HTML5부터 Geolocation API를 제공하기에 지도 서비스를 이용할 때 내 위치를 정확하게 알 수 있다.
컴퓨터에는 GPS 모듈이 없지만, Geolocation API를 사용해 주위에 있는 공유기, 전화 기지국, 각종 네트워크 장비들로부터 획득한 위치 정보 데이터를 계산해 현재 위치를 계산한다.
Geolocation API 관련 링크

DOCTYPE 선언

HTML에서 DOCTYPE 선언으로 문서의 버전을 지정하는데 HTML5 이전에는 DTD(Document Type Definition)을 사용해 복잡한 DOCTYPE 선언을 작성해야 했다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

이게 DTD를 사용한 HTML 4.01의 DOCTYPE 선언의 예이다.
HTML5부터는

<!DOCTYPE html>

이렇게 간단한 방법으로도 DOCTYPE을 선언할 수 있다.

태그

HTML5에서 여러 태그들이 추가 되었다.
'<header>', '<footer>', '<nav>', '<article>', '<section>', '<video>', '<audio>' 등이 있다.  
이렇게 추가된 태그들 중 <article>, <section>, <header>, <footer> 등과 같이 의미론적인 요소를 포함한 태그들은 검색 엔진 최적화(SEO)를 향상하고, 웹 접근성을 높인다.  

 

 

'CS > Web' 카테고리의 다른 글

CGI, ASGI, WSGI  (0) 2023.04.12
쿠키와 세션  (0) 2023.01.19
Get 방식과 Post방식  (0) 2022.05.02