1. article vs aside
두 태그는 모두 독립적인 콘텐츠 블록을 나타내지만, 핵심 차이점은 '페이지의 중심 내용인지, 보조 내용인지' 입니다.
| 태그 | 설명 |
|---|
<article> | 문서의 주요 흐름에 포함되지만, 독립적인 콘텐츠 블록. 뉴스 기사, 블로그 글, 사용자 후기, 게시글, 제품 설명 등 스스로 완결된 정보 단위를 표현 |
<aside> | 페이지의 보조적인 정보 영역. 광고, 관련 기사, 작성자 정보, 사이드바, 태그 목록 등에 사용. 스크린리더는 이 영역을 "보조 콘텐츠 구역"으로 인식 |
2. i vs em
| 태그 | 설명 |
|---|
<i> | 의미를 강조하지 않고, 단순히 텍스트를 시각적으로 이탤릭체로 표시. 외국어, 등장인물의 생각, 기술 용어 등 문맥과 구분되는 표현에 사용 |
<em> | 텍스트의 의미적 강조를 나타냄. 스크린 리더 등 보조 기술에서 강조의 차이를 인식. 기본적으로 이탤릭체로 표시 |
3. em vs strong
| 태그 | 설명 |
|---|
<em> | 문맥상의 강세 및 강조를 나타냄. 문장의 강조점을 바꾸거나 특정 부분을 강조할 때 사용하며, 중첩 사용 가능 |
<strong> | 더 '강한 중요성'이나 '긴급성'을 나타냄 |
4. img vs CSS background
| 구분 | 설명 |
|---|
<img> | 이미지가 웹 페이지에서 하나의 중요한 요소로 자리 잡고 있을 때 사용. HTML 문서에 직접 삽입되어 SEO 및 접근성 측면에서 중요. alt 속성을 통해 대체 텍스트 제공 |
| CSS background | 디자인이나 스타일링 목적으로 사용. 배경 이미지로 사용되며, 문서의 일부분이 아닌 시각적 장식 요소 |
5. button vs a
| 태그 | 설명 |
|---|
<button> | 폼 제출, 자바스크립트 액션 트리거 등 사용자의 특정 액션에 의해 특정 행동이 발생하는 경우 사용 |
<a> | 페이지 간 이동, 외부 사이트로의 링크 등을 위해 사용. href 속성을 사용하여 목적지 URL을 지정 |
6. table vs CSS
| 구분 | 설명 |
|---|
<table> | 데이터의 행과 열을 기반으로 구조화된 정보를 표시. 표 형식의 데이터를 표현할 때 사용 |
| CSS | 단순히 레이아웃과 스타일링을 위해 사용. 그리드 레이아웃이나 플렉스박스를 사용하여 페이지나 애플리케이션의 구조를 정의하고 디자인을 적용 |