본문 바로가기
Languages/HTML5

[HTML] Tag element 총정리 (태그 종류 및 설명)

dev-ini 2023. 4. 27. 19:00
728x90

   목차 

1. 기본
2. 내용 
3. 문서구조
4. 목록 
5. 표 
6. 이미지 
7. 멀티미디어 
8. 하이퍼링크 
9. 폼

 

 

 

HTML 태그 종류를 알아보자!

 

 

 

 1. 기본 

 

<!DOCTYPE html> : 웹 문서의 유형을 html로 지정한다

<!DOCTYPE html>

 

 

<html> : 모든 html 태그들의 최상위 태그, 언어를 지정한다. 자주 사용하는 국가코드는 en(영어), ko(한국어), ja(일본어), zh-cn(중국어)이다.

<html lang="en">

 

 

<head> : 문서의 공통적인 특성들을 넣는 곳, 전역특성, meta, title, link, script, style 순서로 요소를 선언한다.
- <meta> : 메타 데이터 입력
- <title> : 문서의 제목
- <link> : href, rel, type 속성을 선언
              - href: 경로(주로 stylesheet의 경로)
              - rel: 관계(relationship)를 뜻하며, 현재 문서와 연결한 아이템의 관계가 어떻게 되는지 설명함
               (주로 "stylesheet"). 따라서 <link>요소의 제일 중요한 기능 중 하나라고 볼 수 있음. 다양한 종류가
               있음.
               참고) https://developer.mozilla.org/ko/docs/Web/HTML/Attributes/rel
               -type: 연결한 리소스의 MIME을 포함
- <script> : src, defer 속성을 선언
                 - src: 외부 스크립트를 가리키는 URI. 문서 내에 스크립트를 직접 삽입하는 것 대신 사용할 수있
                   음)
                 - defer: 페이지가 모두 로드된 후에 해당 외부 스크립트가 실행됨을 명시.                                    
                   참고)  https://ko.javascript.info/script-async-defer
- <style> : 스타일 속성(CSS)을 선언 

 

전체적 코드는 아래과 같다

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>웹카페</title>
  <link rel="stylesheet" href="./css/index.css" />
  <script src="./js/main.js" defer></script>
  <style>
   ...
  </style>
</head>

 

 

<body>: 문서의 본문 

 

 

 

 

 

 

 2. 내용 

 

<h1> : 6단계의 구획 제목을 의미, 구획 단계는 <h1> 이 가장 높고 <h6> 가 가장 낮다.

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

 

 

<p> : 문단

 

<br> : 줄바꿈

 

<hr> : 수평선

 

 

 

 

 

 

 3. 문서구조 

 

<header> : 헤더 영역 (소개 및 탐색에 도움을 주는 콘텐츠를 나타낸다. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있음)

 

<main> : 메인 영역 (<body>의 주요 콘텐츠를 나타낸다. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어짐)

 

<section> : 콘텐츠 영역 (HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용)

 

<aside> : 사이드바 영역 (주요 내용과 간접적으로만 연관된 부분을 나타낸다. 주로 사이드바 혹은 콜아웃 박스로 표현)

 

<footer> : 푸터 영역 (주로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용)

 

<nav> : 네비게이션 영역 (문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타낸다. 자주 쓰이는 예제는 메뉴, 목차, 색인)

 

<article> : 독립적인 콘텐츠를 사용할 때 (문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타낸다. 사용 예제로 게시판과 블로그 글, 매거진이나 뉴스 기사 등)

 

<div> :  "순수" 컨테이너로서 아무것도 표현하지 않음. 대신 다른 요소 여럿을 묶어 class나 id 속성으로 꾸미기 쉽도록 돕거나, 문서의 특정 구역이 다른 언어임을 표시(lang속성 사용)하는 등의 용도로 사용한다.

 

