티스토리 뷰

HTML

Head Tag (title, link, script, meta)

baegofda_ 2021. 8. 16. 18:42

* title

  • 문서의 대제목을 나타낸다.
  • 검색 최적화(SEO)에 제일 중요하다.
    1. 키워드를 단순히 나열하는것은 좋지않다.
    2. 페이지마다 맞게 변경해준다.
    3. 무엇에 관한내용인지 적어준다.
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <title>index</title>
    </head>

    <body>
        hi
    </body>
</html>

브라우저 사용시 나오는 탭에 title내용이 표시된다.

* link

  • 외부와 리소스를 연결할때 사용한다.
  • rel attribute를 사용하여 요소와의 관계를 명시해두는것이 좋다.

* 관련 링크 https://developer.mozilla.org/ko/docs/Web/HTML/Element/link

 

: 외부 리소스 연결 요소

HTML link 요소는 현재 문서와 외부 리소스의 관계를 명시합니다. link는 스타일 시트를 연결할 때 제일 많이 사용하지만, 사이트 아이콘("파비콘"과 홈 화면 아이콘) 연결 등 여러가지로 쓰일 수 있

developer.mozilla.org

* script

  • src attribute를 이용하여 javascript 파일을 연결하거나 html문서 내부에 javascript를 기재할때 사용
  • 사용 위치에 따라서 작동에대한 문제가 있을 수 있다.

* 관련 링크 https://baegofda.tistory.com/135?category=914616

 

[JavaScript] JavaScript - async & defer

* 드림코딩 강의 기반으로 정리된 글 입니다. * async & defer HTML 문서는 위에서부터 아래로 차례대로 parsing 한 후 css와 병합해서 DOM요소로 변환한다. 와 사이 어디에나 위치해도 작동은 하나 위치에

baegofda.tistory.com

* meta

  • 이용자에게는 보여지지않지만 중요 요소들을 배치할때 사용한다.
  • <meta name="메타데이터종류" content="메타데이터값"/>
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="author" content="작성자" />
        <meta name="description" content="페이지에대한 설명" />
        <meta name="keywords" conntent="키워드단어" />
        <title>index</title>
    </head>

    <body></body>
</html>
저작자표시

'HTML' 카테고리의 다른 글

기타 etc.. (abbr, address, pre)  (0) 2021.08.16
미디어파일 video & audio & iframe  (0) 2021.08.16
table  (0) 2021.08.16
Form - button  (0) 2021.08.16
Form - textarea  (0) 2021.08.16
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함