Frontends HTML HTML5

의미론적 마크업(Semantic Markup)

의미론적 마크업은 무엇일까

초창기의 HTML은 단순히 웹 상에서 문서 안에 들어있는 정보를 보여주기 위한 수단이란 성격이 강했습니다. 여기서 주목해야 할 단어는 “정보”와 “보여주다”입니다. 그 당시에 HTML을 작성하는 일에는 어떤 정보를 담을 것인가를 결정하는 일은 물론, 그 정보를 사용자들에게 어떻게 예쁘게 보여줄 것인가를 고민하는 일도 포함되어 있었습니다. <font> 태그를 이용해 글자를 꾸미고, <table> 태그를 이용하여 레이아웃을 만들어내는 기술들은 정보를 예쁘게 보여주기 위해 등장한 방법들입니다. 때로는 좀더 예쁘게 보여주기 위해서 태그와 태그 가운데 정보들을 산산히 조각내어 넣기도 하였습니다.

그러나 IT 기술의 발전으로 웹이 점차 확산되면서, 웹 상에 떠돌아다니는 정보가 우리가 생각하는 이상으로 너무나 많아지게 되었습니다. 그 때문에 떠오른 이슈가 바로 검색입니다. 사실상 인류가 가진 대부분의 정보가 웹을 떠돌아다니는 이 시대에, 그 중에 어떻게 사용자가 필요한 정보를 찾을 수 있게 할 것인가는 무척 중요한 문제일 것입니다. 그래서 등장한 컴퓨터 프로그램이 바로 검색엔진입니다.

상황이 이렇게 되고 나니, 문제가 발생했습니다. 기존의 HTML로 작성된 웹문서들이 예쁘게 보여주는 데만 집중하고 있어, 검색엔진이 정확히 정보를 검색해 내는데에 적합하지 못했던 것입니다.

이를테면 과거에 많이 사용하던 방법인 <table> 태그로 레이아웃이 만들어진 신문기사 웹페이지를 떠올려봅시다. 사람은 시각적으로 크고 굵은 글자가 제목이고, 작고 가는 글자가 내용이라는 것을 직관적으로 알 수 있습니다. 하지만 검색엔진을 포함한 컴퓨터 프로그램에게는 그런 능력이 없습니다. 검색엔진에게 이 웹페이지는 <table> <tr> <td> 태그에 <font> 태그가 얽히고 설켜있는 문서일 뿐입니다.

그렇다면 컴퓨터 프로그램이 웹문서 안의 어떤 정보가 어떤 의미를 가지는지 잘 알아볼 수 있도록 HTML을 작성하는 방법을 바꿔보면 어떨까요. 예, 이것이 정답인 동시에 의미론적 마크업의 의미이기도 합니다.

 컴퓨터 프로그램이 웹문서 안의 어떤 정보가 어떤 의미를 가지는지 잘 알아볼 수 있도록 HTML을 작성하는 방법

그렇다면 구체적으로 컴퓨터 프로그램이 잘 알아볼 수 있으려면 HTML을 어떻게 작성해야 할까요. HTML에서 어떻게 예쁘게 보여줄 것인가를 완전히 배제하고, 순수하게 정보를 의미에 맞는 HTML 태그를 사용해서 작성해야 합니다. 이것을 어떻게 예쁘게 보여줄 것인가는, 일단 HTML 태그가 정리된 후에 CSS를 이용하여 해결할 문제인 것입니다.

 

의미론적 마크업을 지키지 않은 과거의 HTML

의미론적 마크업 예제를 위한 디자인 시안

이를테면 여러분이 디자인 팀으로부터 위와 같은 웹 페이지 디자인 시안을 받았다고 가정해봅시다. 과거의 방식대로 HTML을 작성하면 대게 아래와 같은 코드가 됩니다. (편의상 <body> 태그 안쪽만 추려냈습니다.)

