HTML4 와 HTML5의 차이점

HTML4 와 HTML5의 차이점

HTML5의 새로운 버젼에 따른 
새로운 개념과 달라진 점을 알아보도록 하겠습니다.

• 새롭게 도입된 요소


• 변경된 요소


• 없어진 요소


• 신규속성

새롭게 도입된 요소

1. - section 요소 : h1~h6 관련된 콘텐츠를 그룹화하기 위해 사용
2. - article 요소 : 독립콘텐츠 등의 섹션을 나타내기 위함
3. - aside 요소 : 메인콘텐츠와 관련된 참고 콘텐츠 등의 섹션
4. - hgroup 요소 : 섹션의 제목(h1~h6)을 그룹화하기 위해 사용
5. - header 요소 : 섹션의 헤더를 나타냄
6. - footer 요소 : 섹션의 푸터를 나타냄
7. - nav 요소 : 내비게이션 사용
8. - figure 요소, figcaption 요소: 이미지나 동영상 등의 콘텐츠와 그 캡션을 그룹화하기 위함
9. - audio 요소 : 사운드 또는 오디오 스트림을 제공 (플러그인X)
10. - video 요소, source 요소 : 플러그인이 없어도 재생 가능
11. - embed 요소 : 플러그인 콘텐츠를 나타냄, html5에서 처음으로 표준으로 규정
12. - mark 요소 : 저자가 웹페이지 독자에게 주의를 환기시키기 위한 부분
13. - progress 요소 : 어떤 처리에 대한 진행 상황
14. - meter 요소 : 디스크 사용량 등의 계측결과
15. - time 요소 : 날짜와 시각 표시
16. - ruby 요소, rt 요소, rp 요소 : 루비를 나타내고자 할 때 사용
17. - canvas 요소 : 그래프, 게임 등 동적으로 비트맵 그래픽을 렌더링하기 위해 사용
18. - command 요소 : 사용자가 호출할 수 있는 명령을 나타냄
19. - detail 요소, summary 요소 : 사용자의 요구에 따라 표시할 수 있는 추가정보
20. - datalist 요소 : imput 요소 입력용으로 목록상자에 입력 후보를 표시하기 위함
21. - keyget 요소 : 폼을 전송할 때 비밀키와 공개키를 생성
22. - output 요소 : 계산 결과를 나타냄
23. - input 요소
    1. ▷ color : 칼라 입력 타입
    2. ▷ date : 일자 입력 타입
    3. ▷ datetime : 시간 입력 타입
    4. ▷ datetime-local : 지역화 일자, 시간 입력 타입
    5. ▷ email : 메일 주소 입력 타입
    6. ▷ month : 연월 입력 타입
    7. ▷ week : 연도와 주 입력을 위한 타입
    8. ▷ number : 한 줄의 숫자 데이터를 입력
    9. ▷ range : 슬라이더 형태를 숫자 범의 데이터 입력
    10. ▷ search : 검색을 위해 값을 입력할 때 사용
    11. ▷ tel : 전화번호 입력을 위한 타입
    12. ▷ url : 절대경로 URL 입력을 위한 타입

변경된 요소

1. - address 요소 : 연락처 정보 제공
2. - b 요소 : 굵은 글씨, html5에서는 중요성이나 강조의 의미가 사라짐
3. - hr 요소 : 라인, html5에서는 의미가 부여됨
4. - i 요소 : 이탤릭체, 목소리나 분위기, 전문용어, 배의 이름, 인쇄물에 표현
5. - label 요소 : 폼 컨트롤의 캡션 표현
6. - menu 요소 : 메뉴 리스트 표현
7. - small 요소 : 작은 글씨 형태로 주석 표현, 저작권자, 면책 사항, 법률 용어
8. - strong 요소 : 중요성을 강조하는 표현, 의미를 부각시키지 않고 텍스트를 부각시킴

없어진 요소

1. - basefont 요소 : 기본폰트 설정, CSS 대체
2. - big 요소 : 글씨 크게, CSS 대체
3. - center 요소 : 가운데 정열, CSS 대체
4. - font 요소 : 폰트 지정, CSS 대체
5. - s 요소, strike 요소 : 취소선, CSS 대체
6. - tt 요소 : 고정 간격, CSS 대체
7. - u 요소 : 밑줄, CSS 대체
8. - frame 요소, frmset 요소, noframe 요소 : 페이지를 프레임으로 분할 할 수 없음

신규속성

1. - autofocus : 커서를 이동하지 않고 바로 입력 또는 선택 할 수 있는 속성
2. - disabled : 모든 콘텐츠를 사용할 수 없도록 함 (fieldset)
3. - novalidate : 폼 컨트롤 값을 체크하지 않고 전송 (form)
4. - ping : ping 속성에 지정한 서버용 CGI 프로그램을 호출 (사용자가 클릭한 것을 카운트함)
5. - placeholder : 입력할 때 도움을 주기 위한 힌트를 표시 (input, textarea)
6. - required : 폼 컨트롤 공통 속성으로 필수 입력 여부를 지정
7. - reverse : 일련번호를 반대로 표시할 때 (ol, li)
8. - async : 스크립트가 실행할 수 있는 상태가 되면 비동기로 실행 (script)
9. - size : 아이콘 사이즈를 지정 (link)
10. - iframe 추가 속성
    1. ▷ sandbox : 제공된 콘텐츠에 제약을 가함
    2. ▷ seamless : 브라우징 콘텐츠가 다큐먼트의 부분으로 나타나는 것과 같이 렌더링 됨
    3. ▷ srcdoc : 프레임에 포함시킬 콘텐츠를 지정
11. - input 추가 속성
1. ▷ autocomplete : 입력 필드 값의 자동 완성 여부 지정
2. ▷ min : 컨트롤의 최소값을 지정
3. ▷ max : 컨트롤의 최대값을 지정
4. ▷ multiple : 속성에 다수 값 입력 여부 지정
5. ▷ pattern : 컨트롤 값을 체크하는 정규 표현식 패턴 지정 (자바스트립 패턴 방법 준수)
6. ▷ step : 속성에 컨트롤의 증가 단위 값을 지정

출처 : http://webstoryboy.tistory.com/12