<figure> :  삽화나 다이어그램, 사진 등과 같이 문서의 주요 흐름과는 독립적인 콘텐츠를 정의할 때 사용한다. <figure> 요소의 콘텐츠는 문서의 내용과는 연관성을 가지지만, 해당 콘텐츠의 위치가 문서의 주요 흐름과는 독립적이어서 제거해도 문서의 흐름에 영향을 주어서는 안된다. <figcaption>을 사용해 설명을 붙일 수 있다.

<figure>
    <img src="/media/cc0-images/elephant-660-480.jpg" alt="Elephant at sunset">
    <figcaption>An elephant at sunset</figcaption>
</figure>

 

 

 

웹사이트를 구성할 때는 보통 3단 또는 4단으로 구성한다


 

 

 

 

 

 

 4. 목록 

 

<ol> : ordered list, 순서가 있는 목록 (앞쪽에 번호가 달린다)

<ol>
  <li>세수를 한다.</li>
  <li>밥을 먹는다.</li>
  <li>공부를 한다.</li>
</ol>

 

  1. 세수를 한다.
  2. 밥을 먹는다.
  3. 공부를 한다.

 

<ul> : unordered list, 순서가 필요없는 목록 (정렬되지 않은 목록)

<ul>
    <li>Milk</li>
    <li>Cheese
        <ul>
            <li>Blue cheese</li>
            <li>Feta</li>
        </ul>
    </li>
</ul>

 

  • Milk
  • Cheese
    • Blue cheese
    • Feta

 

