HTML Tags for Meta Data

Marullo·2021년 4월 6일
html
0

Again HTML, CSS

목록 보기
3/13
post-thumbnail

Intro

UI를 위한 Tag가 아니라, 웹 페이지의 Meta Data를 설정하기 위한 Tag에 관련한 포스팅입니다.
기본적인 HTML 코드는 다음과 같은 구조를 가지고 있는데, 오늘은 <Head> 태그의 자식이 될 태그들에 대해서 살펴보겠습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>JS Bin</title>
  </head>
  <body></body>
</html>

<head> 태그 안에 작성해주는 meta data Tags에 대해 알아보기 전에, <head>의 부모에 대해서 알아보자.

<!DOCTYPE html>

  • <!DOCTYPE html>은 DTD(Document Type Definition)이라고 불리는데, 브라우저에게 현재 웹페이지의 형식을 알리기 위한 태그다.
  • 모든 태그들은 DTD에 정의 되어있고 HTML문서 작성자는 DTD에 명시함으로, 해당 버전의 태그들을 사용할 것이라고 브라우저에게 알릴 수 있다.
    • HTML 5
      HTML 5 버전을 사용한다는 것을 알리려면 문서 최상단에 <!DOCTYPE html>을 써주면 된다. 브라우저는 해당 문서를 html 5버전으로 해석하게 된다.
    • HTML 4.01
      HTML 4.01 버전을 사용한다는 것을 알리려면 문서 최상단에 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">을 써주면 된다.

<html>

  • 웹페이지의 시작과 끝을 알리기 위해 사용되는 태그다. 모든 웹 페이지는 <html>로 시작해서 </html>로 끝나게 된다.
  • 보통 html태그는 global attribute를 자주 사용한다. 특히 lang속성을 사용하여 문서의 메인 언어가 무엇인지 명시해준다.

  • <head> 태그에서는 해당 웹페이지의 메타데이터를 작성하거나 외부 파일들을 링크한다.
  • <body>는 사용자에게 보여질 부분의 최상위 컨테이너 역할을 한다면, <head>는 UI적 요소가 아니라, 구글에서 검색할 때 나오는 타이틀이나 부가설명 그리고 북마크 추가할 때 나오는 제목이나 아이콘들이 정의되어 있다. 또 CSS 파일을 연결하는 것을 HEAD에서 한다. 즉, 사용자에게 보여지는 것이 아닌 메타 데이터들이 담기는 곳이다.
  • <head> 의 자식으로 메타데이터를 담는 태그들은 다음과 같다.
    • <base>, <link>, <meta>, <style>, <title>


지금부터 MetaData를 위한 Tag들을 하나씩 알아보자

<base>

  • 웹 페이지의 기준이 되는 base URL을 설정하는 태그다.
  • 속성 값으로 href와 target이 있는데, href에 base URL을 작성해주면 된다.
    • <base>로 base URL을 지정해주면, 해당 웹 페이지에서 연결되는 다른 웹 페이지 경로는 상대경로만 작성해주면 된다. base URL이 prefix가 되어 알아서 붙게된다. 즉 <base>를 사용하면 링크 주소를 상대주소만 써줘도 된다는 편의를 얻을 수 있다.
    • 아래 예시에서 상대 경로를 사용하려면 .을 /앞에 붙여써줘야 된다. 만약 .가 빠지면 base 태그에서 사용된 base URL을 붙여주지 않는다. ./를 둘 다 빼주면 base URL이 적용된다.
      • Base URL이 적용되는 상대경로 예시 href="./abcde/" 또는 href="abcde/"
<!DOCTYPE html>
<html>
  <head>
    <base href="https://abcd.com">
  </head>
  <body>
    <a href ="./abcde/">이동</a>
  </body>
</html>

위의 예시에서 앵커 태그를 클릭하면 https://abcd.com/abcde로 이동하게 된다.
내부에 선언된 CSS 링크와 이미지 주소도 모두 base 태그가 적용된다.

주의할 점

하나의 <head>에는 하나의 <base> 태그만 존재해야 한다.



<title>

  • 문서의 제목을 정의한다. <title>제목 제목</title>과 같이 작성한다.
  • 본문에 나타나지는 않는다. 브라우저 툴바 상단에 표시되거나, 검색엔진 봇이 Title을 가져가서 검색의 결과로 Title에 작성한 내용이 나타나게 된다.


<link>

<head>
  <link rel="stylesheet" href="style.css" />
</head>
  • <link>는 외부 리소스와의 연결을 정의한다. 주로 다른 html 문서와 CSS 파일을 로드하기 위해 사용하며, 파비콘을 연결하는 등 여러가지로 쓰일 수 있다.
  • 자주 쓰이는 Attriutes로는 rel과 href가 있다.

href 속성

  • 연결할 리소스의 URL로 절대경로 상대경로 모두 가능하다.

