div, span 요소의 의미

div, span은 아무 의미가 없다.
div, span 요소를 많이 사용 한다는 것은 그만큼 HTML 태그를 의미 적절하게 사용하지 않다고 해석 할 수 있기 때문에 대체할 시멘틱 요소를 사용함으로써 사용 빈도를 줄이는 것이 좋다.

div 요소를 대체할 만한 요소들

h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, 
blockquote, pre, address ....

article, aside, nav, section, hgroup, 
header, footer, main, figure, figcaption, details,
summary, dialog, datalist...
UA{display: block}

span 요소를 대체할 만한 요소들

a, em/strong, label, q, sub/sup, ins/del,
code, dfn, abbr, cite, kdb, ruby, samp, var, small,
b, u, i, s ...

data, time, mark, output, meter, progress
UA{display: inline|inline-block}

---

SECTIONING

• hx, hgroup, header, footer → 섹셔닝은 아니지만 함께 쓰는 요소
• article, aside, nav, section → 섹셔닝 요소

header, footer

• header: 도입부, 헤딩, 헤딩그룹, 목차, 검색, 로고
• footer: 저자, 저작권, 연락처, 관련문서

의미 범위: 섹셔닝 루트(body) 또는 섹셔닝 콘텐츠(article, aside, nav, section)
여러번 사용해도 된다.

반드시 필요한 요소는 아니지만 이런 의미일 때 div 대신 사용하길 권장

section, article

• section: 제목이 있는 주제별 콘텐츠 그룹 또는 응용 프로그램 영역.
• article: 섹션 요소 중 독립적으로 배포 가능한 완결형 콘텐츠. 뉴스 기사, 블로그 본문, 사용자의 댓글 등.
• 용법 :
  • 중첩 허용 (section 안 section, article 안 article)
  • h1~6 요소 사용을 강력하게 권장,
  • header / footer 요소 사용하는 것은 선택사항

nav

• 현재 사이트 또는 현재 페이지 일부를 링크하고 있는 주요 탐색 섹션.
• 빵부스러기 링크, 약관, 저작권 고지 같은 링크는 적절하지 않음.
• 용법 : h1~6 요소 요소를 포함하는 것을 강력하게 권장

aside

• 페이지의 주된 내용과 관련이 약해서 구분할 필요가 있는 섹션
• 부수적인 콘텐츠, 관련기사, 광고 등의 내용을 포함할 수 있다
• 용법 : h1~6 요소 요소를 포함하는 것을 강력하게 권장
  aside도 섹셔닝 콘텐츠이기 때문에 헤딩 요소를 포함하는 것을 강력하게 권장
  (ex:배너, 페이지바로가기 링크)

main

• 문서의 핵심 주제 또는 애플리케이션의 핵심 기능과 직접 관련있는 콘텐츠 영역을 의미.
• 페이지마다 반복되지 않는 내용을 포함하여야 한다.
• 섹셔닝 콘텐츠가 아니므로 h1~6, header, footer 요소의 범위와 관련없음.
• 하나의 페이지 안에서 하나의 main 요소만 표시 가능
• 섹셔닝 관련 요소(article, aside, nav, section, header, footer)의 자식이 될 수 없다.
• body, div 요소를 제외한 다른 요소의 자손이 될 수 없다.

dialog

• dialog 요소는 사용자와 상호 작용하는 응용 프로그램(대화상자)을 의미
• open 속성을 추가하면 대화 상자가 활성화되고 사용자가 대화 상자를 통해 상호 작용할 수 있다.
• 보통 입력 양식과 콘트롤을 포함하고 있으며 닫기 기능을 제공한다.
• 키보드 초점이 요소 내부에서 순환하도록 처리하여야 한다.

figure, figcation

• 문서의 주된 흐름을 위해 참조하는(부록으로 옮겨도 괜찮은) 독립적인 완결형 요소로서 이미지, 도표, 코드 등의 내용물과 설명(figcaption)을 포함한다.
• 선택적으로 처음 또는 마지막에 figcaption 요소를 자식 요소로 포함할 수 있고 또는 생략할 수 있다.
• figure안에서 figcaption 요소가 선언 된다면 한 번만 선언할 수 있다.

mark

• 독자의 주의를 끌기 위한 하이라이트.
• 현재 독자의 행위나 관심에 따라 강조한 것.
• 검색 결과 목록에서 사용자가 입력한 키워드.

---

etc

adress

• 가까운 조상 article 또는 body 요소를 범위로 하는 관련 연락처 정보.
• 우편 정보를 의미하는 것이 아님에 유의(저작권 정보등이 적합)
• 흔히 footer 요소에 나타남.
• p 요소의 자손이 될 수 없음

(p의 요소는 프레이킹 콘텐츠만 담을 수 있는데 address는 프레이징이 아니라서 address안에 p가 올 수는 있지만 p가 address안에 들어갈 수는 없다!)

ins, del

ins: 추가한 내용을 의미
del: 삭제한 내용을 의미

• 콘텐츠 모델이 투명해서 어떤 요소라도 포함할 수 있음(자식요소를 무엇이든 담을 수 있다.)
• 여러 단락을 한번에 포함하는 것은 부적절하다.

progress

• 계산 또는 사용자 과업의 진척도
• 원격 호스트의 응답을 기다려야 하는 경우도 있기 때문에 정확하지 않을 수 있다.
• 낡은 브라우저를 위해 value 값과 별도로 콘텐츠를 제공하는 것이 좋다.

b, i, s, u

• b: 강조할 의도가 없는 볼드. strong 요소 고려
• i: 현재 맥락과 다른 분위기. em 요소 고려
• s: 정확하지 않거나 관련 없는. del 요소 고려
• u: 오타, 중국 고유명사 등의 표기. ins 요소를 고려