refactor: Semantic HTML Tags Guide - Githubissues

ucharles / gachatory

https://www.gachatory.com

0 stars 0 forks source link

refactor: Semantic HTML Tags Guide #128

Open ucharles opened 6 months ago

ucharles commented 6 months ago

시맨틱 HTML 태그

웹 페이지의 구조를 명확하게 하고 컨텐츠의 의미를 더 잘 전달하기 위해 사용
SEO에도 중요한 역할. 기계가 웹 페이지를 잘 읽을 수 있게 함.

페이지당 하나만 써야하는 태그

\

페이지의 주제나 콘텐츠의 중심점
\
, \
... 또한 계층적으로 사용할 것을 권장
\
안에 포함시킬 것을 권장
\
, \
마다 \
태그를 사용할 수도 있음.
중요한 것은 문서의 구조를 체계적으로 명확하게 표현하는 것.
\
웹 페이지의 주요 콘텐츠.
\

\

\</h3> <h3>\<html></h3></li> </ul> <h2>그외</h2> <h3>\<header></h3> <ul> <li>로고, 내비게이션 바, 검색 폼 등을 포함.</li> <li>페이지의 시작부에 사용되거나, 특정 \<article> 혹은 \<section>과 같은 개별 섹션의 헤더로 사용됨</li> <li>\<header>에 \<nav>가 포함될 수 있지만 반드시 그래야 하는 것은 아님. <h3>\<footer></h3> <h3>\<nav></h3></li> <li>사용자가 사이트 내에서 다른 페이지로 이동할 수 있게 돕는 네비게이션 링크의 그룹 <h3>\<article></h3></li> <li>독립적으로 재배포하거나 재사용할 수 있는 콘텐츠 영역을 정의합니다. 예를 들어, 블로그 포스트, 뉴스 기사, 사용자 코멘트 등이 이에 해당합니다. <h3>\<section></h3></li> <li>\<section> 태그는 문서나 애플리케이션의 일반적인 섹션을 나타냅니다. 이는 주제별로 구분된 콘텐츠 영역을 그룹화하는 데 사용되며, 챕터, 탭, 카드 등이 \<section> 으로 표현될 수 있습니다.</li> </ul> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>