offfff

HTML 헤더(HTML Head) 본문

프로그래밍

HTML 헤더(HTML Head)

offfff 2016. 9. 10. 21:00

The HTML <head> Element


<head> element는 메타데이터(데이터에 관한 정보)를 저장하는 요소이며,  <html> 태그와 <body> 태그사이에 위치한다.

메타데이터는 HTML문서에 관한 정보이고, 화면에 표시되지 않는다.

문서 제목, 케릭터 셋, 스타일, 링크, 스크립트 등이 메타데이터에 해당한다.




The HTML <title> Element


<title> element는 HTML문서의 제목을 정의한다.


- 브라우저 탭의 제목을 정의한다.

- 즐겨찾기로 추가할 때, 페이지 제목으로 제공된다

- 검색엔진의 검색 결과로 나오는 페이지 제목으로 화면에 출력된다


<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>


<body>

The content of the document...

</body>

</html>




The HTML <style> Element


<style> element는 하나의 HTML 페이지의 스타일 정보를 정의하는데 사용된다.


<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

<style>

body { background-color: powderblue; }

h1 { color: red; }

p { color: blue; }

</style>

</head>


<body>

<h1>This is a Heading</h1>

<p>This is a paragraph.</p>

</body>

</html>




The HTML <link> Element


<link> element는 외부의 style sheet를 링크하는데 사용된다.

CSS는 나중에 알아보도록 한다.


<link rel="stylesheet" href="mystyle.css">




The HTML <meta> Element


<meta> element는 케릭터 셋, 페이지 설명, 키워드, 저자 등의 정보를 정의하는데 사용된다.

메타데이터는 브라우저가 화면에 내용을 어떻게 표시할 것인지, 검색 엔진에 키워드를 제공하거나, 다른 웹서비스에 사용된다.


<!DOCTYPE html>

<html>

<head>

<!--케릭터 셋을 정의한다-->

<meta charset="UTF-8">


<!--웹 페이지 설명을 정의한다-->

<meta name="description" content="Free Web tutorials">


<!--검색 엔진에서 사용할 키워드를 정의한다-->

<meta name= "keywords" conetent="HTML, CSS, XML, JavaScript">


<!--페이지 저자를 정의한다-->

<meta name="author" content="Hege Refsnes">


<!--30초 마다 페이지를 새로고침 한다-->

<meta http-equiv="refresh" content="30">

</head>


<body>

<p>메타데이터는 화면에 표시되지 않습니다.</p>

</body>

</html>




The HTML <script> Element


<script> element는 client-side JavaScript를 정의하는데 사용한다.

아래 예제의 자바스크립트는 demo라는 id를 가진 HTML element에 텍스트를 출력하도록 하는 소스코드이다.


<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

<script>

function myFunction() {

document.getElementById("demo").innerHTML = "Hello JavaScript!";

}

</script>

</head>


<body>

<h1>My Web Page</h1>

<p id="demo">Paragraph</p>

<button type="button onclick="myFunction()">Click</button>

</body>

</html>




The HTML <base> Element


<base> element는 페이지의 모든 상대주소를 위한 base URL과 base target을 정의한다. (페이지의 기준이 되는 절대경로를 지정)


<!DOCTYPE html>

<html>

<head>


<title>Page Title</title>


<!--Base URL을 아래 경로로 지정-->

<base href="http://www.w3schools.com/images/" target="_blank">


</head>


<body>


<!--아래 이미지의 실제 경로는-->

<!--http://www.w3schools.com/images/html5.gif 가 된다.-->

<img src="html5.gif">


</body>

</html>




Omitting <html>, <head> and <body>?


HTML5 표준에서, <html>, <body>, <head> 태그들은 생략할 수 있다.

하지만 구버전의 브라우저나 파서(DOM/XML software)에서 충돌할 수 있으므로 생략하지 않는게 좋다.

HTML5에서는 아래와 같은 코드가 가능하다.


<!DOCTYPE html>

<title>Page Title</title>


<h1>This is a heading</h1>

<p>This is a paragraph</p>




아래 링크를 참조하여 번역 및 수정 함

http://www.w3schools.com/html/html_head.asp


저작자표시 비영리

'프로그래밍' 카테고리의 다른 글

반응형 웹(HTML Responsive)  (0) 2016.09.12
HTML 레이아웃(HTML Layout)  (0) 2016.09.11
HTML 자바스크립트(HTML JavaScript)  (0) 2016.09.09
HTML iframes  (0) 2016.09.08
HTML Classes  (0) 2016.09.07
'프로그래밍' Related Articles more