[HTML] 헷갈리는 태그들 정리

 

---

HTML 로고

---

HTML 작업을 하다 보면 너무 자주 사용해서 전부 아는 것 같지만, 막상 각 태그들의 정확한 사용 시점이 헷갈리는 순간들이 생기곤 합니다. 그래서 이번에 마음먹고, 자주 헷갈리는 HTML 태그들을 묶어서 비교/정리해보았습니다.

 

 

< article >   vs.   < section > 

먼저 시멘틱(sementic) 태그인 섹션(section) 태그와 아티클(article) 태그에 대해서 알아보도록 하겠습니다. 먼저 article 태그의 경우, 블로그를 예로 들자면, 블로그에 있는 수많은 포스트들 중, 포스트 하나. 신문 기사를 예로 들자면, 수많은 신문 기사들 중 기사 하나를 규정할 때 사용합니다. article 태그는 그 자체로 독립성을 갖기 때문에 article 태그 부분만 덩그러니 다른 페이지에 노출시켜도 전혀 문제가 발생하지 않을 때 사용할 수 있습니다. 한편, 이런 article 안에는 많은 내용들이 들어있을 텐데, 이때, 그 내용들 중에서 서로 연관 있는 내용들만 따로 묶어주고 싶은 경우, section 태그를 사용할 수 있습니다. 즉, 섹션 태그는 메인(main)이나, 아티클(article), 혹은 기타 어디서든, 서로 연관있는 내용들을 하나로 묶어줄 때 사용할 수 있습니다.

 

 

< i >   vs.   < em >

화면 상으로 보면 두 태그 모두 이탤릭체로 표기가 되기 때문에 똑같아 보이지만, 이것을 스크린 리더로 읽게 된다면 em태그는 강조가 되는 반면, i태그는 그렇지 않습니다. 즉, i태그는 시각적으로만 이탤릭체로 변환되고 별다른 의미가 부여되지 않는 반면, em태그는 강조의 의미가 더해지는 이탤릭체라는 뜻입니다. 따라서 문장 내에서 본인이 정말 강조하고 싶은 이탤릭체가 있는 경우, em 태그를 사용하는 게 좋고, 반대로 책의 제목이나, 인용구, 혹은 단순히 시각적으로만 이탤릭체로 표기하고 싶은 경우, i 태그를 사용하시는 게 좋습니다.

 

 

< b >   vs.   < strong >

이번엔 b 태그와 strong 태그의 차이점에 대해 알아보겠습니다. 이 둘의 차이도 i 태그와 em 태그와 유사합니다. b 태그는 시각적으로만 볼드체로 표기되는 반면, strong 태그는 강조의 의미를 담은 볼드체라고 생각하시면 됩니다. 즉, 정말로 중요해서 해당 단어나 문장을 강조하고자 할 때 사용하시는 것이 좋습니다. i 태그와 em 태그, b 태그와 strong 태그는 눈에 보이는 결과가 비슷하기 때문에 그 차이점에 대해 간과하고 사용하는 경우가 많습니다. 이번 계기에 이들의 차이점을 명확히 하신다면, HTML로 보다 정확한 개발자의 의도를 전달하실 수 있을 것입니다.

 

 

---

 

---

 

< ol >   vs.   < ul >   vs.   < dl >

html 태그에서 목록을 나타낼 때 사용하는 ol, ul, dl 태그들의 차이점에 대해서 알아보도록 하겠습니다. Unordered List의 약자인 ul 태그는 순서가 필요 없는 목록을 나타낼 때 사용할 수 있습니다. 반면, 목록들의 순서가 중요한 경우 Ordered List의 약자인 ol 태그를 사용해서 순서를 표기하는 게 좋습니다. 한편, Description List의 약자인 dl 태그는 어떤 단어나 혹은 문장에 대한 정의와 그에 대한 설명을 나타내는 목록을 만들고자 할 때 사용할 수 있습니다. Description Term을 뜻하는 dt 태그는 개발자가 설명하고자 하는 단어, Description Detail을 의미하는 dd 태그에는 그 단어에 해당하는 설명을 적으시면 됩니다.  

 

 

< img >   vs.   (css에서) background-image

이미지가 웹페이지 안에서 하나의 중요한 요소로 자리잡고 있는 경우, html에서 img 태그를 이용해 이미지를 만드는 것이 좋습니다. 반면, 이미지 태그가 문서의 내용과는 별개로 단순히 스타일링의 목적을 위해서, 단순 배경 이미지로만 사용되는 경우, 즉, 문서의 일부분이 아닌 경우라면,  css의 background-image를 이용해서 이미지를 삽입하는 게 좋습니다. 이미지가 문서의 일부분이 아닌지의 여부를 판단하는 기준은, 이미지가 없어도 해당 문서를 읽고 이해하는데 전혀 지장이 없다면, background-image를 사용하는 게 적합합니다.

 

 

< button >   vs.   < a >

CSS로 스타일링을 거치고 나면, 최종적으론 button 태그나 a 태그 모두 버튼 모양이기 때문에 자칫 이 둘의 차이점에 대해 간과할 수 있습니다. 예를 들면, 로그인, 로그아웃, 추천, 댓글 작성 등 클릭을 통해 사용자의 특정한 목적이 담긴 행위가 이루어져야 하는 경우라면, button 태그를 사용하는 게 좋습니다. 반면, 사용자가 다른 페이지로 이동, 혹은 페이지 내에서 어딘가로 이동 즉, 단순한 이동을 목적으로 한 링크만이 필요한 경우에는 a 태그를 사용하는 게 적합합니다. 

 

 

< table >   vs.   CSS

행과 열로 이루어진 많은 양의 데이터가 필요한 경우 table 태그를 사용할 수 있지만, 단순히 아이템들을 테이블 형식으로 즉, 그리드(grid) 처럼 표현하기 위해서 테이블 태그를 사용하는 것은 바람직하지 않습니다. CSS가 많이 발전하지 않았던 과거에는 테이블 태그를 이용해서 스타일링을 하곤 했지만, 최근엔 CSS의 flex나 grid를 통해 보다 유연하고 아름다운 스타일링을 할 수 있게 됐기 때문입니다.

 

 

---

이밖에도 다양한 HTML 태그들이 존재하는데, 더 많은 태그들에 대해 알고 싶다거나, 각각의 태그들에 대한 보다 자세한 설명이 궁금하시다면, 아래 링크를 참고하시기 바랍니다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element

HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN

 

---