기본중의 기본, 시맨틱(Semantic) 태그
date
Jul 6, 2023
slug
기본중의-기본-기맨틱-semantic-태그
category
Dev
status
Public
tags
SEO
keywords
summary
HTML5에서 사용되는 기본 태그, SEO에도 중요하답니다
type
Post
Last updated
Jul 6, 2023 02:40 AM
Created time
Jul 6, 2023 02:38 AM
시맨틱 태그와 사용 예시
시맨틱 태그는 HTML5에서 도입된 태그로, 문서의 구조와 의미를 더 명확하게 전달하기 위해 사용됩니다. 아래에 대표적인 시맨틱 태그와 사용 예시를 정리했습니다 🙂
참고 하면 좋은 자료
<header>
:- 문서의 헤더 영역을 정의합니다.
- 로고, 제목, 네비게이션 메뉴 등을 포함할 수 있습니다.
<nav>
:- 문서의 네비게이션 영역을 정의합니다.
- 주 메뉴, 하위 메뉴, 링크 목록 등을 포함할 수 있습니다.
<main>
:- 문서의 주요 콘텐츠를 감싸는 영역을 정의합니다.
- 웹 페이지의 핵심 내용을 포함하며, 한 문서에 하나의
<main>
태그만 사용해야 합니다.
<article>
:- 독립적인 콘텐츠 영역을 정의합니다.
- 블로그 글, 뉴스 기사, 포럼 게시물 등 개별적인 항목을 의미합니다.
<section>
:- 문서의 섹션을 정의합니다.
- 관련 콘텐츠 그룹을 만들기 위해 사용됩니다.
<section>
안에는 의미있는 h(헤딩)태그가 존재해야합니다.<section>
안에는<header>
,<article>
,<footer>
등 다른 시맨틱 태그를 포함할 수 있습니다.
<aside>
:- 주요 콘텐츠와 관련된 부가 정보 영역을 정의합니다.
- 사이드바, 광고 영역, 저작권 정보 등을 포함할 수 있습니다.
<footer>
:- 문서의 푸터 영역을 정의합니다.
- 저작권 정보, 연락처, 사이트 링크 등을 포함할 수 있습니다.
<figure>
과<figcaption>
:<figure>
는 독립적인 콘텐츠, 이미지, 도표 등을 정의합니다.<figcaption>
은<figure>
의 캡션(설명)을 정의합니다.
<time>
:- 날짜와 시간 정보를 정의합니다.
- 예를 들어, 게시 날짜, 이벤트 시간 등을 표현할 때 사용됩니다.
<mark>
:- 텍스트에서 강조하고자 하는 부분을 정의합니다.
- 하이라이트, 중요한 키워드 등을 강조할 때 사용됩니다.
<h1>
~<h6>
:- 제목을 정의합니다.
<h1>
이 가장 높은 수준의 제목이며,<h6>
이 가장 낮은 수준의 제목입니다.
<p>
:- 단락을 정의합니다. 텍스트나 문장 등을 단락으로 그룹화합니다.
<ul>
과<li>
:- 순서 없는 목록을 정의합니다.
<ul>
은 목록의 컨테이너이고,<li>
는 목록의 항목을 정의합니다.
<ol>
과<li>
:- 순서 있는 목록을 정의합니다.
<ol>
은 목록의 컨테이너이고,<li>
는 목록의 항목을 정의합니다.
<a>
:- 하이퍼링크를 정의합니다. 클릭하면 다른 웹 페이지, 문서, 위치로 이동하거나 특정 동작을 수행합니다.
<img>
:- 이미지를 정의합니다. 웹 페이지에 이미지를 삽입할 때 사용됩니다.
- alt속성을 명시합니다(next.js 13버전 기준에선 next/image의 alt속성은 required값일 정도로 중요)
<table>
과<tr>
과<td>
:- 표를 정의합니다.
<table>
은 표의 컨테이너이고,<tr>
은 행을 정의하며,<td>
는 셀을 정의합니다.
<form>
과<input>
:- 양식을 정의하고 입력 필드를 추가합니다.
<form>
은 양식 컨테이너이고,<input>
은 사용자 입력을 받는 필드를 정의합니다.
<label>
:- 입력 필드에 대한 레이블을 정의합니다.
<label>
은 사용자에게 입력 필드의 목적을 설명하는 텍스트입니다.
<button>
:- 버튼을 정의합니다. 클릭 가능한 버튼을 생성하여 사용자와 상호작용할 수 있도록 합니다.
<details>
와<summary>
:- 추가 정보를 제공하는 세부 정보 섹션을 정의합니다.
<details>
는 세부 정보를 감싸는 컨테이너이고,<summary>
는 세부 정보의 요약을 제공하는 텍스트입니다.
<blockquote>
:- 긴 인용문을 정의합니다. 다른 소스로부터 인용된 내용을 표시할 때 사용됩니다.
<cite>
:- 창작물의 제목이나 작성자 등을 인용합니다. 인용된 창작물의 제목이나 작성자 이름을 강조할 때 사용됩니다.
<code>
:- 코드 블록이나 인라인 코드 조각을 정의합니다. 코드 조각을 표시하거나 프로그래밍 코드를 강조할 때 사용됩니다.
<kbd>
:- 키보드 입력을 정의합니다. 사용자가 키보드로 누른 키를 나타내는 텍스트를 표시할 때 사용됩니다.
<pre>
:- 서식이 있는 텍스트 블록을 정의합니다. 고정폭 글꼴로 표시되어 원본 서식을 유지합니다.
<abbr>
:- 축약어나 머리글자를 정의합니다. 축약어를 확장한 설명을 표시할 때 사용됩니다.
<sub>
와<sup>
:- 아래 첨자(
<sub>
)와 위 첨자(<sup>
)를 정의합니다. 화학식, 수학식 등에서 사용될 수 있습니다.
<small>
:- 작은 텍스트를 정의합니다. 저작권 표시, 법적 고지, 각주 등에 사용될 수 있습니다.
<hr>
:- 수평 줄을 정의합니다. 문단의 분리, 주제 변경 등을 나타내기 위해 사용됩니다.
<address>
:- 연락처 정보를 정의합니다. 주소, 전화번호, 이메일 주소 등을 포함할 수 있습니다.
<progress>
:- 진행 상태를 나타내는 막대를 정의합니다. 작업 진행 상태, 설문 조사 진행률 등을 표시할 때 사용됩니다.
<meter>
:- 측정된 스칼라 값의 범위를 표시합니다. 예를 들어, 온도, 습도, 음압 등을 표시할 수 있습니다.
<datalist>
와<option>
:<input>
요소와 함께 사용하여 사전 정의된 옵션 목록을 정의합니다. 사용자가 입력할 수 있는 옵션을 제공할 때 유용합니다.
<output>
:- 계산 결과, 사용자 입력 결과 등을 표시하는 컨트롤의 출력을 정의합니다.