현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

 HTML의 head는 페이지를 열때 웹브라우저에 표시되지 않는다.   head는 <title>같은 페이지나,   CSS의 링크 (HTML 컨텐츠를 CSS로 스타일링하기를 원한다면),  favicons(읽다보면 나옴)의 링크, 그리고 다른 메타데이터(누가 이것을 썼는지 그리고 작성중인 페이지의 중요한 키워드와 같은 HTML의 정보 )를 포함한다. 이 글에서 우리는 위의 것들과 그것들 이상에 대해 다룰 것이다. 이것은 head에 있어야하는 마크업이나 다른 코드들을 다루는데 조은 기초가 될 것이다. 

Prerequisites: Basic HTML familiarity, as covered in Getting started with HTML.
Objective: To learn about the HTML head, what its purpose is, the most important items it can contain, and what effect it can have on the HTML document.

What is the HTML head?

 HTML document we covered in the previous article: 을 다시보자.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

HTML head <head> 요소의 컨텐츠이다. — <body>요소와 다르게  (페이지를 열때 웹브라우저에 표시되는), head의  콘텐츠는 페이지에 표시되지 않는다. 대신. head의 컨텐츠가 하는 일은 페이지에 대한(원문에는 document) metadata를 포함하는 것이다. 위의 예시에서  head는 매우 간결하다:

<head>
  <meta charset="utf-8">
  <title>My test page</title>
</head>

더 큰 웹페이지의 경우에선 head가 꽤나 많은 아이템들을 가질 수 있다. —당신이 가장 좋아하는 홈페지로 가서 developer tools 을 이용하여 head를 살펴봐라. 본문에서 우리의 목적은 head에 들어갈수 있는 모든것을 어떻게 사용하는지 보여주기 위한것이 아니라 당신이 head에 넣고싶어할 가장 명백한 것들을 익숙하게 하고 사용하는 방법을 가르쳐주는 것이다. 시작해 보자.

Adding a title

우리는 action에서  <title>요소를 이미 봤었다.  — 이것은 문서의 title을 추가하기 위해 사용될 수 있다. head는 dody 컨텐츠에서 최상위 부분에 들어가는<h1>요소와 헷갈릴 수 있다.  — <h1>요소는 가끔 title을 가르키기도 하지만 이것은 엄연히 다르다!

  • <h1> 요소는 페이지를 열 때 브라우저에 표시된다. — 일반적으로 페이지당 한번씩 사용되는데, 페이지 타이틀 컨텐츠나의 뉴스의 헤드라인을 표시하기 위해서
  • <title>은 HTML문서 전체의 타이틀 표현하기 위한 메타데이터이다.  (문서의 컨텐츠가 아니라)

Active learning: Inspecting a simple example

  1. 능동적인 학습을 시작하기 위해서, GitHub repo에가서 title-example.html page. 복사해라. 다운받기 위해 둘 중 하나를 해라
    1. 복사 그리고 붙여넣기를 새로운 텍스트 편집기에서 실행하고 당신이 알 수 있을 만한 경로에 저장하라.
    2. 페이지에서 "Raw"버튼을 눌러라 , 그러면 새창에 Raw code가 나타난다. 그런다음 당신의 브라우저 메뉴에서 File > Save Page As...  로 원하는 곳에 저장하라
  2. 이제 당신의 브라우저에서 받은 파일을 열어라.아래와 같이 보일 것이다:

    A simple web page with the title set to <title> element, and the <h1> set to <h1> element.명백에서 <h1>컨텐츠가 보이는 곳이 어디인지 이제 명백할 것이다.그리고<title> 컨텐츠도 어디있는지 알 수 있다!

  3. 당신의 텍스트 편집기에서도 이것을 열수있다 이 요소들을 변경해보고 그리고 페이지 다시 열기를 실행하면서 즐겨보라.

<title> 요소는 다른 방식으로 사용될 수도 있는데 예를 들면 브라우저에서 사이트를 북마크할 때 이미 적혀있는 이름으로 title이 사용되기도 한다.

A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element

<title>은 아래에서 보는것 처럼 검색결과로 사용되기도 한다.

Metadata: the <meta> element

메타데이터는 데이터를 설명하는 데이터이다 그리고 HTML에서 문서에 공식적으로 메타데이터를 적용하는 방법이 있다. — the <meta> element. Of course, the other stuff we are talking about in this article could also be thought of as metadata too. There are a lot of different types of <meta> element that can be included in your page's <head>, but we won't try to explain them all at this stage, as it would just get too confusing. Instead, we'll explain a few things that you might commonly see, just to give you an idea.