<body bgcolor="#dddddd">
	<table width="100%" cellspacing="0" cellpadding="0" border="0">
		<tr>
			<td width="*" rowspan="2">&nbsp;</td>
			<td width="680" bgcolor="#ffffff">
				<table width="100%" cellspacing="0" cellpadding="0" border="0">
					<tr>
						<td width="*" rowspan="7">&nbsp;</td>
						<td width="640" colspan="2" height="20">&nbsp;</td>
						<td width="*" rowspan="7">&nbsp;</td>
					</tr>
					<tr>
						<td width="640" height="32" colspan="2" valign="top">
							<font face="돋움" size="5">
								<b>하남 검단산, 수도권의 산하 100선에 선정</b>
							</font>
						</td>
					</tr>
					<tr>
						<td width="640" height="26" colspan="2" valign="top">
							<font face="돋움" size="3" color="#ffcc00">
								<b>검단산에서 내려다 본 한강, 수도권 등산객 선호도 3위에</b>
							</font>
						</td>
					</tr>
					<tr>
						<td width="640" height="26" colspan="2" align="right" valign="top">
							<font face="돋움" size="2" color="#bbbbbb">
								2013년 10월 24일 오후 8시 27분
							</font>
						</td>
					</tr>
					<tr>
						<td width="401">
							<font face="돋움" size="3" color="#333333">
								하남 검단산이 수도권의 산하 100선에 선정되었다.<br>
								<br>
								사단법인 산을 타는 사람들(대표:김삿갓)은 〈검단산에서 내려다 본 한강〉 풍경이 등산객 선호도 3위를 기록하여 수도권의 산하 100선에 선정되었다고 밝혔다. 이번 선호도 조사는 수도권 등산객 729명을 대상으로 조사한 결과이며, 약 1개월에 걸쳐 이루어졌다.<br>
								<br>
								하남 시민들 역시 이번 결과를 반기는 분위기다. 서청주(39, 하남시 천현동)씨는 "평소에 자주 오르던 검단산이
							</font>
						</td>
						<td width="239" align="right" valign="top">
							<img src="hanam.jpg" width="224" height="168" alt="검단산에서 내려다 본 한강" title="검단산에서 내려다본 한강" border="1">
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<font face="돋움" size="3" color="#333333">
								선호도 3위에 올라 기쁘다"며, "앞으로도 검단산을 찾는 등산객들이 늘어났으면 하는 바람"이라고 소감을 밝혔다.
							</font>
						</td>
					</tr>
					<tr>
						<td width="640" colspan="2" height="20">&nbsp;</td>
					</tr>
				</table>
			</td>
			<td width="*" rowspan="2">&nbsp;</td>
		</tr>
		<tr>
			<td width="680" height="22" align="right" valign="bottom">
				<font face="돋움" size="2" color="#999999">
					Copyright &copy; epiloum. All right reserved.
					&nbsp;&nbsp;
				</font>
			</td>
		</tr>
	</table>
</body>

이 코드에는 2개의 중첩된 <table> 태그 안에 <font>가 섞여있고, 태그 곳곳에 bgcolor나 width, height와 같은 속성 등, 예쁘게 보이기 위한 각종 방법들이 섞여 있습니다. 사진을 오른쪽으로 정렬하고 여백을 주기 위해 <td>로 칸을 나눈 부분도 보이고, 특히 사진 아래로 글이 보이도록 하기 위해서 문단을 중간에 잘라서 다음 <tr>에 넣은 모습도 보입니다.

과거의 방식에서 이러한 HTML 구조가 나타날 수 밖에 없는 이유는, 당시에 HTML을 작성할 때에는 사용자들에게 어떻게 보여지는지를 생각하며 작성해야만 했기 때문입니다. 그러다보니 컴퓨터 프로그램이 볼 때에는 문제가 됩니다. 이를테면 위의 코드처럼 문단을 잘라서 서로 다른 <tr> 안에 넣어놓는다면, 프로그램은 이 두 부분을 하나의 문단으로 결코 생각할 수 없겠죠.

 

의미론적 마크업을 지킨 HTML

