[HTML] head에 어떤걸 써야 하나?

[HTML] head에 어떤걸 써야 하나?

검색엔진이 웹 페이지에 처음 방문했을때, head 요소부터 살펴봄

head

• head요소의 정의 : 문서의 메타데이터의 집합
• 메타데이터 : 웹 페이지에 직접적으로 보이지 앟는 정보
• 검색 엔진 및 스크린 리더 등에서 활용
•  예를 들면
• 페이지의 정보
• 페이지가 검색엔진에 노출이 될지 안 될지
• 이 페이지에 대한 소개 글
• CSS파일, JS파일을 연결하는 부분들

title 요소

<title> 문서의 제목 </title>

• title 요소는 제목이나 이름을 나타냄
• 브라우저 창 제목이나 페이지의 탭에 나타나게 됨
• 구글 같은 검색엔진에서는 검색된 페이지의 이름으로 나타냄
• 접근성을 위해 특수문자 사용은 자제해야함

meta 요소

<meta 속성="속성값" />

• 메타태그는 스스로 닫는 태그이기 때문에 이와 같이 적는다. 
• 메타에서 담을 수 있는 종류는 여러 종류가 있다

Style요소

<style type="text/css">
  body{
    color:#333;
  }
</style>

• 일반적으로는 html과 css파일을 분리해서 사용하지만, html안에 css를 그대로 사용하는 방법
• 물론 관리 상 css파일을 분리하여 작성하는 것이 더 좋은 방법
• 종종 간단한 텍스트나 이 페이지만에서만 사용할 css라면 아주 유용

link요소

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

• 주로 css 파일을 연결할 대 사용
• href : 해당 css파일의 주소를 적으면 됨
• type : 주로 css를 쓰지만, 다른것을 사용하기도 함
• rel(relationship) : 주로 stylesheet를 씀

script요소

<script type="text/javascript" src="abc.js"> </script> 또는
<script type="text/javascript">
  //script Text
</script>

• script요소는 js파일을 연결시켜줌
• 그러나 scrpit요소는 body에 적을 수도 있음
• scrpit요소는 body마지막에 적는거를 선호
• 페이지 로딩을 조금 더 빠르게 하기위해
• scrpit태그를 만나면 JS해석을 끝날때 까지 HTML해석을 멈추기 때문에 페이지 로딩이 오래 걸림

참고 : http://webberstudy.com/html-css/html-1/head-element/