0011 <head> 요소와 그 내부에 중첩된 <title> 요소
HTML 문서의 큰 틀에서 <html> 요소 다음에는 <head></head> 요소가 등장한다.
<!DOCTYPE html>
<html lang="ko">
<head>웹페이지 관련 정보들</head>
<body>본문(웹페이지의 내용)</body>
</html>
<head>요소는 HTML 문서에 대한 메타데이터(metadata)를 담고 있는 가장 상위의 요소로써 <head>와 </head> 사이에는 다른 요소들이 중첩(nesting) 되어 웹페이지 관련된 다양한 정보(metadata)들을 웹 브라우저에 제시한다.
<head> 요소에 중첩되어 들어올 수 있는 요소는 다음의 6개 요소 뿐이다.
<meta>, <title>, <script>, <link>, <style>, <base>
이 외의 요소들이 <head> 요소 내부에 중첩될 경우 웹 브라우저가 해당 요소를 자동으로 <body> 요소로 옮긴다.
<head> 요소 내부에 중첩된 <title> 요소
<head>에 중첩되는 요소는 다른 요소들과 같이 설명해야 하므로 차차 제시하고 이번에는 <title> 요소만 사용해보자.
<title> 요소는 문서의 제목을 정의하는 요소인데 실제로 어떻게 나타나는지 메모장에서 아래와 같이 작성하고 
title요소.html
로 저장한 후 실행시켜보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>HTML Ankilog</title>
</head>
<body></body>
</html>
어떤 일이 벌어지는가?
① 브라우저 상단의 탭 제목이 <title> 요소의 내용인 HTML Ankilog로 표시된다.
② 즐겨찾기에 등록될 페이지 제목이 <title> 요소의 내용인 HTML Ankilog로 표시된다.
③ 마지막으로 검색엔진이 검색결과로 제시하는 페이지 제목을 <title> 요소의 내용인 HTML Ankilog로 표시한다.
즉, <head> 요소 내부의 <title> 요소의 내용은 다음과 같이 반영된다.
① 브라우저 상단의 탭 제목
② 즐겨찾기에 등록되는 페이지 제목
③ 검색엔진이 검색결과로 제시하는 페이지 제목
Anki 파일
아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다.
Ankilog 파일: 
0011 head 요소와 그 내부에 중첩된 title 요소.apkg
'Anki로 공부하기 > HTML공부' 카테고리의 다른 글
| 0013 단락(paragraph)을 정의하는 p요소 (0) | 2018.11.13 |
|---|---|
| 0012 제목(heading)의 h요소 (0) | 2018.11.12 |
| 0010 속성(attribute)과 속성 작성방법 (0) | 2018.11.10 |
| 0009 html 요소와 속성 (0) | 2018.11.09 |
| 0008 HTML 문서유형선언 (0) | 2018.11.08 |