🤔포스팅 계기
SEO(검색엔진최적화) 개념을 알게 되면서 검색 엔진이 웹 페이지를 색인할 때 메타 데이터를 사용한다는 것을 알게 되었고, 토이 프로젝트를 하면서 viewport를 처음 접하게 되었다,
메타 데이터를 포함하는 <head> 태그에 대해 자세히 알아보자 !
📌 <head> 태그란 ?
<head> 태그는 브라우저 화면에 직접적으로 보이지 않으며 해당 문서에 대한 정보인 메타 데이터(metadata)의 집합을 정의하는 컨테이너라고 생각하면 된다. 이때, 메타데이터란 한 데이터를 설명해주는 다른 데이터이다.
🟡 <head> 요소
1. <title>
HTML 문서의 제목을 정의한다.
이때 <h1> 태그와 헷갈릴 수 있는데 <h1> 태그는 <body> 태그 내 위치하며 브라우저에 표시되며 <title>은 문서의 컨텐츠가 아닌 HTML 문서 전체의 타이틀을 표현하는 메타데이터이다.
2. <style>
HTML 문서의 스타일을 조절하기 위해 사용한다.
태그 사이에 CSS 문서를 작성하여 스타일을 적용할 수 있지만 문서가 길어지면 html과 css를 분리하는 것이 편리하다.
css 파일을 분리하여 사용하면 <link> 태그를 사용해 css 파일을 링크 !
3. <link>
<link> 태그는 해당 문서와 외부 리소스 간의 관계를 저장하는 역할을 한다.
위에서 설명한 것처럼 CSS 파일 첨부와 폰트,아이콘 등 여러 가지로 쓰일 수 있다.
attribute(속성)
- href : 연걸하는 리소스의 URL 지정, 절대 경로와 상대 경로 모두 가능
- rel : 연결된 문서와의 관계 (relaionship)
4. <script>
<script> 태그는 HTML 문서 내 javaScript 파일을 첨부, 작성할 때 사용한다.
참고로 css 파일처럼 js 문서도 길어질 경우 외부 js 파일을 링크하는 것이 좋다. js 파일은 <link> 태그가 아닌 <script> 태그 src 속성을 사용하여 링크한다는 것을 기억하자.
<script>의 작성 위치
<script> 태그는 <head> 태그, <body> 태그 모두에 작성될 수 있으나 통상적으로 <body> 태그 맨 끝에 작성한다.
브라우저는 HTML 문서의 위에서부터 아래로 읽어 내려가져 작동하기 때문에 <head> 안에 <script> 코드가 로딩이 완료될 때까지 잡고 있으면 사용자의 렌더링이 길어진다. (로딩이 길어짐) 즉 <script>태그를 <body> 끝에 작성하여 사용자에게 먼저 콘텐츠를 제공하고 사용자가 정보를 읽는 사이에 동적 콘텐츠를 불러오는 것이 적절하다. (사용자 경험,UX 향상)
5. <meta>
<meta> 요소는 위 4가지 요소로 나타낼 수 없는 메타데이터를 제공할 때 사용되며, 이렇게 제공된 정보는 브라우저, 검색 엔진 등에서 사용하게 된다.
attribute(속성)
- name : 메타 요소가 어떤 정보를 가지고 있는지 이름 정의
- content : 실제 metadata의 콘텐츠
- charset : HTML 문서에 대한 문자 인코딩 선언
이떄 name과 content를 같이 사용하면 문서의 메타데이터를 이름 - 값 쌍으로 제공할 수 있다.
종류
- keyword : 검색엔진에 의해 검색되는 단어 지정
- Description : 검색 결과에 표시되는 문자 지정
- viewport : 웹 사이트를 모든 디바이스에서 보기 좋게 하기 위한 화면 영역 설정 , 반응형 디자인을 위해 사용
- robots : 검색 로봇 제어
더보기robots, content 속성 종류
noindex : 검색 결과에 이 페이지를 표시하지 않는다.
nofollow : 이 페이지의 링크를 따라가지 않는다.
noarchive : 검색결과에 저장된 페이지 링크를 표시하지 않는다.
주로 사이트가 개발 중일 때, 사이트 중 일부 페이지가 구글에 노출되길 원치 않을 때 사용한다.
'HTML, CSS' 카테고리의 다른 글
[CSS] Tailwind CSS 장단점 (0) | 2024.06.20 |
---|---|
[HTML] 시맨틱 태그 (Semantic Tag)란 ? 사용 이유, 종류 (0) | 2024.03.17 |
[CSS] Position 속성 5가지 - static, relative, absolute, fixed, sticky (0) | 2024.03.11 |
[CSS] 캐스케이딩(Cascading)이란 ? (0) | 2024.03.08 |