시맨틱 태그로 나눈 HTML(위치는 웹 페이지마다 조금씩 달라질수있다)
- < header> 태그
- 상위 콘텐츠를 나타내는 태그
- 주로 웹 페이지 상단에 보여줄 로고, 메뉴등을 포함
- <nav> 태그
- 메뉴를 그룹화 하는 태그
- 링크를 포함한 메뉴를 그룹화 할때 사용
- 하지만 모든 링크와 메뉴를 일일이 <nav>태그로 지정해줄 필요는 없음
- <figure> 태그
- 멀티미디어 콘텐츠를 그룹화하는 태그
- 동영상이나 음악 같은 멀티미디어 콘텐츠를 그룹화 할때 사용
- 주로 메인 페이지의 이미지 슬라이더나 인터랙티브한 콘텐츠 영역을 지정
- <main> 태그
- 특정 웹 페이지에서 중요한 콘텐츠를 그룹화하는 태그
- 메인 페이지뿐 아니라 서브 페이지에도 중요한 영역을 지정할때 사용
- <aside> 태그
- 부가 콘텐츠 영역을 지정하는 태그
- <main>태그와 반대로 웹 사이트와 연관성이 적은 부가 콘텐츠를 그룹화할떄 사용
- ex) 광고의 팝업창 등
- <section> 태그
- 콘텐츠 여러개를 그룹화 하는 태그
- 주로 연관된 기사 제목 여러개를 이 태그를 사용하여 그룹으로 지정
- <article> 태그
- 개별 콘텐츠를 지정하는 태그
- 주로 특정 기사의 미리보기, 섬네일, 제목, 본문을 지정할때 사용
- <footer> 태그
- 하단 콘텐츠를 나타내는 태그
- 예를 들어 기업 소개 웹 페이지라면 기업의 주소, 연락처, 약관 메뉴 등을 지정
* <body>태그 안에 쓸때 들여쓰기를 잘하자 ==> 가독성 좋아진다!
<body>
<header>
<nav></nav>
</header>
<figure></figure>
<section>
<article></article>
<article></article>
<article></article>
<article></article>
</section>
<footer></footer>
</body>