시맨틱 (Semantic) HTML에 대해

웹 개발 (Frontend Developer)/HTML

Jackykim 2024. 7. 30. 01:47

시맨틱 (Semantic) HTML은 HTML 태그에 의미를 부여하여 그 태그가 어떤 역할을 하는지 명확하게 하는 것을 의미합니다.

시맨틱 HTML의 장점

1. 웹 크를러가 웹페이지나 웹사이트를 쉽게 인덱싱할 수 있습니다

2. 스크린 리더와 같은 보조 기술이 적용되면서 콘텐츠를 더 잘 이해할 수 있습니다.

3. 개발자가 코드의 구조를 더 쉽게 이해 및 작성 할 수 있습니다.

주요 시맨틱 태그와 역활

1. <Header> : 웹페이지의 소개 영역을 정의합니다.

2. <Nav> : 웹페이지의 내비게이션 항목을 지정합니다. (홈, 연락처, 정보 등등)

3. <Main> : 문서의 주요 콘텐츠를 포함합니다. <Header>와 <Footer>를 제외합니다.

4. <Section> : 웹 페이지의 특정 영역을 정의합니다.

5. <Article> : 독립적인 콘텐츠를 나타냅니다. 텍스트, 이미지, 동영상등 조합이 될 수 있습니다.

6. <Aside> : 웹페이지의 사이드바를 나타냅니다.

시맨틱 대그를 사용한 간단한 HTML 웹페이지

상단 코드의 결과