[HTML] title | link | script 맨 마지막에 작성하는 이유

title
title을 잘 쓰는 방법 (Search Engine Optimization)
link
script

title

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>망고</title>
    <link href='https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css' rel='stylesheet' type='text/css'>
</head>

head 안에서 필수적으로 적어야 하는 것 중 하나이다.

그리고 검색 최적화의 큰 역할을 하고 있다.

title을 잘 쓰는 방법 (Search Engine Optimization)

① 키워드 단순 나열은 비추한다.

② 각각의 페이지마다 맞는 타이틀을 변경해주는 게 좋다.

③ 알잘딱깔센하게~

link

css 스타일시트를 첨부하는 태그이다.

Visual Code에서 link:css를 입력한 다음 Tab 버튼을 누르면 자동 완성으로 문장이 생성된다.

폰트를 가져올 때도 link 태그를 사용한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>망고</title>
    <link href='https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css' rel='stylesheet' type='text/css'>
</head>
<body>

    <p style="font-family: 'Spoqa Han Sans Neo', 'sans-serif';">하이</p>

</body>
</html>

script

<script>자바스크립트 코드</script>
<script src="경로"></script>

html 문서 내에 JavaScript 파일을 첨부할 때 사용한다.

script는 왜 head에 안 쓰고 마지막 부분에 작성하나요?

① 성능 향상

HTML 문서가 로드될 때, 브라우저는 먼저 문서의 구조를 파싱하고 렌더링을 시작한다.

예를 들어 link를 만나면 요청을 한 후 받을 때까지 기다리지 않고, 일단 HTML 문서를 읽는다.

하지만 script를 만나면 실행을 멈추고 스크립트를 실행 한 후 다시 렌더링을 진행한다.

그래서 script 태그가 많으면 렌더링이 지연되어 느리게 느껴질 수 있다.

② DOM 접근성

마지막에 작성하면, HTML 문서의 구조가 완전히 파싱된 후에 스크립트가 실행되므로 dom에 대한 접근이 더 용이해진다.

③ 분리성

HTML 문서의 가독성과 유지보수성이 향상

또한 HTML 문서와 SCRIPT를 각각 다른 파일로 저장하여 관리할 수도 있다.

'𝙿𝚛𝚘𝚐𝚛𝚊𝚖𝚖𝚒𝚗𝚐 𝙻𝚊𝚗𝚐𝚞𝚊𝚐𝚎 > 𝙷𝚃𝙼𝙻' 카테고리의 다른 글

[HTML] WAI-ARIA \| 스크린리더 \| aria-label \| aria-hidden (2)	2023.12.29
[HTML] 구조 \| Doctype & Document Structure (0)	2023.12.27
[HTML] abbr \| address \| pre \| code (0)	2023.12.27
[HTML] media files (0)	2023.12.27
[HTML] WEB title에 icon 적용하는 방법 (0)	2023.07.20

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

[HTML] title | link | script 맨 마지막에 작성하는 이유

title

title을 잘 쓰는 방법 (Search Engine Optimization)

link

script

'𝙿𝚛𝚘𝚐𝚛𝚊𝚖𝚖𝚒𝚗𝚐 𝙻𝚊𝚗𝚐𝚞𝚊𝚐𝚎 > 𝙷𝚃𝙼𝙻' 카테고리의 다른 글

title

title을 잘 쓰는 방법 (Search Engine Optimization)

link

script

'𝙿𝚛𝚘𝚐𝚛𝚊𝚖𝚖𝚒𝚗𝚐 𝙻𝚊𝚗𝚐𝚞𝚊𝚐𝚎 > 𝙷𝚃𝙼𝙻' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역