<div>
- 순수 컨테이너로서 아무것도 표현하지 않음.
- 다른 요소 여럿을 묶어 꾸미기 쉽도록 도움.
- 전역 속성
- 블록 컨테이너
<span>
<div>와 똑같은 의미- 구문 컨텐츠를 위한 인라인 컨테이너(텍스트 꾸밀 떄 많이 사용)
시멘틱 웹
<div>
<div><!-- Header --></div>
<div><!-- 메뉴 --></div>
<div>
<div><!-- 본문 --></div>
<div><!-- 사이드바 --></div>
</div>
<div><!-- Footer --></div>
</div><body>
<header><!-- Header --></header>
<nav><!-- 메뉴 --></nav>
<main>
<article><!-- 본문 --></article>
<aside><!-- 사이드바 --></aside>
</main>
<footer><!-- Footer --></footer>
</body>위 두 코드의 결과는 똑같음.
<header>,<nav>,<main>,<article>,<footer>등을 시멘틱 태그 및 시멘틱 요소라고 부름
시멘틱 태그 사용 이점
- 검색엔진이 정보를 수집할 때 용이
- 스크린리더로 페이지 탐색 시 용이
div를 탐색하는 것보다 의미있는 코드 블록을 찾는 것이 쉬움(가독성)
<header>와 <footer>
<header>
- 소개 및 탐색에 도움을 줌.
- 제목, 로고, 검색 폼, 작성자 이름 등
- 다른
<header>나<footer>가 자손으로 올 수 없음.
<footer>
- 구획의 작성자, 저작권 정보, 관련 문서 등
<header>와 다른<footer>가 자손으로 올 수 없음.
<nav>
- 현재 웹페이지를 기준으로 개요 등을 표시
- 다른 페이지로의 링크를 보여줌.
- 메뉴, 목차, 색인
- footer과 비교 잘하도록( footer: 모든 웹페이지마다 동일하게 들어가는 것을 담음)
<aside>
- 문서 주요 내용과 간접적으로만 연관된 부분
- 사이드바, 콜아웃 박스
<main>
<body>내 주요 콘텐츠 나타냄- 하나만 있어야 함
- IE에서는 호환 불가능
<article>
- 독립적으로 구분 가능해 배포하거나 재사용할 수 있는 구획
- 여러개 사용 가능
- 블로그 글, 매거진, 뉴스 기사 등
<article>안에<section>이 들어갈 수 있고, 반대도 가능- 보통 자식으로 헤딩 태그를 넣어 작성
<section>
<article>이 아니면<section>사용
