[개미의 걸음 HTML&CSS 10차시] 시맨틱(semantic) 태그

시멘틱 태그[Semantic tag]

태그만 봐도 페이지 구조를 쉽게 이해할 수 있도록 정의된 태그

• HTML5부터 추가된 기능
• <div>태그를 사용해도 되지만 각 블록들이 어떤 역할을 하는지 구분하기 쉽게하기 위해 시맨틱 태그 사용
• 시맨틱 태그에는 header, nav, main, section, article, aside, footer이 있다.
• 시맨틱 태그를 사용하면 소스만으로도 문서 내용파악이 가능해 사이트 검색시 필요한 내용을 정확히 찾을 수 있음
  [원하는 부분의 시맨틱 태그만 검색하면 되므로]

시맨틱 태그	설    명
<header>태그	사이트의 윗부분, 본문의 머리말 등 특정 부분의 머리말에 해당 주로 <form>태그를 사용해 검색창을 넣거나 <nav>태그를 사용해 메뉴를 삽입
<nav>태그	사이트 안의 문서나 다른 사이트 문서로 연결하는 링크 모음을 나타냄 위치의 영향을 받지 않아 <header>, <aside>, <footer> 등의 태그안에 포함시키거나 독립적으로 사용
<section>태그	콘텐츠의 영역을 나타내는 태그로 콘텐츠를 주제별로 묶을 때 사용 <section>안에 <section>태그 사용 가능!
<main>태그
<article>태그	문서 상의 실제 내용이 들어가는 부분 <section>태그와 유사
<aside>태그	왼쪽, 오른쪽, 하단에 표시되는 사이드바를 만드는 태그 주로 광고, 링크모음 등 문서의 내용에 영향을 미치지 않는 내용을 넣을 때만 사용
<footer>태그	문서의 끝자락에 사이트 관련 회사 혹은 제작자의 정보를 표시하는데 사용하는 태그 <footer>태그 안에도 <header>, <section>, <article> 등의 태그 사용 가능
<address>태그	사이트 관련 회사나 제작자의 연락처 정보를 표시하는데 사용하는 태그 주로 <footer>태그 안에 사용