FE BE 개발 메모장/HTML& DOM & CSS

HTML 5의 시멘틱 요소

PixelStudio 2021. 6. 3. 01:45

Sementic Tag

 

시맨틱(Semantic)은 "의미의, 의미론적인" 을 의미하는데 시맨틱 태그는 의믜를 가진 HTML의 태그를 뜻한다. 시맨틱한 태그를 사용하여 자신의 컨텐츠를 명확하게 정의한다.

 

HTML5의 시맨틱 태그가 등장하기 전, 기존에 <div>, <span>엘리먼트로 레이아웃을 나누고, id나 class 속성 명을 담아주어 구분짓는 방식으로 웹페이지가 개발되었다. 그러나 일관성이 떨어지고 개발자들 간의 혼동으로 <section>, <nav> 같은 시멘틱한 엘리먼트들로 설계하도록 약속되었다.

 

주요 시맨틱 요소들(Sementic Elements)

<hgroup>

섹션의 주제를 나타내는 태그이다. h1~h6를 그룹짓는다.

<header>, <footer>

<header>와 <footer>는 전체 웹페이지나 특정영역의 부가정보를 표기하는데 사용한다. <header>태그에는 제목, 로고, 작성일과 같은 메타 정보를 배치하고, <footer>은 회사정보나 소유자의 소셜미디어 정보, 약관 등 문서와 관련이 적은 부가정보를 배치한다.

<arcticle>
  <header>헤더 정보</header>
   <P>본문 내용</P>
  <footer>푸터 정보</footer>
</arcticle>

 

<nav>

네비게이터(navigator)을 의미하고,  페이지 이동 등 주요 메뉴를 배치하는 태그이다. 구조에 따라서 문서의 상단이나 측면에 위치하고, 전체의 페이지의 흐름을 담당한다. 

<nav>
 <ul>
  <li> 사이트 메뉴1 </li>
  <li> 사이트 메뉴1 </li>
 </ul>
</nav>

 

<section>

어떠한 컨텐츠들의 구획을 지정하는 태그이다. 콘텐츠의 주제에 맞춰 다양한 <section> 태그를 사용할 수 있다.  

<body>
 <header> 헤더 내용</header>
  <section> 
    주제1 
  </section>
  <section> 
    주제2 
  </section>
 <footer> 푸터 내용 </footer>
</body>

<arcticle>

<section>으로 콘텐츠 영역을 분류하고, 실질적인 내용을 담는 태그이다. 예를 들면 웹사이트의 웹 컨텐츠나, 글 작성 포스트 등 재사용이 가능하더라도 하나의 콘텐츠가 된다면 <arcticle> 태그를 사용한다. 


<section> 
 <arcticle>
  <p> 첫번째 내용</p>
 </arcticle>
 <arcticle>
  <p> 두번째 내용</p>
 </arcticle>
</section>

글 목록 페이지에서 사용하며, 글 목록 전체를 <section>, 목록 중 하나를 <arcticle> 로 구분한다.

 

<arcticle> 태그안에서 여러개의 <section>태그 사용이 가능하다.


 <arcticle>
  <section> ...첫번째 단락 </section>
  <section> ...두번째 단락 </section>
  <section> ...세번째 단락 </section>
 </arcticle>

주로 글 본문 페이지에 작성하며, 글 전체를 <arcitcle>, 각 단락을 <section> 으로 구분한다.

<aside>

본문 옆에 구성하며, 본문과 관련 없는 내용으로 배치된다. 주로 카테고리 및 태그 목록 등이 포함됬거나, 맨 위로 올리기  같은 요소도 들어간다. <section>이나 <arcticle> 내부에 위치한다면, 본문 내용과 관련된 부가정보(주석, 각주)등을 노출한다

<article>
  <p>
 	컨텐츠 내용1
  </p>
  <aside>
	다른 내용
  </aside>
  <p>
    컨텐츠 내용3
  </p>
</article>

 

<figure>, <figcaption>

figure는 그림, 도표, 사진 같은 태그를 지정할 때 묶는 태그로 독립적인 콘텐츠를 주로 담는다. 

figcaption은 <figure> 태그 안에 쓰이며, 해당 컨텐츠의 부가 설명을 붙이는 태그이다.

 

<article>
  <figure>
    <img src="url or Path" />
    <figcaption>대충 이미지 설명하는 내용</figcaption>
  </figure>
</article>

 

<iframe>

 

 

 

<address> 

<address> 태그는 주로 <footer> 태그 안에 사용되며, 웹 페이지 제작자 이름이나 제작자의 웹 페이지, 피드백을 위한 연락처 정보를 넣는데 사용된다.

 

 

 

<detail>, <summary>

<details>와 <summary>는 대부분 같이 사용하고, <details>는 세부 사항이나 공지 사항등을 담는 시맨틱 태그이다. <summary>는 <detail>의 세부 정보를 표시해준다.

<article>
  <detail>
    <summary> 중요한 제목 </summary>
    <p> 중요한 내용 </p>
  </detail>
</article>

 

 

 

 

 

 

출처 - HTML 시맨틱 태그를 자세히 알기