[HTML] HTML5 - 기본 구성
2024. 8. 27. 17:40ㆍLanguage/HTML
'VS code' 를 통해 'html' 문서를 작업할 때 'html:5' 를 입력하면 아래와 같은 기본 틀이 자동 구성된다. 하나하나 뜯어보자!
1. HTML5 - 기본 구성(틀)
<!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>
1-1. <!DOCTYPE html>
현재 문서가 'HTML5' 문서임을 정의
- 'DOCTYPE' 이란 단어는 아마 'DOCUMENT TYPE(문서 타입)' 의 줄임말로 보인다.
1-2. <html>
HTML 페이지(문서를 의미하는 듯)의 루트 요소(최상위)
- 루트 요소인 만큼 한 HTML 페이지에 하나가 존재하는게 아닐까라는 생각을 해본다.
- 해당 요소의 태그 안에 작성된 lang="en" 구문은 해당 요소에 포함되는 모든 기본언어를 영어로 지정하겠다는 의미이다. 예시의 경우 루트 요소인 <html> 에 작성해 해당 페이지의 기본언어가 영어로 설정되었다.
- lang 속성 을 사용하면 웹 브라우저가 해당 페이지가 어떤 언어로 작성되었는지 파악이 가능하다(물론 웹 브라우저에 관련 기능이 구현되어 있는 경우).
- 한국어를 지정하고 싶다면 lang="ko" 라 작성하면 된다고 한다.
1-3. <head>
HTML 페이지에 대한 '메타 정보' 가 포함되는 영역
- 여기서 말하는 '메타 정보' 또는 '메타데이터' 라는 것은 쉽게 말해서 사용자에게 보이지 않는 부분(마치 웹 개발의 Back-end 처럼)을 다루는 데이터(정보, 코드 등등)를 말한다.
- 좀 더 예를 들어 말하면 <head> 는 사람의 머리 속이다. 다른 사람이 무슨 생각을 하는지 겉으로 티가 나지 않으면 모르는 것처럼 아래에 다룰 <body> 가 없다면 사용자는 모르는 영역이라 나는 이해했다.
1-4. <meta>
HTML 페이지의 '메타 정보' 를 나타내는 태그 중 하나
- '메타 정보' 를 다루는 태그에는 여러 종류가 있지만 각 태그들은 목적에 맞는 '메타 정보' 를 다룬다. 이러한 태그들이 다루지 못하는 그 밖의 다양한 '메타 정보' 를 <meta> 태그로 다룰 수 있다.
- charset="UTF-8" 의 'charset' 속성은 어떤 문자 집합을 사용할지 지정하는 속성으로 HTML5 는 'UTF-8' 의 사용을 권장하고 있다. 'UTF-8' 의 경우 전 세계 대부분의 문자를 지원하기 때문이다.
- name="viewport" 의 'name' 속성은 '메타 정보' 를 위한 이름을 명시하는 속성이다. 'viewport' 의 경우 사용자가 볼 수 있는 영역으로 HTML5 에서는 'viewport' 를 기본적으로 제공하고 있다.
- content="width=device-width, initial-scale=1.0" 의 'content' 속성은 예시에는 없지만 <meta> 의 또 다른 속성인 'http-equiv' 나 'name' 과 관련된 값(value)을 명시하는 속성이다. 현재 예시는 name="viewport" (사용자가 볼 수 있는 영역)을 사용하고 있으므로 아마 속성 값은 보여지는 화면의 설정 값으로 예상된다.
1-5. <title>
HTML 페이지의 '제목' 을 명시하는 태그
- '제목' 을 명시한다고 해서 해당 게시글 처럼 페이지 제목이 화면(view)에 출력되는 것은 아니다. 널리 사용되는 웹 브라우저인 'Chrome' 을 예로 들어 설명하면 '탭' 에 표시되는 명칭이 이 <title> 로 명시된 텍스트인 것이다.
1-6. <body>
HTML 페이지의 사용자에게 보이는 제목, 단란, 이미지, 하이퍼링크, 표, 목록 등의 컨텐츠를 포함하는 영역
- 위에서 <head> 에 대해 정리할 때 사람의 머리 속이라 표현했는데, <body> 의 경우는 표정, 헤어스타일 등 외적으로 보이는, 즉 웹 브라우저에서 노출되는 컨텐츠를 포함하는 영역이라 이해했다.
2. 정리
결국 HTML 페이지(문서)는 최상위 요소인 <html> 을 하나 가지고 그 아래로 <head> 와 <body> 요소를 각각 하나씩 가지는 틀을 가지고 있다. 그리고 <head> 에는 웹 브라우저에 노출이 되지 않는 정보들을 작성하며, <body> 에는 웹 브라우저에 노출되는 컨텐츠들에 대한 정보를 작성하게 된다.
이렇게 하나씩 뜯어보니 처음엔 "이게 뭘 뜻하는 거지?" 했었는데, 이제는 "HTML 이 기본적으로 어떤 구성을 가졌는지 알고 있다!" 라고 말할 수 있을 것 같다.
참고 문서
'Language > HTML' 카테고리의 다른 글
| [HTML] CSS 적용 우선순위 - CSS Specificity (0) | 2024.08.30 |
|---|---|
| [HTML] OpenAPI 다루기 - function, fetch (0) | 2024.08.29 |
| [HTML] 꾸미기 - <style>, CSS (0) | 2024.08.27 |
| [HTML] HTML5 태그 - <h1>, <p>, <span>, <button>, <div> (0) | 2024.08.27 |