[HTML] doctype과 <html><head> 내 작성 태그

Front-End/HTML 2022. 11. 23. 14:05

HTML 파일은 가장 상위에 태그로 존재하고 html 태그 내부에 태그로 크게 구성된다.

 

DOCTYPE이란?

<!doctype html>  /* html5로 작성된 것을 의미 */

: 문서 형식 선언 또는 문서의 유형을 정의하기 위해 사용하는 선언문

: doctype 선언에 따라 브라우저는 렌더링 모드를 바꾸고 해당 렌더링 모드에 맞게 사용할 수 있는 태그와 속성이 변경

 

※ doctype을 선언하지 않으면 각각의 브라우저들이 저마다의 기준대로 랜더링을 실시한다.(쿼크모드(비표준모드) 랜더링)

   브라우저가 해당 문서의 형식을 알 수 없다.

 

↓

 

문서형 정의를 생략하는 경우, 웹 브라우저가 표준 모드가 아닌 비표준 모드로 랜더링되어 크로스 브라우징에 어려움을 겪음. 비표준 모드로 렌더링되면 문서 제작자가 의도한 레이아웃이 깨지게 되어 사용자에게 비정상적인 상태의 문서를 보여주게 됨. 문서형 정의는 HTML 문서의 최상단에 위치해야됨.

 

+) 크로스 브라우징: 표준 모드를 유지하는 것

 

 

<VS Code 에서 doctype 단축키>

  • ! 입력 후 Enter
  • doc 입력 후 Enter

 

<VS Code 단축키>

https://docs.emmet.io/cheat-sheet/

 

Cheat Sheet

Download cheat sheet as printable PDF A5

docs.emmet.io

 

 

<html>

<html lang = "kr">
...
</html>

lang은 html 태그 내에서 사용하며 웹 문서에 관련된 언어를 지정하는 속성이 있다.

 

주요 언어 코드

한국어 ko, kr
영어 en
중국어 zh
일본어 ja

 

 

<head></head> 내에서 작성할 수 있는 태그들

<meta>

: 본 문서의 키워드, 제목, 요약을 나타내는 태그로 활용

: 해당 문서에 대한 정보인 메타데이터를 정의할 때 사용

속성명 속성값 설명
charset 문자셋 해당 문서의 문자 인코딩 방식을 명시
content 텍스트 name 속성이나 http-equiv 속성과 관련된 값을 명시
http-equiv content-type
default-style
refresh		 content 속성에 명시된 값에 대한 http 헤더를 제공
name application-name
author
description
generator
keywords
viewport		 메타데이터를 위한 이름을 명시
scheme 포멧 또는 URI content 속성의 속성값을 해석하는데 사용할 스키마를 명시
HTML5에서는 더 이상 지원하지 않음

HTML5에서는 scheme 속성을 더이상 지원하지 않으며, charset(문자셋)을 정의할 수 있는 속성이 새롭게 추가

<meta charset="UTF-8" />

 

※ HTML과 XHTML 차이 ※

  • HTML에서는 <meta> 태그를 닫지 않지만, XHTML 에서는 반드시 태그를 닫아야 함.
  • XHTML은 기존에 사용되던 HTML 규격이 가진 문제점을 해결하고 보다 다양한 분야에 응용될 수 있도록 여러가지 확장된 기능을 제공.
  • XHTML은 XML 문법 따르므로 HTML과 문법 규칙이 약간 다름.
  • CSS를 이해하는 방식에 차이 있음.(body 요소의 background-color, background-image, overflow 속성이 최상위 요소에도 적용되지만 XHTML에서는 적용 안됨.)
  • XHTML 사용할 시 js에서 .innerHTML 사용 불가.

 

<meta> 사용 예시 코드

1. 검색 엔진을 위한 keywords를 정의

<meta name="keyword" content="HTML, meta, tag, element, reference" />

2. 웹 페이지에 대한 설명을 정의

<meta name="description" content="HTML meta" />

3. 문서의 저자를 정의

<meta name="author" content="guswjd" />

4. 5초 뒤 다른 페이지로 redirect 시킴

<meta http-equiv="refresh" content="5;url=http://www.naver.com" />

5. 모든 장치에서 웹 사이트가 잘 보이도록 viewport 설정

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

 

 

<meta>는 항상 <head> 내부에 위치해야 한다.

name 속성이나 http-equiv 속성이 명시되었다면 반드시 content 속성도 함께 명시되어야 한다. 두 속성이 명시되지 않았다면 content 속성도 명시될 수 없다.

HTML5 에서는 <meta> 요소를 통해 웹 페이지에서 사용자가 볼 수 있는 영역인 viewport를 제어할 수 있도록 name 속성에 viewport 속성 값을 제공하고 있다.

 

 

<title>

: 문서의 제목을 나타내는 태그

<title>제목</title>

 

<link>

: css 파일 등 다른 외부 요소와 연결할 때 사용하는 태그

: type이나 rel(relationship)을 같이 적어줌

<link rel="stylesheet" href="style.css" />

 

<style>

: html 문서 안에 css를 사용하고자 할 때 적어주는 태그

<style type = "text/css">
	{color: purple;
     	padding: 10px;}
</style>

 

반응형

'Front-End > HTML' 카테고리의 다른 글

[HTML] id와 class 차이  (0) 2022.11.24
[HTML] 사용자에게 입력받을 수 있는 태그  (0) 2022.11.23
[HTML] HTML 문서 내에서 SVG 이용  (0) 2022.11.23
[HTML] 문서 구조 표현하는 시맨틱 태그  (1) 2022.11.23
[HTML] <body> 작성할 수 있는 태그들  (0) 2022.11.23