레이아웃 방식

1. <div> 태그 활용
2. HTML5의 시맨틱 태그 활용
3. 테이블 요소 활용

방식	장점	단점
<div> 태그 활용	손쉽게 스타일 적용이 가능	한눈에 의미를 파악할 수 없음
시맨틱 태그 활용	의미를 한눈에 파악할 수 있음	태그에 따른 특이점은 없음
테이블 요소 활용	-	과거 방식으로 수정이 어려움

<div> 태그 활용시

div, span 태그는 목적을 알아보기 힘들다는 단점을 갖는다.
form, table 과 같이 의미를 갖는 요소들은 한번에 파악할 수 있다.

시맨틱 태그

시맨틱 태그 (semantic tag)
브라우저와 개발자 모두에게 의미를 명확하게 설명할 수 있는 태그

시맨틱 태그

<div id='header'>보다는 <header> 태그가 바로 알아볼 수 있다는 장점을 가짐.

출처 - TCPschool ---

Q1. <section> 와 <article> 태그를 중첩시킬 수 있을까?
A1. 가능, 반대로도 가능하다. 모두 독립적인 컨텐츠를 지정하는 태그로 사용해도 문제되지 않음

Q2. <header> 태그 안에 넣을 수 없는 태그는?
A2. <footer> <address>, <header> 태그. 보통은 제목 요소, 로고나 아이콘, 저작권 정보가 들어가게 된다.

반응형 페이지

데스크탑, 태블릿, 모바일 모든 기기에서 보기 좋은 웹 페이지를 만들기 위해 사용하는 기법
뷰포트에 맞게 자동으로 조절된다. (기기 크기에 따라 자동 조절)

➡ 자세한건 CSS에서 계속