Web(Front) - HTML Semantic

📒 Semantic

Semenatic

1️⃣ Semantic

• 헤더 : 사이트 제목과 로고, 검색 창 등 존재
• 본문(contents : section + articles) : 여러 내용 존재
• 사이드바(aside) : 본문 외 내용
• footer : 저작권 정보와 제작자 벙보 표시
• sematic 태그
  • 브라우저, 검색엔진, 개발자 모두에게 컨텐츠의 의미를 명확히 설명하는 역할
• non-semantic 요소
  • div, span 등 존재, content에 대해 어떤 설명도 X
• semantic 요소
  • form, table, img 등 존재, content의 의미를 명확히 설명

2️⃣ header

• 머리말 지정
• 주로 form 태그를 사용해 검색 창을 넣거나 nav 태그를 사용해 사이트 메뉴 삽입
• 본문에 사용해 머리말로도 사용

3️⃣ nav

• 문서를 연결하는 naviagtin link
• 동일 사이트 내의 문서나 다른 사이트의 문서로 연결하는 링크 모음.
• nav태그는 단독 사용 or headr, footer, aside 내에서 사용

4️⃣ section

• 주제별 콘텐츠 영역 표시
• 문맥 흐름 중에서 contents를 주제별로 묵을 때 사용
• 여러 개의 article을 넣어 contents 내용 표현

5️⃣ aside

• 본문 이외의 내용 표시
• 일반적으로 사이트 왼쪽 or 오른쪽 or 하단에 위치
• 본문 내용 외 주변에 표시되는 기타내용 표현(광고, 링크 모음 등)

6️⃣ footer

• 제작 정보와 저작권 정보 등 표시