html5에서 추가된 시멘틱 태그

section

문서 내에서 같은 의미의 구역(제목으로 시작하는 컨텐츠)을 나눌 때 사용합니다.

• - 섹션의 제목으로 사용되는 제목컨텐츠는 상하구조를 갖지않으며 섹션내 사용된 제목컨텐츠는 레이아웃에 영향을 주지않습니다.
• - 신문기사와 같은 배포형은 section이 아닌 article을 사용합니다.
• - section에 스타일이나 스크립트를 지정하려고 한다면 div를 사용하는 것이 좋습니다.

<h1>육대주</h1>
<p>지구 위의 여섯 대륙</p>
<section>
    <h1>아시아</h1>
    <ul>
        <li>한국</li>
        <li>일본</li>
        <li>중국</li>
    </ul>
    <section>
        <h1>한국</h1>
        <ul>
            <li>서울</li>
            <li>부산</li>
            <li>광주</li>
        </ul>
    </section>
</section>
<section>
    <h1>유럽</h1>
    <ul>
        <li>프랑스</li>
        <li>이탈리아</li>
        <li>독일</li>
    </ul>
</section>

article

문서내의 독립적인 글. 블로그 글이나 뉴스 본문 등을 구성하는 섹션을 나타냅니다.

• - article 안에서 header, footer와 같은 하나의 페이지형식으로 구현할 수도 있으며 페이지 안에서 article요소가 여러번 반복되어도 상관이 없습니다.
• - 인용구, 광고, 네비게이션 용도로 사용할 수 있지만, 단순한 삽입구를 위해 사용하는 것은 적합하지 않습니다.
• - article 요소가 중첩될 경우, 중첩된 article 요소는 서로 상호관련이 있어야 합니다. 예를 들어, 블로그 글을 나타내는 article 요소 내부에 블로그 방문자 댓글이나 의견을 article 요소로 넣을 수 있습니다.

<h1>My blog</h1>
<article>
    <header>
        <h1>The Very First Rule of Life</h1>
        <p>...</p>
    </header>
    <p>If there's a microphone anywhere near you, assume it's hot and sending whatever 
    you're saying to the world. Seriously.</p>
    <p>...</p>
    <footer>
        <a href="#">Show comments...</a>
    </footer>
</article>

 aside

섹션의 내용과 관련이 없지는 않지만 분리되어도 문제 없는 섹션으로 주로 사이드바 형태로 표현됩니다.

• - aside태그는 본문 내용에 대한 추가적인 설명을 할때 사용하는 태그로 본문과 별도로 추가적인 언급을 위해서 사용합니다.

<aside>
    <p><aside>태그는 본문 내용에 대한 추가적인 설명을 할때 사용하는 태그로 본문과 별도</p>
</aside>​

header

머릿말 태그. 소개, 또는 문서에 대한 탐색 요소의 그룹을 지정합니다.

<header>
    <h1>https://codefactoryglobal.tistory.com/</h1>
    <p>codefactoryglobal.tistory.com/</p>
</header>

 

footer

페이지 하단부의 저작권 정보나 서비스 제공자 정보 등을 제공하는 부분을 의미합니다.

<footer>
    <p>Copyright All Rights Reserved.</p>
</footer>

menu

페이지 내 기능을 하는 버튼/링크의 모음(대표적으로는 툴바)을 나타냅니다.

• - type은 context, toolbar, list 3가지의 type이 있고 기본값은 list.

<menu type="toolbar">
    <li><menu label="File"><button type="button">New...</button> <button type="button">Open...</button> <button type="button">Save</button></menu></li>
    <li><menu label="Edit"><button type="button">Cut</button> <button type="button">Copy</button> <button type="button">Paste</button></menu></li>
</menu>

nav

외부 페이지로 연결되는 링크의 모음을 나타냅니다.

<nav>
    <ul>
        <li>Home</li>
        <li>Events</li>
        <li>Contact us</li>
    </ul>
</nav>