공간 분할 태그와 HTML5 시맨틱 구조 태그

공간 분할 태그

• <div> 태그 : block 형식으로 공간 분할
• <span> 태그 : inline 형식으로 공간 분할

HTML5 시맨틱 구조 태그

• 시멘틱(Semantic) : 의미의, 의미론적인
• 역할과 기능에 맞는 요소로 영역 구분해서 사용
• 각 요소(태그)가 의미가 있다는 것
• <header> : 헤더 (제목)
• <nav> : 네비게이션 (메뉴)
• <aside> : 사이드 바
• <section> : 컨텐츠 (내용)
• <article> : 컨텐츠 안의 내용 (컨텐츠 영역 세분화 할 때 사용)
• <footer> : 푸터 (주소 / 저작권 / 연락처 등)

HTML5 시맨틱 구조의 특징

• HTML4로 만든 웹 문서의 결과 화면과 HTML5로 만든 웹 문서의 결과 화면 -> 웹 브라우저에 보이는 모습은 동일
• 그러나 실제로 웹 브라우저에서 문서를 처리할 때에 있어서는 큰 차이가 있음

HTML5 시맨틱 구조의 장점

• 소스만으로도 문서 내용 쉽게 이해
  • 태그만 보고도 어느 부분이 제목/메뉴/내용에 해당하는지 쉽게 구분 가능
• 편리한 검색
  • 사이트 검색 시, 필요한 내용을 정확하게 찾을 수 있음
  • <header>/<nav> 태그 영역은 검색하지 않고, <section>이나 <article> 태그 영역만 찾아 검색
• 뛰어난 웹 접근성
  • 시각 장애인들이 웹 보조 기구로 사용하는 화면 판독기에서 시멘틱 태그를 통해 제목과 내용을 구별하여 사용자에게 정확한 내용 전달 가능
• 다양한 장치에서 통일된 결과 제공
  • 태그의 역할이 정해져있기 때문에 어떤 장치에서든 동일하게 문서 해독이 가능