HTML5-CSS

[HTML5] 태그의 의미와 종류

때래뚫 2023. 1. 11. 09:26

태그의 의미와 종류

 

 

태그(Tag)란?

- HTML에서 태그란 HTML 태그(tag)는 HTML 요소(element)라고도 부르며, HTML 문서를 구성하는 기본 단위입니다.

이 글에서 다룰 <div>같이 단락을 나타내는 태그도 있고, <h1>,<h2>.... 같이 문단 제목의 글자 크기를 나타내는 태그도 있으며, 메타 데이터를 담기위해 사용하는 <style>이나 <title>태그 처럼 모든 태그는 웹 페이지에 개발자가 표현하는 것을 어떻게 표현할지 컴퓨터에 알려주는 명령어라고 생각합니다.

 

태그(Tag)의 구성

출처 : 명품 HTML5+ CSS3 + Javascript 웹프로그래밍

태그는 보다시피 태그의 이름과 속성으로 구성되어있으며, 각 태그마다 사용할 수 있는 속성이 정해져있습니다.

따라서 사용하고싶은 태그를 알아보실 때 같이 알아보아 사용하시면 좀 더 원하는 모양의 웹 페이지를 만들 때 도움이 많이 되실 겁니다.

또한 태그는 몇개를 제외하고 모두 <태그>내용</태그>의 모양으로 끝이나며, 속성은 처음 태그를 선언하는 부분에 넣어야합니다.

예시)

<h1 title="툴팁">제목</h1>

위 예시는 "title"이라는 속성을 사용하였으며, <h1>으로 시작해 </h1>으로 마무리 하였습니다. 이처럼 속성은 처음 시작하는 태그에 같이 구성해주시고, 아래에서 다루겠지만 몇개의 종류를 제외하고는 대부분 바디에서 사용하는 태그는 저런 식으로 구성된다고 생각하시면됩니다.

 

태그의 종류

태그는 종류를 나누면 두 가지로 나눌 수 있는데, 기능에 대한 분류와 위에서 설명한 열고 닫는, 혹은 단독으로 사용하는

태그로 구분하여 설명하겠습니다.

 

기능에 대한 분류

블록태그

블록태그는 항상 새 라인에서 시작하여 출력양 옆에 다른 콘텐트를 배치하지 않고 한 라인을 독점으로 사용합니다.

예시 : <p>, <h1>, <div>, <ul>

 

인라인태그

블록 속에 삽입되어 블록의 일부로 출력하는 태그를 뜻합니다.

예시 : <strong>, <a>, <img>, <span>

 

열고닫는, 단독태그

열고닫는 태그

열고 닫는 태그는 <h1></h1>처럼 열고 닫으며 적용하는 구역을 표시하는 태그를 뜻합니다.

예시) <h1>,<div>,<p>,<span>....

 

단독태그

단독 태그는 열고 닫으며 사용하는 것이 아닌 한번의 선언으로 끝이나는 태그를 뜻합니다.

예시 ) <br>,<img>,<hr>....

 

이상으로 태그의 의미와 종류에 대해 말해보았습니다.

제가 공부한 내용을 복습개념으로 정리했기때문에 개인적인 생각이 들어가

세세한 정의가 맞지 않을 수 있습니다.

틀린부분이 발견된다면 선배님들의 도움 부탁드립니다.