HTML 기본 틀에 대해 알아보자 - <!DOCTYPE> / <head> / <meta> / <title>

728x90

vscode에서 ! + tab 누르면 나오는 "그 코드" 에 대해서 알아보자

바로 이 코드이다

항상 ! + tab 눌러서 자동완성으로 만들어지는 코드라 뜯어볼 생각도 안하고 그렇군 .. 하고 있었는데 오늘은 코드를 한 줄씩 뜯어볼 예정이다

<!DOCTYPE html>
<html lang="ko-KR">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>
<body>
</body>
</html>

<!DOCTYPE>

모든 HTML 문서는 <!DOCTYPE>으로 시작해야한다

<!DOCTYPE>은 html 태그는 아니지만 브라우저에게 문서 종류를 알려주는 정보로 DTD(Document Type Definition)이다

HTML5

<!DOCTYPE html>

HTML5에서는 우리가 자주 보는 <!DOCTYPE html> 만 작성해주면 된다

HTML 4.01

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

https://docs.emmet.io/cheat-sheet/ 에서 html를 찾아보면 예전 HTML에서는 어떻게 선언하는지 자세히 볼 수 있다

HTML 4.01 DTD에는 3가지 모드가 있다

Strict mode(엄격 모드)

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

HTML4 문법을 정확히 따르기 위해서 사용한다
구조상 필요한 태그만 허용한다
- ex. <font> 사용 불가능
<a>태그에서 target 속성은 사용하지 못한다

Transitional mode (호환 모드)

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

문법에 실수가 있어도 일부 허용한다
<a>태그에서 target 속성을 사용할 수 있다

Frameset mode (프레임셋 모드)

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

프레임셋을 사용할 경우 사용한다

프레임셋이란? <frameset> 태그는 문서의 레이아웃을 구성하기 위해 사용되는 frame들의 집합이다

<frameset>
  <frame />
  <frame />
</frameset>

하지만 HTML5에서는 <frameset> 태그를 지원하지 않는다

XHTML 1.0

잠깐 🖐 XHTML이 뭔가요?

HTML 4는 문법 체계가 굉장히 느슨하다. 예를 들면 태그에 대소문자를 섞어써도 아무런 에러가 발생하지 않는다.
하지만 HTML을 XML로 정의한 XHTML은 HTML보다 엄격한 문법을 갖고 있다

XTML에도 HTML4.01과 동일하게 3가지 모드로 선언할 수 있다

Strict mode(엄격 모드)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Transitional mode (호환 모드)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Frameset mode (프레임셋 모드)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML은

태그에 소문자만 사용할 수 있습니다
클로징 태그를 반드시 사용해야합니다
속성에 반드시 값이 들어가야합니다
- 속성 값은 ""을 이용합니다

<!--태그는 모두 소문자로 이루어져야한다-->
<Input /> // 불가능

<!--태그는 모두 종료 태그가 있어야한다-->
<input> // 불가능

<!--태그의 속성은 반드시 값을 가져야한다-->
<input checked /> // 불가능

<html lang="ko-KR">

언어를 설정해주는 부분이다

ko-KR은 한국어임을 말한다
ko-KP로 하면 북한언어로 된다
lang은 스크린리더에 영향을 주기 때문에 반드시 정확하게 작성해주어야한다
다른 태그에도 lang 속성을 사용할 수 있다

<span lang="en">dog</span>

<head>

<html> 태그와 <body> 태그 사이에 위치한다
메타데이터를 포함한다
메타데이터를 정의하는 <meta> 태그는 항상 <head> 내부에 있어야한다

메타데이터란?
다른 데이터를 설명해주는 데이터이다.
HTML문서에 대한 데이터 부분이며 화면에 보여지지 않는다
메타데이터는 주로 title, charset, style, script 등을 포함한다

<meta charset="UTF-8" />

charset은 문자 인코딩을 알려주는 속성이다

UTF-8은 다국어 지원을 의미하는데 이를 적어주면 글자가 깨지는 현상을 막을 수 있다

반드시 <title> 태그 위에 작성해주어야한다

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

http-equiv=X-UA-Compatible로 웹 호환성을 지정할 수 있다

X: 비표준
UA: User Agent로 브라우저를 의미한다

content에 적어준 값으로 렌더링 된다

content="IE=edge"를 사용하면 모든 IE(Internet Explorer) 브라우저에 동일한 화면을 제공할 수 있다

여기서 edge는 최신 버전을 의미한다

즉, 최신버전의 IE 엔진을 사용해서 렌더링한다

인터넷 익스플로러는 버전별로 웹에 보여지는 모습이 매우 다르기 때문에 호환성 보기를 권장하고 있다

<title>

해당 페이지를 나타내는 제목을 적어주면 된다
주의해야할 점은 쓸모없는 이모지, 특수문자를 넣지 않는 것이 중요하다
- 접근성 관점: 스크린 리더가 특수문자를 모두 읽기 때문에 단지 꾸미기 위해서 특수문자를 넣으면 안된다
- SEO 관점: 검색엔진에 노출될 때도 특수문자가 포함된 제목은 걸러진다
각 페이지마다 unique한 제목을 사용해야한다
즉 페이지를 나타낼 수 있는 핵심 키워드로만 작성해야한다

728x90

'👩‍🎤 프론트엔드 > html' 카테고리의 다른 글

웹 접근성을 고려하여 콘텐츠 숨기기 - sr-only / off-screen / a11yHidden (0)	2022.07.12
<main> / <section> vs <article> (0)	2022.07.12
HTML5의 콘텐츠 모델(Content Models) (0)	2022.07.12

<!DOCTYPE>

HTML5

HTML 4.01

Strict mode(엄격 모드)

Transitional mode (호환 모드)

Frameset mode (프레임셋 모드)

XHTML 1.0

Strict mode(엄격 모드)

Transitional mode (호환 모드)

Frameset mode (프레임셋 모드)

<html lang="ko-KR">

<head>

<meta charset="UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<title>

'👩‍🎤 프론트엔드 > html' 카테고리의 다른 글

티스토리툴바