HTML 문서의 정보를 적는 meta 태그

지난 포스트에서는 HTML 문서는 정보로서의 내용만을 담아야 한다는 이야기를 했습니다.
이번 포스트의 내용도 지난 포스트의 연장선상에 있습니다.
이번에는 그동안 계속 사용해왔던 meta 태그에 대해서 자세히 알아보겠습니다.




지난 포스트

HTML은 정보 전달을 위한 언어

HTML은 정보를 전달하기 위한 언어입니다. 예전에는 정보 전달과는 아무런 관련이 없는 font 태그나 marquee 태그 등이 있었지만, 지금은 사용이 금지되었습니다.



meta 태그


HTML 문서는 정보로서의 내용을 담고 있어야 합니다.
<head></head> 사이에 들어가는 meta 태그를 이용해서 HTML문서(웹페이지)의 중요한 정보들을 담을 수 있습니다.




meta.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="생활코딩의 소개자료">
        <meta name="keywords" content="코딩,coding,생활코딩,프로그래밍,html,css,javascript">
        <meta name="author" content="egoing">
        <meta http-equiv="refresh" content="30">
    </head>
    <body>
        생활코딩은 일반인에게 프로그래밍을 알려주는 온라인/오프라인 강의입니다.
    </body>
</html>

HTML 문서의 기본 구조 (feat. head와 body 태그)

이번 포스트에서는 HTML 문서의 구조를 살펴보고, head, title, body 태그에 대해 알아보겠습니다.

예전에 이 포스트에서 HTML 문서의 기본 구조를 공부하면서, head 태그는 웹페이지의 여러 가지 정보를 저장하는 역할을 한다고 했었습니다.
head 태그 안에서 사용하는 meta 태그가 바로 그런 역할을 하는 태그입니다.


지금까지 항상 써왔던 <meta charset="utf-8">은 글씨가 깨지는 현상을 방지해줍니다.
<meta name="description" content="">는 웹페이지의 요약을 적을 때 사용합니다.
<meta name="keywords" content="">는 이 문서를 정의하는 중요 단어, 키워드들을 콤마(,)로 분류해서 적습니다.
<meta name="author" content="">에는 웹페이지를 만든 저자의 이름을 적어놓습니다.
그리고 자주 사용하지는 않겠지만 <meta http-equiv="refresh" content="30">이라고는 코드를 넣으면 웹페이지가 30초마다 새로고침이 됩니다.


meta 태그들은 웹페이지의 사용자들의 눈에는 보이지 않는 내용이지만, 웹페이지의 정보로서의 가치를 더해주는 태그입니다.
항상 쓰는 버릇을 해둬야 할 것 같네요.




다음 포스트

HTML의 시맨틱(Semantic) 태그

이번 HTML 포스트에서는 시맨틱 태그들을 배워보겠습니다. 굳이 사용을 해도 화면상으로는 아무런 변화가 없는 태그들이지만, 정보를 제공하는 웹페이지로서의 가치를 높여주는 태그들입니다.

Post a Comment

1. 댓글은 블로그 운영자의 승인 후에 블로그에 표시됩니다.
2. 가능하면 비로그인 방문자 분께서는 익명보다 이름/URL로 댓글을 남겨주시면 감사하겠습니다. (URL은 생략 가능합니다.)
3. 구글 블로그에 댓글을 쓰고 '게시' 버튼을 클릭했을 때 가끔 에러가 발생해서 댓글이 날아가는 이슈가 있습니다.
혹시 장문의 댓글을 남기실 분들은 혹시 모를 에러를 대비해 '게시' 버튼 클릭 전에 댓글을 복사해두세요.

다음 이전