HTML_시맨틱 요소

Eugenius1st·2022년 6월 29일
1

html

목록 보기
1/2
post-thumbnail

시맨틱 요소

HTML의 최신 버전인 HTML5에서는 시맨틱 웹(semantic web)이 중시되면서 여러 시맨틱 요소(semantic element)가 새롭게 만들어졌습니다. 시맨틱이란 ‘의미가 있는, 의미론적인'이라고 해석할 수 있습니다. 다시 말해, 의미를 가진 요소를 사용하는 방식을 추구하기 시작했습니다.

시맨틱 요소가 사용되기 이전에는 각 영역을 지정하기 위해

요소를 주로 사용했습니다. 그러다 보니 웹 페이지 하나에
요소 수십 개가 중첩된 이른바
지옥이 되는 경우가 많았습니다.

시맨틱 요소를 사용해야 하는 이유

  • 첫째, 검색 엔진이 시맨틱 요소를 더 좋아하기 때문, 검색 엔진이 웹페이지들을 방문할 때, 시맨틱 요소를 중요한 키워드로 고려합니다. 즉, 시맨틱 요소에 담긴 의미에 따라 검색 결과가 상위 노출이 결정

  • 둘째, 여러 개발자가 함께 작업할 때

    요소를 탐색하는 것보다 의미 있는 코드 블록을 찾는 것이 훨씬 더 편리

  • 요소 안에 채워질 데이터 유형도 예측하기 쉬움

    시맨틱 요소의 종류

  • <article>: 독립적이고 자체 포함된 콘텐츠를 지정합니다.

  • <aside> : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소입니다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용됩니다.

  • <footer> : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용합니다.

  • <header> : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어갑니다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있습니다.

  • <nav> : 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됩니다. 보통은 안에 <ul>을 넣어 목록 형태로 사용합니다.

  • <main> : 문서의 주된 콘텐츠를 표시합니다.

profile
최강 프론트엔드 개발자가 되고싶은 안유진 입니다

0개의 댓글