✨ HTML5 | HTML 메타 태그들 :: 🤓 슬기로운 개발생활

✨ HTML5 | HTML 메타 태그들

HTML 2022. 9. 6. 00:39
1. <!DOCTYPE html> 의 의미

html 문서를 작성할 때 가장 첫 줄에 적는 <!DOCTYPE html>은 웹 브라우저에게 어떤 버전의 HTML 을 사용했는지 알려주는 문구이다.

예시

HTML5 문서

<!DOCTYPE html>

strict HTML 4.01 문서

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

transitional HTML 4.01 문서

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

frameset HTML 4.01 문서

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

What is the DOCTYPE Declaration in HTML?

The HTML document type declaration, also known as DOCTYPE, is the first line of code required in every HTML or XHTML document. The DOCTYPE declaration is an instruction to the web browser about what version of HTML the page is written in. This ensures that

www.freecodecamp.org

2. meta 태그들

meta 태그 : 해당 문서에 대한 정보(metadata)를 정의할 때 사용하는 태그

meta 태그 위치 : 항상 head 태그 안

meta 태그의 역할

- 해당 문서에 대한 정보를 알려줌

- SEO(검색 엔진 최적화) : metadata를 바탕으로 사용자에게 검색 결과 제공

<meta charset="utf-8"> HTML 문자들의 인코딩 방식 정의

1. 사람의 언어를 컴퓨터가 알아들을 수 있는 0과 1로 변환(인코딩) 해주어야 함.

아스키코드

다음과 같이 표를 사용해서 컴퓨터가 인코딩을 함. 하지만 아스키코드와 같은 문자열 변환 표에는 알파벳과 숫자만 정의되어있기 때문에 한글을 아스키 코드로 인코딩할 경우 깨지는 현상 발생 !

2. 유니코드의 탄생

나라마다 다른 인코딩 문자열 표준을 사용하니 호환성 문제도 생김. 모든 문자를 한 표에 넣은 유니코드가 생겨남.

3. UTF-8 : 0과 1로 컴퓨터에 저장할 때 8비트(1바이트)씩 차지하도록 컴퓨터에 저장하는 인코딩 방식(전세계적으로 가장 많이 사용하는 방식)

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

유니코드 - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. 유니의 음반에 대해서는 U;Nee Code 문서를 참고하십시오. 유니코드(영어: Unicode)는 전 세계의 모든 문자를 컴퓨터에서 일관되게 표현하고 다룰 수 있도록 설계된

ko.wikipedia.org

<meta http-equiv="X-UA-Compatible" content="IE=edge" > 렌더링 될 인터넷 익스플로러 버전 정의

content="IE=edge" : 가장 최신 버전 사용

<meta name="viewport" content="width=device-width, initial-scale=1.0"> viewport 세팅

모든 디바이스에서 똑같이 보이도록 하기 위해 필요

width = device-width 로 하겠다. 디바이스 스크린 크기와 뷰포트 크기 일치 시키기.

initial-scale=1.0 : 처음 브라우저가 로드될 때 확대/축소 스케일 설정

<meta name="description" content="내 웹페이지 설명"> 검색엔진에서 내 웹페이지를 찾을 수 있도록(SEO)

name, content 속성 사용

content의 값으로 들어간 text의 경우 아래와 같이 검색 결과로 보여진다.

웹사이트 description을 적을 때 고려해야 할 점들

1. description은 160자를 넘지 않도록.

2. 사용자가 검색할 만한 키워드 넣기

3. 웹 사이트가 어떤 걸 제공하는지 간단하고 명확하게 설명하기

<meta name="author" content="sinyoung"> 웹 사이트 author's name (SEO)

페이지 주인 정의하기
저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

✨ HTML5 | 시멘틱 태그(sementic tag) (0) 2022.09.03
관련글 관련글 더보기
- ✨ HTML5 | 시멘틱 태그(sementic tag)
댓글

ABOUT ME

🤓 슬기로운 개발생활 🤓 슬기로운 개발생활

1. <!DOCTYPE html> 의 의미

예시

2. meta 태그들

<meta charset="utf-8"> HTML 문자들의 인코딩 방식 정의

<meta http-equiv="X-UA-Compatible" content="IE=edge" > 렌더링 될 인터넷 익스플로러 버전 정의

<meta name="viewport" content="width=device-width, initial-scale=1.0"> viewport 세팅

<meta name="description" content="내 웹페이지 설명"> 검색엔진에서 내 웹페이지를 찾을 수 있도록(SEO)

<meta name="author" content="sinyoung"> 웹 사이트 author's name (SEO)

'HTML' 카테고리의 다른 글

티스토리툴바

ABOUT ME

1. <!DOCTYPE html> 의 의미

예시

2. meta 태그들

<meta charset="utf-8"> HTML 문자들의 인코딩 방식 정의

<meta http-equiv="X-UA-Compatible" content="IE=edge" > 렌더링 될 인터넷 익스플로러 버전 정의

<meta name="viewport" content="width=device-width, initial-scale=1.0"> viewport 세팅

<meta name="description" content="내 웹페이지 설명"> 검색엔진에서 내 웹페이지를 찾을 수 있도록(SEO)

<meta name="author" content="sinyoung"> 웹 사이트 author's name (SEO)

'HTML' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바