HTML <div> 대신 사용하는 것들. 바로 시맨틱(Semantic) 태그

웹사이트를 만들 때 div를 남발하는 경우가 많은데, 그렇지 않고 의미있는 태그들을 사용하는 것이 좋다. 이 태그들을 시맨틱 태그 (Semantic tag)라고 하며 "의미의"라는 뜻이다. 이것을 봄으로써 다른 사람이 만든 웹사이트를 볼 때, html 태그의 의미를 정확하게 파악할 수 있다. <div>, <span> 태그는 non-semantic 태그이고, <table>,<article>,<header> 등 밑에 나오는 태그들이다. 

header

웹사이트의 브랜드를 나타내줄 수 있는 로고나 사용자들을 위한 중요한 메뉴 아이템이 들어 있다면 <div> 대신에 <header>를 사용하는 것이 좋다. 만약 <header>안에 여러가지 메뉴들이 모여있으면 뒤에 <div> 보다는 <nav>를 사용하는 게 좋다. <nav>는 다른 페이지로의 링크를 보여주는 구획을 담당한다. 메뉴, 목차, 색인에 주로 쓰인다.

footer

웹사이트 제일 아래에 마지막으로 부가적인 정보나 링크들이 들어있다면 <footer>를 사용하는 것이 좋다. 

main, article, section, aside

현재 웹 사이트의 페이지에서 중요한 컨텐츠를 가지고 있는 부분은 <main>을 사용하는 것이 좋으며 body의 주요 콘텐츠를 나타낸다. <main> 안에서도 페이지 컨텐츠와 직접적으로 상관은 없는 부가적인 내용이 담겨있는 곳이 필요하다면 <aside>를 사용하여 광고나 또는 이 페이지와 연관된 다른 링크들을 나타내는 그런 정보들을 담아 놓으면 좋다. <main> 안에서도 <div>로만 그룹을 지어서 내용을 묶어 나가기 보다는 필요에 따라서 <ariticle>과 <section>을 이용한다면 조금 더 구조적으로 웹사이틀를 구성해 볼 수 있다. 

 

<article> => article 자체가 독립적으로 다른 페이지에 보여질 때 전혀 문제가 없을 경우 사용할 수 있다.

<main>안에서 다른 내용들과 전혀 상관없이 독립적으로 고유한 정보를 나타낼 때 사용할 수 있다. 

EX) 블로그 포스트에서 포스트 1개 / 신문 기사에서 기사 하나 그 자체를 묶어줄 때 사용한다. 

3번 째 포스트를 보여주고, 4번 째 포스트를 보여줄 때 article을 사용한다.

 

<section> => article 안에는 많은 내용들이 들어있는데 서로 관련이 있는 내용들을 묶어주고 싶을 때 <section>을 사용할 수 있다. 이것은 <article>안이나 <main>안이나 아무곳에서나 연관이 있는 내용들을 하나로 묶어줄 때 사용한다. 

EX) 한 페이지 안에 여러가지의 내용을 보여준다면 이렇게 section별로 나누고 하나의 section 안에서 또 다른 블로그 포스트를 보여준다면 <article>을 사용할 수 있다.

 

<i> 와 <em>태그 차이점

<i>는 시각적으로만 이탤릭체로 변환이 되고, 별다른 의미는 없다. 반면 <em>은 강조하는 이탤릭체이다. 고로 문장에서 내가 정말 강조하고 싶은 이탤릭체가 있다면 <em>태그를 사용해야하고, 책의 제목이나 인용구, 그냥 시각적으로만 이탤릭체로 나타내고 싶을 때는 <i> 아이템을 사용해야한다.

 

EX) 나는 너를 좋아한다 / 나는 너를 좋아한다!!!

<b> 와 <strong> 태그 차이점

<b>는 시각적으로만 볼드체를 만들 수 있고, <strong>은 정말 중요한 것, 강조하는 내용이 있을 때 사용한다. 

 

EX) 나는 너를 좋아한다 / 나는 너를 좋아한다!!!

<ul>,<ol>,<dl>태그 차이점

모두 중첩된 리스트들을 만들 수 있다(태그들안의 태그들).

<ul> un-ordered list로 순서가 없는 목록을 나타낼 때, 단순히 목록화해서 나타낼 때 사용한다. 

<ol> ordered list로 순서가 중요할 때 사용한다.

<dl>은 description-list로 단어를 정의하고 설명 목록을 만들고 싶을 때, 어떤 한 단어에 대한 설명이 묶여 있는 목록을 나타낼 때 사용한다. <dl>태그 안의 <dt>는 description-term으로 내가 원하는 단어, <dd>는 description-description에는 그에 해당하는 설명을 적으면 된다.  

<img>와 <background-image>

<img>는 이미지가 웹 페이지 안에서 하나의 중요한 요소로 자리를 잡고 있을 때 사용한다.

<background-image>는 <imgae> 태그가 문서의 내용과는 별개로 디자인 목적을 위해 배경 이미지로 사용되는 경우에 사용한다. 문서의 일부분이 아닌 경우, 이미지가 없어도 문서를 읽고 이해하는데 전혀 지장이 없을 때 css <background-image>를 사용해서 이미지를 표기하는 것이 좋다.

<button> 과 <a> 태그 차이점

둘다 실제 스타일링 해놓으면 다 버튼처럼 보이기 때문에 어떤 태그를 쓰는지 더 헷갈린다.

<button>은 리뷰, 추천, 로그인, 회원가입, 퀴즈 풀기 등 사용자의 어떤 특정한 액션을 위해서 이 버튼을 클릭했을 때, 어떤 특정한 행동이 발생하는 경우에는 버튼을 사용하는 것이 더 적절하다.

<a>는 사용자가 클릭했을 때 원래 페이지에서 다른 페이지로 이동하는 경우 또는 링크가 결려져 있는 경우에 사용한다. 

<table> 과 CSS 차이점

어떤 특정한 아이템들을 table처럼 grid형식으로 표현하기 위해서 table을 많이 이용한다. 포인트는 문서 안에서 자체적으로 의미있는 태그가 필요한건지 아니면 내가 CSS의 스타일링을 위해서 이렇게 사용하는 지 확인해야 한다.

<table>은 정말 많은 데이터의 양을 행과 열을 이용해서, 정말 테이블이 필요해서 그런 데이터를 나타내는 경우에 이용한다. 단순히 아이템을 테이블 형식으로 <grid> 형식으로 표현하기 위해서 테이블 태그를 사용하는 것은 좋지 않다.

예전에는 CSS가 많이 발달되어져있지 않아서 <table>태그를 이용해서 스타일링을 했는데, 요즘에는 <table>을 사용하기보다는 CSS flex나 grid를 이용해서 조금 더 유연하고 아름답게 디자인을 할 수 있다. 

html의 Semantic 태그들

여기에 위에 설명했던 태그들에 대한 설명이 잘 나와있다. 

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