시맨틱 태그 이용한 웹페이지 구조화 시맨틱 태그 이용한 웹페이지 구조화
<header>
: 페이지나 섹션의 머리말을 표현하는 태그
: 페이지 제목, 페이지 소개하는 간단한 설명 들어감.
: 로고, 아이콘, 검색 양식 등을 포함
: <section>이나 <article> 태그 내에서도 사용 가능
: <head>와는 다름에 주의
<nav>
: 페이지의 메누, 목차를 만들기 위해 주로 사용
: 하이퍼링크들을 모아놓을 수 있는 특별한 세션이지만 모든 하이퍼링크가 있을 필요가 없음.
<section>
: 문서의 chapter 등을 구성하는 역할을 하며 주로 페이지의 주요 내용들이 담길 수 있음.
<aside>
: 간접적으로 문선와 관련된 내용을 나타냄.
: 사이드바로 사용.
<article>
: 본문과 연관되어 있지만, 독립적으로 콘텐츠를 담는 영역
;: 게시물, 잡지, 제품 카드 등을 나타낼 때 사용
<footer>
: 꼬리말 영역으로 표시하는 태그
: 주로 저자, 저작권 정보, 관련 문서에 대한 링크를 포함.
: footer가 꼭 main 페이지나 section에서 가장 하단에 위치할 필요는 없음.
[HTML] 문서 구조 표현하는 시맨틱 태그
<header>
: 페이지나 섹션의 머리말을 표현하는 태그
: 페이지 제목, 페이지 소개하는 간단한 설명 들어감.
: 로고, 아이콘, 검색 양식 등을 포함
: <section>이나 <article> 태그 내에서도 사용 가능
: <head>와는 다름에 주의
<nav>
: 페이지의 메누, 목차를 만들기 위해 주로 사용
: 하이퍼링크들을 모아놓을 수 있는 특별한 세션이지만 모든 하이퍼링크가 있을 필요가 없음.
<section>
: 문서의 chapter 등을 구성하는 역할을 하며 주로 페이지의 주요 내용들이 담길 수 있음.
<aside>
: 간접적으로 문선와 관련된 내용을 나타냄.
: 사이드바로 사용.
<article>
: 본문과 연관되어 있지만, 독립적으로 콘텐츠를 담는 영역
;: 게시물, 잡지, 제품 카드 등을 나타낼 때 사용
<footer>
: 꼬리말 영역으로 표시하는 태그
: 주로 저자, 저작권 정보, 관련 문서에 대한 링크를 포함.
: footer가 꼭 main 페이지나 section에서 가장 하단에 위치할 필요는 없음.
'Front-End > HTML' 카테고리의 다른 글