시맨틱 태그 완벽 설명: 웹사이트 구조와 SEO 향상 비결
CSS 24.08.14시맨틱 태그(Semantic Tag)는 HTML5에서 도입된 태그들로, 문서의 구조와 의미를 명확하게 나타내는 역할을 합니다. 이 태그들은 웹 콘텐츠의 의도를 명확히 하고, 검색 엔진, 스크린 리더 등의 도구가 문서의 구조를 이해하기 쉽게 만듭니다. 시맨틱 태그를 사용하면 HTML 문서가 더 이해하기 쉬워지고, 유지보수와 접근성도 향상됩니다.
시맨틱 태그의 장점
- 가독성 향상: 시맨틱 태그를 사용하면 코드가 더 직관적이고 읽기 쉬워집니다.
- SEO 최적화: 검색 엔진이 콘텐츠의 구조와 중요성을 더 잘 파악할 수 있습니다.
- 접근성 향상: 스크린 리더와 같은 도구들이 콘텐츠를 쉽게 해석하여 사용자에게 전달할 수 있습니다.
- 유지보수 용이: 문서의 구조가 명확하여 코드의 유지보수가 용이해집니다.
section 과 article 의 차이
- 의미와 목적: section은 문서 내에서 관련된 콘텐츠를 그룹화하기 위한 것이고, article은 독립적인 콘텐츠를 나타내는 데 사용됩니다.
- 중복 사용: section은 문서 내에서 여러 번 사용되며, 각 섹션은 고유한 주제를 나타냅니다. 반면 article은 독립적으로 사용되기 때문에 독립적인 콘텐츠에 여러 번 사용될 수 있습니다.
- 구조: section은 큰 범위의 구조를 나타낼 수 있고, 그 안에 article을 포함할 수 있습니다. article 내에는 또 다른 section이 있을 수 있지만, 그 반대는 보통 잘 하지 않습니다.
[예제]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <body> <header> <h1>웹 페이지 제목</h1> <nav> <ul> <li><a href="#home">홈</a></li> <li><a href="#about">소개</a></li> <li><a href="#services">서비스</a></li> <li><a href="#contact">연락처</a></li> </ul> </nav> </header> <main> <section id="home"> <h2>홈 섹션</h2> <p>홈 섹션의 내용...</p> <figure> <img src="home-image.jpg" alt="홈 이미지"> <figcaption>홈 섹션의 이미지 설명</figcaption> </figure> </section> <section id="about"> <h2>소개 섹션</h2> <p>소개 섹션의 내용...</p> </section> <article> <h2>기사 제목</h2> <p>기사 내용...</p> <time datetime="2024-08-14">2024년 8월 14일</time> </article> <aside> <h3>부가 정보</h3> <p>부가적인 정보나 링크...</p> </aside> </main> <footer> <p>© 2024 회사 이름. 모든 권리 보유.</p> <p><a href="privacy-policy.html">개인정보 처리방침</a></p> </footer> </body> | cs |