⭐️ Markdown & Style sheet/HTML

[HTML] HTML 메타데이터 이해하기

개발자 올라프 2023. 9. 18. 21:35

HTML 메타데이터

 

HTML 메타데이터는 웹 페이지에 관한 정보를 제공하는 데이터로서, 웹 페이지의 콘텐츠 자체와는 다르게 주로 브라우저나 검색 엔진에게 페이지에 대한 추가적인 정보를 제공하기 위한 것이다. HTML 문서에서 메타데이터는 주로 <head>내에 위치하며, <meta>, <link>, <style>, <script>, <title> 등의 태그로 표현된다.

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>메타데이터</title>
    <link rel="stylesheet" href="./main.css" />
    <script src="./main.js"></script>
  </head>
  <body>
    ...
  </body>
</html>

 

 

<head>

 

HTML 문서의 메타데이터 영역을 정의한다. 메타데이터는 실제 내용과 다르게 브라우저에 직접적으로 표시되지 않지만, 문서의 동작, 외관, 관계 등에 대한 정보를 제공한다.

 

  • 문서의 메타데이터를 포함하는 영역이다.
  • 문서의 제목, 문자 인코딩, 스타일시트, 스크립트 등의 정보가 위치한다.

 

 

<meta>

 

HTML 문서에 대한 메타데이터를 제공한다. 메타데이터는 브라우저에 직접 표시되지 않지만, 문서의 동작, 정보, 관계 등을 설명하거나 외부 도구와 서비스에 필요한 정보를 제공한다.

 

  • 문서에 대한 메타 데이터를 제공하며 문자셋, 뷰포트 설정 등을 정의할 때 사용한다.
  • HTML 문서(웹 페이지)의 제작자, 내용, 키워드 같은 여러 정보를 검색엔진이나 브라우저에 제공한다.
<head>
  <meta charset="UTF-8" />
  <meta name="author" content="chammin" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

 

attributes

 

charset

<meta charset="UTF-8" />

Character set의 약어로 문서의 문자 인코딩을 정의하는 속성이며, 우선 인코딩 개념을 이해할 필요가 있다. 인코딩(encoding)은 정보의 형태나 형식을 변환하는 과정이다. 컴퓨터는 데이터를 바이트와 비트로 처리하기 때문에, 사람이 이해하는 형태의 데이터(텍스트, 이미지, 사운드)를 바이트와 비트로 변환하는 과정이 필요하다. 이러한 변환 과정을 인코딩이라고 한다.

 

`charset="UTF-8"`로 문서 문자 인코딩을 정의하는 이유는 UTF-8은 세계 모든 문자와 기호를 표시할 수 있기에 한 언어나 문화권에 국한되지 않고 다양한 언어와 기호를 하나의 문서나 웹사이트에서 함께 사용할 수 있다. 또한 인터넷 표준으로 허용되고 있기 때문에, 대부분의 웹 브라우저에서 기본적으로 지원되고 있어서 텍스트 깨짐 현상을 피할 수 있다.

 

 

name, content

<meta name="author" content="chammin" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="HTML 메타데이터를 설명하는 페이지입니다." />
<meta name="keywords" content="html, meta" />
<meta name="copyright" content="chammin" />

name, content특성을 함께 사용하여 문서의 메타데이터를 이름-값 쌍으로 제공할 수 있다.

  • author : 문서 작성자
  • viewport : 웹페이지가 모바일 장치에서 어떻게 렌더링될지 제어한다.
  • description : 문서의 간략한 설명을 제공하며, 검색 엔진이나 소셜 미디어 플랫폼에서 페이지를 공유할 때 사용된다.
  • keyword : 과거에 검색 엔진 최적화(SEO)를 위해 사용됐으나, 현재는 대부분 검색 엔진이 해당 정보를 무시한다.
  • copyright : 저작권 정보

 

💡 모바일에서 웹 페이지의 가로 너비를 모바일 환경의 가로 너비와 일치시키거나, 웹 사이트가 처음 출력될 때 확대 및 축소 여부나 정도를 어떻게 결정하겠다 등 몇 가지 정보를 META 태그로 명시하는 개념이 name=”viewport”의 내용이다.

 

 

http-equiv

HTML의 <meta>태그내에서 사용되는 속성으로, 해당 메타 태그의 내용을 HTTP 헤더의 일부로 해석하게 해준다. 해당 속성을 통해서 HTML 문서 내에서 HTTP 응답과 비슷한 효과를 구현할 수 있다. 해당 속성을 통해서 프래그마 지시문을 정의하여 캐싱 동작을 제어하거나, 특정 시간 후에 페이지를 새로 고침 및 다른 URL로 리다이렉트 할 수 있다.

 

💡 프래그마 지시문(Pragma directive)은 컴퓨터 언어와 시스템에서 찾을 수 있는 지시문으로, 일반적으로 해당 언어나 시스템의 동작을 특별하게 제어하려는 목적으로 사용된다. 프래그마 지시문은 대개 해당 언어나 시스템의 표준적인 동작을 벗어나는 특별한 동작을 수행하도록 지시하기 위해 사용된다. HTTP/HTML에서 Pragma(프래그마)는 캐싱 동작을 제어하는데 사용된다.

 

