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

해버니 2023. 12. 27. 14:04

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를 각각 다른 파일로 저장하여 관리할 수도 있다.