<div>콘텐츠 분할 요소
특정구역이나 구획을 분할 하거나 묶을때 사용
순수 컨테이너로서 아무것도 표현하지 않는다. (의미를 갖고있지 않음)
일괄적인 스타일링을 한다던지 묶어서 특정 위치에 놓고 싶을때 사용
문서의 특정 구역이 다른 언어임을 leng속성을 사용하여 표시하는 용도로 사용
-유지보수가 편해진다.
-협업이 쉬워진다.
<span>
순수한 컨테이너
구문콘텐츠를 위한 통용 인라인 컨테이너
본질적으로 아무것도 나타내지 않음.
시맨틱 웹(Semantic Wen>
웹페이지를 만들때 div를 이용해서 할 순 있지만 그게 어떤 의미인지 모름 (아무런 의미를 갖고 있지 않은 순수 컨테이너)
----> 시맨틱(의미의, 의미론적인) 태그를 시맨틱 태그, 시맨틱 요소라고 부름.
요소의 의미를 고려하여 구조를 설계하고 코드를 작성함.
의미론적인 마크업을 사용하면?
- 검색엔진은 의미론적 마크업을 분석하여 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주함.
--> 검색엔진에서 웹 페이지의 정보들을 수집하는데 효율적으로 수집가능
div로만 작성을 하게 되면 정보들간에 관계를 알지 못함. -> div로만 만든 웹페이지가 시맨틱으로 만든 웹페이지보다 노출이 덜 될 수 밖에 없음.
-웹접근성
시각장애가 있는 사용자가 스크린리더로 페이지를 탐색할때 시맨팁웹 페이지가 메뉴에 뭐뭐가 있는지 어느 메뉴에 진입을 할껀지 브라우징을 할 때 더 편리하게 할 수있다.
논시맨팁웹은 위에서부터 끝까지 책읽듯이 읽을 수 밖에 없음. ->스크린리더로 페이지를 탐색하기 어려움.
-개발자 입장에서도 시맨틱웹이 더 가독성 있게 읽을 수 있다.
-개발자에게 태그 안에 채워질 데이터 유형을 제안할 수 있다.
-의미있는 이름짓기(semantic naming)을 잘 찾을 수 있도록 노력해야함.
<header>
소개 및 탐색에 도움을 주는 콘텐츠
웹페이지에 1개만 사용
ex. 제목, 로고, 검색 폼, 작성자 이름 등의 요소를 표현할 수 있음.
어느 곳을 탐색을 해도 동일하게 보이는 경우가 많음.
header를 크게 묶어서 h1, 큰 제목으로 제목을 넣었고
이미지 태그를 통하여 로고 이미지를 넣었음.
<footer>
웹 페이지의 밑에 구획의 작성자, 저장권 정보, 관련 문서 등의 내용을 담음.
웹페이지에 1개만 사용
어느 곳을 탐색을 해도 동일하게 보이는 경우가 많음.
<nav> 네비게이션바 탐색 구획 요소
내가 지금 보고 있는 페이지가 전체 페이지에 어느정도 위치에 있는지 알려줌
또 다른 페이지로의 링크를 보여주는 역할
ex. 메뉴, 목차, 색인에 사용
<aside> 별도 구획 요소
본문과 직접적으로 연관은 없지만 간접적으로 연관된 부분.
네비: 현재 페이지에서 넘어갈 수 있는 링크들을 표현, aside는 추가적이고 부가적인 정보이며 크게 없다고 해서 문제가 되지 않음.
ex. 사이드바 혹은 콜아웃 박스
<main>
<body> 태그 밑에 가장 메인으로 하는 주요 컨텐츠 (1가지)
2개 3개 있는 경우 <hidden>을 이용해서 눈에 보이지 않게 사용 하여야 함.
Internet Explorer에선 지원이 되지 않기 때문에 이때는
<main role="main">...</main>사용해야 함.
메인 컨텐츠 안에 article 여러개 가능.
메인컨텐츠가 감쌀 수 있도록 해야함.
<article>
웹페이지 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있어야함.
기사를 단독적으로 퍼가서 그 웹페이지를 벗어나더라도 독립적인 컨텐츠기 때문에 이해가 됨.
ex. 게시판, 블로그 글, 매거진이나 뉴스기사
하나의 문서가 여러개의 article을 가질 수 있다.
section 안에 article이, article 안에 section 이 존재 할 수 있음.
article 을 식별할 수 있도록 <h1~h6> 요소를 자식으로 사용.
독립적이기 때문에 헤더와 푸터를 사용 할 수 있음.
<section> 일반구획 요소
article이 될 수 있다고 생각하면 <article>, 그게 아니라면 <section> 으로 구분하면 됨.
사과를 고르는 방법 자체로는 article로 사용 할 수 있지만 introduction 이나 criteria는 단독적으로 사용 할 수 없기 때문에 section으로 사용
식별 가능하게 제목<h1~h6> 요소를 자식으로 포함해도 됨.
