HTML5의 특징

HTML5은 2014년 10월 28일 확정된 차세대 웹 표준으로 다음과 같은 기능이 추기되었습니다.

• 멀티미디어 : 플래시와 같은 플러그인의 도움없이 비디오 및 오디오 기능을 자체적으로 지원한다.
• 그래픽 : SVG, 캔버스를 사용한 2차원 그래픽과 CSS3, WebGL을 사용한 3차원 그래픽을 지원합니다.
• 통신 : 지금까지의 HTML은 단방향 통신만이 가능하였으나, HTML5는 서버와의 소켓 통신을 지원하므로 서버와의 양방향 통신이 가능합니다.
• 디바이스 접근 : 카메라, 동작센서 등의 하드웨어 기능을 직접적으로 제어할 수 있습니다.
• 오프라인 및 저장소 : 오프라인 상태에서도 어플리케이션을 동작시킬 수 있습니다. 이는 HTML5가 플랫폼으로서 사용될 수 있음을 의미합니다.
• 시맨틱 태그 : HTML 요소의 의미를 명확히 설명하고 시맨틱 태그를 도입하여 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명할 수 있습니다.
  이를 통해 HTML 요소의 의미를 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹을 실현할 수 있습니다.
• CSS3 : HTML5는 CSS3를 완벽하게 지원합니다.
  
  

시맨틱 웹 (Semantic Web)

시맨틱 웹이란 의미론적인 웹이라는 뜻으로, 웹에 존재하는 수많은 웹페이지들에 메타데이터를 부여하여,
기존의 잡다한 데이터 집합이였던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상입니다.
시맨틱 태그를 이용하여 시맨틱 웹을 실현하면 개발자가 의도한 요소의 의미가 정확히 드러나 코드의 가독성을 높이고 유지보수가 훨씬 쉬워지며
브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 장점이 있습니다.

시맨틱 태그 (Semantic Tag)

HTML의 요소는 non-semantic 요소와 semantic 요소로 구분할 수 있습니다.

• non-semantic 요소 ```

, 와 같이 콘텐츠에 대하여 설명이 없는 요소입니다. ``` * semantic 요소 ```

, , 와 같이 콘텐츠의 의미를 명확히 설명하는 요소입니다. ``` ## HTML5의 새로운 시맨틱 요소들 --- |tag|Description| |------|------| |header|헤더를 의미합니다.| |tag|내비게이션을 의미합니다.| |aside|사이드에 위치하는 공간을 의미합니다.| |section|본문의 여러 내용(article)을 포함하는 공간을 의미합니다.| |article|본문의 주내용이 들어가는 공간을 의미합니다.| |footer|푸터를 의미합니다.|


## 시맨틱 마크업 (Semantic Markup) --- 시맨틱 마크업은 어떻게 예쁘게 보여줄까라는 생각을 완전히 배제하고,
순수하게 정보를 의미에 맞게 HTML 태그를 사용해서 작성하는 것입니다.
논리적인 순서로 우선순위인 기능을 먼저 마크업합니다.
(ex) header : 로고 / 텍스트 링크(로그인,회원가입) / 검색폼(검색창, 버튼)
> 출처 : https://www.semrush.com/blog/semantic-html5-guide
## 시맨틱 마크업의 장점 --- * 접근성이 좋아집니다. * SEO(Search Engine Optimization) * 수정이 용이해집니다. * 코드 가독성이 좋아집니다. * 코드와 데이터의 재사용성이 높아집니다.

# 2. Today I Found Out ``` Sematic Markup, Semantic Web, Semantic UI 등등.. 시맨틱이 들어간 많은 단어들을 보면서 왜 다들 시맨틱이란 단어가 들어간 것을 선호하는지 궁금함이 가득했는데 수업을 듣고 공부를 하면서 궁금함을 시원하게 해결할 수 있어서 너무나도 기분이 좋았습니다. 시맨틱 마크업으로 얻는 장점이 많고 협업시 동료에게 친절하면서도 좋은 코드를 주고 싶은 마음이 가득한 만큼 많이 써보고 좋은 마크업을 하는 연습을 많이 해야겠습니다. ``` # 3. refer > http://www.w3im.com/ko/html/html5_semantic_elements.html > http://poiemaweb.com/html5-semantic-web