HTML 작성할 때 시맨틱 하게 작성하는 것이 굉장히 중요합니다. 그럼 시맨틱 하게 HTML작성을 어떻게 해야 할까요? 바로 HTML 태그를 상황에 따라서 의미 있게 작성하면 된다. <div>처럼 의미 없는 태그들을 막무가내로 쓰는 게 아닌 <section>, <arcticle>, <aside>, <header>, <footer>, <nav>...처럼 의미 있는 태그를 상황에 따라 사용하는 것이 시맨틱 하게 작성하는 방법이다.
장점:
- 의미 있는 태그를 씀으로써 코드 가독성이 높아진다. HTML 문서를 봤을 때 정확히 무슨 정보를 담고 있는지 한눈에 파악하기 쉬워지기 때문이다.
- 검색엔진(SEO) 최적화에 도움이 된다. HTML의 계층 구조를 통해서 중요도를 파악하고 우선순위를 매겨서 노출을 해주기 때문에 시맨틱 하게 작성된 HTML에는 더 구체화한 정보를 제공할 수 있게 됩니다.
의미 있는 태그 상황에 맞게 사용하려면 먼저 의미 있는 태그들이 뭐가 있는지 알아야 한다.
위 사진 토대로 가장 많이 사용되는 시맨틱 태그들은 뭐가 있는지 한편 살펴보겠습니다
<header>:
제목이나 대표 이미지가 들어가는 요소입니다. 위 사진처럼 <body> 태그 바로 하위로 들어가면 그 전체 페이지를 대표하는 제목이라고 할 수 있습니다. <article>, <section> 같은 section content 단위 태그 안에서 사용되면 해당 섹션에 대표 제목이나 로고 사진으로 지정할 수 있다.
<h1>~<h6>:
각 섹션의 제목을 지정해주는 태그 숫자가 낮을수록 폰트 사이즈가 크다.
<nav>:
보통 다른 페이지 또는 내 문서의 특정 영역(탐색 링크가 있는 섹션)으로 이동시키는 링크를 나타낸다.
우리가 익히 알고있는 웹사이트 네비바 역할이라고 보면 된다.
<section>:
페이지의 단일 부분을 그룹화하는 데에 유용한 요소입니다. 예를 들어 기사 헤드라인 모으거나 각 블로그의 피드 정보가 나타나는 영역으로 사용이 됩니다.
섹션에는 매우 소수의 예외를 제외하고 항상 제목이 있는 것이 일반적이다.
<article>:
그 자체로 의미가 있는 웹사이트의 부분이며, 독립적으로 배포 또는 재사용되도록 의도된 문서이다. 게시물, 잡지 또는 신문 기사, 블로그 작성글, 제품 카드, 사용자가 제출한 댓글, 대화형 위젯 등이 있다.
<aside>
기본 콘텐츠와 직접적인 관계는 없고 간접적으로 관계가 때 관련된 정보들을 포함하는 요소입니다 예를 들어서 잡지 익숙하지 않은 키워드가 있는데 해당 키워드에 대한 설명 혹은 인용처럼 간접적인 정보들을 다룰 때 사용하면 된다.
<footer>
<header>와 같이 section Content 기준으로 바닥 내용을 장식해줄 태그입니다.
<aside>
<p>body, section, article, aside, nav 등이 header, footer 태그들을 사용할 수 있다</p>
</aside>
댓글