Specifying your document's character encoding

위에서의 예제에서 , 아래의 줄이 포함된다:

<meta charset="utf-8">

이 요소는 문서의 character incoding에 대해서 간단히 표시한다 —문서에서 허용하는 character 셋. utf-8 은 전세계적인 character 셋으로 많은 언어들을 문자들을 포함한다. 이는 너의 웹 페이지에서 어떤 문자라도 취급할 수 있다는 것을 의미한다; 따라서 당신이 작성할 모든 페이지에서 character 셋을 utf-8로 지정하는것은 좋은 생각이다! 예를 들어서 당신의 웹페이지는 영어도 일어도 모두 허용한다:

a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,예를 들어서 만약 니가  ISO-8859-1로 characterset을 설정한다면(알파벳 사용을 위해서), 너의 페이지는 엉망으로 렌더링 될 것이다:

a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly

Active learning: Experiment with character encoding

To try this out, revisit the simple HTML template you obtained in the previous section on <title> (the title-example.html page), try changing the meta charset value to ISO-8859-1, and add the Japanese to your page. This is the code we used:

<p>Japanese example: ご飯が熱い。</p>

Adding an author and description

많은 <meta> 요소가 name 과 content 속성을 가진다:

  • name 은 메타 요소의 형태를 알려준다; 이것이 어떤 타입의 정보를 가지고 있는지.
  • content는 실제 메타데이터의 컨텐츠이다.

이러한 두가지 메타데이터는 당신의 페이지에서 관리자를 정리하고 머릿말을 요약하는데 유용하다. 아래의 예시를 보자:

<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications.">

Specifying an author is useful in a few ways: it is useful to be able to work out who wrote the page, if you want to contact them with questions about the content. Some content management systems have facilities to automatically extract page author information and make it available for such purposes.

Specifying a description that includes keywords relating to the content of your page is useful as it has the potential to make your page appear higher in relevant searches performed in search engines (such activities are termed Search Engine Optimization, or SEO.)

Active learning: The description's use in search engines

The description is also used on search engine result pages. Let's go through an exercise to explore this

  1. Go to the front page of The Mozilla Developer Network.
  2. View the page's source (Right/Ctrl + click on the page, choose View Page Source from the context menu.)
  3. Find the description meta tag. It will look like this:
    <meta name="description" content="The Mozilla Developer Network (MDN) provides
    information about Open Web technologies including HTML, CSS, and APIs for both
    Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
  4. Now search for "Mozilla Developer Network" in your favorite search engine (We used Yahoo.) You'll notice the description <meta> and <title> element content used in the search result — definitely worth having!

    A Yahoo search result for "Mozilla Developer Network"

Note: In Google, you will see some relevant subpages of MDN listed below the main MDN homepage link — these are called sitelinks, and are configurable in Google's webmaster tools — a way to make your site's search results better in the Google search engine.

Note: Many <meta> features just aren't used any more. For example, the keyword <meta> element (<meta name="keywords" content="fill, in, your, keywords, here">) — which is supposed to provide keywords for search engines to determine relevance of that page for different search terms — is ignored by search engines, because spammers were just filling the keyword list with hundreds of keywords, biasing results.

Other types of metadata

As you travel around the web, you'll find other types of metadata, too. A lot of the features you'll see on websites are proprietary creations, designed to provide certain sites (such as social networking sites) with specific pieces of information they can use.

For example, Open Graph Data is a metadata protocol that Facebook invented to provide richer metadata for websites. In the MDN sourcecode, you'll find this:

<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
<meta property="og:title" content="Mozilla Developer Network">

One effect of this is that when you link to MDN on facebook, the link appears along with an image and description: a richer experience for users.

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.Twitter also has its own similar proprietary metadata, which has a similar effect when the site's URL is displayed on twitter.com. For example:

<meta name="twitter:title" content="Mozilla Developer Network">

Adding custom icons to your site

당신의 사이트 디자인을 좀 더 풍성하게 만들기 위해서 , 당신은 커스텀 아이콘 레퍼런스를 매타데이터에 추가하고 특정 콘텐츠에서 이것을 보여지게 할 수 있다.

 

