HTML에서 주로 사용되는 기본 태그들

HTML 문서에서 사용할 수 있는 태그는 100가지 이상으로 매우 많습니다. 이 많은 태그들을 다 외우는 것은 불가능하며 누구도 그렇게 외워서 사용하려고 하지 않습니다. 10개정도의 기본 태그들만 사용되며, 나머지 태그들은 버전에 따라 사용할 수 있거나 사용도가 낮아 거의 찾지 않는 태그들입니다. 이번 포스팅에서는 Boostcourse 웹 UI과정에서 공부한 태그들에 대해 설명하고 예제를 함께 첨부해보겠습니다.

HTML에서 주로 사용되는 기본 태그들

제목 태그 <h>

<h1>This is h1</h1>
<h2>This is h2</h2>
<h3>This is h3</h3>
<h4>This is h4</h4>
<h5>This is h5</h5>
<h6>This is h6</h6>

위 <h>태그의 코드 예제 실행 결과물.

문서 내에 제목을 표현할 때 사용하는 태그입니다. <h1>부터 <h6>까지 사용이 가능하며, 숫자가 커질수록 제목의 크기와 중요도가 상승합니다. 제목태그 사용 시 일반 텍스트보다 더 강조되는 스타일이 적용됩니다. 브라우저가 기본적으로 제목 태그에 제공하는 스타일은 아래의 예제와 같습니다.

 

 

 

단락 태그 <p>

<p>
	동해 물과 백두산이 마르고 닳도록<br>
	하느님이 보우하사 우리나라 만세.<br>
	무궁화 삼천리 화려 강산 대한 사람, 대한으로 길이 보전하세.
</p>

<p>
	남산 위에 저 소나무, 철갑을 두른 듯<br>
	바람 서리 불변함은 우리 기상일세.<br>
	무궁화 삼천리 화려 강산<br>
	대한 사람, 대한으로 길이 보전하세.
</p>

위의 <p>태그 예제 코드의 실행 결과물.

<p>태그는 단락 paragraph를 줄여서 명시한 태그입니다. 제목 태그에 이어 본문에 해당하는 내용을 단락 태그를 통해 장식합니다. 단락 태그 사용 시 자연스럽게 개행이 됩니다. <p>태그 내부에서 임의로 개행하기 위해서는 <br>태그를 사용합니다.

 

텍스트를 꾸며주는 요소

<b> : bold 태그는 글자를 굵게 표현
<i> : italic 태그는 글자를 기울여서 표현
<u> : underline 태그는 글자의 밑줄을 표현
<s> : strike 태그는 글자의 중간선을 표현하는 태그

This is <b>bold</b>.<br>
This is <i>italic</i>.<br>
This is <u>underline</u>.<br>
THis is <s>strike</s>.<br>

위 표현용 태그의 예제 코드 실행 결과물.

웹 표준화가 대두되면서 웹 문서의 구조와 표현을 분리하기 시작했습니다. 그 과정에서 많은 표현용 태그들이 사라졌고, 현재는 얼마 남지 않았습니다. 위의 태그는 텍스트를 꾸며 주는 요소인 표현용 태그들입니다.

 

앵커 요소 <a>

<a href="http://google.com" target="_blank">구글</a>

HTML에서 HT는 hypertext, 즉 링크를 의미합니다. 링크는 클릭하면 다른 페이지로 이동할 수 있는 기능을 말하죠. 앵커 태그는 이러한 링크를 텍스트에 부여하는 역할을 합니다.

href 속성

링크를 만들기 위해 <a>는 반드시 href속성을 가져야만 합니다. href의 값은 링크의 목적지를 갖습니다.

target 속성

target 속성은 링크된 리소스를 어디에 표시 할 지를 나타내는 속성입니다.

_self : 현재 화면에 표시(기본값). 현재 사용중인 웹 브라우저의 창을 이용해서 페이지를 불러옴.
_blank : 새로운 창에 표시. 링크를 클릭 시 새로운 웹 브라우저 창을 통해 페이지를 불러옴.

내부 링크

내부 링크는 <a>태그를 통해 페이지 내부의 특정 요소로 초점을 이동시킬 수 있는 링크입니다.  href 속성값에 #을 쓰고 그 뒤에 페이지 내에서 이동하고자 하는 요소의 id 속성값을 기입하면 됩니다.

<a href="#some-element-id">특정 위치로 이동</a>

...

<h1 id="some-element-id">특정 위치</h1>

 

 

의미가 없는 컨테이너 요소

<div>와 <span>태그는 자체에 아무런 의미가 없으며, 그저 단순히 요소들을 묶고 구조를 세우기 위해 사용 되는 태그입니다.

 

<div> 태그

div태그는 블록 레벨 태그입니다. 줄바꿈을 통해 새로운 한 줄을 생성해서 내용을 표현합니다.

 

<span> 태그

span태그는 인라인 레벨 태그로써 블록 레벨 요소의 한 줄 안에서 표현되는 요소입니다.

<div>
	<span>Lorem</span> ipsum dolor sit.
</div>

 

 

리스트 요소

<ul> 태그

<ul>
	<li>콩나물</li>
	<li>파</li>
	<li>국간장</li>
</ul>

위 <ul>태그 예제 코드의 실행 결과물

<ul>태그는 unordered list라는 의미의 태그로 순서가 없는 리스트를 표현합니다. <ul>을 선언한 후, 그 내부에서 <li>태그를 사용해 각 항목(리스트)를 표현할 수 있습니다.

 

<ol> 태그

<ol>
	<li>냄비에 물을 끓인다</li>
	<li>재료를 넣는다</li>
	<li>조미료를 넣는다</li>
</ol>

위 <ol>태그 예제코드 실행의 결과물

<ol>태그는 ordered list라는 의미의 태그입니다. <ul>과 달리 순서가 있는 리스트를 표현합니다.

 

<dl> 태그

<dl>
    <dt>리플리 증후군</dt>
    <dd>허구의 세계를 진실이라 믿고 거짓된 말과 행동을 상습적으로 반복하는 반사회적 성격장애를 뜻하는 용어</dd>
    <dt>피그말리온 효과</dt>
    <dd>타인의 기대나 관심으로 인하여 능률이 오르거나 결과가 좋아지는 현상</dd>
    <dt>언더독 효과</dt>
    <dd>사람들이 약자라고 믿는 주체를 응원하게 되는 현상</dd>
</dl>

위 <dl>태그 예제의 실행 결과물

<dl>태그는 definition/description list라는 의미의 태그로, 용어와 그에 대한 정의를 표현하기 위해 사용합니다. 이들은 쌍으로 이루어져 리스트를 이룹니다.