HTML 태그들 시맨틱 마크업

HTML 시맨틱 마크업

HTML에는 다양한 태그들이 있습니다.
시맨틱 마크업은 웹 문서의 구조와 의미를 명확하게 표현하기 위해 사용되는 HTML 태그의 사용을 말합니다. 시맨틱이라는 용어는 문서의 의미나 구조를 설명하는 것을 의미합니다.
웹 페이지의 접근성이 향상되도록 그 의미에 맞게 마크업을 하는 것이 중요하겠습니다.

<header>

<header> 태그는 HTML 문서에서 웹 페이지의 머리말 입니다.
주로 제목이나 로고 검색 폼 등 이 들어갑니다.

<main>

<main> 태그는 웹 페이지의 주요 콘텐츠를 정의하는 태그입니다.
이 태그는 웹 페이지의 중심이 되고, 검색 엔진 및 웹 브라우저가
해당 부분을 주요 콘텐츠로 인식합니다.
<main> 태그는 HTML 페이지에서 한번만 사용해야 합니다.

<footer>

<footer> 태그는 웹 페이지에서 하단 부분을 정의합니다.
이 태그는 주로 페이지 하단에 위치하며,
사이트 관련 링크나 사이트맵, 연락처 등 보조적인 내용을 담습니다.

<nav>

<nav> 태그는 내비게이션을 정의하는 태그입니다.
주로 웹 사이트의 메뉴에 쓰입니다.

<section>

<section> 태그는 콘텐츠 섹션을 나타냅니다.
주로 콘텐츠들을 그룹화 하는데 사용 됩니다.
섹션은 특정 영역이나 주제를 나타내며,
그 섹션에는 그에 맞는 내용이 포함되어야 합니다.

<article>

<article> 태그는 주로 뉴스 기사나 블로그 글과 같이
독립된 내용을 나타내는데 사용 됩니다.
article 태그를 사용하면 검색엔진 및 웹 브라우저가
해당 부분을 독립된 콘텐츠로 인식하게 됩니다.
해당 콘텐츠의 독립성과 중요성을 강조할 수 있습니다.

<aside>

<aside> 태그는 주로 사이드바, 광고, 사이트의 부가 정보 등 과 같은
내용을 나타냅니다. 웹 페이지의 주요 내용과는 관련이 적은 내용을 포함합니다.

결론

시맨틱 마크업은 웹 표준을 준수하고 검색 엔진 최적화에 도움을 주므로,
웹 개발자들은 가능한 시맨틱 마크업을 적극적으로 활용하는 것이 좋습니다.