헷갈리는 Semantic Tags 정리
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: 단순히 레이아웃과 스타일링을 위해 사용됩니다. 그리드 레이아웃이나 플렉스박스를 사용하여 페이지나 애플리케이션의 구조를 정의하고 디자인을 적용할 수 있습니다.