3일만에 끝내는 HTML, CSS, JS 기초
h16. HTML 헤드 태그 본문
HTML 헤드 태그
<head> 태그는 메타데이터를 담기 위한 태그입니다. 메타데이터란 HTML 페이지 생성에 관계된 데이터인데, 문서의 본문에 표시되지는 않습니다. 메타데이터는 문서의 제목<title>, 스타일 지정<style>, 링크 지정<link>, 스크립트 탑재<script> 등을 포함합니다. 아래 예에서는 <head> 태그를 생략하였는데, HTML5 표준에서는 <html> 태그, <body> 태그, 및 <head> 태그를 생략할 수 있도록 했습니다. 그러나 반면, <html> 태그는 검색엔진이 참고하도록 언어설정을 넣을 수 있고 또 <body> 태그는 바탕 색상 등을 지정하는 용도로 사용될 수 있습니다. 하지만, <head> 태그는 정말 생략하여도 문제가 없습니다.<!DOCTYPE html> <html lang="ko"> <title>이곳에 페이지 제목을 적습니다. 브라우저 탭에 나타납니다.</title> <style> body {background-color:yellow;} p {color:blue;} </style> <link rel="stylesheet" href="mystyle.css"> <meta name="keywords" content="강아지, 조랑말, 머슴"> <meta name="description" content="강아지와 고양이의 주인에 대한 충성심을 보여주는 일화입니다."> <meta charset="UTF-8"> <base href="https://cdn2.iconfinder.com/data/icons/" target="_blank"> <body> <p>본문내용 적는 곳</p> <img src="new-year-resolutions/64/resolutions-25-128.png"> </body> </html>
언어의 설정은 화면을 읽어주는 프로그램이나 또는 검색엔진에게 중요합니다. <html> 태그 또는 <body> 태그를 생략할 수는 있느나, 생략하게되면 DOM/XML을 활용하는 프로그램에서는 심각한 문제를 일으킬 수 있습니다. <title> 태그는 브라우저 탭에 제목을 부여합니다. 또 즐겨찾기로 등록할 때 페이지 제목으로 사용되고, 검색엔진에서 검색결과를 표시할 때에도 제목으로 사용됩니다. 따라서 타이틀을 잘 기입하는 것이 중요하겠습니다. <style> 태그는 말 그대로 문서의 스타일을 정의합니다. <style> 태그안에 특정 HTML 태그들이 브라우저에 어떻게 표출될지를 기입합니다. <link> 태그는 외부의 리소스를 페이지에서 사용할 수 있도록 등록합니다. <link> 태그는 스타일 시트를 링크할 때 가장 많이 사용됩니다. <meta> 태그는 페이지 설명, 키워드 등의 정보를 제공하여 검색엔진이나 다른 프로그램에 의해 사용되는데 위의 예와 같이 정의해 줍니다. 문자셋을 UTF-8로 지정해 주면 한글뿐아니라, 각국의 언어를 모두 표현할 수 있게 됩니다. <base> 태그는 페이지내에 상대주소 URL에 대해 기초 URL 주소를 정의해 줍니다.
[광고] Udemy 동영상 강의로 보기
'HTML' 카테고리의 다른 글
| h06. HTML 주석달기 (0) | 2016.06.05 |
|---|---|
| h17. HTML 특수문자 입력 (0) | 2016.06.05 |
| h15. HTML 반응형 웹 디자인 (0) | 2016.06.05 |
| h14. HTML 블록 태그 및 인라인 태그 (0) | 2016.06.05 |
| h13. HTML 리스트 태그 (0) | 2016.06.05 |