HTML 기본구조 - 시멘틱 태그

웹언어/HTML 2017. 4. 30. 18:49

HTML 기본구조 - 시멘틱 태그

HTML을 하기위해서는 기본적으로 시맨틱 태그의 화면 구조를 이해하고 넘어가야 되며 세부 요소로는 herder / section / footer가 있습니다.

이전글 :

HTML이란? - http://server-talk.tistory.com/1

HTML - 기본 구조의 HTML 문서 만들기 - http://server-talk.tistory.com/101

HTML - 문법과 주의사항 - http://server-talk.tistory.com/102

HTML - 목록을 만드는 태그 - http://server-talk.tistory.com/103

HTML - <br>태그, <p>태그 - http://server-talk.tistory.com/104

HTML - <div>, <span> 태그 - http://server-talk.tistory.com/105

시멘틱 태그가 사용된 HTML5의 문서 구조

인터넷상의 문서들을 살펴보면 서로 다른 듯 보이면서도 그 구조는 크게 다르지 않습니다. 사이트의 제목과 로고, 검색 창 등이 잇는 헤더(header) 부분과 여러 내용이 있는 콘텐츠(content) 부분, 본문 외의 내용을 나타내는 사이드 바(side bar), 그리고 저작권 정보와 제작자 정보를 표시하는 푸터(footer) 부분이 문서의 대부분이며, 사이트에 따라 한두 가지 영역이 추가 되곤 합니다.

위 그림에 보이는 것처럼 레이아웃을 만들 때 사용하는 주요 태그를 미리 약속해 놓고 해당 태그만 보면 어느 부분이 헤더이고 어느 부분이 실제 내용인지 쉽게 알수 있는 그림입니다.

<header>

<head>는 <html>바로 밑에 쓰이지만 <header>는 <body>안에 있기 때문에 둘은 전혀 다르며 주로 머리말, 제목을 표현하기 위해 쓰입니다.

<nav>

HTML5에서 새롭게 생기 시맨틱 태그이고 네비게이션이라고 불립니다. 콘텐츠를 담고 있는 문서를 사이트간에 서로 연결하는 링크를 담당합니다.

<section>

<body> 영역은 콘텐츠를 <header>, <section>, <footer>의 3가지 공간에 콘텐츠를 저장하는데 그 중 <section>은 본문 콘텐츠를 담고 잇습니다

<article>

<section>이 콘텐츠를 분류한다면 이 <article> 태그안에는 실질적인 내용을 넣습니다.

<aside>

사이드바라고 불르기도 하며, 본문 이외의 내요을 담고 있는 시맨틱 태그입니다.

<footer>

<div>

<div>는 HTML5에 와서 글자나 사진등 콘텐츠들을 묶어서 CSS 스타일을 적용시킬때 사용합니다.

왜 시맨틱 태그로 레이앗웃을 만들어야 되는가?

HTML5로 만든 웹 문서의 결과 화면만 보면 웹 브라우저에 보이는 모습은 똑같지만, 실제로 웹 브라우저에서 문서를 처리할 때는 아주 큰 차이가 있습니다.

HTML5의 시맨틱 요소로 작성한 소스를 보면 태그만 보고도 어느 부분이 제목이고 메뉴인지, 그리고 어느 부분이 실제 내용인지 쉽게 알 수 있습니다. 이렇게 소스만으로도 문서 내용을 알 수 있으면 사이트를 검색할 때 필요한 내용을 정확하게 찾을 수 있어 편리합니다. 웹사이트의 본문 내용을 검색하여야 한다면, <header>나 <nav> 태그 부분을 검색하지 않고 실제 내용이 들어 잇는 <section> 이나 <article> 태그 부분만 찾아서 검색하면 되니까요.

또한 어떤 장애를 가지고 있더라도 웹사이트를 사용하는 데 불편함이 있어서는 안된다는 '웹 접근성'의 시각에서 봤을 때도 시맨틱 태그는 아주 중요합니다.

또한 태그에 대한 역할이 정확히 정해졌기 때문에 어던 장치에서든 똑같이 문서를 해석할 수 있습니다.