HyunJun 기술 블로그

HTML <head> Element 본문

HTML

HTML <head> Element

공부 좋아 2023. 6. 7. 11:36
728x90
반응형

1. HTML head란?

웹 브라우저에게 전달할 정보(metadata)들을 전달하는 엘리먼트(태그)입니다.

 

  • Head의 내용은 페이지를 열 때 웹 브라우저에 표시되지 않습니다. 

2. head에 들어가는 종류

2-1. meta

문서의 character 인코딩을 특정하기

<head>
  <meta charset="utf-8">
</head>

이 요소는 문서에서 허용하는 문자 집합(character set) encoding에 대해서 설정합니다. utf-8은 전 세계적인 character 집합으로 많은 언어들의 문자들을 포함합니다. 일반적인 페이지에서 utf-8로 지정하는 것은 좋은 생각입니다. 예를 들어서 utf-8이 적용된 페이지는 영어나 일본어 중국어들을 모두 허용합니다.

<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <div>한국어</div>
    <div>日本語</div>
    <div>中國語</div>
  </body>
</html>

 

 

 

하지만 만약 예를 들어 Character의 중요성을 위해 ISO-8859-10으로 character set을 설정한다면 페이지가 알아볼 수 없도록 렌더링 될 것입니다.

<meta charset="ISO-8859-10" />

 

하지만 크롬과 같은 대부분의 브라우저에서 잘못된 character set을 자동으로 맞춰주기 때문에 이 문제를 확인할 수 없을 것입니다. 그러나 다른 브라우저에서 생길 잠재적인 문제 상황과 가독성을 위해 인코딩을 명시적으로 utf-8로 지정해 주는 것이 좋습니다.

 

다른 character set(ISO-8859-10)일 때의 렌더링을 확인하기 위해 크롬에서 확장 프로그램을 설치하였습니다.

 

 

설치 후 HTML 페이지에서 Character Encoding를 강제적으로 ISO-8859-10으로 변경해 주었습니다.

그 결과, 아래처럼 글자들이 깨졌으며 그만큼 인코딩이 중요하다는 것을 확인할 수 있었습니다.

결과

2-2. title

HTML 페이지의 제목을 표기합니다. title 태그는 1개만 작성해야 하며 여러 개 작성 시 제일 윗줄, 즉 제일 먼저 읽히는 1개만 적용됩니다.

<html>
  <head>
    <title>웹 페이지 제목</title>
    <meta charset="utf-8" />
  </head>
  <body></body>
</html>

title은 웹 브라우저의 북마크로 추가할 때의 첫 이름으로 설정되기도 합니다.

 

2-3. 저자와 설명을 추가

<meta> 요소는 name과 content 속성을 가집니다. name은 메타 요소가 어떤 정보의 형태를 가지고 있는지 알려줍니다. content는 실제 메타데이터의 컨텐츠입니다. 이러한 데이터들은 웹 페이지에서의 저자를 정리하고 머리말을 요약하는데 유용합니다. 아래의 예시 코드를 보면, 저자를 지정하는 것은 컨텐츠 작성자에 대한 정보를 볼 수 있게 해줍니다. 일부 컨텐츠 관리 시스템에서는 페이지 작성자 정보를 자동으로 추출해서 사용할 수 있는 기능이 있기도 합니다.

<meta name="author" content="Hyun Jun" />
<meta name="description" content="공부용 웹 페이지입니다." />

 

그렇다면 이러한 metadata가 왜 중요할까요?

페이지 컨텐츠 관련 키워드를 포함시키는 것은 검색엔진에서 이 페이지가 더 많이 표시될 가능성이 생기게 할 수 있기 때문입니다.

이러한 활동을 Search Engine Optimization (SEO)라고 합니다.

 

예를 들어, 네이버의 메타 태그는 현재 기준 아래처럼 되어 있습니다.

 

구글에서 검색 시 아래처럼 똑같이 나오는 걸 확인할 수 있습니다.

 

Other types of metadata

웹페이지를 돌아다니다 보면 다른 종류의 메타데이터들을 꽤 많이 볼 수 있습니다. 이러한 것들은 특정 사이트 (예, 소셜 네트워킹 서비스)에 사용할 수 있는 특정 정보를 제공하도록 설계된 독점 제작물입니다.

 

Open Graph Data는 Facebook이 웹 사이트에 더 풍부한 메타 데이터를 제공하기 위해 발명한 메타 데이터 프로토콜입니다.

네이버의 og 메타 데이터 정보입니다.

 

 

페이스북에서 링크 연결 시 아래와 같이 동일하게 뜨는 것을 확인할 수 있습니다

 

 

그리고 이 og는 현재 카카오톡에서도 링크 공유 시 똑같이 동작합니다.

 

즉 Facebook에서 만들었다고 해서 Facebook에만 사용 하는 게 아닌 하나의 포맷으로써 다양한 서비스에서 사용될 수 있습니다.

 

그 외에, 네이버에서는 트위터를 위한 메타데이터도 아래와 같이 존재합니다.

 

 

2-4. 맞춤 아이콘 추가하기

커스텀 아이콘 레퍼런스를 메타데이터에 추가하고 특정 콘텐츠에서 이것을 보이게 할 수 있습니다.

<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />

 

2-5. CSS와 JavaScript 적용하기

<link>는 .css 파일을 적용하기 위한 요소이며, 항상 문서의 head 부분에 위치합니다. 문서의 스타일 시트임을 나타내는 rel="stylesheet" 속성과 href 속성을 가집니다.

<link rel="stylesheet" href="my-css-file.css">

 

<script>는 .js를 적용하기 위한 요소이며, head에 들어갈 필요가 없습니다. 기본적으로 </body> 태그 바로 앞, 즉 문서 본문의 맨 끝에 넣는 것이 좋으며, 그 이유는 모든 HTML 내용을 브라우저에서 읽었는지 확인한 후에 JavaScript를 동작 시키는 것이 좋기 때문입니다. 이러한 것을 신경 쓰지 않는 경우 액세스 과정에서 HTML 요소를 JavaScript가 아직 존재하지 않는 요소라고 판단하여 에러가 날 수 있습니다.

<script src="my-js-file.js"></script>
<script> 태그가 비어있다고 보일 수 있지만 그렇지 않으며, 반드시 태그를 닫아주어야 합니다. (</script>), 외부 스크립트 파일을 지정하는 대신 스크립트를 직접 <script>에 넣을 수 있습니다.

 

2-6. 문서의 기본 언어 설정

마지막으로 페이지의 언어를 설정할 수 있습니다. lang 속성을 여는 html 태그에 추가하여 수행할 수 있습니다.

<html lang="en-US">

이것은 여러 방면에서 유용합니다. HTML 문서는 언어가 설정되어 있으면 검색 엔진에 의해 보다 효과적으로 색인화되며(예를 들어 언어 별 결과에 올바르게 표시되도록) 화면 판독기를 사용하여 시각장애가 있는 사용자에게 보다 유용합니다. (예를 들어 6이라는 숫자는 프랑스어와 영어에서 모두 존재하지만, 각기 다른 발음입니다.)

 

또한 문서의 하위 섹션을 다른 언어로 인식하도록 설정할 수도 있습니다. 예를 들어 다음과 같이 일본어로 된 섹션에 대해서는 일본어로 인식하도록 처리할 수 있습니다.

<p>Japanese example: <span lang="jp">こんにちは。</span>.</p>
728x90
반응형
저작자표시 비영리 변경금지
'HTML' Related Articles more
Comments