HTML 태그 정리

1. semantic Tags

- 너무 div 태그만 사용하지 말고 아래처럼 의미있게 써보자!!!

 

2. <article> vs <section>

• <article>: 블로그에서 포스트 1개, 신문기사에서 기사 1개 자체를 묶을때. 자체만으로 독립적으로 다른 페이지에 보여줬을 때 전혀 문제 없을 때 사용. =⇒ 메인 안에 있는 다른 내용들과 전혀 상관 없이, 독립적으로 고유한 정보를 나타낼 때 사용
• <section>: article 안에 서로 연관있는 내용들을 묶어 주고 싶을 때.

 

3. <i> vs <em>

화면 같으면 읽을때는 최애!! 를 강조하게 됨.

즉,

• <i>: 시각적으로만 이탤릭 체로 변환됨. 별다른 의미 없음! (ex. 책의 제목, 인용구)
• <em>: 강조하는 이탤릭채.

 

4. <b> vs <strong>

• <b>: 시각적으로만 볼드체.
• <strong>: 정말 중요한 볼드체!

 

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

• <ol>: 순서가 중요함.
• <ul>: 순서가 없는 목록을 나타낼 때. 단순히 목록으로만 나타낼 때 사용.
• <dl>: 한 단어에 대해 설명이 묶여 있을때 그 목록을 나타낼 떄 사용. (ex. 정의, 설명 목록)

 

6. <img> vs css <background>

• <img>: 하나의 중요한 요소로 자리 잡을 때. html 문서 내에서.
• <background>: 이미지 태그가 문서의 내용과는 별개로 스타일링으로만 사용할 경우. html 문서 일부가 아닐 때 사용.

 

7. <button> vs <a>

• <button>: 특정한 액션을 위해 사용.(ex. 로그인)
• <a>: 사용자가 클릭 후 다른 페이지로 이동할 때 사용.

 

8. <table> vs CSS

• <table>: (행+열) 데이터!
• CSS: 단순히 데이터들을 table 형식으로만 표현 할 때 사용. —> 요즘은 flex, Grid 사용.

 

출처: 드림코딩 엘리