HTML

[HTML-기초] - HTML의 태그들

Kim Power 2025. 1. 19. 01:14

 

HTML은 웹 개발을 하는 데 있어 가장 기본이 되는 요소입니다.

HTML은 시맨틱태그 와 비시맨틱 등 여러 태그가 존재합니다.

오늘 다뤄볼 내용은 웹 개발에기본이 되는 HTML의 여러태그들을 알아보겠습니다.

 

목차

1.시맨틱 태그

 

2.비시맨틱 태그

 

3.시맨틱 태그 와 비시맨틱 태그의 다양한 용도의 따른 분류

 

4.멀티미디어 태그

 

5.테이블 관련 태그

 

6.메타 데이터 및 링크 태그

 

 

 

 

1.  시맨틱 태그(Semantic Tags)

  • 먼저 시맨틱 태그입니다. 시맨틱 태그의 종류는 이렇습니다.

 

<header>태그

  • 웹 페이지나 섹션의 머리글을 정의합니다.
  • 보통 사이트 로고, 제목, 네비게이션 메뉴 등이 포함합니다.

 

 

 

<nav>태그

  • 네비게이션 그룹을 나타냅니다.
  • 주로 사이트 메뉴나 목차에 사용됩니다.

 

 

 

<main>태그

  • 문서의 주요 콘텐츠를 감쌈니다.
  • 문소의 핵심 내용만 포함하며, 한 페이지에 하나만 써야합니다.

 

 

 

<article>태그

  • 독립적으로 구분 가능한 콘텐츠를 나타냅니다.
  • 블로그 글, 뉴스 기사, 포럼 게시글 등에 사용됩니다.

 

 

 

 

<section>태그

  • 관련 콘텐츠를 그룹화할때 사용됩니다.
  • 요소들을 구분지을때 자주 사용합니다.

 

 

 

 

<aside>태그

  • 주요 콘텐츠나 간접적으로 관련된 정보를 나타냅니다.
  • 사이드바나 참고 자료, 광고 등에 사용됩니다.(사이드에 위치함)

 

 

 

 

<figure>태그 와 <figcaption>태그

  • <figure>: 이미지, 다이어그램, 코드 블록 등 독립적인 콘텐츠를 감쌈니다.
  • <figcaption>:해당 콘텐츠를 설명을 추가해줄때 사용합니다.

 

 

 

 

<time>태그

  • 날짜나 시간을 나타냅니다.
  • 날짜 형식을 표준화하여 검색 엔진과 기계가 읽기 쉽게 만듭니다.

 

 

 

 

<footer>태그

  • 웹 페이지나 섹션의 바닥글을 정의합니다.
  • 저작권 정보, 연락처 등을 포함합니다.

 

 

 

시맨틱 태그의 장점

  • 태그들의 이름만으로 콘텐츠의 목적을 이해할 수 있습니다.
  • 구조가 명확함으로 코드 읽기 쉬워집니다

 

 

 

 

 

 

2. 비시맨틱 태그(Non-Semantic Tags)

  • 비시맨틱 태그는 시맨틱 태그와는 다르게 이름만으로 태드의 역할이나 의미를 알기 어렵습니다.
  • 비시맨틱 태그의 종류는 이렇습니다.

 

<div>태그

  • 블록 라벨 컨테이너.
  • (부모요소의 폭에 맞추고, 너비, 높이, 여백을 자유롭게 사용하고,레이아웃을 구성하는데 많이 이용하는 컨테이너)
  • 구조를 나누거나 css스타일 적용할때씁니다.

 

 

 

 

<span>태그

  • 인라인 컨테이너.
  • (콘텐츠의 가로 크기만큼만 공간을 차지하고, 높이, 너비, 여백을 지정할때 일부 제한이 있는 컨테이너)
  • 텍스트의 일부분을 스타일링하거나 특정 요소를 감싸는 데 사용합니다.

실행했을때

 

 

 

 

3. 시맨틱 태그 와 비시맨틱 태그의 다양한 용도의 따른 분류

 

 

 

1. 텍스트 관련 태그

웹 페이지의 텍스트를 구조화하고 스타일링하는 데 사용합니다.

  • <p>: 단락.
  • <br>: 줄 바꿈.
  • <hr>: 수평선(구분선).
  • <strong>: 굵은 텍스트(강조).
  • <em>: 기울임 텍스트(강조).
  • <mark>: 하이라이트.
  • <blockquote>: 긴 인용문.
  • <code>: 코드 블록.
  • <pre>: 사전 서식(공백 및 줄 바꿈 유지).