의미론적 마크업에서는 접근방식이 다릅니다. 이 HTML이 컴퓨터 프로그램에게 어떻게 보여지는지를 생각하면서 작성해야만 합니다. 이것을 위해서는 먼저 HTML이 담아야 하는 내용만 먼저 추려낸 후, 그 내용들을 의미에 맞는 태그로 감싸야 합니다. 앞서와 같은 디자인 시안을 토대로 의미론적 마크업을 생각하며 HTML을 작성하면, 아래와 같은 형태가 될 것입니다. (역시 편의상 <body> 태그 안쪽만 소개합니다.)

<body>
	<div id="contents">
		<h1>하남 검단산, 수도권의 산하 100선에 선정</h1>
		<h2>검단산에서 내려다 본 한강, 수도권 등산객 선호도 3위에</h2>
		<div id="datetime">2013년 10월 24일 오후 8시 27분</div>
		<div id="article">
			<div class="photo">
				<img src="hanam.jpg" alt="검단산에서 내려다 본 한강" title="검단산에서 내려다본 한강" />
			</div>
			<div class="text">
				<p>
					하남 검단산이 수도권의 산하 100선에 선정되었다.
				</p>
				<p>
					사단법인 산을 타는 사람들(대표:김삿갓)은 〈검단산에서 내려다 본 한강〉 풍경이 등산객 선호도 3위를 기록하여 수도권의 산하 100선에 선정되었다고 밝혔다. 이번 선호도 조사는 수도권 등산객 729명을 대상으로 조사한 결과이며, 약 1개월에 걸쳐 이루어졌다.
				</p>
				<p>
					하남 시민들 역시 이번 결과를 반기는 분위기다. 서청주(39, 하남시 천현동)씨는 "평소에 자주 오르던 검단산이 선호도 3위에 올라 기쁘다"며, "앞으로도 검단산을 찾는 등산객들이 늘어났으면 하는 바람"이라고 소감을 밝혔다.
				</p>
			</div>
		</div>
	</div>
	<div id="copyright">
		Copyright &copy; epiloum. All right reserved.
	</div>
</body>

제가 위와 같이 코드를 작성한 이유를 쭉 나열하면 다음과 같습니다.

  1. 일단 표제는 가장 중요한 제목이므로 <h1>로 감싸고, 부제는 2번째로 중요한 제목이므로 <h2> 태그로 감쌌습니다.
  2. 날짜는 <div>로 감싸되, 의미를 알 수 있도록 “datetime”이라는 id를 주었습니다.
  3. 기사 부분 전체를 <div>로 감싸면서 “article”이라는 id를 주었고, 그 아래는 class가 “photo”인 <div>와 “text”인 <div>로 나누었습니다. “photo” 아래에는 사진 <img> 태그 1개만 들어가고, “text” 아래는 문단에 따라 <p> 태그로 나뉘어져 있습니다.
  4. 마지막으로 저작권 표시영역을 <div>로 감싸고, id는 “copyright”라고 의미를 밝혀 적어주었습니다.

이상을 보면, 어떤 태그를 선택했는지에 대해 모두 분명한 이유가 있음을 알 수 있습니다. 또한 <div>와 같이 단순히 영역을 나누는 태그를 선택했을 때에는, class나 id를 통해 또한 그 영역의 성격을 밝히고 있음을 볼 수 있습니다. 모든 부분에 대하여 이유를 가지고 의미를 밝혀가며 HTML을 작성을 하는 것, 이것이 바로 의미론적 마크업입니다.

이제 검색엔진이 쉽게 읽을 수 있는 HTML을 만들었으니, 이 HTML이 디자인 시안처럼 사람에게도 보기 좋은 모양으로 만들어져야 하겠지요. 이것을 위해서는 CSS를 이용하게 됩니다. 위 HTML 코드에 맞추어 제가 작성한 CSS를 예제로 아래에 소개합니다.

