본문 마크업, 의미에 맞는 시멘틱 메모

 

 

< 본문 마크업, 의미에 맞는 시멘틱 >

 

 

1) 헤더부분

    - header  : 로고, 네비게이션 등
      => nav : 메인 네비게이션

 

      ex)

<header id="header">
  <h1 class="logo_area">
       <a href="#" class="logo"><img src="/img/logo.gif" alt="Ally의 서재"></a>
  </h1>
  <nav>
      <h1 class="hidden">메인 메뉴</h1>
      <ul id="main_menu">
            <li><a href="#" class="act_menu">company</a></li>
            <li><a href="#">product</a></li>
            <li><a href="#">portfolio</a></li>
            <li><a href="#">contact us</a></li>
            <li><a href="#">community</a></li>
       </ul>
  </nav>
</header>

 

2) 본문부분

    - div, section, article : 본문, 컨텐츠 
      =>  aside : 부가적인 주제

 

       ex1)

<section class="sec_news">
   <h1 class="news_title">what&apos;s new</h1>
   <ul class="news_list">
        <li><a href="#">첫번째소식</a></li>
        <li><a href="#">두번째소식</a></li>
        <li><a href="#">세번째소식</a></li>
   </ul>
</section>

 

      ex2)

 <article class="search">
   <h1 class="hidden">검색 폼</h1>
   <form id="s_form" name="s_form" action="javascript:alert('검색이 완료되었습니다.');">
    <fieldset>
         <label for="search">검색</label>
         <input type="text" id="search">
         <button type="submit" class="btn_search">검색</button>
    </fieldset>
   </form>
  </article>

 

     ex3)

<article class="free">
   <h1>어비 폰트 신청</h1>
   <p>무료 신청</p>
   <figure>
    <img src="img/free1.gif" alt="">
    <figcaption>free1</figcaption>
   </figure>
   <figure>
    <img src="img/free2.gif" alt="">
    <figcaption>free2</figcaption>
   </figure>

</artical>

반응형

 

 

3) 하단부분

    - footer : 하단

      => address : 연락처 ( 하단에서만 사용가능, 컨텐츠 블럭에서는 사용안함 )

 

  ex)

<footer id="footer">
  <ul class="guide_menu">
       <li><a href="#">개인정보 취급방침</a></li>
       <li><a href="#">이용약관</a></li>
       <li><a href="#">사이트맵</a></li>
  </ul>
  <address>
       <span>Ally의 서재 담당자 : Ally</span> <span>대표홈페이지 : http://toally.tistory.com </span>
  </address>
  <p class="copyright">&copy;2013 Ally의 서재  All RIGHR RESERVED.</p>

</footer>