개인 노트 정리) 마크업4 - HTML 의미론

The RED 견고한 UI 설계를 위한 마크업
Part 1. HTML
04. HTML 의미론

 

# HTML 의미론

- HTML 시멘틱.

## div, span

- 아무런 의미도 없다.

- 다른 적절한 html 요소를 사용할 수 없을 때 마지막으로 선택할 수 있는 태그이다.

## Sectioning

- article, aside, nav, section : 섹셔닝 요소

- hx, hgroup, header, footer : 섹셔닝은 아니지만 함께 쓰는 요소

## header, footer

### header

- 도입부, 헤딩, 헤딩 그룹, 목차, 검색, 로고

### footer

- 저자, 저작권, 연락처, 관련 문서

### 사용

- 섹셔닝 콘텐츠 범위 안.

- 섹셔닝 루트(body) 안.

- 한 페이지에서 한번만 사용하라는 법은 없다.

## section, article

- section : 제목이 있는 주제별 콘텐츠 그룹 또는 응용 프로그램 영역

- article : 섹션 요소 중 독립적으로 배포 가능한 완결형 콘텐츠. 뉴스 기사, 블로그 본문, 사용자의 댓글

### 사용

- h1~h6 요소를 포함하면 매우 좋다.

- header, footer 요소를 사용하는 것은 선택사항.

## nav

- 주요 탐색 섹션. 목차.

- 헤딩 요소를 강력하게 권장.

## aside

- 페이지의 주된 내용과 관련이 약해서 구분할 필요가 있는 섹션.

- 부수적인 콘텐츠, 관련 기사, 광고 등.

- 헤딩 요소를 포함하는 것을 강력하게 권장. 텍스트가 보일 필요가 없는 경우는 화면에서 보이지 않게 헤딩 처리.

## main

- 의외로 섹셔닝 콘텐츠가 아니다. (헤딩이 반드시 필요한 요소는 아니다.)

- 문서의 핵심 주제 또는 애플리케이션의 핵심 기능과 직접 관련 있는 콘텐츠 영역을 의미.

- 페이지마다 반복되지 않는 내용을 포함해야 한다. (gnb bar, footer, aside 등)

- 한 페이지에 한 번만 표시할 수 있다.

## dialog

- 사용자와 상호 작용하는 응용프로그램을 의미한다.

## figure, figcaption

- 독립적인 완결형 요소.

- 이미지, 도쿄, 코드 등의 내용물과 설명을 포함한다.

- figure, figcaption 서로 부모 자식 관계이다.

- figcaption 은 figure안에서 단 한번만 사용할 수 있다.

## mark

- 독자의 주의를 끌기 위한 하이라이트.

- 현재 독자의 행위나 관심에 따라 강조한 것.

- 주로 검색 결과 목록에서 사용자가 입력한 키워드에 사용한다.

## address

- 직역하면 주소를 의미하지만, 연락처, 주소, 우편 정보를 나타내는 의미로 사용하기에는 적절하지 않다.

- 연락처 정보 등을 나타내는 것이 아니라 저작권 정보, 저자의 연락처를 나타내기에 적절하다.

- p 요소의 자손이 될 수 없다. address안에 p가 올 수는 있다.

- 흔히 footer에 나타남.

## ins, del

- ins는 추가한 내용을 의미.

- del은 삭제한 내용을 의미.

- 콘텐츠 모델이 투명해서 어떤 요소라도 포함할 수 있음. 하지만 여러 단락을 한꺼번에 포함하는 것은 부적절.

- 흔히 쇼핑몰에서 정가를 취소선 처리하고 할인된 가격을 밑줄 처리할 때 사용한다.

### 참고

- 모델이 투명하다는 것은 자식요소로 무엇이든 담을 수 있다는 것을 의미한다.

## progress

- 계산 또는 사용자 과업의 진척도를 의미한다.

- css를 이용해서 디자인을 바꿀 수 있다.

- 낡은 브라우저를 위해서 progress 요소 텍스트 노드에 value 값을 넣는 것이 좋다.

## b, i, s, u

- b, i, s, u 대신에 strong, em, del, ins 를 먼저 고려해 보는 것이 좋다.