rel 속성

  • relation의 축약으로 가져올 파일과 현재 파일의 관계를 결정한다.
  • 보통 CSS 파일을 가져올 때는 rel="stylesheet"으로 사용한다. 가져올 파일이 현재 웹페이지의 Stylesheet로 사용될 것임을 명시한다. 더 다양한 관계가 존재한다.
    • favicon 이미지를 가져 올 때, rel="shortcut icon"을 사용하면 된다.
    • 대체 스타일시트가 필요하다면 rel="alterante stylesheet"처럼 alternate를 앞에 붙여 써주면 된다.
  • 검색 엔진 봇은 링크를 타고 들어가 문서를 파악한다. 즉 검색엔진최적화(SEO)에 영향을 끼친다.


<script>

  • <script>의 start tag와 end tag사이에 Javacript 코드를 작성하면(즉, 컨텐츠가 JS 코드) Client Side에서 JS를 정의할 수 있다.
  • <script>의 src 속성을 사용하면, 외부 JS 파일을 로드할 수 있다.
<head>
  <script>
    document.addEventListener("click", function () {
      alert("Clicked!");
    });
  </script>
  <script src="main.js"></script>
</head>

<script>를 불러오는 시점

1. <head> + <script>

<head>
  <script src="main.js"></script>
</head>
  • 브라우저는 html 파일을 한 줄씩 parsing하면서 HTML 태그와 CSS 요소를 결합하여 DOM Tree를 만든다. parsing 하다 <script>를 만나게 되면, blocked 상태로 JS파일을 fetching하고 실행까지 한 후, 다음 줄을 parsing한다.
  • 따라서 인터넷이 느리거나, 가져오는 JS 파일의 용량이 큰 경우 브라우저가 Blocked된 상태가 길어져, 유저는 첫 로딩에 많은 시간을 기다려야 될 수 있다는 단점이 있다.


2. <body> + <script>

<body>
  contents ....
  contents ....
  <script src="main.js"></script>
</body>
  • 위의 예시는 <body> 최하단에 <script>를 작성하는 방식이다.
  • 모든 DOM 요소를 만든 상태이므로 JS가 도착하기 전에도 사용자는 CSS와 HTML이 결합된 DOM 요소를 볼 수 있다. UI 요소를 빨리 보여줄 수는 있지만 JS의 비중이 큰 페이지라면 의미없는 사이트를 보여주는 것과 같다는 단점이 있다.


3. <head> + <head async src="">

<head>
  <script async src="main.js"></script>
  <script async src="a.js"></script>
  <script async src="b.js"></script>
</head>
  • <script async>를 사용하게 되면, 말 그대로 비동기적으로 요청을 하게 되어 병렬로 fetching을 진행한다.
  • 브라우저는 parsing을 하다가 <script async>를 만나면 서버에 JS 파일을 요청하자마자 다음 줄을 parsing한다. 요청한 파일이 모두 도착하면 브라우저는 하던 일을 멈추고 도착한 JS 코드를 실행한다. 도착한 JS 파일의 실행이 끝나면 다시 parsing을 시작한다.
  • 동기적으로 script를 fetching하는 것보다 fetching 시간을 획기적으로 단축할 수 있다는 장점이 있다. 반면, 아직 HTML 요소가 모두 생성되기 전에 JS 파일을 실행할 가능성이 있다는 단점이 있다.
  • 또한, 의존성 문제가 존재한다. 요청의 순서는 <script>를 작성한 순서대로 진행되지만 fetching이 완료되는 순서가 다를 수 있다. 위의 예시에서 b.js는 a.js가 우선되어야 하는 작업이지만 b.js가 먼저 fetching이 완료되면 에러가 발생하게 된다. 의존성이 없는 JS 코드에 ASYNC를 사용하자.


4. <head> + <head defer src="">

<head>
	<script defer src="a.js"></script>
	<script defer src="b.js"></script>
	<script defer src="c.js"></script>
</head>
  • <script defer> 또한 브라우저가 parsing을 하면서, 병렬로 fetching을 한다. 그러나 fetching이 완료되자마자 실행되는 async와는 다르다.
  • 브라우저가 DOM요소를 모두 만들고 나면, 그제서야 fethcing이 완료된 JS파일들을 몰아서 실행한다. 요즘은 번들러를 사용하여 하나의 <script>를 작성하곤 하는데, 만약 번들러가 없다면 보통 <script defer>를 사용하면 적합하다. 의존성이 없는 두 개의 파일을 불러온다면 <script async>가 적합할 것이다.


<meta>

  • 메타 데이터의 핵심이라고 볼 수 있는 meta 태그는 다음 포스팅에서 자세히 작성하겠습니다.


profile
Marullo
한국외대 중국어&컴공 복수전공 - 세미 전공자의 기술 블로그
이전 포스트

HTML Tags for "UI"

다음 포스트

HTML <meta> 와 SEO

0개의 댓글