ex)

실행했을때

 

 

 

2.폼 관련 태그

사용자 입력을 받을 때 사용됩니다

 

  • <form>: 입력 폼 컨테이너.
  • <input>: 입력 필드 (텍스트, 비밀번호, 체크박스 등).
  • <textarea>: 여러 줄 입력 필드.
  • <button>: 버튼.
  • <label>: 입력 필드와 연결된 레이블.
  • <select> 및 <option>: 드롭다운 메뉴.
실행했을때

※ <input>태그 type종류:

  • text: 기본 텍스트 입력 (단일 줄)
  • password: 입력값이 보이지 않고, 암호화된 형태로 표시됨.
  • search: 검색 상자를 위한 입력.
  • tel: 전화번호 입력을 위한 필드.
  • url: URL 입력 (브라우저에서 URL 형식 검사 가능).
  • email: 이메일 입력 (쉼표로 여러 이메일 주소 입력 가능).

2. 숫자와 관련된 입력

  • number: 숫자 입력 (최소값, 최대값, 증가 단위 설정 가능).
  • range: 슬라이더 형태의 숫자 입력.
  • date 계열:
    • date: 날짜 선택 (YYYY-MM-DD 형식).
    • datetime-local: 날짜와 시간을 함께 입력.
    • month: 월과 연도만 선택.
    • week: 연도와 주 단위 선택.
    • time: 시간만 입력.

실행했을때

순서대로number-range-date입니다.

 

3. 파일 및 미디어

  • file: 파일 업로드 필드 (다중 업로드 가능).

file은 accept 부분에 .jpg, .png, .pdf와 같은 파일을 지정 해줄 수 있습니다.

  • image: 이미지를 업로드하거나 클릭 시 특정 동작 수행.

이런식으로 코드쓰시고 width,height로 크기를 조절해주시면 됩니다.

 

4. 버튼 및 동작

  • button: 단순 클릭가능한 버튼.
  • submit: 폼 제출 버튼(위에 사진 예시 있습니다)보러가기.
  • reset: 폼 초기화 버튼.

5. 선택 및 체크박스

  • checkbox: 다중 선택이 가능한 체크박스.
  • radio: 단일 선택이 가능한 라디오 버튼.
  • color: 색상 선택을 위한 컬러 피커.

위에는 checkbox/ 아래는 radio입니다. 

checkbox는 다중선택이 되지만 radio는 안되는 모습입니다.

 

6. 숨겨진 값

  • hidden: 사용자에게 표시되지 않는 입력 (폼 데이터 전송 시 사용).

7. 기타

  • datetime: 과거 속성으로, 날짜와 시간을 입력. (현재 사용 권장되지 않음).
  • week: 주 단위 날짜 선택.

 

 

input태그 type종류 엄청 많네요...  

 

 

 

 

 

3.멀티미디어 태그

이미지, 오디오, 비디오 등 멀티미디어 콘텐츠를 삽입할 때 사용됩니다

  • <img>: 이미지 삽입.
  • <audio>: 오디오 삽입.
  • <video>: 비디오 삽입.
  • <source>: 멀티미디어 파일의 소스.
  • <track>: 비디오 및 오디오의 자막.

 

 

 

 

 

4.테이블 관련 태그

표를 만들 때 사용됩니다.

  • <table>: 테이블 컨테이너.
  • <tr>: 행.
  • <td>: 데이터 셀.
  • <th>: 헤더 셀.
  • <caption>: 테이블 제목

 

 

 

 

 

 

 

5.메타 데이터 및 링크 태그

브라우저와 검색 엔진에 정보를 제공하거나 외부 리소스를 연결할 때 사용됩니다.

  • <meta>: 메타데이터 정보 (문자 인코딩, 설명 등).
  • <link>: 외부 리소스(CSS 파일 등) 연결.
  • <style>: HTML 내부에 CSS 스타일 정의.
  • <script>: 자바스크립트 코드 삽입.

 

 

 

 

 

이글을 통해 HTML 태그에 대해 이해하시는 데 도움이 되었으면 좋겠고,

지금까지 HTML 태그에 관한 글이었습니다.

방문해 주셔서 감사합니다.❤️❤️