Refresh

웹 페이지를 자동으로 새로고침하거나 다른 페이지로 redirection하는 데 사용된다.

  • cotent 특성에 양의 정수 값인 시간을 설정한 경우, 해당 시간 이후 새로고침 
  • content 특성에 양의 정수 값 + 문자열 `;url=`이 붙는 경우, 해당 시간 이후 URL로 redirect
<!-- 5초 후 새로 고침 -->
<meta http-equiv="refresh" content="5" />
<!-- 10초 후 네이버로 리다이렉트 -->
<meta http-equiv="refresh" content="10;url=https://www.naver.com/" />

 

 

캐싱제어

브라우저가 페이지를 캐싱하는 방법을 제어한다.

<!-- 캐싱 금지 -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />

 

 

<title>

 

HTML 문서의 제목을 정의하는 태그로 <head>태그 내에 작성하며, 텍스트만 포함할 수 있으며 태그를 포함해도 무시한다. 웹 브라우저의 제목 표시줄이나 탭에 표시되며, 북마크, 검색 엔진 결과 등에서도 사용된다. 또한 SEO(검색 엔진 최적화)에 중요한 역할을 한다.

<title>HTML 개발 공부</title>

 

<title> SEO

 

페이지 제목은 SEO에 큰 영향을 준다. 검색 엔진이 결과 페이지의 순서를 결정하는 구성 요소 중 하나가 페이지 제목의 내용이기 때문이다. 의미 있는 제목은 사용자와 검색엔진 둘 다 페이지의 내용을 명확하게 전달할 수 있다.

 

 

<base>

 

문서 내의 모든 상대 URL이 사용할 기준 URL을 지정한다. 해당 태그를 사용하면 문서의 모든 상대 URL이 이 기본 URL을 참조하여 절대 URL로 해석된다.

 

  • 문서에는 하나의 <base>요소만 존재할 수 있다. 요소가 여러 개 존재하는 경우 첫 요소만 사용하며, 나머지는 무시된다.
  • <head> 섹션 제일 상단에 위치해야 나중에 오는 URL들이 올바르게 해석될 수 있다.
  • 문서의 기준 URL을 스크립트에서 접근해야할 때는 document.baseURI을 사용할 수 있다.
  • 문서에 <base>요소가 존재하지 않을 때 baseURI 기본값은 location.href이다.

 

<!DOCTYPE html>
<html>
  <head>
    <base href="https://www.example.com" target="_blank" />
  </head>
  <body>
    <!-- https://www.example.com/board.html로 해석 -->
    <a href="board.html">게시판 이동</a>
  </body>
</html>

 

attributes

 

href

해당 속성은 상대 URL의 기본 URL을 지정한다.

 

target

해당 속성은 target을 명시하지 않은 문서 내의 태그(<a>, <area>, <form>)가 기본적으로 열리는 대상을 설정한다.

  • _self(default) : 결과를 현재 브라우징 문맥에서 보여준다.
  • _blank : 결과를 새로 생성한 탭에서 보여준다.
  • _parent : 현재 페이지가 프레임 내에 존재하는 경우, 결과를 부모 브라우징 문맥에서 보여준다. 부모가 없다면 _self와 동일하다.
  • _top : 결과를 최상위 브라우징 맥락에서 보여준다. 프레임 내에서 사용될 때의 문서를 전체 창에 로드하기 위해서 사용한다. 부모를 가지지 않으면 _self와 동일하다.

 

 

<link>

 

외부 문서를 가져와서 연결하는 역할로 현재 문서와 외부 리소스의 관계를 명시한다. 대부분 CSS 파일을 가져올 때 사용하며, 다른 용도로도 사용된다.

 

<head>
  <link rel="stylesheet" href="./main.css" />
  <link rel="icon" href="./favicon.png" />
  <link rel="alternate stylesheet" href="alternate-styles.css" title="Alternate Styles" />

  <!-- 아이콘을 위한 여러개의 rel, 다양한 휴대기기 플랫폼의 특별한 아이콘을 나타내기 위함 -->
  <link
    rel="apple-touch-icon-precomposed"
    sizes="114x114"
    href="apple-icon-114.png"
    type="image/png"
  />

  <!-- 미디어 유형이나 쿼리 지정. 특정 미디어 조건을 만족할 때 리소스 불러오기 가능 -->
  <link href="print.css" rel="stylesheet" media="print" />
  <link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)" />

  <!-- RSS피드 or 웹 피드 연결 -->
  <link rel="alternate" type="application/rss+xml" title="RSS Feed" href="rss.xml" />

  <!-- 사전 연결(preconnect) -->
  <link rel="preconnect" href="https://example.com" />
</head>

 

attributes

 

rel

