요소가 어떤 내용을 담게 될지, 어떤 기능을 하게될지 확실하게 의미를 가지고 있는 요소를 시맨틱요소, 시맨틱요소를 적절하게 사용하여 구성한 HTML을 Semantic HTML
이라고 한다.
시맨틱 HTML의 필요성
1. 개발자간 소통
2. 검색의 효율성
3. 웹 접근성
시맨틱요소의 종류
<header>: 페이지나 요소의 최상단에 위치하는 머릿말 역할
<nav>: 메뉴, 목차등에 사용되는 요소
<aside>: 문서와 연관은 있지만, 직접적인 연관은 없는 내용을 담은 요소
<main>: 문서의 메인이 되는 주요 콘텐츠를 담는 요소
<article>: 게시글, 뉴스 기사 등의 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소.
-> 각각의 <article>을 구분하기 위한 수단이 필요하며, 보통 제목을 포함하는 방법을 사용.
<section>: 문서의 독립적인 구획을 나타내며, 딱히 적합한 의미요소가 없을 때 사용.
제목에 포함하는 경우가 많다.
<footer>: 페이지나 요소의 최하단에 위치하는 꼬릿말 역할.
<span>
)<div>
)<b>
,<i>
요소<b>
요소는 글씨를 굵게, <i>
요소는 글씨를 기울일 때<b>
-> <strong>
<i>
-> <em>
으로 사용하는 것이 좋다.<hgroup>
마구잡이 사용<br />
연속으로 사용<title>
요소
<title>
요소는 검색결과창에서 제목에 해당하는 요소로, <head>
요소의 자식요소로 작성
- <title>
요소에 어떤 내용을 작성하는가에 따라 검색후 유입까지 유도할 수 있다.
- <title>
요소에 핵심키워드가 포함되면 상위에 노출될 확률이 올라간다.
!! 제목에 핵심키워드는 한번만 ( 같은 키워드를 반복하면 검색시 불이익 받을 수 있음 )
<meta>
요소
메타데이터를 담는 요소
➡️ 메타데이터란 해당 웹사이트가 다루고있는 데이터가 무엇인지 <head>
요소의 자식으로 작성하는 것이 일반적
검색결과창이나 소셜미디어, 채팅어플리케이션의 링크 미리보기로 <meta>
요소에 들어있는 내용
SEO를 위한 meta요소
<meta name="속성값" content="내용">
-> 속성값의 종류
- description : 콘텐츠에 대한 간략한 설명 ( 검색결과 제목 밑에 뜨는 내용 )
- keywords : 웹페이지의 관련 키워드들 나열할때 사용
- author : 콘텐츠의 제작자를 표시
오픈 그래프 ( open graph )
<meta property="속성값" content="내용">
-> 속성값의 종류
- og:url : 페이지의 표준 URL
- og:site : 사이트의 이름
- og:title : 콘텐츠의 제목
- og:description : 콘텐츠에 대한 간략한 설명
- og:image : 미리보기에 표시될 이미지
- og:type : 콘텐츠의 미디어유형
- og:locale : 리소스 언어로 기본값은 en_US, 한국은 ko_KR
<hgroup>
요소
콘텐츠
Google - SEO 기본 가이드
Naver - 웹마스터 가이드
aria-expand
,aria-hidden
등의 속성이 있음.aria-label
➡️ 이미지로만 되어 있을 때 설명.aria-live
➡️ 실시간으로 내용을 갱신하는지 설명.