HTML 헤드 태그 정리

Flex·2022년 2월 15일
0

HTML 모음

목록 보기
10/13
post-thumbnail

HTML 의 머리에는 어떤 태그들이 들어가는지 알아보자.


<title> Tag

<title> : 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의한다.

  • 무조건 문자열만 작성 가능하다.

  • <head> 내에 딱 하나만 있어야 한다.

위처럼 브라우저에서의 탭 제목을 지정한다.

검색 엔진이 결과 페이지의 순서를 결정하는 구성 요소 중 하나가 페이지 제목의 내용이다.
검색 결과에서 잠재적 독자의 주목을 끌 수 있는 가장 큰 요소가 바로 제목인 것.

물론 어그로성 제목은 잘못된 것이지만.. 그만큼 제목을 잘 작성하는 것이 중요하다.

  1. 단어로만 제목을 구성하는 것은 피하자.

  2. "키워드 뭉치" 스타일의 제목은 피하자.

  3. 본문의 전체적인 내용을 담는 간략한 설명으로 작성하자.

위는 SEO(검색 엔진 최적화) 의 기본 내용이다.
출처 : https://ko.wikipedia.org/wiki/검색_엔진_최적화


<meta> Tag

<meta> : 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타낸다.

  • 빈 요소이다.
    --> 속성으로 구성된다!

  • 이름을 담당하는 name을 담당하는 content 속성으로 구성된다.

  • 여러 개일 경우 <meta> 태그를 여러 개 사용한다.

속성들

  1. application-name : 웹 페이지에서 구동 중인 애플리케이션의 이름.

  2. description : 검색 시 나오는 페이지 설명 부분.
    Firefox, Opera 등에서는 즐겨찾기의 기본 설정 값

  3. keywords : 해시태그같은 키워드 목록.

  4. name="viewport" : 뷰포트의 초기 사이즈에 대한 힌트. 모바일 장치에서만 사용한다.
    웹 사이트 렌더링에 사용된다. (크기 조절)
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

🦊 MDN Site : https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta/name


<link> Tag

<link> : 현재 문서와 외부 리소스의 관계를 명시한다.

  • 스타일 시트를 연결할 때 제일 많이 사용한다.

  • 사이트 아이콘("파비콘") 연결 등 여러가지로 쓰일 수 있다.

Example

<link href="style/main.css" rel="stylesheet">
<link rel="icon" href="favicon.ico">

type

  • 이 특성은 링크된 콘텐츠의 타입을 정의하는데 사용된다.
    특성의 값은 text/html, text/css와 같은 MIME 타입이여야한다.
    이 특성은 링크된 스타일시트의 타입을 지정하는데 쓰이는것이 보통이며,
    text/css 값이 가장 흔하다.

🦊 MDN Site : https://developer.mozilla.org/ko/docs/Web/HTML/Element/link


<style> Tag

<style> : 문서나 문서 일부에 대한 스타일 정보를 포함한다.

  • <style> 요소는 문서의 <head> 안에 위치해야 한다.
    But, 일반적으로 스타일은 외부 스타일 시트에 작성하고, <link> 요소로 연결하는 방법을 권장한다.

  • 같은 명시도를 가진 경우, 뒤쪽 <style> 이 앞쪽을 덮어쓴다.

  • <link> 태그로도 CSS 를 적용할 수 있지만, 우선순위가 다르다.
    추후 CSS 공부를 해보면 알겠지만, 결론만 얘기하자면 <style> 태그가 더 우선권을 갖는다.

Example

<style>
p {
  color: #26b72b;
}
</style>

🦊 MDN Site : https://developer.mozilla.org/ko/docs/Web/HTML/Element/style


<script> Tag

<script> : 데이터와 실행 가능한 코드를 문서에 포함할 때 사용하며 보통 JavaScript 코드와 함께 쓴다.
WebGL의 GLSL 셰이더 프로그래밍 언어, JSON 등 다른 언어와도 사용할 수 있다.

  • 외부의 JavaScript 를 불러올 수도 있고, html 파일 내부에 직접 스크립트를 작성할 수도 있다.

  • <head>, <body> 내에 모두 위치 가능하다.

  • <script> 를 만나는 순간 스크립트를 먼저 해석한 후 문서의 나머지를 로딩한다.
    ⭐️ html의 로딩이 끝난 후 해석할 수 있도록 body 의 마지막에 작성하는 것을 권장한다.
    --> 더 궁금하다면 async, defer 속성에 대해 알아보자.
    (어차피 개발하다보면 자연스럽게 알게 될 것이다!)

Example

<script src="javascript.js"></script>

<script>
  alert("Hello World!");
</script>

🦊 MDN Site : https://developer.mozilla.org/ko/docs/Web/HTML/Element/script

profile
💵 오늘을 살자

0개의 댓글