<li> : list item, 목록의 항목을 나타낸다. <ol>과 <ul>의 각 항목들을 나열할때 사용 (반드시 정렬 목록<ol>, 비정렬 목록<ul> or <menu> 안에 위치해야함. 메뉴와 비정렬 목록에서는 보통 불릿으로 항목을 나타내고, 정렬 목록에서는 숫자나 문자를 사용한 오름차순 카운터로 나타낸다.

 

아래는 <ul>, <li>를 사용한 예시이다.

  •  .menu  : 메인메뉴 전체 (Web Cafe 로고 기준으로 로고를 제외한 오른쪽 전부)
  •  .menu-item  : 메인메뉴 개별요소들 (”HTML에 대해”, “CSS에 대해”, “웹표준” 등..)
  •  .menu-button  : 개별요소를 버튼으로 만들기. 클릭하면 하위메뉴 링크 모음들을 보여줌
  •  .sub-menu  : 메인메뉴 개별요소들의 하위메뉴들. (”HTML5 소개”, “레퍼런스 소개”, “활용예제”) 클릭하면 다른 페이지로 이동함

위의 예시를 논리적으로 마크업하면 이러한 구조가 된다.

 

 

 

 

 

 5. 표 

 

 

<전체적 구조>

<table>

 <caption>제목</caption>
 
 <thead>
  <tr>
   <th>구분</th>
   <th>여자</th>
   <th>남자</th>
  </tr>
 </thead>

 <tfoot>
  <tr>
   <th>계</th>
   <td>A</td>
   <td>B</td>
  </tr>
 </tfoot>

 <tbody>
  <tr>
   <th>인원</th>
   <td>A</td>
   <td>B</td>
  </tr>
  <tr>
  <th>점수</th>
  <td>A</td>
  <td>B</td>
  </tr>
 </tbody>
 
 </table>

 

 

<table> : 2차원의 격자형 데이터를 표현하기 위해 사용, 표의 요약 내용을 표기해야할 때 summary 속성을 선택적으로 사용 가능

<table summary="요약입니다">

 

 

<caption> : 표의 제목을 표현하기 위해 사용 (반드시 선언) 

<caption>맥주와 소주의 가격과 열량 비교</caption>

 

 

<colgroup> : <col> 요소를 그루핑하여 디자인을 제어할 때(여러열을 지정할 때) 선언 (선택적 사용)

<colgroup><col style="width:100px"></colgroup>

 

 

<col> :표 각 열의 스타일 지정을 위해 선언 (width, span을 선택적 선언), span은 동일한 스타일로 묶어서 사용할 때 유용

<col span="2" style="width:100px">

 

 

<thead> : 표 머리글을 그루핑할 때 선언

<thead>
<tr>
<th scope="col" >구분</th>
<th scope="col" abbr="가격">가격(won)</th>
<th scope="col" abbr="열량">열량(kcal)</th>
</tr>
</thead>

 

 

<tfoot> : 표 바닥글을 그루핑할 때 선언, thead와 tbody 요소 사이에 위치해야함 (선택적 사용)

<tfoot>
<tr>
<th scope="row" >계</th>
<td>8,000</td>
<td>650</td>
</tr>
</tfoot>

 

 

<th> : scope, abbr, id 속성을 선언. (abbr, id는 선택적 사용)
- 표에 셀 제목이 명시되지 않은 경우에도 <th> 요소를 선언하여 의미에 맞는 제목을 명시 (화면에 표시 안되게 CSS로 숨김처리)
- scope는 반드시 선언 (id, Headers 사용시 필요없음)

<th scope="col" abbr="가격">음식의 가격(won)></th>


 

<tbody> : 표 본문을 그루핑하기 위해 선언

<tbody>
<tr>
<th scope="row">소주</th>
<td>3,000</td>
<td>300</td>
</tr>
<tr>
<th scope="row">맥주</th>
<td>5,000</td>
<td>350</td>
</tr>
</tbody>

 

 

전체적 코드와 구현된 표는 아래과 같다

<table summary="맥주는 소주보다 2000원 비싸고 열량이 50kcal 높다">

 <caption>맥주과 소주의 가격과 열량 비교</caption>
 <col span="2" style="width:100%">

 <thead>
  <tr>
   <th scope="col" >구분</th>
   <th scope="col" abbr="가격">가격(won)</th>
   <th scope="col" abbr="열량">열량(kcal)</th>
  </tr>
 </thead>

 <tfoot>
  <tr>
   <th scope="row" >계</th>
   <td>8,000</td>
   <td>650</td>
  </tr>
 </tfoot>

 <tbody>
  <tr>
   <th scope="row">소주</th>
   <td>3,000</td>
   <td>300</td>
  </tr>
  <tr>
  <th scope="row">맥주</th>
  <td>5,000</td>
  <td>350</td>
  </tr>
 </tbody>
 
 </table>

 

 

 

 

 

 

 6. 이미지 

 

 

<img> : 이미지 삽입, src, width, height, title, alt, usemap 속성을 선언한다.

-src: 이미지 파일 경로 (필수 표기)
-width, height: %(브라우저 창의 크기 단위), px (픽셀 단위)
-title: 브라우저에 독립적으로 툴팁을 표현하기 위해 사용한다. (title을 선언한 경우에도 alt를 함께 선언해야함)
- alt: 대체 텍스트. 이미지 내용과 동일한 값을 표기하여 이미지를 볼 수 없는 환경 (스크린리더, 이미지 서버 장애, 이미지 표시하지 않음 설정)에서도 확인할 수 있게 한다. 이미지가 정상적으로 나타나지 않을 경우 이미지 대신 무엇인지 알 수 있게 하는 값이 나타나야 사용자가 무리 없이 사용할 수 있기 때문이다. (필수 표기)

<img src="logo.png" width="30px" height="10px" title="고객센터" alt="고객센터, 모든 궁금증이 해결되는 곳" usemap="#help">


- usemap: 클라이언트 사이드 이미지 맵(client-side image-map)으로 이미지를 명시한다.
<map> 요소의 name 속성과 결합하여, <img> 요소와 <map> 요소 사이의 관계를 생성한다.
즉,  <img> 요소의 usemap 속성과 같은 이름으로 <map>요소의 name 속성을 선언하여 커플링한다.

<img usemap="#맵이름">
<map name="맵이름">

 

<img src="img_main.gif" width="600px height="200px" title="한글날 이벤트" alt="한글날 이벤트, 한글을 글꼴로 나눕니다" usemap="#help"> 
<map name="help">
 <area shape="rect" coords="506,48,608,139" href="#" target="_blank" title="고객센터" alt="고객센터, 모든 궁금증이 해결되는 곳">
</map>


usemap 속성은 하나의 이미지에 여러 개의 링크를 걸 때 사용된다. 즉, 이미지 상의  클릭 위치에 따라 다른 링크가 열리도록 하는 것이다. 이러한 것을 이미지맵(image-map)이라고 하며 이것을 사용하면 HTML코드가 간단해지는 장점이 있다.

*참고) 만약 해당 <img> 요소가 <a>요소나 <button> 요소의 자손 요소(descendant element)이면 usemap 속성은 사용할 수 없다
(이것만 읽으면 이해가 잘 안될 것인데, 하단의 <map>와 <area>를 보면 이해가 갈 것이다)

 

 

