<section>

하나의 주제로 그룹화된 컨텐츠

각 섹션의 주제는 섹션 요소의 하위 항목으로 제목을 넣어서 식별

 

<article>

다른 곳에서도 단독으로 사용이 가능한 내용

 

<header>

전체 콘텐츠를 아우르는 헤더

 

<footer>

전체 콘텐츠의 풋터

 

<nav>

사용자가 이용할 수 있는 링크의 모음

 

<aside>

웹 페이지의 주요 내용 흐름과 관련없는 내용

 

<h1 ~ h6>

각 섹션들의 제목으로 사용되며, 서브타이틀로는 사용X

 

 

<!DOCTYPE html>
<html>
<head>
  <title>Document</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/01.css">
</head>
<body>
  <article class="page">
    <header class="page-header">
      <h1 class="page-title">페이지 제목</h1>
      <nav class="global-menu">
        <a href="#" class="global-menu-link">홈</a>
        <a href="#" class="global-menu-link">소개</a>
        <a href="#" class="global-menu-link">메뉴</a>
        <a href="#" class="global-menu-link">커뮤니티</a>
        <a href="#" class="global-menu-link">연락처</a>
      </nav>
    </header>
    <div class="content-container">
      <section class="content-section content-section-a">
        <p>Lorem ipsum dolor sit amet, consectetur.</p>
      </section>
      <section class="content-section content-section-b">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint cum sed facilis, est asperiores illum voluptatibus nihil. Corrupti iste, accusamus nam amet laborum. Vero ad architecto quos iure quis cumque assumenda corrupti similique praesentium eum a officiis, incidunt illum esse exercitationem rerum corporis ea reiciendis, voluptas eveniet adipisci beatae pariatur!</p>
      </section>
    </div>
    <footer class="page-footer">
      <p class="copyright">2020 &copy; 안녕?</p>
    </footer>
  </article>
</body>
</html>