1. 시맨틱 태그(Semantic tag)
시맨틱 태그는 html 태그 중 하나로, 사이트의 레이아웃에 직접적으로 관여합니다. 웹 사이트를 보면 제목이나 메뉴바 등 공통적으로 사용되는 레이아웃들이 있습니다. 이런 구조들을 좀 더 쉽게 사용할 수 있도록 html5에서는 구조를 태그로 만들어 지원해줍니다.
- header : 주로 페이지나 섹션의 제목이나 소개를 담는 요소입니다.
- nav : 페이지의 이동을 위한 메뉴가 들어가는 요소입니다.
- section : 기준에 따라 구획을 구분하기 위해 사용하는 요소입니다.
- article : 주 내용을 담기 위해 사용하는 요소입니다.
- aside : 광고나 사이트의 주변 부분에 해당하는 내용을 담기 위해 사용하는 요소입니다.
- footer : 웹 사이트 가장 하단의 회사 정보, 사이트 정보 등의 정보를 담기 위해 사용하는 요소입니다.
그럼 이제 실습으로 신문사 사이트를 작성한다고 생각하고, 위 시맨틱 태그를 이용해 html을 작성해보겠습니다. 아래 코드를 그대로 작성해주세요.
<!DOCTYPE html> <html lang="kr"> <head> <meta charset="utf-8"> <title>멋직일보</title> </head> <body> <header> <p>여기는 로고와 이름이 들어갑니다.</p> </header> <nav> <p>여기는 사이트 메뉴입니다.</p> </nav> <section> <p>여기서 부터는 기사가 들어갑니다.</p> <article> <p>여기는 첫번째 기사입니다.</p> </article> <article> <p>여기는 두번째 기사입니다.</p> </article> </section> <aside> <p>여기에 광고가 들어갑니다.</p> </aside> <footer> <p>여기에 회사 정보가 들어갑니다.</p> </footer> </body> </html>
미리보기 오른쪽 확장 버튼을 클릭하고 아래 화면처럼 나오면 성공입니다.
참고자료
HTML 레이아웃 더 알아보기 : http://tcpschool.com/html/html_space_layouts
시맨틱 태그 더 알아보기 : http://tcpschool.com/html/html5_element_semantic