글 작성자: 개발자 올라프

 

HTML 기본구조

 

HTML(HyperText Markup Language)은 웹 페이지를 만들기 위한 표준 마크업 언어이다. 웹 페이지의 구조와 내용을 정의하는 데 사용되며, 웹 페이지의 제목, 텍스트, 이미지, 링크, 리스트, 테이블 등 여러 요소를 표현할 수 있다.

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

 

 

<!DOCTYPE html>

 

DOCTYPE(DTD, Document Type Definition)은 문서의 맨 처음에 위치하여 해당 문서의 버전과 유형을 정의하며, 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지 또는 렌더링해야 하는지를 알려주는 용도이다.

 

<!DOCTYPE html>은 HTML5를 나타내는 선언으로 간소화되어 단순한 형태로 표현되고 있지만, HTML5 이전에는 다양한 DOCTYPE 선언이 있었다.

 

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

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

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

 

DOCTYPE 사용하는 이유와 배경

 

DOCTYPE을 사용하는데는 웹 표준의 필요성에 대한 이해가 필요하다. 웹이 처음 시작될 때 HTML은 간단한 언어로 시작되었지만, 시간이 지나면서 웹 개발자들과 브라우저 제작자들 사이에 HTML을 어떻게 사용하고 확장할 것인지 다양한 아이디어와 접근법이 생겼다.

 

90년대 중반에 Netscape Navigator와 Internet Explorer가 주요 웹 브라우저로 각광 받았고, 두 회사는 각각의 브라우저에서 독점적인 기능을 도입하려 했다. 이로 인해서 웹 표준이 부정확하게 되었으며, 동일한 HTML 코드가 두 브라우저에서 다르게 표시되는 문제가 발생했다.

 

위와 같은 문제를 해결하기 위해서 World Wide Web Consortium(W3C) 같은 표준화 기관들이 웹 표준을 도입하게 되었다. 이들의 목적은 웹 기술에 대한 일관된 표준을 만드는 것이었으며 노력의 일환으로 DOCTYPE이 도입되었다. DOCTYE은 문서가 어떤 HTML 또는 XHTML 버전에 따라 작성되었는지 지정하는 것이며, 브라우저가 해당 문서를 어떻게 올바르게 렌더링해야 하는지 알려준다.

 

하지만 브라우저들은 W3C에서 웹 표준을 제정할 때, 새로운 표준을 채택함과 동시에 과거의 웹 페이지들도 올바르게 표시해야 했다(새로운 표준을 기반으로 기존 웹 페이지를 제대로 표현할 수 없었음). 그래서 브라우저들은 두 가지 모드를 제공했는데 호환모드(quirks mode)와 표준모드(standard mode) 방식이다. 호환모드는 기존 방식으로 제작된 웹사이트를 표시하기 위함이었고, 표준 모드는 표준을 기반으로한 웹사이트를 표시하기 위함이었다.

 

DOCTYPE이 주어지지 않은 경우나 구식의 DOCTYPE이 사용된 경우에는 호환모드에서 페이지를 렌더링하게 되었고, 현대 표준을 준수하는 DOCTYPE이 주어진 경우에는 표준 모드에서 페이지를 렌더링하게 되었다.

 

 

<html lang="ko">

 

문서의 전체 범위를 표시하여 HTML 문서가 어디서 시작하고, 어디서 끝나는지 알려주는 역할이다. lang속성은 language의 약어로 해당 문서의 주요 언어(ISO 639-1)를 지정하는데 사용된다. 지정 가능한 언어 목록은 다음 링크에서 확인이 가능하다.

 

 

ISO 639-1 코드 목록 - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. ISO 639는 언어 분류를 위해 사용되는 표준화된 명명법이다. 각 언어는 2글자(639-1) 및 3글자(639-2, 639-3)로 할당된다. 어족 ISO 언어 이름 네이티브 이름 639-1 639-2/T 63

ko.wikipedia.org

 

<html> 태그 속성

 

  • lang : 문서의 주 언어를 나타낸다. 해당 속성은 검색 엔진 최적화와 웹 접근성에 중요하며, 스크린 리더가 적절한 발음을 사용할 수 있도록 한다.
  • dir : 문서의 텍스트 방향을 지정한다. 오른쪽에서 왼쪽으로 쓰이는 언어에서 사용되며, ltr(left-to-right) 또는 rtl(right-to-left)값을 가진다.

 

 

<head>

 

문서의 정보를 나타내는 범위이며, 웹 브라우저가 해석해야 할 웹 페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS) 링크, 스크립트, 메타 정보 같은 웹 페이지의 보이지 않는 리소스를 작성하는 범위이다.

 

  • <meta charset="UTF-8"> : 문서의 문자 인코딩을 UTF-8로 설정한다.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0> : 반응형 웹 디자인을 위한 설정으로, 기기의 화면 너비에 따라 레이아웃이 조절되도록 한다.
  • <title>Document</title> : 웹 브라우저의 탭이나 제목 표시줄에 표시되는 문서의 제목을 설정한다.

 

 

<body>

 

웹 페이지의 실제 내용이 위치하는 영역으로 문서의 구조를 나타내는 범위이다. 사용자 화면을 통해 보여지는 텍스트, 이미지, 링크, 리스트 등의 요소들이 이 부분에 들어간다.

 

 

 

 

저작자표시

'⭐️ Markdown & Style sheet > HTML' 카테고리의 다른 글

[HTML] HTML 메타데이터 이해하기  (0) 2023.09.18

티스토리툴바