시맨틱 웹의 사전적 정의는 기계가 이해할 수 있고 처리할 수 있는 웹 콘텐츠를 만드는 것으로, 1998년 월드와이드웹의 창시자인 팀 버너스 리에 의해 개발되고 정의된 개념임.
HTML5에 추가도니 웹 페이지 구조 관련 태그
html4에서는 웹 페이지 구조에 해당하는 머리말, 메뉴, 본문, 하단부를 만들 때 div 태그에 css를 적용하는 방식으로 작업을 했음. 그러다 보니 div 태그만 봐서는 의미를 잘 알 수 없다는 문제가 있었음.
따라서 html5에서는 이 문제를 보완하기 위해 의미 있는 구조를 나타낼 수 있는 태그들을 추가해 가독성을 높였음. html5에 추가된 태그를 추가했음.
-
header : 머리말을 나타내는 태그.
-
hgroup : 제목과 부제목을 묶는 태그.
-
section : 제목별로 나눌 수 있는 태그.
-
article : 개별 콘텐츠를 나타내는 태그.
-
aside : 왼쪽 또는 오른쪽에 위치하는 사이드 바를 나타내는 태그.
-
footer : 하단의 정보를 표시하는 태그.
html5 웹 페이지 구조 관련 태그 사용
먼저 section 태그를 이용해 제목을 표시하는 방법을 실습해 보겠음.
예 )
- section1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- section 태그로 제목을 표시함. -->
<section>
<h1>기사 제목1</h1>
<p>첫 번째 기사 내용입니다.</p>
</section>
<section>
<h1>기사 제목2</h1>
<p>두 번째 기사 내용입니다.</p>
</section>
</body>
</html>
- section2.html
section 태그 안에 article 태그를 사용해 본문을 표시함.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<section>
<!-- section 태그 안의 article 태그를 이용해 콘텐츠를 나눔. -->
<article>
<h1>기사 제목1</h1>
<p>첫 번째 기사의 내용</p>
</article>
<article>
<h1>기사 제목2</h1>
<p>두 번째 기사의 내용</p>
</article>
</section>
</body>
</html>
- section3.html
여러 가지 시맨틱 웹의 태그를 이용해 화면의 레이아웃을 구성하는 내용임.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- header 태그를 이용해 로고나 메뉴를 표시함. -->
<header>
<h1>HTML5 강좌를 시작함.</h1>
</header>
<!-- nav 태그를 이용해 상단의 내비게이션 메뉴를 표시함. -->
<nav>
<ul>
<li>1. 개념익히기</li>
<li>2. 문법익히기</li>
<li>3. 실전응용하기</li>
</ul>
</nav>
<!-- aside 태그를 이용해 사이드 메뉴를 표시함. -->
<aside>
사이드 메뉴
</aside>
<!-- section 태그를 이용해 본문을 표시함. -->
<section>
<article>
<h1>첫 번째 강좌 제목</h1>
<p>첫 번째 강좌 내용</p>
</article>
<article>
<h1>두 번째 강좌 제목</h1>
<p>두 번째 강좌 내용</p>
</article>
<article>
<h1>세 번째 강좌 제목</h1>
<p>세 번째 강좌 내용</p>
</article>
</section>
<!-- aside 태그를 이용해 퀵 메뉴를 표시함. -->
<aside>
퀵메뉴
</aside>
<!-- footer 태그를 이용해 하단 정보를 표시함 -->
<footer>
프로그래밍 강의 Copyright All right reserved.
</footer>
</body>
</html>
그런데 실행 결과를 보니 레이아웃이 제대로 적용되지 않았음. 레이아웃을 표시하려면 각 태그에 css를 적용해야 함. session4.html은 태그에 css를 적용한 코드 예임.
- section4.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">
html, body{width : "100%"; height : "70%"}
html{overflow-y : "scroll"}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, form, filedest, p, button{margin : 0; padding : 0}
body, h1, h2, h3, h4, input, button{font-family : "NanumGothicWeb", "verdana", "dotum", "sans-serif;" font-size : 13px; color : #383d41}
</style>
</head>
<body>
<!-- header 태그를 이용해 로고나 메뉴를 표시함. -->
<header>
<h1>HTML5 강좌를 시작함.</h1>
</header>
<!-- nav 태그를 이용해 상단의 내비게이션 메뉴를 표시함. -->
<nav>
<ul>
<li>1. 개념익히기</li>
<li>2. 문법익히기</li>
<li>3. 실전응용하기</li>
</ul>
</nav>
<!-- aside 태그를 이용해 사이드 메뉴를 표시함. -->
<aside>
사이드 메뉴
</aside>
<!-- section 태그를 이용해 본문을 표시함. -->
<section>
<article>
<h1>첫 번째 강좌 제목</h1>
<p>첫 번째 강좌 내용</p>
</article>
<article>
<h1>두 번째 강좌 제목</h1>
<p>두 번째 강좌 내용</p>
</article>
<article>
<h1>세 번째 강좌 제목</h1>
<p>세 번째 강좌 내용</p>
</article>
</section>
<!-- aside 태그를 이용해 퀵 메뉴를 표시함. -->
<aside>
퀵메뉴
</aside>
<!-- footer 태그를 이용해 하단 정보를 표시함 -->
<footer>
프로그래밍 강의 Copyright All right reserved.
</footer>
</body>
</html>
Hello World!