<map> : 이미지맵을 만들기 위해서 사용된다. name 속성을 통해 이름을 지정하고 <img> 태그에 usemap 속성으로 이미지 맵을 지정한다.

 

<area> :  이미지 맵의 영역을 지정하기 위해서 사용된다. <map>~</map> 요소 내부에 포함되어 작성한다.
shape, coords, href, target, title, alt 속성을 선언한다.
- shape: 영역의 형태를 지정 
   - default: 화면 전체
   - rect: 사각형 
   - circle: 원형
   - poly: 다각형
- coords: 링크를 사용할 영역 좌표를 지정
- href: 이동할 주소를 지정
- target: 새창을 표시해야할 때 사용
- title: 예고없이 새창을 표시해야하거나, 이동 경로를 정확히 알 수 없을때, alt 속성을 축약하거나, 브라우저에 독립적으로 툴팁을 표현하기 위해 사용 (title을 선언한 경우에도 alt를 함께 선언해야함)
- alt : 대체 텍스트 지정



아래는 위에 내용을 토대로 만들어 본 예시이다.
사진에서 왼쪽 상단에 첫번째 상자를 누르면 네이버로 이동하고, 오른쪽 상자를 누르면 구글로 이동하게된다.

 

<img src="https://cdn.pixabay.com/photo/2014/04/14/20/11/pink-324175_1280.jpg" title="꽃사진" alt="꽃사진" usemap="#image" />
<map name="image"> 
<area shape="rect" coords="10,10,200,200" href="https://www.naver.com" target="_blank" title="새창" alt="네이버"    />
<area shape="rect" coords="400,10,200,200"  href="https://www.google.com" target="_blank" title="새창" alt="구글" />
</map>

 

 

직접 클릭해서 이동해보세요! (새창으로 열립니다!)

꽃사진 네이버 구글

 

왼쪽 박스를 클릭하면 네이버로 이동하고, 오른쪽 박스를 클릭하면 구글로 이동한다.

 

 

 

<iframe> : 브라우징 맥락을 나타내는 요소로, 현재 문서 안에 다른 HTML 페이지를 삽입한다. <iframe>은 페이지 성능에 영향을 주기 때문에 가급적 사용하지 않는다. 
- 부득이하게 사용해야 할 경우 src, width, height, title, frameborder, marginwidth, marginheight, scroling 속성을 선언한다. 
- 스크린리더 사용자를 위해 title 속성에 제목을 표기한다. 상단에 iframe의 heading 요소가 있는 경우더라도 반드시 title을 선언한다.
- iframe의 내용이 빈 경우더라도 빈 iframe이라는 것을 사용자에게 알려주도록 한다.

<iframe src="nbox.html" width="410px" height="800px" title="공지사항 게시판" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

 

 

 

 

 

 

 7. 멀티미디어 

 

 

오디오, 비디오 등 멀티미디어 파일을 삽입할 때는 <object>와 <embed>를 사용한다.

 

<object> : 오디오, 비디오, pdf 등을 삽입할 때 사용

