접근성 모범 사례도 함께 참고합니다.

시맨틱 요소#

시맨틱 요소는 담고 있는 데이터에 표현이 아닌 의미를 부여하는 HTML 태그입니다. 예를 들면 다음과 같습니다.

• <article>
• <nav>
• <strong>

시맨틱 태그를 우선 사용하되, 의도가 그 태그의 의미와 정확히 맞는 경우에만 사용합니다. 각 태그가 의미상 무엇을 뜻하는지는 MDN 문서에서 확인합니다.

<!-- bad - could use semantic tags instead of div's. -->
<div class="...">
  <p>
    <!-- bad - this isn't what "strong" is meant for. -->
    Simply visit your <strong>Settings</strong> to say hello to the world.
  </p>
  <div class="...">...</div>

</div>

<!-- good - prefer semantic classes used accurately -->
<section class="...">
  <p>
    Simply visit your <span class="gl-font-bold">Settings</span> to say hello to the world.
  </p>
  <footer class="...">...</footer>
</section>

버튼#

버튼 타입#

W3C HTML 명세에 따라 button 태그에는 type 속성이 필요합니다.

// bad
<button></button>

// good
<button type="button"></button>

링크#

새 탭 열기#

링크를 임의로 새 탭에서 여는 방식은 권장하지 않으므로, 링크에 target="_blank"를 추가할지 검토할 때는 링크에 관한 Pajamas 가이드라인을 참고합니다.

a 태그에 target="_blank"를 사용할 때는 rel="noopener noreferrer" 속성도 함께 추가해야 합니다. 이렇게 하면 JitBit 이 정리한 보안 취약점을 방지합니다.

gl-link를 사용할 때는 링크에 rel="noopener noreferrer"가 자동으로 추가되므로 target="_blank" 만으로 충분합니다.

// bad
<a href="url" target="_blank"></a>

// good
<a href="url" target="_blank" rel="noopener noreferrer"></a>

// good
<gl-link href="url" target="_blank"></gl-link>

가짜 링크#

가짜 링크는 사용하지 않습니다. 링크가 JavaScript 클릭 이벤트 핸들러만 호출한다면 의미상 더 알맞은 button 태그를 사용합니다.

// bad
<a class="js-do-something" href="#"></a>

// good
<button class="js-do-something" type="button"></button>