Semantic Web을 만들기 위해 'SEO, 웹 접근성, 개발자들이 이해하기 쉽고 유지보수에 용이한' Semantic Tag를 사용하는 것이 중요하다는 점은 당연한 사실로 알고 있습니다.
하지만 우리가 Markup하면서 특정 기능을 구현하기 위해 둘 중에 어떤 태그를 사용해야할지 고민한 적이 많습니다.
여러 종류의 태그가 있지만 각자 다른 역할이 있기 때문에 상황에 맞게 Smantic Tag를 사용해야 합니다.
HTML Semantic Tag는 정답이 없으나 적절한 시맨틱 태그를 사용해 콘텐츠를 만들 때 참고하면 좋을 것 같습니다.
<article> vs <section>
⁎ <article>은 한 개의 포스트나 기사를 묶어줄 때 사용합니다. article 태그로 묶인 요소 자체만으로 독립적이기 때문에 다른 페이지에 위치해도 전혀 문제가 없습니다.
article을 감싸는 main 안에 있는 다른 요소들과 전혀 상관없이 독립적으로 고유한 정보를 나타낼 때 사용합니다.
⁎ <section>은 서로 연관 있는 내용들을 하나로 묶어줄 때 사용하며, 이와 같은 목적이라면 article 태그 안이든 밖이든 상관없이 위치할 수 있습니다.
<i> vs <em>
⁎ <i>는 제목이나 인용구처럼 시각적으로만 이탤릭체(비스듬히)로 나타낼 때 사용합니다.
⁎ <em>는 이탤릭체로 나타내며 강조하는 의미를 갖고있습니다.
시각 장애인들이 사용하는 screen reader는 em 태그로 감싼 단어를 강조하여 읽어줌으로써 의미를 좀 더 쉽게 파악할 수 있습니다.
<b> vs <strong>
⁎ <b>는 시각적으로만 볼드체(굵게, 진하게)로 나타낼 때 사용합니다.
⁎ <strong>는 볼드체로 나타내며 매우 중요해서 강조해야 하는 단어나 문장에 사용합니다.
em 태그와 유사하게 screen reader는 strong 태그로 감싼 단어를 강조하여 읽어줍니다.
html에서 <img> vs css에서 <background-image>
⁎ <img>는 웹페이지 안에서 중요한 요소로 자리잡을 때 html에서 자체적으로 포함되도록 태그를 사용해 작성합니다.
⁎ <background-image>는 문서 안에 중요한 부분으로 차지하지 않고 단순히 스타일링 목적을 위해 배경 이미지와 같이 사용되는 경우 css에서 작성합니다. 해당 내용이 없어도 문서를 이해하는데 아무 문제가 없다면 css로 나타내는 것이 적절합니다.
<button> vs <a>
⁎ <button>은 'Review, Login, Sign up'과 같은 경우 사용되며, 특정한 액션(로그인, 퀴즈 풀기 등)에 대한 사용자의 행동(버튼 클릭)이 발생할 때 사용합니다.
⁎ <a>은 사용자가 클릭하면 다른 링크로 이동하는 경우 사용합니다.
<ol> vs <ul> vs <dl>
⁎ <ol>은 순서가 중요한 목록('1, 2, 3..' 으로 표시)을 표현할 때 사용합니다.
⁎ <ul>은 순서 없이 단순히 목록('•' 으로 표시)화할 때 사용합니다.
⁎ <dl>은 문장 또는 단어와 그에 대한 설명에 대한 목록으로 묶을 때 사용합니다.
그 안에 <dt>(단어)와 <dd>(설명)를 사용해 작성합니다.
<table> vs CSS
⁎<table> 많은 양의 데이터를 행과 열을 테이블을 이용해 나타낼 때 사용합니다.
⁎ 단순히 테이블 형식으로 나타내고자 할 때는 CSS에서 'Flex, Grid'를 사용해 스타일링 할 수 있습니다.
문서 안에서 자체적으로 의미있는 경우 ⇨ HTML 태그
단순히 스타일링만을 위한 경우 ⇨ CSS 속성
