반응형
본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
HTML5는 웹 개발자들이 웹 페이지의 구조를 명확하게 표현할 수 있도록 다양한 시멘틱 태그를 도입했습니다. 이들 태그를 사용하면 검색 엔진이 페이지의 각 부분을 더 잘 이해하고, 웹 접근성 도구가 사용자에게 콘텐츠를 더 효과적으로 전달할 수 있습니다.
다음은 주요 HTML5 시멘틱 태그의 예입니다:
- <header>: 페이지의 상단 부분을 표시하며, 주로 로고, 제목, 주 메뉴 등을 포함합니다.
- <nav>: 네비게이션 링크들을 그룹화하는데 사용됩니다. 사이트의 주요 링크나 메뉴를 포함합니다.
- <main>: 웹페이지의 핵심 콘텐츠를 나타냅니다. <main>은 고유한 콘텐츠를 표시하는데 사용되며 페이지 당 한 번만 사용되어야 합니다.
- <article>: 독립적으로 재배포하거나 재사용할 수 있는 콘텐츠 영역을 표시합니다. 블로그 게시물, 사용자 댓글, 포럼 게시물 등이 이에 해당합니다.
- <section>: 페이지의 다른 부분과 구분되는 특정 영역을 나타냅니다. 각 섹션은 일반적으로 자체 제목을 가지고 있습니다.
- <aside>: 페이지의 주 콘텐츠와 부분적으로 관련된 콘텐츠를 나타냅니다. 이는 사이드바나 풀아웃 박스 등의 형태로 표시될 수 있습니다.
- <footer>: 페이지나 섹션의 하단을 나타냅니다. 저작권 정보, 작성자 정보, 관련 링크 등을 포함할 수 있습니다.
- <figure> , <figcaption>: 콘텐츠를 설명하는 이미지나 캡션을 나타내는데 사용됩니다.
- <details> , <summary>: 사용자가 선택적으로 볼 수 있는 추가 정보를 표시하는데 사용됩니다. <summary>는 기본적으로 보이는 제목이고, <details>는 제목을 클릭했을 때 표시되는 내용입니다.
- <mark>: 사용자의 주의를 끌기 위해 텍스트 내에서 특정 부분을 강조하는데 사용됩니다.
- <time>: 사람이 읽을 수 있는 시간과 기계가 읽을 수 있는 시간을 동시에 제공하는데 사용됩니다.
시멘틱 태그를 사용하면 코드의 가독성을 높이고, 웹 접근성을 향상시키며, SEO를 개선하는 데 도움이 됩니다. 웹 개발에서는 이런 태그들의 사용이 매우 중요합니다
반응형