패스트캠퍼스 강의를 정리한 내용입니다.
"The RED : 견고한 UI 설계를 위한 마크업 가이드 by 정찬명"
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>: 섹션 요소 중 독립적으로 배포 가능한 완결형 콘텐츠로 뉴스 기사, 블로그 본문, 사용자의 댓글 등- 용법
- h1~h6 요소를 포함하는 것을 강력하게 권장
- header, footer 요소 사용하는 것은 선택사항
- 중첩 허용 (section 내 section, article 내 article)
nav
- 현재 사이트 또는 현재 페이지 일부를 링크하고 있는 주요 탐색 섹션
- 빵부스러기 링크, 약관, 저작권 고지와 같은 링크에 사용하는 것은 적절하지 않음
- 용법 : h1~h6 요소를 포함하는 것을 강력하게 권장
aside
- 페이지의 주된 내용과 관련이 약해서 구분할 필요가 있는 섹션
- 부수적인 콘텐츠, 관련기사, 광고 등의 내용을 포함할 수 있음
- 용법 : h1~h6 요소 요소를 포함하는 것을 강력하게 권장
- 섹셔닝 콘텐츠이기 때문에 헤딩 요소를 포함하는 것을 강력하게 권장
- 적절한 사용 예 : 배너, 페이지 바로가기 링크
main
- 문서의 핵심 주제 또는 애플리케이션의 핵심 기능과 직접 관련 있는 콘텐츠 영역을 의미
- 페이지마다 반복되지 않는 내용을 포함해야 함
- 섹셔닝 콘텐츠가 아니므로 hx, header, footer 요소의 범위와 관련 없음
- 하나의 페이지 안에서 하나의 main 요소만 표시 가능
- 섹셔닝 관련 요소(article, aside, nav, section, header, footer)의 자식이 될 수 없음
- body, div 요소를 제외한 다른 요소의 자손이 될 수 없음
dialog
- dialog 요소는 사용자와 상호 작용하는 응용 프로그램(대화상자)을 의미
- open 속성을 추가하면 대화상자가 활성화되고 사용자가 대화상자를 통해 상호 작용할 수 있음
- 보통 입력 양식과 콘트롤을 포함하고 있으며 닫기 기능을 제공
- 키보드 초점이 dialog 요소 내부에서 순환하도록 처리해야 함
figure, figcation
- 문서의 주된 흐름을 위해 참조하는(부록으로 옮겨도 괜찮은) 독립적인 완결형 요소로서 이미지, 도표, 코드 등의 내용물과 설명(figcaption)을 포함
- 선택적으로 처음 또는 마지막에 figcaption 요소를 자식 요소로 포함 또는 생략 가능
- figure 안에서 figcaption 요소는 한 번만 선언 가능
mark
-
독자의 주의를 끌기 위한 하이라이트
-
현재 독자의 행위나 관심에 따라 강조한 것
-
검색 결과 목록에서 사용자가 입력한 키워드 강조
UA { background-color: yellow }
Etc
address
- 가까운 조상 article 또는 body 요소를 범위로 하는 관련 연락처 정보
- 우편 정보를 의미하는 것이 아님에 유의
- 저작권 정보, 저자의 연락처를 나타내기에 적절
- 흔히 footer 요소에 나타남
- p 요소의 자식이 될 수 없음
(p의 요소는 Phrasing Content만 자식으로 담을 수 있는데 address는 Phrasing이 아니므로, address 내 p 요소는 작성 가능하나 p 요소 내 address 요소 작성은 불가)
ins, del
<ins>: 추가한 내용을 의미<del>: 삭제한 내용을 의미- 콘텐츠 모델이 투명해서 어떤 요소든 자식 요소가 될 수 있음
- 여러 단락을 한번에 포함하는 것은 부적절
progress
- 계산 또는 사용자 과업의 진척도를 의미
- 원격 호스트의 응답을 기다려야 하는 경우도 있을 수 있기 때문에 진척도는 정확하지 않을 수 있음
- 낡은 브라우저를 위해 value 값과 별도로 콘텐츠를 제공하는 것이 좋음
<progress value="0.5">0.5/1</progress>
*텍스트 노드의 텍스트는 <progress>를 지원하지 않는 브라우저에서만 노출되는 콘텐츠b, i, s, u
- 과거에는 의미가 없는 요소였으나 현재 특별한 의미로 남아있는 요소들
<b>, <i>, <s>, <u>태그 보다는 의미 있는 요소인<strong>, <em>, <del>, <ins>태그 사용 추천<b>: 강조할 의도가 없는 볼드 ≓<strong><i>: 현재 맥락과 다른 분위기 ≓<em><s>: 정확하지 않거나 관련 없는 내용 ≓<del><u>: 오타, 중국 고유명사 등의 표기 ≓<ins>
Frontend Developer