[복습]시멘틱 마크업

#1 시멘틱 마크업

---

우선 시멘틱 마크업을 왜 써야 하는지 이유를 들었을 때 유니버설 디자인 같다는 생각을 많이 했다.

웹을 이용하는 사람들은 나처럼 아무런 장애가 없고 키보드와 마우스를 온전히 사용하는 사람만을 생각했다.

장애를 가진 사람들도 있을것이라곤 생각했지만 고려를 하진 않았던 것 같다. 하지만 인터넷을 이용하는 사람들은 다양한 사람들이 있다는 사실을 다시 한번 깨달았고 여러 문제점을 개선할 뿐 아니라 유지보수도 중요하지만 이런 사용자들을 위해서라도 태그들을 분류해줘야 할 것 같다.

 

header

• 소개 및 탐색에 도움을 줌
• 헤더를 중첩으로 사용하거나 헤더안에 푸터를 사용할 수 없음

<!-- 잘못된 예 -->
<header>
	<header></header>
</header>

<header>
	<footer>
	</footer>
</header>

 

 

nav

• navigation bar
• 문서의 부분 중 현재 페이지 내 또는 다른 페이지로의 링크를 보여줌
• 메뉴 목차로 사용됨
• 페이지의 주요 탐색 링크를 위한 태그
• 웹페이지에 여러개의 nav태그를 가질 수 있음

 

footer

• 주로 페이지의 제일 하단에 위치하며 페이지의 작성자, 저작권정보, 관련 문서 등의 내용을 담음

 

main

• body의 주요 콘텐츠를 나타냄
• 웹페이지에서 한 번만 사용할 수 있음
• 사이드바, 탐색링크, 저작권정보, 사이트 로고, 검색 폼 등 여러 페이지에 반복되는 컨텐트 포함 x

 

article

• 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냄
• 대표적으로 사용되는 곳은 뉴스 홈페이지
• 게시판, 블로그 글, 메거진, 뉴스 기사, 위젯, 실시간 채팅 창 등
• 제목 요소를 자식으로 포함하여야 함 

 

section

• 제목 요소를 자식으로 포함하여야 함

article vs section

일단 article 사용을 우선시하고 독립적으로 사용한다면 article, 웹페이지의 앞뒤 문맥이 연결성이 필요하거나, 더 적합한 의미를 가진 요소가 없을 때 section을 사용

!!! 단순 스타일링이 목적이라면 div 요소를 사용!!!

 

aside

• 문서의 주요 내용과 간접적으로 연관된 부분을 나타냄
• 각주, 광고 배너등에 사용

---

hr

• 단락을 구분할 때 사용하므로 <p> 태그 내의 사용은 하지 않음

 

스타일링을 위해서만 사용하기!

div

• division 영역 나눔, 콘텐츠 분할 요소
• 블록 컨테이너
• 웹사이트의 레이아웃을 만들 때 사용
• 영역을 구분 짓거나 무리를 짓는 태그

 

span

• 인라인 컨테이너
• 본질적으로 아무것도 나타내지 않음, 스타일을 적용하거나 인라인 요소를 묶을 때 사용