<object width="너비" height="높이" data="파일"></object>

 

<emded> : 오디오, 비디오, 이미지 등을 삽입할 때 사용 (닫기 태그 없음)

<embed src="파일경로" width="너비" height="높이">

 

 

 

플러그인 필요없이 브라우저에서 바로 재생하는 태그는 <audio>와 <video>를 사용한다 (HTML5 부터)

<audio> (기본형)

<audio src="오디오 파일 경로"></audio>

 

<video> (기본형)

<video src="비디오 파일 경로"</video>

 

 

*<audio>, <video> 태그의 속성들 
- controls: 컨트롤 바 표시
- autoplay: 자동재생
- loop: 반복 재생
- muted: 음소거
- preload: 로딩방법 (auto(기본값), matadata, none)
- width, height: 비디오 플레이어의 너비, 높이 지정
- poster="파일이름": 비디오 플레이어의 재생 전 포스터 

 

 

 

 

 

 

 8. 하이퍼링크 

 

 

<a> : 하나의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크(hyperlink)를 정의할 때 사용. 
- href: 이동 할 링크 주소


- target: 새창으로 페이지를 표시해야할 때 (선택적 사용)
   - _blank: 링크된 문서를 새로운 윈도우나 탭(tab)에서 오픈 (취약점 보완을 위해 "rel="noopener noreferer" 사용
   - _self: 링크된 문서를 링크가 위치한 현재 프레임에서 오픈 (기본값)
   - _parent: 링크된 문서를 현재 프레임의 부모 프레임에서 오픈
   - _top: 링크된 문서를 현재 윈도우 전체에서 오픈
   - 프레임 이름: 링크된 문서를 명시된 프레임에서 오픈

 <a href="https://validator.w3.org/" target="_blank" title="마크업 유효성 검사 사이트로 이동" rel="noopener noreferrer">
  W3C Markup Validation </a>


- title : 예고 없이 새창을 표시해야하거나, 이동 경로를 정확히 알 수 없을 때, 브라우저에 독립적으로 툴팁을 표현하기 위해 사용 

<a href="https://www.google.com/" target="_blank" title="새창"> 구글로 이동 </a>

구글로 이동

 

 

이미지 링크

<a><img src="이미지 파일 경로" alt></a>

 

 

*링크의 기본 스타일
- 아직 방문하지 않은 링크(unvisited link) : 밑줄, 파란색(blue)
- 방문했던 링크(visited link) : 밑줄, 보라색(purple)
- 활성화된(현재 마우스가 클릭하고 있는) 링크(active link) : 밑줄, 빨간색(red)

Website는 방문해서 보라색으로 뜬다

 

Email은 현재 마우스로 클릭하고 있는 링크이다

 

 

 

 

 

 

 9. 폼 

 

 

<form>: 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타냄
- method: get(사용자의 입력 내용이 드러나게 서버로 넘겨줌), post(사용자의 입력내용이 드러나지 않게 서버로 넘겨줌)
- name: 자바스크립트로 폼 이름 지정 (HTML3부터 사용중단. id를 사용해야함)
- action: 서버 프로그램 지정
- target: 열어볼 파일 위치 지정
- autocomplete: 자동 완성 기능 지정 (기본값 on)

<form [속성="속성값"]>여러 폼 요소</form>
<form action="" method="get">
  <div>
    <label for="name">이름을 작성하시오</label>
    <input type="text" name="name" id="name" required>
  </div>
</form>
 
 

 

 

<fieldset> : <form> 요소의 자식 노드로 선언하여 폼 컨트롤 요소들을 그루핑 하기 위해 선언한다 (폼 내부에서 구역을 나눔)

 

<legend> : <fieldset>의 자식 요소로서 폼 컨트롤 요소들의 그룹 이름을 표현하기 위해 선언 (구역 제목 붙이기)

<form>
<fieldset>
<legend>개인정보</legend>
   ...
</fieldset>
</form>

 

<input> : <label> 요소, title 속성, alt 속성을 통해 스크린리더 사용자는 주변 맥락에 대한 이해 없이 각 요소에 독립적으로 접근해도 폼을 이해할 수 있다. 입력 유형과 특성의 다양한 조합 가능성으로 인해, <input> 요소는 HTML에서 제일 강력하고 복잡한 요소 중 하나이다. (더 자세한 내용은 https://dev-ini.tistory.com/30 참고)

 

<select> : 옵션 메뉴를 제공하는 컨트롤을 나타냄

 

<label for="pet-select">애완동물을 골라봅시다!</label>

<select name="pets" id="pet-select">
    <option value="">--애완동물을 골라주세요--</option>
    <option value="dog">강아지</option>
    <option value="cat">고양이</option>
    <option value="hamster">햄스터</option>
</select>

 

 

 

<label> :  사용자 인터페이스 항목의 설명을 나타낸다. <input>, <select>, <textarea>와 같은 폼 요소와 함께 쓸 때, label에  for 속성을 부여하여, 해당 폼요소들의 id 값과 동일한 이름으로 연결한다. 단, label명이 위치할 공간이 없는 경우, title 속성으로 대체할 수 있다. 

<form action="" method="get">
  <div>
    <label for="name">이름을 작성하시오</label>
    <input type="text" name="name" id="name" required>
  </div>
</form>

 

단, <label> 안에 <input> 속성이 포함되어있는 경우에는 for과 id를 연결하지않아도 된다.

<label><input type="checkbox" name="sports">축구</label>

 

 

<textarea> :  멀티라인 일반 텍스트 편집 컨트롤을 나타낸다. cols, rows 속성을 선언한다. CSS를 정상적으로 불러오지 못하는 상황에서도 사용에 문제가 없도록 cols, rows의 속성값은 각각 최소 30, 5 이상이 되도록 선언한다. <label>로 연결할 수 없는 경우 title을 사용해도 무방함.  
- rows: 세로 줄 수, 길 경우 스크롤 막대가 생성됨
- cols: 가로 너비(문자 단위)

<label for="story">글자를 입력해보세요!</label>

<textarea id="story" name="story" rows="5" cols="30">
여기다가 입력해보세요!
</textarea>

 

 

 

<button> : type 속성을 선언한다. 
- type 속성을 button으로 선언하여 열기/닫기, 접기/펼치기 등의 UI를 제어한다.
- 폼을 서버로 전송하는 역할을 하는 버튼은 submit 타입을 사용한다 

<button type="button">열기</button>
<button type="submit">전송</button>

 

 

 

 

<form>, <fieldset>, <legend>, <label>, <input>, <button>, <a> 을 사용한 로그인 섹션 예시

 

 

논리적 순서로 마크업한 예시

 

<section class="login">
  <h2 class="login-title">로그인</h2>
  <form method="POST" action="https://formspree.io/seulbinim@gmail.com" class="login-form">
   <fieldset>
    <legend>회원 로그인 폼</legend>
    <div class="user-email">
     <label for="userEmail">아이디</label>
     <input type="email" id="userEmail" name="userEmail" required placeholder="fe@euid.dev" />
    </div>
    <div class="user-pw">
     <label for="userPw">비밀번호</label>
     <input type="password" id="userPw" name="userPw" required placeholder="8자리 이상" />
    </div>
    <button type="submit" class="login-button">로그인</button>
   </fieldset>
  </form>
  <div class="sign">
   <a href="/"><span class="icon-right-open" aria-hidden="true"></span>회원가입</a>
   <a href="/"><span class="icon-right-open" aria-hidden="true"></span>아이디/비밀번호 찾기</a>
   </div>
</section>
728x90
저작자표시

'Languages > HTML5' 카테고리의 다른 글

[HTML] <input> 정복기  (1) 2023.04.30

'Languages/HTML5' Related Articles

티스토리툴바