HTML의 시맨틱(Semantic) 태그들

 

 

 

HTML의 시맨틱(Semantic) 태그들

 

 

 

---

<시맨틱 태그란?>

• 의미가 있는 태그는 브라우저와 개발자 모두에게 의미를 명확하게 설명한다.
• 예) <div> 및 <span>와 같이 의미없는 요소는 내용에 대해 아무 것도 알려주지 않는다.
• <form>, <table> 및 <article>과 같이 의미있는 요소는 내용을 명확하게 정의한다.

 

<HTML의 시맨틱 태그>

• 많은 웹 사이트에는 탐색, 머리글 및 바닥글을 나타내는 <div id="nav"> <div class="header"> <div id = "footer"> 와 같은 HTML 코드가 포함되어 있다.
• HTML에는 웹 페이지의 다른 부분을 정의하는 데 사용할 수 있는 몇 가지 의미론적 태그가 있다.

태그명	설명
<article>	독립적이고, 자체에 포함된 콘텐츠를 지정한다. 예) 포럼 게시물, 블로그 게시물, 사용자 의견, 제품 카드, 신문 기사들
<aside>	사이드바와 같이 배치된 콘텐츠 외에 일부 콘텐츠를 정의한다.
<details>	사용자가 보거나 숨길 수 있는 추가 세부 정보를 정의한다.
<figcaption>	<figure>태그의 캡션을 정의한다. 그리고 <figure>태그의 첫 번째 또는 마지막에 배치될 수 있다.
<figure>	일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함된 콘텐츠를 지정한다.
<footer>	문서 또는 섹션의 바닥글을 정의한다. 다음을 포함) 저작권, 연락처, 사이트맵, 상단 이동, 관련된 문서
<header>	소개 콘텐츠 또는 탐색 링크 집합의 컨테이너를 나타낸다. 다음을 포함) 제목요소(h1~6), 로고 또는 아이콘, 저작권 정보
<main>	문서의 기본 내용을 지정한다.
<mark>	표시되거나 강조된 텍스트를 정의한다.
<nav>	탐색 링크의 주요 블록에만 사용된다.
<section>	일반적으로 제목이 있는 콘텐츠의 주제별 그룹이다. 예) 챕터, 소개, 뉴스 항목, 연락처 정보
<summary>	<details> 태그에 대해 표시되는 제목을 정의한다.
<time>	날짜/시간을 정의한다.

 

 

<참고 사이트>

https://www.w3schools.com/html/html5_semantic_elements.asp