본문 바로가기
HTML

HTML head 와 시맨틱 태그

by 프로랑 2023. 10. 20.
728x90

<head> 태그

페이지에 대한 정보를 담고 있는 태그입니다. 주로 이 페이지에 대한 데이터를 담고 있는데, 화면에 보여 주기보다는 웹 브라우저가 읽어서 처리하는 용도입니다.

<head>
    <meta charset="utf-8">
    <title>코드잇 캠핑장</title>
    <link rel="stylesheet" href="style.css">
    <link rel="favicon" href="favicon.ico">
  </head>

 

시맨틱 태그

<div>와 기능은 똑같지만, 의미가 담겨있는 태그들을 '시맨틱 태그'라고 합니다.

엄격한 사용법이 있는 건 아니고, 작성하는 사람의 의도가 중요합니다.

시맨틱 태그를 잘 활용하면 검색 엔진 최적화(SEO)나 접근성(Accessibility)을 높이는데 도움이 됩니다.


태그 이름 용도
<header> 영역 위쪽에서 로고나 제목, 메뉴 같은 걸 담고 있는 도입부
<main> 사이트의 본격적인 내용으로 페이지에서 딱 한 번만 사용 가능
<footer> 영역 아래쪽에서 여러 가지 연락처나 관련 정보를 담고 있음
<article> 하나의 완성된, 독립적인 내용을 나타내는 영역
<section> 어떤 것의 일부분을 나타내는 영역
<figure> 이미지와, 이미지 설명을 담고 있는 영역
728x90

'HTML' 카테고리의 다른 글

z-index에 오류가 있을 때  (1) 2023.10.20
메타 태그 소개  (0) 2023.10.20
HTML link와 script 정리  (0) 2023.10.20
HTML 폼 정리  (0) 2023.10.20
HTML 인풋의 여러가지 타입  (0) 2023.10.20