relationship 약어로 현재 문서와 연결된 리소스와의 관계를 정의한다.

  • stylesheet : 스타일시트
  • icon : 파비콘
  • alternate : 대체 콘텐츠

 

href

Hyper Text Reference의 약어로 연결된 리소스의 URL을 지정한다.

 

type

연결된 리소스의 MIME 타입을 지정한다.

 

media

스타일시트가 적용될 미디어의 유형을 지정한다. ex)media="print", media="screen"

 

sizes

연결된 리소스(주로 아이콘)의 크기를 정의한다.

 

disabled

rel="stylesheet"에 한정하여 스타일시트를 불러와서 문서에 적용할지 나타낸다. HTML을 불러오는 시점에 disabled를 지정한 경우 스타일시트는 페이지 로딩 시점에 불러오지 않는다.

 

 

<style>

 

웹 문서 내에 내장 스타일 정보를 포함하기 위해서 사용된다. 이 태그를 사용하여 CSS 규칙을 문서 내에 직접 포함시킬 수 있다.

 

<head>
  <!-- 기본 -->
  <style>
    div {
      color: red;
    }
  </style>
  <!-- 미디어 쿼리 포함 -->
  <style media="all and (max-width: 500px)">
    div {
      color: blue;
    }
  </style>
</head>

 

attributes

 

type

선택 사항으로 스타일 언어의 MIME 유형이다. 초기의 HTML 버전에서는 type속성을 사용하여 type="text/css"와 같이 스타일시트 언어를 지정했다. 하지만 HTML5에서는 기본값이므로, 더 이상 필수가 아니게 되었다.

 

media

스타일을 적용할 매체로 값은 미디어 쿼리이다. 기본값은 all이다.

 

 

<script>

 

웹 문서에 스크립트, JavaScript 코드를 포함하거나 참조하기 위해서 사용된다. 해당 태그를 사용하면 웹 페이지의 동작을 조작하거나 변경할 수 있으며, 동적인 특성을 웹 페이지에 추가할 수 있다.

 

<script>태그는 <head>, <body> 둘 다 위치할 수 있지만, 스크립트가 문서의 파싱을 차단할 수 있기 때문에 주로 문서의 끝 </body> 태그 바로 앞에 위치시키는 것을 권장한다(혹은 async, defer 속성을 사용).

 

<head>
  <!-- 내부 스크립트 -->
  <script>
    console.log('Hello, world!');
  </script>

  <!-- 외부 스크립트 -->
  <script src="./main.js"></script>
</head>
  • 내부 스크립트 : 스크립트 코드를 HTML 문서 내에 직접 작성할 수 있다.
  • 외부 스크립트 : 스크립트를 외부 파일에 작성하고 해당 파일을 src속성을 사용하여 HTML 문서에 연결한다. 단, 태그 내에는 추가적인 코드를 작성하지 않는다.

 

attributes

 

type

선택 사항으로 스크립트 언어의 MIME 유형이다. 초기의 HTML 버전에서는 type속성을 사용하여 text/javascript와 같이 스크립트 언어의 MIME 유형을 지정했다. 하지만 HTML5에서는 기본값이므로, 더 이상 필수가 아니게 되었다.

 

async

HTML 구문 분석 중에도 스크립트를 가져오고, 사용 가능해지는 즉시 평가를 수행한다. 스크립트를 비동기적으로 로드하고 실행할 때 사용하며, 스크립트 로딩이 페이지의 렌더링을 차단하지 않게 하므로 페이지 로드 시간을 개선할 수 있다.

<script async src="./main.js"></script>

 

defer

스크립트를 로드하되 페이지 파싱이 완료될 때까지 실행을 지연시킬 때 사용한다.

<script defer src="./main.js"></script>

 

async vs defer

기본적으로 브라우저는 스크립트 태그를 만나면 다음과 같은 동작을 수행한다.

  1. HYML 파싱 중단
  2. 스크립트 다운로드
  3. 스크립트 실행
  4. HTML 파싱 재개

해당 동작은 페이지 로딩 성능에 영향을 미칠 수 있기에, async, defer는 이러한 동작을 조절하여 성능을 개선할 때 사용한다.

 

async속성이 있는 스크립트는 비동기적으로 다운로드 되며, HTML 파싱이 스크립트 다운로드와 동시에 계속 진행된다. 하지만 스크립트 다운로드가 완료되면 파싱이 일시 중단되고 스크립트가 실행된다. 그 후에 HTML 파싱이 계속된다. 만약 여러 개의 async스크립트가 있다면, 먼저 다운로드된 순서대로 실행되며, 스크립트간 순서가 보장되지 않음을 의미한다.

 

defer속성이 있는 스크립트 또한 비동기적으로 다운로드 된다. 그러나 다운로드가 완료된 스크립트의 실행은 HTML 파싱이 완전히 종료된 이후에 실행된다. 여러 defer스크립트가 있다면, 스크립트가 문서에 나타나는 순서대로 실행되어 스크립트간 실행 순서가 보장된다.

 

 

저작자표시