HTML의 Elements는 부모-자식의 tree 구조로 이루어져 있습니다. 아래의 사진을 함께 봅시다.
※ 위 사진은 Atom 편집기에서 html태그를 생성하면 자동으로 완성됩니다.(저번에 HelloWorld!를 출력하기 위해 작성한 <p>를 제외)
대부분의 HTML문서를 보면 <!DOCTYPE html>, <html>, <head>, <body>가 있음을 볼 수 있습니다.
위 사진에도 html태그를 추가하여 자동으로 완성된 태그들(<!DOCTYPE html>, <html>, <head>, <body>, <title>, <meta>)과 저번에 작성한 <p>태그가 있습니다.
여기서 보면 <html>태그가 <head>와 <body>를 감싸고 있으므로 <head>와 <body>의 부모 태그가 되는 것을 볼 수 있습니다.
<head> 태그는 자식으로 <meta>와 <title>을 가지고 있습니다. <body>에는 <p>가 자식으로 가지고 있습니다.
물론 이렇게 <html>, <head>, <body>등 주요 태그를 작성하지 않고 <p>태그만 이용하여 작성해도 HTML5에서는 출력이 되지만 이 경우에는 구조가 생뚱맞아 보이고 가독성이 떨어지기 때문에 생략은 하지않는 것이 좋습니다.
주요태그
<!DOCTYPE html>
HTML 문서의 선두에는 문서타입을 명시하는 선언문이 들어가야합니다. 문서 타입은 이 문서가 어떤 규칙을 따르는지 정의하는 역할을 합니다.
문서타입을 명시하는 이유는 어떤 문법을 따르는 문서인지 우선적으로 파악하기 위함입니다. 브라우저는 선두의 문서 타입을 보고 문서를 해석하는 방식, 출력하는 방식을 결정하게 되는데 만약 명시되어있지 않다면 브라우저 자체로 적용되어있는 디폴트 문서 타입을 적용합니다.
각각의 브라우저마다 디폴트 문서 타입이 다르지 때문에 명시적인 문서타입을 지정하지 않는다면 문서가 엉뚱하게 해석될 요지가 있습니다.
따라서 HTML 문서에는 <!DOCTYPE html>을 명시하여 html 문서임을 확실히 하는것이 좋습니다.
<html>
<!DOCTYPE html> 뒤에 오는 <html> 태그는 HTML 구조 및 내용을 만들기 위해 사용합니다.
<html> </html> 사이에 오는 Element들은 HTML 코드로 해석되게 됩니다. 만약 <html>이 없다면 작성한 HTML 문서가 이상하게 해석될 수 있습니다.
<head>
<head> 태그는 제목, 작성자, 문자셋 등 문서의 전반적인 정보를 기술하는 태그입니다. 따라서 문서의 내용이 들어가는 <body> 태그에 비해 사용하는 태그가 많지 않습니다. 대표적으로 <title>, <meta>, <style>, <script>, <link> 등이 있습니다.
<title> 문서의 제목을 정의하는 중요한 역할을 합니다 단순 문자열이기 때문에 글꼴 크기, 폰트 지정은 불가하며 제목만 간략히 작성해야합니다. 제목은 검색엔진이 참고하는 중요한 정보이므로 페이지의 내용을 함축적으로 담을 수 있는 문자열을 붙여야합니다.
<body>
<body> 태그는 웹페이지에 들어오는 사용자들에게 보여지는 내용을 담습니다. 따라서 다양한 내용을 표현할 수 있는 태그들이 사용됩니다. <h1>~<h6>, <p>, <img>, <video> 등이 있습니다.
'Web Basic > HTML' 카테고리의 다른 글
| 문서의 연결 (0) | 2018.03.22 |
|---|---|
| 텍스트 (0) | 2018.03.20 |
| HTML 기본구조 1 - 태그 (0) | 2018.03.20 |
| HTML tag 및 Elements (0) | 2018.03.20 |
| HTML이란? (0) | 2018.03.20 |
