tag (div, span, main, nav, header, footer, section, article, aside)
태그(div)
- 중요도 : 🔴🔴🔴🔴🔴
- 종류 : 닫는 태그 필요
- 단순히 구획을 나눌때 사용한다.
- 기본적으로 문서의 한 줄을 다 차지한다.
- 시멘틱 : 없음
태그(span)
- 중요도 : 🔴🔴🔴🔴🔴
- 종류 : 닫는 태그 필요
- 단순히 구획을 나눌때 사용한다.
- 한 줄을 다 차지하지 않는다.
- 시멘틱 : 없음
태그(main)
- 중요도 : 🔴🔴🔴⚪⚪
- 종류 : 닫는 태그 필요
- 문서의 주된 내용을 담는데 사용한다.
- 기본적으로 문서의 한 줄을 다 차지한다.
- 시멘틱 : 있음
태그(nav)
- 중요도 : 🔴🔴🔴⚪⚪
- 종류 : 닫는 태그 필요
- 구획을 나눌때 사용한다.
- nav(Navigator) 태그는 서로 연관있는 링크를 모아놓을 때 사용한다.
- 기본적으로 문서의 한 줄을 다 차지한다.
- 시멘틱 : 있음
태그(header)
- 중요도 : 🔴🔴🔴⚪⚪
- 종류 : 닫는 태그 필요
- 구획을 나눌때 사용한다.
- 문서의 상단 정보(로그인 폼, 검색창, 로고, 메뉴 등)를 담는다.
- 기본적으로 문서의 한 줄을 다 차지한다.
- 시멘틱 : 있음
태그(footer)
- 중요도 : 🔴🔴🔴⚪⚪
- 종류 : 닫는 태그 필요
- 구획을 나눌때 사용한다.
- 문서의 하단 정보(저작권, 사업자정보, 연락처 등)를 담는다.
- 기본적으로 문서의 한 줄을 다 차지한다.
- 시멘틱 : 있음
태그(section)
- 중요도 : 🔴⚪⚪⚪⚪
- 종류 : 닫는 태그 필요
- 구획을 나눌때 사용한다.
- 사이트에서 분리하면 의미가 없어지는 내용을 담는다.
- 기본적으로 문서의 한 줄을 다 차지한다.
- 시멘틱 : 있음
태그(article)
- 중요도 : 🔴⚪⚪⚪⚪
- 종류 : 닫는 태그 필요
- 구획을 나눌때 사용한다.
- 사이트에서 분리해도 의미가 있는 내용을 담는다.
- 기본적으로 문서의 한 줄을 다 차지한다.
- 시멘틱 : 있음
태그(aside)
- 중요도 : 🔴⚪⚪⚪⚪
- 종류 : 닫는 태그 필요
- 구획을 나눌때 사용한다.
- 문서의 부수적인 내용을 담는데 사용한다.
- 기본적으로 문서의 한 줄을 다 차지한다.
- 시멘틱 : 있음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>문서의 제목</title>
</head>
<body>
<div>
<a>Hello</a>
</div>
<div>
<a>World</a>
</div>
<br>
<span>
<a>Hello</a>
</span>
<span>
<a>World</a>
</span>
</body>
</html>