semantic element

 

 

의미 요소(semantic element)

의미 요소(semantic element)란 그 자체로 의미를 가지고 있는 요소를 가리킵니다.

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

 

의미 요소가 아닌 div 요소나 span 요소 등은 해당 요소가 무슨 목적으로 사용되었는지 코드를 살펴봐야 알 수 있습니다.

하지만 의미 요소인 table 요소는 코드를 보지 않아도 해당 요소가 표를 만드는 데 사용되었다는 것을 이름만 살펴봐도 바로 알 수 있습니다.

 

 

HTML5에서 추가된 의미 요소

의미 요소설명

<header>	HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 정의함.
<nav>	HTML 문서 사이를 탐색할 수 있는 링크(link)의 집합을 정의함.
<main>	HTML 문서의 주요 콘텐츠(content)를 정의함.
<section>	HTML 문서에서 섹션(section) 부분을 정의함.
<article>	HTML 문서에서 독립적인 하나의 기사(article) 부분을 정의함.
<aside>	HTML 문서에서 페이지 부분 이외의 콘텐츠(content)를 정의함.
<figure>	HTML 문서에서 그래픽과 비디오 등의 독립적인 콘텐츠(content)를 정의함.
<figcaption>	figure 요소를 위한 캡션을 정의함.
<footer>	HTML 문서나 섹션(section) 부분에 대한 푸터(footer)를 정의함.
<bdi>	기본 출력방향과는 다른 방향으로 출력되는 텍스트를 정의함.
<mark>	하이라이팅된 텍스트를 정의함.
<details>	사용자가 보거나 숨길 수 있는 추가적인 설명문을 정의함.
<summary>	details 요소에 나타날 내용을 정의함.
<dialog>	다이얼로그(dialog) 박스나 다이얼로그 윈도우를 정의함.
<menuitem>	사용자가 팝업 메뉴(popup menu)를 통해 선택할 수 있는 메뉴의 아이템(menu item)을 정의함.
<meter>	정해진 범위 내의 스칼라 치수를 정의함.
<progress>	작업에 대한 진행 정도를 정의함.
<ruby>	루비(ruby) 문자를 선언함.
<rt>	본문 위에 나타날 문자를 정의함.
<rp>	루비(ruby) 문자를 지원하지 않는 브라우저에서만 나타날 내용을 정의함.
<time>	날짜와 시간을 정의함.
<wbr>	br 요소와는 달리 긴 단어가 화면의 맨 끝에 오면 상황에 따라 줄 바꿈 할 곳을 미리 정의함.