시맨틱 태그는 웹 페이지의 구조를 명확하게 하여 접근성과 SEO를 향상시키는 데 중요한 역할
블록 요소 (Block Elements)
블록 요소는 페이지의 너비 전체를 차지하며, 다른 요소와 구분된 새로운 줄에서 시작됨. w와 h를 설정할 수 있음
-
<article>:
독립적으로 구분된 콘텐츠를 나타냄
블로그 게시물, 뉴스 기사, 제품 리뷰 등 독립적으로 배포하거나 재사용할 수 있는 독립형 콘텐츠를 정의 -
<aside>:
주요 콘텐츠 외의 추가적인 콘텐츠를 나타냄
페이지 콘텐츠를 제외한 콘텐츠를 정의
주로 문서에서 사이드바를 놓기 위해 사용 -
<details>:
사용자가 볼 수 있는 추가 세부 정보를 제공함
사용자와 상호작용이 가능하다는 점이 특징이며, 사용자는 버튼을 통해 열고 닫을 수 있 -
<dialog>:
대화 상자나 모달 창을 나타냄 -
<div>:
일반적인 컨테이너 요소 (시맨틱 요소 아님) -
<footer>:
섹션이나 페이지의 바닥글을 나타냄
일반적으로 연락처 정보, 사이트 맵, 웹사이트를 하나로 묶고 SEO를 강화하는 데 도움이 되는 소셜 미디어 사이트에 대한 링크와 같은 추가 링크가 포함 -
<header>:
섹션이나 페이지의 머리글을 나타냄
로고, 탐색, 제목 및 기타 소개 정보가 포함된 페이지 상단 부분을 정의
메타 태그 정보, 키워드, 심지어 가져온 CSS 파일이나 스타일 시트도 포함되는 경우가 많음 -
<main>:
문서의 주요 콘텐츠를 나타냄
문서에서 유일해야 하고,<article>, <aside>, <footer>, <header>, <nav>등 모든 페이지의 태그 앞에 옴 -
<nav>:
네비게이션 링크를 포함하는 섹션을 나타냄 -
<section>:
기본 콘텐츠 내의 특정 주제 또는 부제목과 관련된 주제별 콘텐츠 그룹을 정의 -
<figure>:
자립형 콘텐츠를 나타냄
일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함된 콘텐츠를 지정
보통<figcaption>과 함께 사용됨 -
<figcaption>:
<figure>요소에 대한 캡션을 정의하며, 문서에서 사진의 설명을 추가하기 위해 사용
‘Caption’이라는 단어 자체가 이미지에 대한 간략한 설명을 의미하는 만큼,<figcaption>은<figure>에 대한 간략한 설명
article과 figure의 차이는?
| 항목 | <article> | <figure> |
|---|---|---|
| 의미 | 독립적인 콘텐츠 블록 | 시각적 자료나 설명이 포함된 보조 콘텐츠 |
| 예시 | 뉴스 기사, 블로그 글, 사용자 리뷰 | 이미지, 그래프, 코드 스니펫 |
| 독립성 | 문서 외부에 있어도 자체 콘텐츠로 의미가 있음 | 메인 콘텐츠에 의존적인 보조자료 |
| 관계 | figure는 종종 article 안에서 사용됨 | 보조 자료로 설명 캡션(figcaption)과 함께 쓰임 |
예시 코드
<article>
<h2>서울 여행 후기</h2>
<p>이번 여름에 서울을 여행했는데...</p>
<figure>
<img src="seoul.jpg" alt="서울 야경" />
<figcaption>서울 야경 사진</figcaption>
</figure>
</article>인라인 요소 (Inline Elements)
-
<a>:하이퍼링크를 나타냄 -
<abbr>:약어를 나타냄 -
<b>:중요하지 않은 문구를 굵게 표시함 -
<cite>:참조나 출처를 나타냄 -
<code>:코드 스니펫을 나타냄 -
<em>:강조된 텍스트를 나타냄 -
<i>:기울임꼴 텍스트를 나타냄 -
<mark>:하이라이트된 텍스트를 나타냄 -
<q>:짧은 인라인 인용문을 나타냄 -
<small>:작은 텍스트를 나타냄 -
<span>:비시맨틱 컨테이너로, 텍스트의 일부를 스타일링하거나 스크립트로 조작할 때 사용됨 -
<strong>:중요한 텍스트를 나타냄 -
<sub>:하위 텍스트를 나타냄 -
<sup>:상위 텍스트를 나타냄 -
<time>:날짜나 시간을 나타냄참고 블로그
