-
HTML5 학습하기 ‘HTML5 시맨틱 태그 4 - 입력’IT/HTML 2020. 4. 30. 07:47
HTML5 학습하기 ‘HTML5 시맨틱 태그 4 - 입력’
1. HTML5 시맨틱 태그 - 입력
(1) 시맨틱 태그
시맨틱 태그란 태그 이름만 보고도 역할을 짐작할 수 있는 태그를 의미한다. 시맨틱 태그를 사용하면 검색 엔진에서 쉽게 웹 문서 내용을 검색할 수 있고, 소스 내부 구조 파악이 용이하다.
HTML4 마크업의 경우 아무 의미 없는 <div> 태그 사용으로 문서 구조의 파악이 어려움이 있는 반면, HTML5 마크업의 경우 새로운 시맨틱 태그 사용하여 태그만 보고도 문서 구조 파악이 용이하다.
HTML5에서 등장하는 시맨틱 태그는 <header>, <nav>, <section>, <article>, <aside>, <footer> 등 있다.
① <header>
- 웹 페이지의 헤더를 만들 때 사용(주로 로고 영역)
② <nav>
- 웹 페이지의 메뉴를 만들 때 사용하고, 일반적으로 내부에 <ul>과 <li>을 많이 사용
③ <section>
- 여러 중심 내용을 감싸는 공간을 의미
④ <article>
- 문서, 어플리케이션, 사이트 안에서 독립되어 있는 구성요소로 글자가 많이 들어가는 부분을 의미
⑤ <aside>
- 페이지 왼쪽이나 오른쪽에 부가적인 내용의 영역(퀵메뉴나 광고영역으로 많이 사용)
⑥ <footer>
- 웹 페이지의 하단을 만들 때 사용(주로 카피라이트 영역)
'IT > HTML' 카테고리의 다른 글
HTML5 학습하기 ‘HTML5 시맨틱 태그 3 - 오디오’ (0) 2020.04.29 HTML5 학습하기 ‘HTML5 시맨틱 태그 2 - 비디오’ (0) 2020.04.28 HTML5 학습하기 ‘HTML5 시맨틱 태그 1 - 이미지’ (0) 2020.04.27 HTML5 학습하기 ‘HTML5 기본 구조 및 문법의 기초’ (0) 2020.04.25 HTML5 학습하기 ‘HTML5 이란?’ (0) 2020.04.24