Semantic HTML
HTML 엘리먼트와 속성, 속성값은 특정한 의미를 지니도록 정의되었다.
의미에 맞는 요소를 활용하여 문서를 작성하면 검색엔진 최적화, 웹 접근성 및 가독성을 높일 수 있다!
div, span
- 아무런 의미가 없다.
- 흔히 감싸는 용도로 사용됨
- 다른 어떤 의미를 찾지 못했을 때 사용하는 태그
div 요소를 대체할수 있는 요소들
article, aside, nav, section, hgroup, header, footer, main, figure, details, summary, dialog, datalist 등 많은 요소 존재
span 요소를 대체할수 있는 요소들
data, time, mark, output, meter, progress, 등
Sectioning
문서의 개요의 범위를 형성하는데 도움을 주는 요소
heading과 같이쓰면 명시적인 개요를 형성 / heading만 쓰면 암시적인 개요 형성
- 섹셔닝 요소:
article,aside,nav,section - 섹셔닝과 함께 쓰이는 요소:
hx,hgroup,header,footer
header, footer
- header: 도입부, 헤딩, 헤딩 그룹, 목차, 검색, 로고
- footer: 저자, 저작권, 연락처, 관련 문서
반드시 필요한 요소는 아니지만 의미에 맞는 상황일때 사용하길 권장
section, article
- section: 제목이 있는 주제별 콘텐츠 그룹 또는 응용 프로그램 영역
- article: 섹션 요소 중 독립적으로 배포 가능한 완결형 콘텐츠, 뉴스 기사, 블로그 본문, 사용자의 댓글 등
h1~h6요소를 사용하여 명시적인 개요를 형성하는 것을 강력히 권장header,footer요소를 사용하는것은 선택 사항
nav
- nav: 현재 사이트 또는 현재 페이지 일부를 링크하고 있는 주요 탐색 섹션
h1~h6요소를 사용하여 명시적인 개요를 형성하는 것을 강력히 권장
aisde
- aside: 페이지의 주된 내용과 관련이 약해서 구분할 필요가 있는 섹션
h1~h6요소를 사용하여 명시적인 개요를 형성하는 것을 강력히 권장- 부수적인 콘텐츠, 관련 기사, 광고 등의 내용이 포함될 수 있다.
main
- main: 문서의 핵심 주제 또는 애플리케이션의 핵심 기능과 직접적인 관련있는 콘텐츠 영역을 의미
- 페이지마다 반복되지 않는 내용을 포함해야 함
- 섹셔닝 컨텐츠가 아니므로
hx,header,footer요소의 범위와 관련없음 - 하나의 페이지 안에는 하나의 main 요소만 표시 할 수 있다.
- body, div를 제외한 다른 요소의 자손이 될 수 없다.
dialog
- dialog: 사용자와 상호 작용하는 응용프로그램(대화상자)를 의미
- open 속성을 추가하면 대화 상자가 활성화되고 사용자가 대화 상자를 통해 상호 작용할 수 있다.
- 팝업이나 모달창 같은 경우 사용하기 적절하다
- 주의할점
dialog가 열릴 때focus가 안쪽으로 들어와야 한다.tab key만으로dialog를 순회할 수 있어야 한다.focus가 바깥으로 빠지면 안된다.
figure, figcaption
- figure: 문서의 주된 흐름을 위해 참조하는 독립적인 완결형 요소로서 이미지, 도표, 코드 등의 내용물과 설명을 포함한다.
- figcaption:
figure의 자식으로서 내용물의 설명을 의미한다. - 선택적으로 처음 또는 마지막에
figcatpion요소를 자식 요소로 포함할 수 있고 생략할 수 있다. figure안에서figcatpion요소가 선언됬다면 한 번만 선언 가능
mark
- mark: 독자의 주의를 끌기 위한 하이라이트
- 현재 독자의 행위나 관심에 따라 강조한 것
- 검색 결과 목록에서 사용자가 입력한 키워드
address
- address: 가까운 조상
article또는body요소를 범위로 하는 관련 연락처 정보, 우편 정보를 의미하는것은 아님 footer요소에서 흔히 사용됨
ins, del
- ins: 추가한 내용을 의미
- del: 삭제한 내용을 의미
Front-End 😲