기본중의 기본, 시맨틱(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>:- 계산 결과, 사용자 입력 결과 등을 표시하는 컨트롤의 출력을 정의합니다.