📒HTML5 기본 태그

- 시멘틱 요소 (Semantic element)

🤔 시멘틱 요소란? <div>, <span> 등의 태그와 달리 그 자체에 의미를 가지고 있는 요소를 말한다. 즉, 요소가 자기 스스로 브라우저와 사용자 모두에게 자신이 사용된 의미를 명확하게 전달하는 요소를 말한다.

[HTML5 에 추가된 주요 시멘틱 요소 태그]

📌<header> 태그

<header> 태그는 HTML 문서나 섹션(section)에 대한 헤더(header)를 정의한다. 여기서 헤더(header)란 각 페이지의 맨 위에 출력되는 텍스트나 이미지의 집합을 말한다.

Example)

<header>
	<h1>HTML Header Title</h1>
</header>
. . .
<section>
	<header>
    	<h2>Section Header Title</h2>
        <p>Text</p>
    </header>
</section>

📌<nav> 태그

<nav> 태그는 HTML 문서를 탐색할 수 있는 링크(link)의 집합으로, 네이게이션의 역할을 한다. 웹사이트의 메뉴바를 만들 때 주로 사용된다.

Example)

<nav>
	<a href="/html/intro">HTML</a>
	<a href="/css/intro">CSS</a>
	<a href="/javascript/intro">JavaScript</a>
</nav>

📌<section> 태그

<section> 태그는 HTML 문서의 독립적인 섹션(section)을 정의한다.
섹션(section)은 보통 <h> 태그를 자식 요소로서 동반하지만, 그렇지 않은 경우도 있다.

Example)

<section>
	<h1>Section Title</h1>
    <p>Section Text</p>
</section>

📌<article> 태그

<article> 태그는 HTML 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타낸다. 사용 예제로 게시판과 블로그 글, 매거진이나 뉴스 기사 등이 있다.

Example)

<article>
<h2>Title</h2>
<h3>Small Title</h3>
<p>Text</p>
<h3>Small Title</h3>
<p>Text</p>
<h3>Small Title</h3>
<p>Text</p>
</article>

📌<footer> 태그

<footer> 태그는 HTML 문서나 섹션(section) 부분에 대한 푸터(footer)을 정의한다. 푸터(footer)는 주로 작성자, 저작권 정보, 관련 문서 등의 정보를 담는다.

Example)

<footer>
	<p>@copyright ...</p>
    <p>010-1111-2222</p>
</footer>    

✔ 시멘틱 요소 사용의 장점

• 검색의 효율성을 높인다.
  검색 엔진은 웹페이지들을 방문할 때, 시맨틱 요소를 중요한 키워드로 고려하기때문에 시맨틱 요소에 담긴 의미에 따라 검색 결과의 상위 노출이 결정된다.

• 개발자 및 사용자간 소통에 용이하다.
  시멘틱 요소를 통해 의미있는 코드 블록을 찾는데 유리하며, 요소안 코드 내용을 예측하기 쉽다.

• 웹 접근성의 향상
  시맨틱 요소를 사용하여 작성했다면 화면의 구조에 대한 정보를 전달할 수 있기 때문에, 더욱 정확한 콘텐츠를 전달할 수 있다.