의미를 담고 있는 html 태그를 효율적으로 사용하면 검색 최적화나 웹 접근성 등에 도움이 된다. 이번 포스팅에서는 정보와 의미를 담고 있는 html 태그들에 대해서 알아보도록 하겠다.
<head> 안의 <meta>, <link>, <title>
<head> 태그는 페이지에 대한 정보를 담고 있는 태그이다. 태그 안에 컴퓨터가 읽고 사용하는 메타 데이터(meta data)가 담겨 있는데, 메타 데이터는 '데이터에 대한 데이터'라고 할 수 있다. (말이 어렵...) 페이지 제목을 나타내는 <title>, css 파일이나 파비콘 이미지 등을 불러오는 <link>, 그리고 각종 <meta> 태그 등이 이에 속한다.
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico">
<meta property="og:title" content="디지털 노마드">
첫번째 줄에 있는 meta charset은 utf-8 인코딩을 사용해서 올바른 문자를 보여주게 하고, 네번째 줄의 og는 오픈 그래프(open graph)의 약자이다. 카카오, 페이스북, 네이버 등 크롤러가 정보를 수집할 때에 메타 데이터에 오픈 그래프로 지정되어 있는 이미지, 타이틀, 설명 정보를 긁어서 사용한다.
<meta property="og:image" content="image.jpg">
<meta property="og:title" content="디지털 노마드">
<meta property="og:description" content="디지털 노마드는 티스토리 블로그로 각종 개발, 디자인 정보와...">
시맨틱 태그(Semantic Tag)
<div>와 똑같은 기능을 하지만, 의미를 담고 있는 태그들을 말한다. 영역을 나눌 때 의미를 담고 싶다면 시맨틱 태그를 사용한다. 특별한 사용법이 있는 건 아니고, 코드를 작성하는 사람의 의도가 반영된 것이다. 따라서 시맨틱 태그를 사용하지 않고 <div> 만으로 코드를 만들어도 전혀 상관이 없다.
그럼에도 불구하고 시맨틱 태그를 사용한다면? 장점이 몇 가지 있다.
시맨틱 태그 사용하면 좋은 점
- 검색 엔진 로봇이 사이트 정보를 수집하기 용이함 -> 검색 최적화(SEO)에 도움이 됨
- 시각 장애인들이 스크린 리더기를 사용하기 쉬움 -> 웹 접근성이 높아짐
- 개발자 관점에서 코드를 읽고 이해하기 쉬움 -> 개발자의 생산성 높아짐
시맨틱 태그 종류
<header> 영역 상단에 위치, 로고, 제목, 메뉴 등을 가진 도입부
<main> 사이트의 본격적인 내용(사이트에서 딱 한 번만 쓸 수 있음)
<nav> 사이트에서 메뉴에 해당
<footer> 영역 하단에 위치, 연락처 등 여러가지 관련 정보
<article> 하나의 독립적(완성형)인 내용
<section> 어떤 것의 일부분
<figure> 이미지, 이미지 설명
코드잇의 html 핵심 개념 토픽을 완료했다. 이미 알고있던 내용들을 다시 한 번 복습하는 유익한 기회였다. 다음 토픽으로는 무얼 들으면 좋을지 커리큘럼 구경을 하러 가야 겠다.
'퍼블리싱 & 프론트엔드 > html & CSS' 카테고리의 다른 글
| vs code 에서 html 한 번에 입력하기 - html 필수코드 자동완성 (0) | 2023.07.25 |
|---|---|
| 다른 코드 불러올 때 사용하는 <link>, <script> 태그 (0) | 2023.05.02 |
| 코드잇 학습일기 Day17. 폼 태그 속성, 인풋 태그 종류와 속성 (0) | 2023.04.25 |
| 코드잇 학습일기 Day.16 폼(Form) - 인풋(Input), 라벨(Label), 버튼(Button) (0) | 2023.04.24 |
| 코드잇 학습일기 Day15. 아이프레임(iframe) (0) | 2023.04.22 |
댓글