html 파일을 작성할 때 몇 가지 지켜야하는 규칙이 있다. 이번 글에서는 해당 규칙에 대해 알아보고자 한다.
첫 번째 규칙
<!DOCTYPE html>첫 번째 규칙은 바로 위의 문구를 가장 상단에 작성하는 것이다. 이 문구의 뜻은 "이 파일은 일반적인 텍스트가 아니라 html 문서이다." 라는 것을 브라우저에게 알려주는 것이다.
두 번째 규칙
<!DOCTYPE html>
<html lang="kr">
</html>두 번째 규칙은 html 태그를 작성하고 해당 태그 안쪽에 작성하는 내용들이 html의 content라는 것을 표시한다는 것이다. 여기서 html 태그에는 lang 속성을 사용할 수 있다. 해당 속성을 사용하게 되면 구글, 빙 등의 검색엔진에게 해당 html파일의 주된 언어가 영어인지, 한국어인지 확인시켜줄 수 있다.
세 번째 규칙
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>세 번째 규칙은 head와 body를 사용한다는 것이다. head 태그에 들어가는 내용은 웹사이트의 환경을 설정한다. 외부에는 보이지 않는 부분에 대한 내용이다. 사용자가 볼 수 있는 부분은 body태그 부분에서 적용한다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>
Hello!
</h1>
<a href="https://www.google.com/">Go to google</a>
<img src="logo.jpg">
</body>
</html>위와 같이 html 태그 안에 body태그를 넣어 작성해주면 아래와 같이 화면에 출력되게 된다.
h1 태그를 통해 title을 작성하고 a 태그를 이용해서 "Go to google" 이라는 문구를 클릭할 경우 구글 페이지로 이동하게 하였다. 또한 Google 이미지도 출력하는 형태가 만들어졌다. 이렇게 브라우저의 화면 상에서 보여지고 싶은 내용의 경우 body태그의 안에 content로 작성하면 된다.
head 태그에도 content를 작성해줄 수 있다.
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" sizes="16x16 32x32 64x64" href="https://assets.nflxext.com/us/ffe/siteui/common/icons/nficon2016.ico">
<title>Home - My first website.</title>
<meta charset="utf-8">
<meta name="description" content="This is my website">
</head>
<body>
<h1>
Hello!
</h1>
<a href="https://www.google.com/">Go to google</a>
<img src="logo.png">
</body>
</html>위와 같이 head 태그에 title 태그를 추가하고 사이에 content를 넣어주면 해당 사이트의 탭 명이 변경되는 것을 알 수 있다.
head 태그의 content로 추가할만한 태그로는 link, meta 태그가 있다.
link 태그로 탭의 이미지를 변경할 수 있다. rel 속성의 값을 "shortcut icon"으로 해주고 sizes속성을 설정해준 뒤 href를 통해 경로를 설정해주면 해당 이미지가 탭에 나타나는 이미지로 출력된다. 아래 이미지는 넷플릭스의 shortcut icon 이미지를 붙여넣어본 모습이다.
meta 태그는 content와 name 속성 등을 가진다. 구글 웹사이트에서 나오는 검색 결과에서는 head태그에 속해있는 title 태그를 제목으로, meta 태그의 name 속성값 description의 내용을 결과로 보여준다. charset의 경우 html 파일에서 사용되는 언어코드를 설정하는 부분이다. property 속성값으로 og:image, og:title 등이 있다. 이는 해당 웹사이트는 카카오톡 등에 공유할 때 보여지는 이미지와 제목 등을 설정할 수 있는 속성이다.
이렇듯 head 태그에는 html 파일이 어떻게 구성되어있는지를 브라우저나 검색엔진에 보여주는 것이다.
'TIL > HTML' 카테고리의 다른 글
| 의미는 없지만 기능은 존재하는 태그들 (0) | 2023.07.18 |
|---|---|
| input 태그와 함께하는 label 태그 (0) | 2023.07.17 |
| input 태그의 여러 속성들 (0) | 2023.07.16 |
| img 태그와 src 속성 (0) | 2023.07.14 |
| a 태그와 속성들 (0) | 2023.07.13 |
| 순서가 있는 목록, 순서가 없는 목록 만들기 (0) | 2023.07.11 |
댓글