HTML의 핵심 배우기

17. 의미론적인 코드 - 시맨틱 태그

시맨틱 태그

시맨틱은 '의미론적인'이라는 의미로 태그명은 개발자와 브라우저에게 의미를 제공
-> 컨테이너 태그와 비슷하지만 시맨틱 태그는 태그의 이름이 요소의 역할을 강조하는 의미로 지어져 있음
-> 검색 엔진에게 좋은 단서가 됨

태그명	의미	태그명	의미
<article>	독립적인 콘텐츠	<header>	머릿말
<aside>	별도의 콘텐츠	<main>	주된 콘텐츠
<details>	추가적인 상세한 정보	<nav>	네비게이션 링크
<figcaption>	figure의 자막	<section>	콘텐츠의 한 섹션
<figure>	설명 붙는 독립 콘텐츠	<summary>	detail의 헤더
<footer>	맺음말	<time>	강조할 시간

18. 문서 정보 관리하기 - 메타 데이터

<meta>

meta 태그는 항상 head 태그 안에 들어가며, 일반적으로 문자 세트, 페이지 설명, 키워드, 문서 작성자 및 뷰포트 설정을 지정하는 데 사용됨

사용하는 이유

검색엔진이 페이지를 검색할 때 참고하거나 검색 결과에 반영할 수 있음

charaset

문자 인코딩에 대한 정보

<meta charaset="utf-8">

http-equiv

인터넷에서 데이터를 주고 받을 때 사용하는 프로토콜
http-equiv 가 http관련 정보를 지정하면, content가 그에 대한 정보값을 지정

<!-- IE 브라우저 최신 버전의 엔진을 사용한다는 의미 -->
<meta http-equiv="x-ua-compatible" content="IE-edge">
<!-- 페이지를 10초마다 새로고침 한다는 의미 -->
<meta http-equiv="refresh" content="10">

name

name 속성을 이름으로, content 속성을 값으로 하여 문서 정보를 이름+값 한쌍의 형태로 제공할 때 사용 -> 검색 최적화