HTML semantic tag
semantic tag는 HTML5에서 추가된 태그로, 문서의 의미를 더욱 명확하게 나타내기 위해 사용됩니다. 이러한 태그는 검색 엔진 최적화(SEO)와 웹 접근성 향상에도 도움을 줍니다. 주요 semantic tag와 그 구성 요소는 다음과 같습니다:
카테고리태그설명
| Document Structure | <header> | 페이지나 섹션의 헤더를 정의합니다. |
| <main> | 문서의 주요 콘텐츠를 지정합니다. | |
| <footer> | 페이지나 섹션의 푸터를 정의합니다. | |
| Content Sectioning | <section> | 문서 내의 섹션을 정의합니다. |
| <article> | 문서 내 독립적인 구성을 나타냅니다. | |
| <aside> | 주변 콘텐츠와 간접적으로 관련된 콘텐츠를 나타냅니다. | |
| <nav> | 내비게이션 링크 집합을 정의합니다. | |
| <address> | 문서에 대한 연락처 정보를 제공합니다. | |
| Text Content | <h1>~<h6> | 다양한 수준의 제목을 정의합니다. |
| <p> | 문단을 정의합니다. | |
| <blockquote> | 다른 소스에서 인용한 섹션을 나타냅니다. | |
| <pre> | 사전 서식을 나타냅니다. | |
| <hr> | 콘텐츠의 주제적 구분을 나타냅니다. | |
| <br> | 줄 바꿈을 삽입합니다. | |
| <strong> | 중요성을 강하게 나타냅니다. | |
| <em> | 강조된 텍스트를 나타냅니다. | |
| <mark> | 특별한 관련성이 있는 텍스트를 강조합니다. | |
| <small> | 부가적인 설명이나 작은 글씨를 나타냅니다. | |
| <abbr> | 약어 또는 두문자를 나타냅니다. | |
| <cite> | 창작물에 대한 참조를 나타냅니다. | |
| <code> | 컴퓨터 코드 조각을 나타냅니다. | |
| <sub> | 아래 첨자를 나타냅니다. | |
| <sup> | 위 첨자를 나타냅니다. | |
| <time> | 특정 시간(또는 날짜 및 시간)을 나타냅니다. | |
Media Content |
<figure> | 독립적인 콘텐츠를 지정합니다 (예: 삽화, 다이어그램, 사진 등). |
| <figcaption> | figure 요소의 캡션 또는 범례를 제공합니다. | |
| <img> | 문서에 이미지를 삽입합니다. | |
| <audio> | 문서에 소리 콘텐츠를 삽입합니다. | |
| <video> | 문서에 비디오 콘텐츠를 삽입합니다. | |
| <source> | 미디어 요소의 여러 소스를 지정합니다. | |
| <track> | 미디어 요소의 텍스트 트랙을 지정합니다. | |
| Forms |
<form> | 정보 제출을 위한 인터랙티브 컨트롤을 포함하는 문서 섹션을 나타냅니다. |
| <input> | 사용자 입력을 허용하는 타이핑된 데이터 필드를 나타냅니다. | |
| <textarea> | 여러 줄의 텍스트 입력 컨트롤을 나타냅니다. | |
| <button> | 클릭할 수 있는 버튼을 나타냅니다. | |
| <label> | 사용자 인터페이스 항목에 대한 캡션을 나타냅니다. | |
| <fieldset> | 양식에서 관련 요소를 그룹화합니다. | |
| <legend> | fieldset 요소의 캡션을 나타냅니다. | |
| <select> | 옵션 메뉴를 제공하는 컨트롤을 나타냅니다. | |
| <option> | select 요소에서 옵션을 나타냅니다. | |
| <datalist> | 다른 컨트롤에서 사용할 수 있는 옵션 목록을 포함합니다. | |
| <output> | 계산 또는 사용자 동작의 결과를 나타냅니다. | |
| <progress> | 작업의 진행 상황을 나타냅니다. | |
| <meter> | 알려진 범위 내에서의 스칼라 측정을 나타냅니다. | |
Interactive Elements |
<details> | 사용자가 열고 닫을 수 있는 공개 위젯을 만듭니다. |
| <summary> | details 요소의 제목을 정의합니다. | |
| <dialog> | 대화 상자나 기타 인터랙티브 요소를 나타냅니다. | |
| <menu> | 명령 목록을 나타냅니다. |