HTML layout

웹 페이지를 구성할 때 요소들에게 자신이 태어난 이유에 걸맞는 역할을 부여해야 한다. (semantic)

이 얼마나 존재론적인가! HTML태그들도 다 태어난 이유가 있다고! 

말이 semantic이지 별거 없다. 그냥 헤더 태그는 문서의 헤더 역할을 하려고 탄생했으니까 문서의 헤더를 정의해야 할때는 헤더 태그를 써라, 이거다.

<header> 태그

문서의 맨 윗부분에 위치한다. 웹 사이트의 이름, 글로벌 링크 - 로그인, 회원가입, 언어 선택 등 웹 사이트의 어떤 페이지에서도 사용할 수 있는 링크를 포함한다. 

<section>태그나 <article>태그의 제목으로도 사용한다.

 

<nav> 태그는 navigation bar 즉 ,링크들의 리스트를 담는 컨테이너를 정의한다. 페이지의 메뉴를 표현한다. <ul> <ol> <li> 태그를 사용한다.

 

<section> 태그는 페이지 내용의 구조와 흐름을 만든다. 페이지의 부분을 구성하며 페이지의 소주제나 관련된 컨텐츠를 담는다.<div>와 비슷하게 생각될 수 있지만, <section> 태그는 페이지의 문맥과 관계있고 페이지를 구성한다는 점에서 의미론적이다. 

 

<article> 태그에는 페이지와는 독립적인 내용(블로그 글, 기사, 포럼 등)을 담는다. 

 

<aside> 태그는 사이드바 영역으로 페이지와 약간의 관련성을 지는 컨텐츠를 구성한다. 배너, 용어설명 같이 비교적 관련이 적은 내용으로 구성되어있다.

 

<footer> 태그

문서의 맨 하단에 위치하며 저작권, 연락처 정보를 담는다.