[CS] HTML

youngseo·2022년 8월 24일
0

개발상식

목록 보기
4/6

HTML5의 특징

HyperText Markup Language의 약자로 World Wide Web을 통해 제공하는 정보를 나타낼 목적으로 사용되는 마크업 언어이며, HTML의 5번째 버전을 의미한다.

등장배경

HTML5 이전에는 같은 웹 사이트라고 하더라도 접속하여 사용을 하는 웹 브라우저의 종류 또는 버전에 따라 화면에 다르게 보이는 사오항이 발생했다. 이러한 이유로 웹 표준의 필요성이 절실하게 요구되었다.

주요 특징

  1. HTML5 이전 버전까지는 웹 브라우저에 추가 설치된 플러그인의 도움 없이 동영상이나 음악을 재생할 수 없었으나 HTML5부터는 플러그인의 추가 설치 없이 동영상이나 음악을 웹 브라우저 상에서 곧바로 재생할 수 있다.
  2. 브라우저의 로컬 스토리지를 활용하여, 웹 페이지가 브라우저에 데이터를 로컬로 저장할 수 있게 되었다. 이를 통해, 오프라인에서도 효율적으로 작동할 수 있게 되었다.
  3. HTML5에서는 SVG 태그를 이용한 2차원 벡터 그래픽과 자바 스크립트 캔버스를 사용한 2차원 래스터 그래픽, CSS3와 자바스크립트 WebGL을 사용한 3차원 그래픽의 구현이 가능하다.
  4. HTML5는 서버와 소켓 통신이 가능해 실시간으로 서버와 양방향 통신을 수행할 수 있다.
  5. 스마트폰의 배터리 잔량을 확인하거나 GPS를 통한 위치 확인 및 장치 접근이 가능하다.
  6. HTML5는 오프라인 상태에서도 작업이 가능하다.

DOCTYPE

  1. DOCTYPE이란 무엇인가?

"문서 형식 선언"(Document Type Declaration), 또는 doctype이란 문서의 유형을 정의하기 위해 사용하는 선언문이다.

문서 타입 정의는 HTML5, XHTML, HTML의 세가지 문서 유형이 존재하며, 기술한 유형에 따라 마크업 문서의 요소와 속성들ㅇ르 처리하는 기준이 되며 유효성 검사에 이용된다.

웹 문서의 시작을 알려주며 태그보다 먼저 선언한다. DOCTYPE은 웹 브라우저에서 처리할 문서가 HTML이며 어떠한 버전으로 사용했으니, 해당 방식대로 해석하라는 의미를 갖는다.

meta태그란?

'속성정보'라고도 불리는 메타데이터는 '데이터에 관한 구조화된 데이터', '다른 데이터를 설명해 주는 데이터'이다. (데이터를 위한 데이터)

대량의 정보 가운데에서 찾고 있는 정보를 효율적으로 찾아내서 이용하기 위해 일정한 규칙에 따라 콘텐츠에 대하여 부여되는 데이터이다.

속성명속성값설명
charset문자셋해당 문서의 문자 인코딩 방식을 명시함
content텍스트name속성이나 http-equiv속성과 관련된 값(value)을 명시함
http-equivcontent-type, default-style, refreshcontent속성에 명시된 값에 대한 HTTP헤더를 제공함
nameapplication-name, author, description, generator, keywords, viewport메타데이터를 위한 이름을 명시함
scheme포켓 또는 URLcontent속성의 속성값을 해석하는데 사용할 스키마를 명시함, HTML5에서는 더이상 지원하지 않습니다.

시멘틱 태그란?

시멘틱 테그는 "의미가 있는 태그"라는 뜻이다. 즉, HTML tag들 중에서도 나름의 의미가 있는 태그들을 말한다.

시멘틱 태그가 중요한 이유

  1. SEO ( Search engine optimization )

검색을 최적화하기 위해서 우리가 제목, 부제목, 시멘틱 테그를 잘 활용한다면, 특정 키워드로 검색했을 때, 내가 만든 웹싸이트가 검색창에 노출될 수 있다. 다시 말해서, 브라우져의 검색 엔진이 내가 만든 웹싸이트를 어떤 검색 결과에 띄워줘야 될지를 알려줄 수있다.

  1. 웹 접근성

웹페이지를 시각적이 아니라, 음성으로 읽어주는 "스크린리더"를 이용하거나 또는 키보드만을 이용해서 내가 만든 웹싸이트를 이용하는 경우, 적절한 시멘틱 태그로 잘 만들어진 웹싸이트라면 스크린리더이든, 키보드만을 사용해서 동작하든 문제없이 동작할 수 있습니다.

  1. 유지보수성

단순히, div tag로만 모든 구조를 짜는 것보다 더 한 눈에 알아볼 수있기 때문에, 다른 개발자들이 코드를 유지보수하기가 더 편해진다.

--

출처
https://velog.io/@gil0127/Semantic-Tag-%EC%A0%95%EB%A6%AC
https://joyfuls.tistory.com/24
http://www.tcpschool.com/html-tags/meta

0개의 댓글