HTML이란?
- HyperText Markup Language의 약자
- 하이퍼텍스트(HyperText) : 웹 페이지를 다른 페이지로 연결하는 링크
- 웹을 이루는 가장 기초적인 구성 요소로 웹 콘텐츠의 의미와 구조를 정의할 때 사용
- 월드 와이드 웹(World Wide Web)의 핵심 마크업 언어
- 문서의 특정 텍스트 영역이 문단인지 목록인지 표의 일부인지 구분할 수 있도록 의미 부여
- 헤더인지, 콘텐츠 컬럼인지, 네비게이션 메뉴인지 알 수 있도록 논리적인 영역으로 구조화
- 이미지와 비디오 같은 콘텐츠를 삽입할 수 있게 해주는 요소(elements)들로 구성
HTML5
- HTML의 5번째 버전을 의미
- 2014선보인 현재 HTML의 최신 버전
- 단순화된 구문
- 단순화된 구문과 태그뿐 아니라 깔끔하고 의미론적인 코드 지원
- 이전 버전의 HTML4보다 더 효율적이고 읽고 쓰기 쉽게 설계
- 멀티미디어 지원
- 비디오 및 오디오를 포함한 멀티미디어 콘텐츠 지원
- 이전 버전의 HTML4에서 사용된 Adobe Flash와 같은 타사 플러그인이 필요하지 않아 보안 강화
- 캔버스 포함
- 웹 페이지 내에서 동적이고 상호작용적인 그래픽 및 애니메이션을 만들 수 있는 캔버스 요소 포함
- 드래그 앤 드롭 기능
- 웹 페이지 내에 요소를 더 쉽게 이동
- 오프라인 웹 응용 프로그램에 대한 지원
- 사용자가 인터넷에 연결되어 있지 않은 경우에도 웹 응용프로그램 사용 가능
- 반응형 디자인 지원
- 웹 페이지가 다양한 화면 크기와 장치에 맞게 레이아웃과 콘텐츠 자동 조정
- 지리 위치 정보 지원
- 웹 응용 프로그램이 사용자 위치 액세스
- 양식 향상
- 이메일, 전화 및 필수와 같은 새로운 입력 유형 및 속성을 포함하여 웹 양식에 대한 지원 향상
- 웹 스토리지 지원
- 웹 애플리케이션이 사용자의 컴퓨터에 데이터를 저장하여 보다 빠르고 효율적으로 액세스
HTML4 VS HTML5
| HTML4 | HTML5 | |
| 구조적 요소 | div | 보다 명확하고 세분화된 구조 요소 - header, nav, article, section, aside, footer |
| 멀티미디어 요소 | 플러그인 필요 (ActiveX) | 멀티미디어 자체 지원 요소 - audio. video, canvas |
| 요소 추가 | 더 나은 기능을 위한 요소 command, datalist, details, embed, figure, figcaption |
|
| 요소 속성 추가 | 새로운 유형의 양식 속성 - tel, search, url, email, date, time, number, range, color |
|
| 요소 제거 | 비슷한 기능의 다른 태그로 대체 - acronym, applet, dir, isindex CSS 대체 가능 태그 - basefont, big, center, font, strike, tt 웹 접근성 향상을 위해 사용 지양 태그 - frame, frameset, noframes |
|
| 요소 의미 변경 | <em> : block-level contents <hr> : 가로줄 표현 |
<em> : flow contents <hr> : 시각적 표현 외 의미를 부여하여 적정한 CSS와 함께 사용 |
| 문서 선언 | 문서 선언과 함께 DTD 설정 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
문서 선언 간소화 <!DOCTYPE HTML> |