초보자가 알아야 할 X 일반적으로 사용되는 HTML 태그
프론트엔드 개발을 꿈꾸는 여러분에게 HTML 학습은 필수적인 첫걸음입니다. 하이퍼텍스트 마크업 언어(Hypertext Markup Language)로 알려진 HTML은 웹페이지의 뼈대를 이루는 핵심 기술입니다.
HTML은 태그, 속성, 요소 등 다양한 구성 요소로 이루어져 있습니다. 이 중에서도 HTML 태그는 웹페이지의 구조를 정의하는 데 중요한 역할을 합니다. 브라우저는 HTML 태그를 통해 웹페이지의 콘텐츠를 제목, 단락, 이미지 등으로 분류하고 구성합니다. 즉, HTML 태그는 브라우저에게 콘텐츠를 어떻게 표시하고 형식화해야 하는지 알려주는 지침과 같습니다.
웹 서버는 HTML 태그를 위에서 아래로 순차적으로 읽어냅니다. 하나의 웹페이지에는 HTML 태그 개수에 제한이 없으며, 필요한 만큼 다양한 태그를 사용할 수 있습니다.
- 모든 HTML 태그는 꺽쇠괄호(< >)로 둘러싸여 있습니다.
- 각 HTML 태그는 고유한 기능을 수행합니다.
- 대부분의 HTML 태그는 여는 태그(<tag>)와 닫는 태그(</tag>) 쌍으로 구성됩니다.
HTML 태그, HTML 요소, HTML 속성의 차이점
많은 사람들이 HTML 태그와 HTML 요소를 같은 의미로 혼용하지만, 기술적으로는 두 용어는 다릅니다. HTML 태그는 HTML 요소를 정의하는 데 사용됩니다.
HTML 요소는 여는 태그와 닫는 태그 사이에 포함된 콘텐츠를 함께 지칭합니다. 예를 들어, 다음 코드는 HTML 요소의 한 예입니다.
<p> 이것은 단락입니다 </p>
<p>는 HTML 태그의 예입니다.
HTML 속성은 HTML 요소에 추가 정보를 제공합니다. 속성은 HTML 요소의 여는 태그 내부에 정의됩니다.
다음은 HTML 속성의 예시입니다.
<button id="submitOrder" class="btn">주문하기</button>
모든 개발자가 알아야 할 HTML 태그
1993년 팀 버너스 리(Tim Berners-Lee)가 HTML을 처음 소개한 이후로, HTML은 끊임없이 발전해 왔습니다. 초기 HTML 버전에는 18개의 태그만 있었지만, 새로운 태그들이 계속 추가되어 왔습니다. 가장 최근의 업데이트는 2014년의 HTML5입니다.
HTML과 HTML5를 비교해 보면, HTML5에서는 <article>, <header>, <footer>와 같이 콘텐츠의 의미를 명확하게 설명하는 의미론적 태그가 도입되었음을 알 수 있습니다. 현재 100개 이상의 HTML 태그가 존재하지만, 여기서는 여러분이 반드시 알아야 할 가장 인기 있는 태그들을 소개합니다.
<!DOCTYPE>
<!DOCTYPE>은 엄밀히 말하면 태그가 아니라, 브라우저에게 로드할 문서 유형을 알려주는 선언입니다. 이 선언은 로드될 HTML의 버전을 지정합니다.
HTML5에서는 다음과 같이 문서 유형을 선언할 수 있습니다.
<!DOCTYPE html>
또는
<!doctype html>
참고: 선언에는 닫는 태그가 없으며 대소문자를 구분하지 않습니다.
<html> </html>
<html> ... </html> 태그는 <!DOCTYPE> 선언 다음에 위치하며, 문서가 웹페이지임을 정의합니다. 이 태그는 HTML 문서의 시작과 끝을 나타내며, 다른 모든 요소는 이 태그 내에 중첩됩니다.
다음은 <html> 태그의 예시입니다.
<html> 콘텐츠 </html>
<head> </head>
HTML 문서의 머리 부분은 <head> 태그로 표시됩니다. 이 태그는 <html> 태그 내부에 위치하며, 웹페이지에 대한 일반적인 정보를 담고 있습니다.
<head> 태그 안에는 페이지 제목, 작성자와 같은 웹페이지의 세부 정보를 제공하는 다른 태그들이 포함됩니다. <head> 태그 내의 내용은 실제 웹페이지에 표시되지는 않습니다.
다음은 <head> 태그의 구문입니다.
<head> ... </head>
<title> </title>
<title> 태그는 웹페이지의 제목을 정의합니다. 이 태그는 <head> 태그 안에 위치하며, 브라우저 창의 제목 표시줄이나 탭에 표시됩니다. 하지만 실제 웹페이지 콘텐츠 영역에는 표시되지 않습니다.
<title> 태그의 구문은 다음과 같습니다.
<title>초보자를 위한 HTML 태그</title>
<head> 태그 내에서 <title> 태그를 사용하면 다음과 같이 나타납니다.
<head> <title>초보자를 위한 HTML 태그</title> </head>
<body> </body>
<body> 태그는 웹페이지에 보여지는 모든 콘텐츠를 표시합니다. 이미지, 링크, 일반 텍스트, 비디오 등은 <body> 및 </body> 태그 내에 포함됩니다.
<body> 태그 내에서 사용할 수 있는 다른 태그로는 단락을 위한 <p> 태그, 이미지를 위한 <img> 태그, 굵은 텍스트를 위한 <strong> 태그, 정렬된 목록을 위한 <ol> 태그 등이 있습니다.
<body> 태그의 구문은 다음과 같습니다.
<body> 콘텐츠 </body>
<h1> ~ <h6> 태그
HTML 문서에는 최대 6개의 제목 태그가 있을 수 있습니다. 각 태그는 <h1>, <h2>, <h3>, <h4>, <h5>, <h6>과 같이 숫자로 표시됩니다. <h1> 태그는 가장 큰 제목을 나타내고, <h6> 태그는 가장 작은 제목을 나타냅니다.
HTML 문서에서 제목 태그는 다음과 같이 사용할 수 있습니다.
<h1>제목 1</h1> <h2>제목 2</h2> <h3>제목 3</h3> <h4>제목 4</h4> <h5>제목 5</h5> <h6>제목 6</h6>
<h1> ~ <h6> 태그는 <body> 태그 내에 포함됩니다.
예를 들어, <h1> 태그는 다음과 같이 사용할 수 있습니다.
<body> <h1> 이것은 제목 1입니다 </h1> </body>
<p> </p>
<p> 태그는 콘텐츠를 단락으로 구성할 때 사용됩니다. 코드 편집기에서 '엔터' 키를 누른다고 해서 새로운 단락이 생성되는 것은 아닙니다. 하나 이상의 단락을 만들려면 문서에 여러 개의 <p> 태그를 사용해야 합니다. 단락 태그는 <body> 태그 안에 위치해야 합니다.
단락 태그의 구문은 다음과 같습니다.
<p> 여기에는 내용이 들어갑니다... </p>
만약 4개의 단락을 만들고 싶다면 코드는 다음과 같이 구성됩니다.
<body> <p>첫 번째 단락의 내용입니다.</p> <p>두 번째 단락의 내용입니다.</p> <p>세 번째 단락의 내용입니다.</p> <p>네 번째 단락의 내용입니다.</p> </body>
<b> </b>
<b> 태그는 텍스트를 굵게 표시합니다. <b>와 </b> 태그 사이에 있는 모든 내용은 굵게 표시됩니다.
<b> 태그는 <h1>과 같은 제목이나 단락 태그 내에 사용할 수 있습니다.
다음은 굵은 태그의 예입니다.
<b> 굵은 글자 태그 </b>
'굵은 글자 태그'라는 문구가 굵게 표시됩니다.
<h1> 멋지게 유지하며, <b> 5번째 에디션 </b>, 우승자 에디션 </h1>
위의 예시에서는 '5번째 에디션'이라는 부분이 굵게 표시됩니다.
<i> </i>
<i> 태그는 텍스트를 기울임꼴로 표시합니다. <i>와 </i> 태그 사이에 있는 텍스트는 기울임꼴로 나타납니다.
예를 들어 다음과 같습니다.
<i> 이것은 기울임꼴입니다 </i>
'이것은 기울임꼴입니다'라는 단어가 기울임꼴로 표시됩니다.
<u> </u>
<u> 태그는 텍스트에 밑줄을 긋는 데 사용됩니다. HTML 문서에서 특정 텍스트 부분에 밑줄을 추가하고 싶을 때 사용합니다.
예를 들어 다음과 같습니다.
<u> 이 단어에 밑줄을 그어주세요 </u>
태그 사이의 문구에 밑줄이 그어집니다.
<center> </center>
<center> 태그는 HTML 문서의 내용을 가운데 정렬하는 데 사용됩니다. 예를 들어 다음과 같이 <h2> 태그로 작성된 제목을 가운데 정렬할 수 있습니다.
HTML 콘텐츠 가운데 정렬
<center> <h2> HTML에서 콘텐츠 가운데 정렬 </h2> </center>
<span> </span>
<span> 태그는 기본 스타일이 적용되지 않은 일반적인 인라인 컨테이너입니다. <span> 태그를 사용하여 스타일을 적용할 텍스트를 그룹화할 수 있습니다.
<span> 태그는 제목, 단락과 같은 다른 태그 안에서 사용할 수 있습니다.
<h2> 전문가에게 <span> HTML을 배우고 </span> 시장에 대비하세요 </h2>
<p> 전문가에게 <span> HTML을 배우고 </span> 시장에 대비하세요 </p>
<div> </div>
<div> 태그는 HTML 문서에서 서로 다른 태그를 그룹화할 수 있는 태그입니다. <div> 태그에 'class' 속성을 추가하여 CSS 스타일을 적용할 수 있습니다.
다음은 <h1>, <h2>, <p> 태그를 <div> 태그로 감싼 예시입니다.
<div> <h1> HTML 배우기 </h1> <h2> HTML 태그 </h2> <p> HTML은 마크업 언어입니다... </p> </div>
<em> </em>
<em> 태그는 HTML 문서에서 특정 단어를 강조하는 데 사용됩니다. <em> 태그 사이에 있는 콘텐츠는 기울임꼴로 표시됩니다.
단락 내에서 강조된 콘텐츠는 코드 편집기에서 다음과 같이 표시할 수 있습니다.
<p> 회의는 <em> 08시 </em>에 시작될 예정이니 시간을 지켜주세요. </p>
<sup> </sup>
<sup> 태그는 텍스트를 위첨자로 표시합니다. 예를 들어, 수학 식에서 X를 제곱하여 X²를 표현할 때 사용할 수 있습니다.
단락 태그 내에서 <sup> 태그는 다음과 같이 사용할 수 있습니다.
<h1> Harveys <sup>TM </sup> Company Limited </h1>
<sub> </sub>
<sub> 태그는 <sup> 태그와 반대로 텍스트를 아래첨자로 표시합니다. <sub> 태그로 감싸진 내용은 일반 텍스트 줄 아래에 표시됩니다. 예를 들어, 물의 화학식 H₂O를 표현할 때 사용할 수 있습니다.
아래첨자 태그의 구문은 다음과 같습니다.
물의 화학식은 H <sub> 2 </sub> 0입니다.
<br>
<br> 태그는 줄 바꿈을 나타내는 자동 닫힘 태그입니다. <br> 태그 뒤에 오는 콘텐츠는 새 줄에서 시작됩니다.
단락 내에서 <br> 태그는 다음과 같이 사용할 수 있습니다.
<p> HTML은 Hypertext Markup Language의 약자입니다. <br> 프로그래밍 언어인지에 대한 논쟁이 계속되고 있습니다. <br> 그러나 우리는 그 중요성을 간과할 수 없습니다. <br> HTML은 오늘날 95% 이상의 웹사이트에서 사용되고 있습니다. </p>
<ol> </ol> 및 <li> </li>
정렬된 목록 태그인 <ol> 태그는 <li>와 같은 다른 태그와 함께 사용해야 합니다. <ol> 태그는 목록의 시작을, <li> 태그는 목록의 항목을 정의합니다.
다음은 <ol> 및 <li> 태그를 코드 편집기에서 사용하는 예시입니다.
<ol> <li> 아시아 </li> <li> 아프리카 </li> <li> 유럽 </li> </ol>
브라우저에서 렌더링하면 내용이 번호가 매겨진 목록으로 표시됩니다.
<img src=””>
웹페이지에 시각적인 매력을 더하거나 로고를 추가하기 위해 이미지를 사용할 수 있습니다. 이러한 경우 자동 닫힘 이미지 태그인 <img src=””/>가 유용합니다.
이미지 태그의 구문은 다음과 같습니다.
<img src="https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png"/>
따옴표로 묶인 내용은 이미지 파일의 URL을 나타냅니다.
마무리
100개가 넘는 HTML 태그가 있지만, 위에 소개된 태그들은 초보자가 반드시 알아야 할 태그들입니다. HTML은 대부분의 코드 편집기에서 지원되므로 학습을 시작하는 데 어려움이 없을 것입니다. HTML을 꾸준히 학습하여 웹 개발 실력을 향상시키세요.