[ HTML5 ] HTML5에서 추가된 요소들

요소 ( Elements )

HTML에서 시작 태그와 종료 태그로 이루어진 모든 명령어들을 의미합니다.

 

태그 ( Tag )

요소의 일부로 시작 태그와 종료 태그로 이루어진 모든 명령어들을 의미합니다.

 

의미 요소 ( Semantic Element )

의미요소란 그 자체로 의미를 갖고 있는 요소를 말합니다.

요소 스스로가 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확하게 전달해 주는 요소를 의미합니다.

 

div요소를 보면 개발자가 어떤 목적으로 사용했는지 코드를 봐야 알 수 있습니다. 하지만 의미 요소인 table요소는 코드를 확인하지 않더라도 표를 만들기 위해 만드는데 사용되었다는 것을 바로 알 수 있습니다.

 

 

HTML5에서 추가된 의미 요소

1. header
2. nav
3. main
4. section
5. article
6. figure, figcaption
7. footer

의미요소

 

---

 

header 요소

header요소는 HTML문서나 섹션부분에 대한 header를 정의합니다.

헤더는 도입부에 해당하는 콘텐츠나 네비게이션 링크의 집합 등과 같은 정보를 포함하게 됩니다.

• 하나 이상의 제목 요소 ( h1 ~ h6 )
• 로고나 아이콘
• 저장 정보

<header>
	<h1>
        <strong>제목입니다.</strong>
        <em><img src="로고.png" /></em>
    </h1>
    
    <p>저자 정보</p>
</header>

 

 

main 요소

main요소는 해당 문서의 body요소의 주 콘텐츠를 정의할 때 사용합니다.

main요소의 콘텐츠는 해당 문서의 중심 주제 또는 주요 기능과 직접적으로 관련되어 있거나, 확장되는 콘텐츠로 구성되어야 하며, 문서 전반에 걸쳐 반복되는 내용을 포함해서는 안됩니다.

따라서, 하나의 문서에는 하나의 main요소만 존재해야 하며, main요소는 다른 의미요소의 자손 요소가 되어서는 안됩니다.

<main>
    <h1>제목입니다.</h1>
    <section>
        <h2>섹션 제목</h2>
        <p>
            내용
        </p>
    </section>

    <section>
        <h2>섹션 제목</h2>
        <p>
            내용
        </p>
    </section>
</main>

 

 

nav 요소

nav요소는 HTML문서 사이를 탐색할 수 있는 링크의 집합을 정의합니다. nav요소는 링크의 커다란 집합을 의미하지만, 문서 내의 모든 링크가 nav요소에 포함되는 것은 아닙니다.

<nav>
    <ul>
        <li><a href="#">의미요소</a></li>
        <li><a href="#">의미요소</a></li>
        <li><a href="#">의미요소</a></li>
    </ul>
</nav>

 

 

section 요소

section요소는 내용적 흐름과 구조를 만들기 위해 내용을 나누는 용도입니다. 관련있는 내용을 section요소로 묶어 표시합니다.

보통 section요소는 제목을 포함하지만, 항상 그런 것은 아닙니다.

<section>
    <h2>제목입니다.</h2>
    <p>
        내용부분입니다.
    </p>
</section>


<!-- 제목을 section 밖에서 사용할 때 -->
<h2>제목입니다.</h2>
<section>
    <p>
        내용부분입니다.
    </p>
</section>

 

 

article 요소

article요소는 독립적으로 구성된 글을 표시합니다. 본문과 별개로 구성되어 다른 영역에 영향을 주거나 받지 않고 독립적으로 배포되거나 재사용 할 수 있습니다.

게시판의 게시물, 블로그 포스트, 댓글, 위젯에 담긴 콘텐츠등이 article에 해당합니다.

<article>
    <h2>기사 제목입니다.</h2>
    <p>
        기사 내용입니다.
    </P>
</article>

 

:: section요소와 article요소를 보면 별다른 차이점이 없어보입니다. 실제로도 두 요소 간의 쓰임에 있어 큰 차이를 보이지는 않습니다. 대체로 section요소는 HTML문서의 전체적인 내용에 포함되며, article요소는 문서의 전체적인 내용과 별도의 독립적인 내용이 들어갈 때 사용한다고 생각하면 편합니다.

 

 

figure 요소와 figcaption 요소

책이나 신문에 포함되는 이미지 바로 아래에는 해당 이미지를 설명하는 캡션이 위치하게 됩니다.

HTML5에서는 위와 같은 목적을 위해서 figure요소와 figcaption요소를 제공하고 있습니다.

figure요소는 HTML문서에서 그래픽과 비디오 등의 독립적인 콘텐츠를 정의할 때 사용합니다.

figcaption요소는 위와 같은 figure요소를 위한 캡션을 정의할 때 사용합니다.

<figure>
    <img src="이미지.png" alt="이미지 제목" />
    <figcaption>이미지 설명을 위한 부분입니다.</figcaption>
</figure>

 

 

footer 요소

footer요소는 HTML문서나 섹션 부분에 대한 푸터를 정의합니다.

HTML문서의 푸터에는 일반적으로 사이트의 작성자, 저작권 정보, 연락처, 회사명 등을 명시합니다.

또한, 한 문서 내에 여러 footer요소가 존재 할 수 있습니다.

<footer>
    <ul>
        <li><a href="#">정보</a></li>
        <li><a href="#">정보</a></li>
        <li><a href="#">정보</a></li>
        <li><a href="#">정보</a></li>
    </ul>
    
    <p>
        Copyright 2022. shiro all rights reserved
    </p>
    <p>
        연락처 : 02-1234-1234
    </p>
</footer>