헷갈리는 Semantic Tags 정리
1. <article> vs <section>
<article>: 독립적인 콘텐츠 블록을 나타내며, 자체적으로 의미가 있는 콘텐츠를 포함합니다. 블로그 포스트, 뉴스 기사, 사용자 댓글 등이 이에 해당합니다. 이 콘텐츠는 독립적으로 배포되거나 재사용될 수 있습니다.<section>: 관련된 콘텐츠의 그룹을 나타내며, 페이지나 문서의 주제와 관련된 구획을 만듭니다. 제목(<h1>,<h2>등)으로 시작해야 합니다. 주제에 따라 나뉘는 섹션이 이에 해당합니다.
2. <i> vs <em>
<i>: 단순히 텍스트를 시각적으로 이탤릭체로 표시합니다. 이 태그는 텍스트의 의미나 중요성을 바꾸지 않고 스타일만 변경합니다.(ex 외국어, 등장인물의 생각 등 일반적인 산문에서 벗어난 경우 시각적 표현을 위해)<em>: 텍스트의 강조를 나타내기 위해 사용됩니다. 스크린 리더 등 보조 기술에서 강조의 차이를 인식할 수 있게 합니다. 기본적으로 이탤릭체로 표시됩니다.
HTML5에서도 여전히 유효하지만, 의미론적 마크업을 위해 <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: 단순히 레이아웃과 스타일링을 위해 사용됩니다. 그리드 레이아웃이나 플렉스박스를 사용하여 페이지나 애플리케이션의 구조를 정의하고 디자인을 적용할 수 있습니다.