속성 & 시멘틱 태그

속성(attribute)

• 속성을 통해 태그의 부가적인 정보를 설정할 수 있음

• 요소는 속성을 가질 수 있으며, 경로나 크기와 같은 추가적인 정보를 제공

• 요소의 시작 태그에 작성하며 보통 이름과 값이 하나의 쌍으로 존재

• 태그와 상관없이 사용 가능한 속성(HTML Global Attribute)들도 있음

  HTML Global Attribute

• 모든 HTML요소가 공통으로 사용할 수 있는 대표적인 속성 (몇몇 요소에는 아무 효과가 없을 수 있음)

  • id : 문서 전체에서 유일한 고유 식별자 지정
  • class : 공백으로 구분된 해당 요소의 클래스 목록(css, js에서 요소를 선택하거나 접근)
  • data-* : 페이지에 개인 사용자 정의 데이터를 저장하기 위해 사용
  • style : inline 스타일
  • title : 요소에 대한 추가 정보 지정
  • tableindex : 요소의 탭 순서

시맨틱 태그

• HTML5에서 의미론적 요소를 담은 태그의 등장

  • 기존 영역을 의미하는 div 태그를 대체하여 사용

• 대표적인 태그 목록

  • header : 문서 전체나 섹션의 헤더(머리말 부분)

  • nav : 네비게이션

  • aside : 사이드에 위치한 공간, 메인 콘텐츠와 관련성이 적은 콘텐츠

  • section : 문서의 일반적인 구분, 컨텐츠의 그룹을 표현

  • article : 문서, 페이지, 사이트 안에서 독립적으로 구분되는 영역

  • footer : 문서 전체나 섹션의 푸터(마지막 부분)

• Non sementic 요소는 div, span 등이 있으며 h1, table 태그들도 시맨틱 태그로 볼 수 있음

• 개발자 및 사용자 뿐만 아니라 검색엔진 등에 의미 있는 정보의 그룹을 태그로 표현

• 단순히 구역을 나누는 것 뿐만 아니라 '의미를' 가지는 태그들을 활용하기 위한 노력

• 요소의 의마가 명확해지기 때문에 코드의 가독성을 높이고 유지보수를 쉽게 함

• 검색엔진최적화(SEO)를 위해서 메타태그, 시멘틱 태그 등을 통한 마크업을 효과적으로 활용 해야함.