HTML을 이루는 기본 태그들
에디터를 이용해 새 HTML파일을 생성하면 기본으로 들어가있는 태그들이 있습니다.
이 태그들은 대부분이 HTML을 구성하는 필수 요소입니다. 없어도 HTML파일 자체를 불러오는데는 문제가 없을지라도, 내가 원하는 형태의 컨텐츠를 제대로 불러오는 것에는 문제가 생길 수 있습니다.
아래의 코드는 HTML의 기본적인 구조를 나타낸 것입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>DOCTYPE
<!DOCTYPE html>이 부분은 문서의 형식을 선언하는 부분입니다.
html 문서를 해석하는 브라우저에게 이 파일은 html5로 작성되었다고 알려주는 역할을 합니다.
html 문서에 작성된 모든 태그들은 소문자로 작성해야하지만, 이 부분은 대소문자를 따로 구분하진 않습니다.
하지만 html 태그에 해당하는 부분이 아니고 규칙 선언부이기 때문에, 대문자를 사용해 차별화를 합니다.
그리고 반드시 html 문서의 최상단에 위치해야 합니다.
HTML
<html lang="ko"></html>doctype을 제외한 모든 html내의 구성 요소들이 담기는 부분입니다.
모든 태그들을 감싸고 있어야 하며, html의 시작부라고 할 수 있습니다.
lang이라는 속성을 넣어 사용자 언어(en, ko, jp 등등)를 지정할 수 있습니다. lang 속성은 접근성 요소로, 스크린 리더기가 컨텐츠를 해당 언어로 자동 번역할 수 있게 해줍니다. 그러므로 꼭 써주는 게 좋습니다.
HTML 태그는 <head>와 <body>를 감싸며, 루트(root, 최상위) 요소라고도 불립니다.
head
<head></head>html 안에서 가장 먼저 만나게 되는 요소입니다.
보통 meta태그나 link, css 등 웹사이트에서 직접 보여지지 않는 무형의 정보들이 담기는 공간입니다. 따라서 브라우저 상에서는 내용이 보이지 않습니다.
아래는 head 안에 담기는 태그들입니다.
meta 태그
<meta charset="UTF-8">웹페이지의 메타데이터를 담는 태그입니다.
항상 <head> 태그 안에 위치해야합니다.
name, http-equiv, content 속성 등을 사용해 다양한 정보를 담을 수 있습니다.
검색 엔진을 위한 키워드나 사이트의 미리보기 설명, 문자셋 설정, 제작자 명시나 뷰포트 설정 등을 할 수 있습니다.
title 태그
<title>Document</title>웹페이지의 제목을 보여줍니다.
<title> 안쪽의 컨텐츠를 수정하면 브라우저 상단 탭에 수정된 내용으로 반영됩니다.
body
<body></body>HTML의 중추라고 할 수 있는 부분입니다.
일반 태그, <script> 등 눈에 보이는 거의 모든 요소들은 <body> 안에 위치합니다.
html 문서 내에 단 하나만 존재합니다.
