HTML 심화 -시맨틱요소

HTML

시맨틱요소

시맨틱요소(semantic element) ->
시맨틱이란 '의미가 있는, 의미론적인' 이라고 해석할 수 있다.
즉, 의미를 가진 요소를 사용하는 방식을 추구하기 시작했다.
<h1>요소는 최상위 제목을 표현할 때 사용하는 요소이고,
큰 폰트 사이즈를 적용할 뿐아니라, 위아래로 간격을 주어 제목처럼 보이도록 한다.

h1요소와 같이 div span요소에도 CSS속성을 추가하여 h1요소와 똑같이 보이도록 할 수는 있다.
그러나 h1요소를 사용할 때처럼 의미적 가치는 없다고 본다.
그리고 이렇게 만든다면 웹페이지 하나에 div요소 수십개가 중첩된 div 지옥이 되는 경우도 많다.

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

1. 검색엔진에 더유리하다. -> 네이버,구글 등의 검색엔진에서 시맨틱요소가 더 중요하다 생각하여 상위 노출이 결정된다.

2. 개발자간 코드블록 탐색의 편리함 -> 여러 개발자가 함께 작업할 때 <div>요소를 탐색하는 것보다 의미있는 코드 블록을 찾는것이 훨씬 편리하다.

3. 요소 내부의 데이터 예측가능 -> <header>에는 제목이 들어가겠구나! , <main>에는 주된 콘텐츠가 들어가겠구나!

시맨틱 요소의 종류

• <article> : 독립적이고 자체 포함된 콘텐츠를 지정한다.
• <aside> : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소이다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용한다.
• <footer> : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용한다.
• <header> : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어간다.
  선택적으로 상단바나 검색창 등이 안에 들어갈 수 있다.
• <nav> : 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용된다.
  보통은 안에 <ul>을 넣어 목록 형태로 사용함.
• <main> : 문서의 주된 콘텐츠를 표시한다.