body {
	margin: 0;
	padding: 0;
	background-color: #dddddd;
}
div#contents {
	margin: 15px auto 5px auto;
	padding: 20px;
	width: 640px;
	border: 1px solid #cccccc;
	background-color: #ffffff;
}
h1 {
	margin: 0;
	padding: 0;
	color: #000000;
	font-family: '돋움';
	font-size: 18pt;
	font-weight: 700;
	letter-spacing: -1px;
}
h2 {
	margin: 0;
	padding: 4px 0;
	color: #ffcc00;
	font-family: '돋움';
	font-size: 12pt;
	font-weight: 700;
	letter-spacing: -1px;
}
div#datetime {
	color: #bbbbbb;
	font-size: 8pt;
	font-family: '돋움';
	word-spacing: -1px;
	text-align: right;
}
div.photo {
	float: right;
	margin: 0 0 15px 15px;
}
div.photo img {
	width: 224px;
	height: 168px;
	border: 1px solid #999999;
}
div.text {
	color: #333333;
	font-family: '돋움';
	font-size: 11pt;
	line-height: 1.4em;
}
div#copyright {
	margin: 0 auto;
	width: 660px;
	color: #999999;
	font-family: '돋움';
	font-size: 8pt;
	text-align: right;
}

 

HTML5와 의미론적 마크업

의미론적 마크업은 W3C의 권고사항이며, 이에 따라 HTML5에서는 의미론적 마크업을 위한 다양한 태그들이 새롭게 생겨났습니다. 이를테면 <h1>의 표제와 <h2>의 부제 등 제목을 묶을 수 있는 <hgroup>이 새로 생겨났고, <article>이나 <section> 등의 새로운 태그도 추가되었습니다. HTML5에서 추가된 태그를 이용하면 위에서 살펴본 HTML 코드에서 각 부분의 의미를 더욱 잘 살릴 수 있게 됩니다.

한편 HTML에서 사람이 보는 모양을 정하는 각종 속성과 태그들은 의미론적 마크업을 강화하기 위해 사라졌습니다. 이를테면 <font> 태그의 경우, HTML5에서는 더이상 사용할 수 없습니다. 많은 태그들의 align 속성들도 마찬가지입니다. 이들이 가지고 있던 기능은 HTML5에서는 CSS를 사용하여 구현해야만 합니다.

 

소스파일

예제로 소개했던 2개의 HTML 파일을 올려두었습니다. 참고하시기 바랍니다.

table.html      <table> 태그로 이루어진 과거 방식으로 작성된 HTML입니다.
semantic.html  의미론적 마크업으로 작성한 HTML입니다.

10 thoughts on “의미론적 마크업(Semantic Markup)”

  1. 등산 중 우연히 산삼을 발견한 기분입니다. 정리해 주신 글들 감사히 보겠습니다 😀

    1. flynn jang님, 과찬을 해주셔서 깊이 감사말씀 드립니다. 산삼까지는 민망하고, 몸에 좋은 칡 한뿌리 발견했다 생각해주시면 좋겠습니다 🙂 앞으로는 정말로 산삼같은 글로 찾아뵙기 위해 노력하겠습니다.

  2. Web Program을 공부하던 중 해안을 얻고 갑니다.
    해당글은 링크와 함께 복사해서 사용하겟습니다.

    감사합니다.

    1. moonbye님, 덧글 감사드립니다. 보잘 것 없는 글이지만, 도움이 되셨기를 바라겠습니다.

  3. 시멘틱 태그를 공부중에 많은 도움이 되었습니다
    좋은 글 감사합니다

  4. semantic markup이 무엇인지 깊은 이해가 되지 않아
    항상 머릿속을 겉돌았었는데
    이 블로그를 보고 정리가 됐습니다.
    이해를 바탕으로 익숙함으로 자리잡겠습니다.

    1. wecae님, 글 남겨주셔서 감사합니다. 더욱더 좋은 글로 찾아뵙겠습니다.

Leave a Reply

Your email address will not be published. Required fields are marked *