HTML markup taging rule (~ing)

개요

• 간혹 Publishing 를 페이지 별로 나누어 분담하여 작업할 때, MarkUp 시 잘못된 DOM 형태로 작성되는 경우가 있음.
  - ex ) span 안에 div 가 들어가 있다던지, button 안에 div 가 들어가 있다던지 등등..
• 이런 문제를 해결하고자 시멘틱 마크업 구조에 대해 간략하게 문서화 하고자 함.
  (구글링하면 나오겠지만, 한 곳으로 모아 놓은 종합본이라고 생각하시면 됩니다!👍🏻)

시멘틱 구조란 ? (Semantic Elements)

• 각 태그가 어떤 content 를 가리키는지 의도가 명확하게 드러난 태그
  • header
  • nav
  • aside
  • section
  • article
  • footer
  • … 등
    
• 무분별한 div 사용을 막고자 각 영역을 가리키는 tag 가 생기게 됨.
• 검색 엔진 최적화 기능 (SEO)
• 누구에게나 웹 접근성

문제 상황

EX1.
<span className={styles.slide_info}>
  <span className={styles.slide_creator_container}>
    <img src={profileImg} />
    <p className={styles.slide_creator}>
      {intl.formatMessage({
        id: slide.creator,
      })}
    </p>
  </span>
  <button
    className={styles.play_button}
    onClick={() => enterWorld(slide.pid)}
  >
    <i />
    <p>
      {intl.formatMessage({
        id: "ID_PLAY_BUTTON",
      })}
    </p>
  </button>
</span>

• redbrick 2.0 작업을 하면서 간헐적으로 위와 같은 코드 작업이 이루어진게 보임.
• 오류는 안나지만 태그마다 가진 기본 속성들을 고려하여 마크업 하는 것이 좋을 것 같다고 생각!🙌

html5 default Tag

1. 제목 : < H1 > ~ < H6 >
   • 대부분의 검색엔진들은 h 태그를 이용해 키워드를 찾기 때문에 정보와 검색에서 매우 중요한 태그!
2. < div >
   • 콘텐츠의 영역이나 그룹화를 할 때 사용.