The humble favicon, which has been around for many years, was the first icon of this type, a 16 x 16 pixel icon used in multiple places. You'll see favicons displayed in the browser tab containing each open page, and next to bookmarked pages in the bookmarks panel.

favicon은 다음과 같이 너의 사이트에 추가할 수 있다:

  1. 당신의 사이트의 인덱스 페이지와 같은 디렉토리에  .ico 포멧의 파일을 저장하라 (most browsers will support favicons in more common formats like .gif or .png, but using the ICO format will ensure it works as far back as Internet Explorer 6.)
  2. 다음 줄을 HTML <head>에 추가하여 favicon을 참조하라:
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

북마크 페널의 페비콘이 그 예시이다:

The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

요즘은 많은 다른 아이콘 타입이 있다. 예를 들어서 MDN 홈페이지에서 다음과 같은 것을 발견할 것이다:

<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
<!-- basic favicon -->
<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">

The comments explain what each icon is used for — these elements cover things like providing a nice high resolution icon to use when the website is saved to an iPad's home screen.

Don't worry too much about implementing all these types of icon right now — this is a fairly advanced feature, and you won't be expected to have knowledge of this to progress through the course. The main purpose here is to let you know what such things are, in case you come across them while browsing other websites' source code.

Applying CSS and JavaScript to HTML

Just about all websites you'll use in the modern day will employ CSS to make them look cool, and JavaScript to power interactive functionality, such as video players, maps, games, and more. These are most commonly applied to a web page using the <link> element and the <script> element, respectively.

  • The <link> element always goes inside the head of your document. This takes two attributes, rel="stylesheet", which indicates that it is the document's stylesheet, and href, which contains the path to the stylesheet file:

    <link rel="stylesheet" href="my-css-file.css">
  • The <script> element does not have to go in the head; in fact, often it is better to put it at the bottom of the document body (just before the closing </body> tag), to make sure that all the HTML content has been read by the browser before it tries to apply JavaScript to it (if JavaScript tries to access an element that doesn't yet exist, the browser will throw an error.)

    <script src="my-js-file.js"></script>

    Note: The <script> element may look like an empty element, but it's not, and so needs a closing tag. Instead of pointing to an external script file, you can also choose to put your script inside the <script> element.

Active learning: applying CSS and JavaScript to a page

  1. To start this active learning, grab a copy of our meta-example.html, script.js and style.css files, and save them on your local computer in the same directory. Make sure they are saved with the correct names and file extensions.
  2. Open the HTML file in both your browser, and your text editor.
  3. By following the information given above, add <link> and <script> elements to your HTML, so that your CSS and JavaScript are applied to your HTML.

If done correctly, when you save your HTML and refresh your browser you'll see that things have changed:

Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.

  • The JavaScript has added an empty list to the page. Now when you click anywhere on the list, a dialog box will pop up asking you to enter some text for a new list item. when you press the OK button, a new list item will be added to the list containing the text. When you click on an existing list item, a dialog box will pop up allowing you to change the item's text.
  • The CSS has caused the background to go green, and the text to become bigger. It has also styled some of the content that the JavaScript has added to the page (the red bar with the black border is the styling the CSS has added to the JS-generated list.)

Note: If you get stuck in this exercise and can't get the CSS/JS to apply, try checking out our css-and-js.html example page.

Setting the primary language of the document

Finally, it's worth mentioning that you can (and really should) set the language of your page. This can be done by adding the lang attribute to the opening HTML tag (as seen in the meta-example.html and shown below.)

<html lang="en-US">

This is useful in many ways. Your HTML document will be indexed more effectively by search engines if its language is set (allowing it to appear correctly in language-specific results, for example), and it is useful to people with visual impairments using screen readers (for example, the word "six" exists in both French and English, but is pronounced differently.)

You can also set subsections of your document to be recognised as different languages. For example, we could set our Japanese language section to be recognised as Japanese, like so:

<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>

These codes are defined by the ISO 639-1 standard. You can find more about them in Language tags in HTML and XML.

Summary

That marks the end of our quickfire tour of the HTML head — there's a lot more you can do in here, but an exhaustive tour would be boring and confusing at this stage, and we just wanted to give you an idea of the most common things you'll find in there for now! In the next article we'll be looking at HTML text fundamentals.

 

In this module

 

문서 태그 및 공헌자

 이 페이지의 공헌자: iloveek
 최종 변경: iloveek,