시맨틱 마크업

🏹 시맨틱 마크업

컴퓨터(브라우저)가 잘 이해할 수 있도록 하는 코드
의미에 맞는 적절한 HTML 요소를 사용하며, 문서를 잘 구조화해주면
기계뿐만 아니라 사람도 이해하기 쉬운 코드가 된다!

• <b>, <i>, <u>, <s> → 의미 없이 단순히 스타일을 표현하는 태그
• <strong>, <em>, <ins>, <del> → 내용 강조, 추가 및 삭제의 의미를 지니는 태그

---

🏹 HTML5 시맨틱 요소

태그	설명
<article>	문서 내에서 독립적인 콘텐츠를 나타내는 태그 광고, 신문 기사, 위젯 또는 독립적인 아이템
<aside>	주요 내용과 직접적인 연관성이 없는 분리된 내용을 담고 있는 태그 주로 사이드바의 형태로 나타냄
<figcaption>	부모 태그인 figure 태그의 내용들에 대한 제목을 나타내는 태그
<figure>	일러스트, 다이어그램, 사진, 코드 등에 주석을 다는 용도의 태그
<footer>	저작권 정보나 서비스 제공자 정보 등을 나타내는 태그 주로 사이트 하단에 위치함
<header>	문서의 제목, 소개를 나타내는 태그 일반적으로 섹션의 제목이 들어감
<main>	현재 문서의 주된 콘텐츠를 작성하는 영역의 태그
<mark>	하나의 문서 내에서 다른 문맥과의 관련성을 나타내기 위해 참조 목적으로 마킹되거나 하이라이트된 텍스트를 표현하는 태그
<nav>	네비게이션 링크로 구성된 섹션을 표현하는 태그
<section>	문서나 응용 프로그램의 일반적인 섹션을 표현하는 태그 제목으로 시작하는 콘텐츠를 의미적으로 그룹핑하기 위해 사용되며, 단순 스타일링이 목적이라면 div 태그가 권장됨
<time>	시간 또는 정밀한 날짜를 나타내는 태그