본문 바로가기
카테고리 없음

✔웹코딩기초강좌 ③ - HTML문서 Head 요소 알아보기

by 세오APL 2016. 6. 27.

✔웹코딩기초강좌 ③ - HTML문서 Head 요소 알아보기



HTML문서를 작성할 때에 가장 처음 들어가는 Head (머리) 부분에 관련하여 정리해본다.






★ HTML 문서의 구조를 만드는 기본 태그 ★


<!doctype HTML>

<html>


 <head>

  <meta charset="UTF-8">

   <title> 문서제목 </title>

 </head>


 <body>

문서내용

 </body>


</html>






1. Doctype



독타입(Doctype)은 HTML 문서의 가장 상단에 명시하는데, 해당 HTML 문서의 타입과 버전을 알려주는 정보를 담는다. 웹표준으로 작성할 때에 필수로 들어가는 항목이다.


※ HTML5의 선언 ▶ <!doctype HTML> 


<!doctype HTML> 이라고 최상단에 작성해두면, 해당 문서의 버전이 HTML5버전이라는 것을 나타낸다.





2. Head


head요소는 해당 웹페이지에 직접적으로 표현되지는 않으나, 이 페이지의 제목이나 웹페이지가 검색엔진에 노출이 될 수 있도록 하는 각종 정보('메타데이터'라고 한다)들을 담는 역할을 한다. 웹페이지를 꾸미는 CSS파일이나 자바스크립트 JS 파일을 연결하는 부분 또한 주로 head 요소 안에 위치한다.




[ Head를 구성하는 요소들 ]




① Title 


문서의 제목 또는 이름을 나타낸다.


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


title 요소의 내용은 브라우저 창 제목이나 페이지 탭에 나타나게 된다. 때문에 title 제목을 작성할 때는 간단하고 명료하게 작성하는 것이 좋다. 


Title 작성 Tip )


1. 제목은 해당 웹페이지를 대표할 수 있는 내용의 제목을 사용해야 한다.


- 사이트를 노출시킬 때에 검색엔진이 해당 목적에 맞게 인식하여 노출시킬 수 있도록 키워드 선정이 중요


2. 웬만하면 특수문자를 사용하는 것은 지양하는 것이 좋다.


 






② meta 


메타태그는 스스로 닫는 태그로, 현재 페이지의 인코딩(언어정보), 페이지 설명, 페이지에 관련한 주요 키워드 등을 담는 역할을 한다.

ㄷㅁㅇㄴㄹ

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



※ meta태그 사용 예


<meta http-equiv="Content-Type" content="text/html; charset="UTF-8"/>


해당 웹페이지가 UTF-8 방식으로 작성되었다는 의미를 담고있다. 이는 브라우저가 이 메타정보를 읽고, 텍스트를 올바르게 랜더링하는데, 보통 국내에서는 'UTF-8' 또는 'EUC-kr'을 많이 사용하고 있다. 일반적으로 다른 언어에서도 볼 수 있는 UTF-8을 권장한다.






<meta name="Description" content="소개 내용"/>


디스크립션메타는 해당 웹페이지를 설명하는 정보들을 담고 있으며, 이 정보는 검색엔진에서 긁어가는 내용으로 인터넷 유저가 검색했을 때 사이트 설명 부분에 나타나게 된다.


<meta name="Keywords" content="키워드 나열" />


해당 웹페이지가 갖고 있는 주요 키워드들을 담는 메타태그로 이 정보 역시 검색엔진에서 긁어가는 주요 정보 중 하나가 된다.


<meta name="robots" content="noindex, nofollow" />


이 메타태그는 해당 웹페이지를 검색엔진이 웹수집을 하게 할 것인지, 하지 않도록 할 것인지를 정하는 태그로, 위와 같이 'noindex, nofollow'로 정의해둘 경우 검색엔진은 해당 웹페이지 정보를 수집하지 않는다. 이는 즉, 검색엔진에 노출되지도 않는다는 것을 의미한다.


그러나 대부분의 사이트는 검색노출을 위한 사이트가 많으므로 content 값을 'index, follow'로 작성해두거나 위 메타태그를 아예 작성하지 않으면 기본적으로 검색엔진이 해당 사이트를 수집하게 된다.



③ link, style


※ 사용 예)


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


<style type="text/css">

  body{

    color:#333;

  }

</style>



link 및 style 요소는 CSS 파일을 연결할 때 사용하는 요소들이며, Style 요소 안에 원하는 CSS 내용을 넣게 되면 굳이 외부 CSS 파일을 별도로 사용할 필요가 없고, html 파일 안에서 편하게 사용이 가능하다.


물론, 관리를 위해 CSS파일을 분리하여 작성하는 것이 더욱 좋은 방법이긴 하나, 종종 간단한 텍스트 또는 단일페이지를 작성할 때에 사용할 CSS라면 유용히 활용할 수 있다.



④ script


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


<script type="text/javascript"> 

  //script Text                       

</script>                             


src 속성에 js파일명을 기입하면, CSS를 연결하듯 외부 js(자바스크립트) 파일을 연결하게 된다. 또한 src 속성 없이 script 요소 안에는 style 요소처럼 js를 html 파일 안에 직접 작성할 수도 있으며, head 뿐만 아니라 body 안에 작성하는 것도 가능하다.





★ 정   리 ★ 



1. 독타입(doctype) 


  - 문서의 최상단에 위치하여 HTML 의 버전과 타입을 선언한다.


2. head 요소 


  - 실제로 웹페이지상에 보여지지는 않지만 페이지가 갖고 있는 중요 정보들을 담고 있다.

  - head 요소 정보들은 검색엔진 및 스크린 리더 등에서 활용된다.


3. title 요소

  

  - 페이지의 제목을 의미하며, 브라우저 탭에 노출된다.

  - 웹페이지 접근성을 위하여 특수문자 또는 긴 내용은 자제하는 것이 좋다.


4. meta Description

 

  - 페이지의 소개 내용을 담는다. 검색엔진에 주로 활용된다.


5. meta Keywords


  - 페이지의 주요 키워드를 명시하여 검색엔진에 주로 활용된다. 

  - 단, 도배성 또는 무관한 내용을 남발할 시 오히려 악영향이 될 수 있으니 주의한다.


6. link, style


  - 주로 CSS 파일과 연결하며, style 요소를 통해 페이지 내에서 CSS스타일을 줄 수 있다.

    

7. script


  - 웹페이지와 javaScript 파일과 연결하는 역할을 한다.








<관련 포스팅>



✔HTML기초 - HTML, CSS, JAVA Script 입문 - ①  ㅣ  http://seo-apl.tistory.com/53




✔웹코딩기초강좌 ② - HTML문서구조, 요소와 속성 개념  ㅣ  http://seo-apl.tistory.com/54











세오의 어필로그  l  sseoteo@naver.com