[HTML] 3. 메타데이터 요소

in HTML on Html



3. 메타데이터 요소

1. 메타데이터 역할

  • 데이터를 설명하기 위한 데이터
  • 검색엔진이 문서를 분류할 때 meta 데이터를 이용하여 분류한다.



2. title

<title>페이지의 제목</title>

  • 문서 제목 요소
  • 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의한다.
  • 문자열만 가능하다. 내부 태그 금지
  • SEO에 큰 영향을 준다. (검색엔진)

키워드 뭉치 스타일의 제목은 피한다.



3. meta - 문서 정보

<meta name="" content="" />

  • 빈 요소이다.
  • name 과 content는 한 쌍으로 사용한다.
  • 필수값이 아닌 검색엔진을 위한 optionable 값이다

name 에 들어갈 수 있는 값

  • application-name
  • author
  • description
  • generator
  • keywords
  • referrer



4. meta - 문자 인코딩, 뷰포트

<meta charset="UTF-8"/>

  • UTF-8 : 문자 인코딩으로 모든 나라의 언어를 지원하는 유니코드
  • head 첫번째 요소이거나 title 전에 넣어주는 것을 권장한다.

viewport

<meta name="viewport content="width=device-width, intial-scale=1.0/>

  • 전체 브라우저 중에서 웹 페이지를 볼 수 있는 영역



5. MIME 타입

<link href="style/main.css" rel="stylesheet" type="text/css">

  • 위의 코드의 type 영역
  • 외부의 경로로 부터 파일을 불러올 때, 경로로부터 파일을 인식하지 못함을 막기 위해 파일의 타입을 명시하는 것

문법적인 구조

type/subtype

  • text/plain, text/html, text/css, text/javascript
  • image/gif, image/png …
  • 굳이 외우지 말고 사용할 때 마다 찾아보자



6. style

<head>
    <style>
        p { color: red};
    </style>
</head>
  • html 내부에 스타일을 적용하기 위해 사용한다.
  • 스타일은 외부 스타일 시트 사용 후 link 하는 것을 권장한다.
  • css 가 중복되어 쌓이면 가장 아래 것이 적용된다.



7. script

  • 인라인으로 javascript 문법을 작성하거나 외부의 javascript 파일을 불러올 수 있다.
<script src="javascript.js."></script>

<script>
    <!-- alert("hello") -->
</script>


  • head / body에서 작성된 js 코드를 해석하는 동안 렌더링이 중지된다.
  • 따라서 body 의 맨 마지막에 작성하는 것을 권장한다 (html/css를 먼저 렌더링하기 위해)

  • `<link href=”외부 파일 경로” rel=”stylesheet>
  • 외부 리소스 연결 요소
  • 현재 문서와 외부 리소스의 관계를 명시
  • 빈요소
  • rel (relationship) 들어갈 수 있는 요소가 정해져 있음 (icon)

나의 회고 🤫

실제로 렌더링되는 부분은 body 영역이다보니 head 안의 구성요소는 title, link 를 제외하고는 눈여겨 보지 않았었다.
그래서 메타데이터 영역을 제대로 공부해본 것은 이번이 처음이었는데 name-content가 쌍으로 이루어져있다는 것도 오늘에서야 알았다.
그동안 중요하지 않은 부분이라 여겼어서 지나쳤던 것이 조금 부끄러워졌다.
하지만 오늘 학습을 통해 앞으로는 문서의 meta 데이터 영역을 읽고 대충 어느 의미를 담는구나를 해석할 수 있게 된 것 같다.
앞으로는 내가 중요시여기지 않았던 부분도 한번쯤은 돌아보도록 해야겠다 🤓