<!-- 해당 문서는 HTML5로 구성되어 있다는 문구 -->
<!DOCTYPE html>
<!-- HTML 시작 태그, lang : 검색엔진이나 브라우저에서 사용할 언어를 알려주는 속성 -->
<html lang="ko">
기본 템플릿 상단에 DOCTYPE은 해당 문서가 HTML5로 작성되었음을 알려주는 문구로서 해당 내용을 통해
- 문서를 표준 모드로 렌더링.
- 쿼크 모드를 방지.
라는 주요 기능을 사용할 수 있다.
<!--문자열 인코딩을 알리는 속성, UTF-8이 표준적임 -->
<meta charset="UTF-8">
head 태그 내에 meta 태그 속성 중 charset은 HTML 문서의 문자 인코딩을 지정하는 데 사용되는 속성으로 이 태그는 브라우저가 HTML에 사용된 문자를 올바르게 해석하고 표시하도록 도와주는 역할을 한다!
UTF-8은 최신 웹 표준에서 강력히 권장되는 인코딩 방법으로 UTF-8이 표준인 이유는 아래에 있다.
- 글로벌 지원 : 전 세계 거의 모든 언어(한글, 중국어, 아랍어 등)를 포함
- 효율성 : 기존 ASCII와 호환되고, 비 ASCII 문자를 효율적으로 인코딩
- 인터넷 표준 : HTML, CSS, Javascript 등 최신 웹 표준에서 기본으로 사용
문자 인코딩 방식을 정확하게 지정하지 않으면 글자가 깨져 보일 수 있으므로 반드시 정확하게 지정할 것!
<!-- 해상도 최적화 옵션 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport는 웹페이지를 모바일이나 태블릿 기기에서 어떻게 보여줄지 설정하는 태그이다. 특히 화면 크기가 작은 기기에서 웹페이지가 너무 크게 보이거나, 제대로 맞지 않게 보이는 문제를 해결하기 위해 사용된다. 이 태그가 없으면 스마트폰에서 너무 작게 보이는 웹페이지를 일일이 확대해서 봐야 하지만, 이 태그를 추가하면 웹페이지가 스마트폰 크기에 맞춰 딱 알맞게 보이게 된다.
<!-- 해당 페이지의 이름 -->
<meta name="application-name" content="my web page">
웹페이지나 웹 애플리케이션에 보여질 이름을 지정하는 태그로 content 부분이 표시된다. 위에 코드라면 "my web page" 부분이 표시된다.
<!-- 검색엔진에 노출될 키워드 -->
<meta neme="keyword" content="html, css, javascript">
검색엔진에 노출될 키워드를 나타내는 태그다. 현대 SEO 전략에서는 이 태그보다 콘텐츠의 품질, 제목, 설명, 구조화된 데이터 등이 훨씬 중요하다. 현대에서 역할이 축소된 이유는 google 등의 검색 엔진이 이 태그를 무시하기 때문이다.
<!-- http-equiv : 브라우저 호환성 옵션 -->
<meta http-equiv="X-UA-COmpatible" content="IE=edge, chrome">
http-equiv 속성은 브라우저가 웹페이지를 렌더링할 때 사용할 호환성 모드(Compatible mode) 를 지정하는 meta 태그이다. 특히 IE에서 이 태그가 중요한 역할을 한다.
왜 필요한가?
과거에는 Internet Explorer(IE)가 다양한 버전 별로 렌더링 방식이 달라 문제가 발생했음
- 최신 웹 표준을 지원하지 않는 구형 IE 버전이 웹사이트를 잘 못 렌더링함.
- 개발자가 의도한 최신 방식이 아닌, 호환성 모드로 강제로 전환되는 경우가 있음.
하지만 이 태그를 사용하면 IE가 최신 모드(표준 모드)에서 웹페이지를 랜더링하도록 강제할 수 있음.
최신 브라우저에서는 불필요하나, IE를 호환해야하거나 레거시 코드 지원시 중요할 수 있음.
<!-- title : 상단 탭에 노출될 제목 -->
<title>Document</title>
상단 탭에 노출될 제목, application-name과는 다르다.
| 특징 | <title> | <meta name="application-name"> |
| 역할 | 웹페이지의 제목을 설정 | 웹 애플리케이션의 이름을 설정 |
| 표시 위치 | 브라우저 탭, 검색 결과, 북마크 | 홈 화면 아이콘, PWA( Progressive Web App) 이름 |
| 사용 환경 | 모든 웹페이지 | 웹 애플리케이션(PWA) 관련 페이지 |
| 검색 엔진 반영 여부 | 검색엔진 결과 페이지(SERP)에서 표시 | 검색엔진이 직접반영하지 않음 |
쉽게 말해서
- <title> : 웹페이지의 제목표, 사람들이 브라우저에서 페이지를 열 때 확인할 수 있는 이름.
- <meta name="application-name"> : 웹 애플리케이션의 앱 이름표 사용자가 모바일에서 이 페이지를 앱처럼 사용할 때 보이는 이름
<!-- 외부링크 연결-->
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
Link 태그는 HTML 문서에서 외부 링크를 연결할 때 사용되는 태그이다. CSS나 Favicon, font , RSS/Atom 등 다양한 외부리소스를 연결할 때 사용한다. 사용시 rel 속성으로 연결된 리소스의 목적을 명확하게 정의하면 된다.
<!-- javascript 로드하거나 직접 선언하는 방법 -->
<script type="text/javascript" src="main.js">
// Javascript 영역!
</script>
Script 태그는 Javascript를 HTML 문서에 연결하기 위해 사용되는 태그로 내부에 작성할 수도 있고 외부 파일을 연결할 수도 있다. 최신 프로젝트에서는 가독성과 유지보수를 위해 외부스크립트 사용을 권장하고 있으며, 내부에 스크립트를 작성하는 방법은 특정 페이지에서만 동작하는 간단한 코드를 작성할 때 적합하다.
'Today I Learn' 카테고리의 다른 글
| [TS] Typescript (1) | 2025.01.02 |
|---|---|
| [항해99] 잔디 기부 캠페인 (0) | 2024.12.24 |
| [JS기본문법] 오늘의 안된 점! (0) | 2024.11.26 |
| [BasicHTML] Emmet 문법 (1) | 2024.11.19 |
| [Python] 챌린지 1일차 (0) | 2024.08.08 |