FrontEnd/HTML

02-1. HTML5의 문서 구조

Houkibosi 2015. 8. 9. 17:45

* Do it! HTML5 + CSS3 를 기반으로 작성되었습니다.

 

시맨틱 웹이란?

- 기존의 div를 이용하여 단순 분할을 하던 웹에서 의미를 갖는 태그를 이용하여 화면을 구분하도록 작성 된

  HTML5에서 추구하는 방식.

 

 

 <header>

 사이트나 특정 부분의 머리말(제목 부분) 태그

 <nav>

 문서나 사이트를 연결하는 내비게이션 태그

 <hn>

 크기 별로 텍스트 제목을 붙이는 태그

 <article>

 실제 콘텐츠 영역을 나타내는

 <aside>

 본문 이외에의 사이드 바 영역 태그

 <footer>

 사이트 제작자 연락 정보나 저작권 정보가 포함되는 푸터 태그

 

 

 

02-1. HTML5의 문서구조

HTML4?

기존 웹들은 대부분 단순한 View 역활이였습니다.

그렇기에 단순히 div로 틀을 만들어 구역을 나누고 각 구역을 id로 구분하는 방식이였습니다.

 

 

 

<div id = "header">

Header

</div>

<div id = "content">

Content

</div>

<div id = "footer">

Footer

</div>

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>내가 처음 만드는 HTML 문서</title>
    </head>
<body>
    <div id="header">
        <h1>입양하기</h1>
        <ul>
             <li><a href="#">애완견 종류</a></li>
             <li><a href="#">입양하기</a></li>
             <li><a href="#">건강돌보기</a></li>
             <li><a href="#">더불어살기</a></li>
       </ul>
    </div>
<div id="content">
    <h2>강아지 용품 준비하기</h2>
    <ul>
        <li>강아지 집 </li>
        <li>강아지 먹이 </li>
        <li>밥그릇, 물병 </li>
        <li>이름표, 목줄</li>
        <li>장난감, 개껌</li>
        <li>애견용 간식</li>
        <li>브러쉬, 빗, 털 제거 롤</li>
        <li>귀 세정액, 구강스프레이, 기타 영양제 </li>
        <li>샴푸, 린스, 애견용 타올 </li>
   </ul>
</div>
<div id="footer">
 <p>Copyright 2012 funnycom</p>
</div>
</body>
</html>

 

 

 

저작자표시 (새창열림)