[HTML5] HTML5의 기본 구조 잡기, 많이 사용하는 문서 패턴, 새로 추가된 태그

이번글은 HTML의 기본구조에 대하여 알아볼게요.

이 글은 백견불여일타 HTML5 & CSS3 책을 공부하고 제가 정리한 내용을 작성한 것입니다.

 

---

먼저 HTML5가 되면서 새로 추가된 태그를 알아볼게요

HTML5에서 많은 태그들이 추가 되었지만 구조를 잡는데 사용되는 태그들 위주로 알아볼게요'

 

1. HTML5에 새로 추가된 태그들

HTML 태그	속성
<article>	웹 페이지의 본몬을 정의할때 사용
<aside>	arricle의 내용을 보충해 주는 역활을 하는 컨텐츠 삽입 (서브메뉴, 광고, 부가정보)
<figure>	이미지나 사진 코드 등을 보여줄 때 사용
<footer>	푸터를 정의할 때
<header>	헤더를 정의할 때
<nav>	메인 메뉴 및 서브 메뉴를 성의할 때
<section>	섹션을 정의할 때

 

 

---

2. HTML5 문서 기본구조

 HTML은 크게 세 부분으로 나눈다.

1. header:  메인 메뉴를 담당하는 nav, 회사 또는 사이트로고, 회원가입, 로그인, 검색창 같은 요소들이 들어감
2. article:   본문의 내용을 담당
3. footer:   회사 주소 또는 연란처 등의 정보를 넣는 곳

HTML 문서 패턴1

HTML 문서 패턴1

<aside> 는 웹사이트의 사이드 바 부분을 담당한다. 서브메뉴나 광고 또는 부가적인 정보가 들어간다.

<article> 은 본문으로 <h1>, <h2>같은 제목이 들어갈 수 있고 <section>으로 별도의 섹션을 만들 수 있다.

<figure>은  이미지 설명을 위해 추가할 수도 있다.

 

HTML 문서 패턴2

HTML 문서 패턴2

책에서는 문서 패턴2는 최근 유행하는 문서라고 소개 되어있다. 

태그들 설명은 위와 비슷하다.

 

 

HTML의 기본 구조를 알아보았다.

다음 글에서는 input 관련 해서 알아보자