21. 많이 알려지지 않은 요소들

소개

이 글에서는 조금 모호하고, 널리 알려지지 않았으며 그다지 많이 사용되지는 않는 HTML 요소들을 소개하고자 합니다. 프로그램 코드를 마크업하는 것, 컴퓨터와의 인터랙션, 인용과 약어, 문서에 가해진 수정 등에 대해 다룰 것입니다. 또한 HTML5에서 제안된 것들 중 일부를 소개하면서 글을 마칠 것입니다.

  • 연락정보에 하이라이트하기
  • 프로그램 언어와 코드
  • 컴퓨터 인터랙션 보여주기
  • 변수들
  • 인용
  • 약어
  • 정의부분
  • 위첨자와 아래첨자
  • 줄바꿈
  • 가로줄
  • 문서 변경(첨가와 삭제)
  • 몇가지 미래의 HTML 요소들
  • 요약

노트: 각각의 코드 예제 다음에, “소스 보기” 링크가 있습니다. 이것을 누르면 소스 코드를 실제로 렌더링한 결과를 보게 될 것입니다.

연락처 정보에 하이라이트

address 요소는 아마도 HTML에서 가장 잘못 이름지어졌고, 가장 잘못 사용되는 요소일 것입니다. 언뜻 보기에, 이 이름은 마치 주소, 이메일, 우편번호, 그런 것을 나타내기 위해 쓰이는 것 처럼 보입니다. 게다가 이것은 일부분일 뿐입니다.

address 요소의 실제 의미는, 저자(들)의 연락 정보를 제공하려는 목적입니다. 그 저자는 페이지의 저자일수도, 아니면 이 요소가 나타나는 섹션의 저자일 수도 있습니다. 이 요소의 내용은 이름일 수도 있고, 이메일 주소일수도 있으며, 우편 주소, 혹은 다른 연락 정보들이 담겨 있는 페이지로의 링크일수도 있습니다. 예를 들어:

<address>
  <span>Mark Norman Francis</span>,
  <span class="tel">1-800-555-4865</span>
</address>

View source

다음의 예제에서는, 주소가 푸터 문단에 들어 있으며 단순히 사이트의 다른 페이지로 링크하고 있습니다. 좀 더 많은 연락 정보들이 그 페이지에 담겨 있는데, 이렇게 별도의 자세한 연락처 페이지를 준비함으로서 사이트 전체에 끝도없이 그런것들을 반복하는 일을 피할 수 있습니다.

<p class="footer">© Copyright 2008</p>
<address>
<a href="/contact/">Mark Norman Francis</a>
</address>

View source

물론, 사이트에 저자가 한 명 이상이라면, 같은 패턴을 사용할 수 있습니다. 단순히 다른 저자의 연락처 정보를 담은 페이지를 준비하고 그리로 링크하면 되는 것이죠.

address 요소를 다음과 같이 다른 형태의 주소를 마크업하기 위해 사용하는 것은 “잘못된” 것입니다:

<p> Our company address: </p>
  <address>
    Opera Software ASA,
    Waldemar Thranes gate 98,
    NO-0175 OSLO,
    NORWAY
  </address>

View source

(물론, 오페라에서 이 글에 대해 책임을 지고 있다면 위와 같은 표현도 맞는 것이지만, 이 페이지는 내가 쓴 것이지 오페라 소프트웨어 전체가 이 페이지를 쓰고 있는 것은 아닙니다)

다른 일반적인 주소들에 대해서는, “마이크로포맷” 이라고 불리는 것을 통해서 어떤 문단이 주소를 담고 있다는 것을 나타낼 수 있습니다. dev.opera.com의 다른 글에 마이크로포맷에 관한 더 많은 정보가 있습니다

프로그래밍 언어와 코드

code 요소는 컴퓨터 코드나 프로그램 언어를 나타냅니다. 그러한 언어에는 PHP, 자바스크립트, CSS, XML 등이 있습니다. 한 문장의 짧은 예제를 위해서는, 다음과 같이 단순히 code 요소로 그 코드를 둘러싸면 됩니다:

<p>It is bad form to use event handlers like
<code>onclick</code> directly in the HTML.</p>

View source

여러 줄로 쓰여진 긴 코드의 예제에 대해서는 pre 요소를 사용해서 HTML 에서 텍스트 컨텐츠를 마크업하는 방법 처럼 하면 됩니다.

code 요소를 사용해서 보여주고 있는 코드가 어떤 언어의 코드인지를 마크업하기 위해 정의되어있는 방법은 없습니다만, class 속성을 사용할 수 있습니다. 일반적인 사례(HTML5 초안에도 언급되어 있습니다)는 클래스명 앞에 전치사 language- 를 붙이고 그 뒤에 언어의 이름을 명기하는 것입니다. 즉, 위의 예제는 이렇게 고쳐 쓸 수 있습니다.

<p>It is bad form to use event handlers like
<code class="language-javascript">onclick</code>
directly in the HTML.</p>

View source

일부 프로그램 언어들은 클래스명으로 쓰기에 쉽지 않은 것이 있습니다. 예를 들면 C# (C-샾) 같은 것입니다. 이것을 정확하게 쓰려면 class=’language-c#’ 처럼 써야 할 텐데, 이러한 것은 아무래도 혼란스러우며 오타를 내기도 쉽습니다. 나는 클래스명을 영문자와 하이픈 만으로, 그리고 완전한 스펠링을 사용해서 쓰기를 권장하는 편입니다. 따라서 이와 같은 경우라면, class=’language-csharp’ 라고 쓸 수 있을 것입니다.

컴퓨터 인터랙션 보여주기

samp, kbd 요소를 사용해서 컴퓨터 프로그램의 입출력을 나타낼 수 있습니다. 예를 들어:

<p>One common method of determining if a computer is connected
to the internet is to use the computer program <code>ping</code>
to see if a computer likely to be running is reachable.</p>

<pre><samp class="prompt">kittaghy%</samp> <kbd>ping -o google.com</kbd>
  <samp>PING google.com (64.233.187.99): 56 data bytes
  64 bytes from 64.233.187.99: icmp_seq=0 ttl=242 time=108.995 ms

  --- google.com ping statistics ---
  1 packets transmitted, 1 packets received, 0% packet loss
  round-trip min/avg/max/stddev = 108.995/108.995/108.995/0.000 ms
  </samp></pre>

View source

samp 요소는 컴퓨터 프로그램의 출력을 나타냅니다. 위 예제에서 보이는 것과 같이, 서로 다른 종류의 출력을 class 속성을 이용해서 구분하고 있습니다. 하지만 이러한 것에 관해 관용적으로 사용되고 있는 규칙 같은 것은 없습니다.

kbd 요소는 사용자가 입력하는 것을 나타냅니다. 전통적으로 키보드 입력(kbd를 쓰니까요)이긴 하지만, 다른 형태의 입력 – 예를 들어 음성 입력 같은 것 역시 이 요소로 나타내야 합니다.

변수

var 요소는 변수를 나타내기 위해 사용됩니다. 이것은 수학의 대수 표현식이나 프로그램 코드의 변수를 나타낼 수 있습니다. 예를 들어:

<p>The value of <var>x</var> in
 3<var>x</var>+2=14 is 4.</p>

<pre><code class="language-perl">
my <var>$welcome</var> = "Hello world!";
</code></pre>

View source

인용

1
cite 요소는 그 근처에 있는 내용이 어디에선가 인용되었다는 것을 나타냅니다. 이러한 인용은 사람, 책 또는 다른 출판물, 혹은 일반적으로 다른 소스에서 가져온 것일 수 있습니다. 이런 경우 그 출처를 cite 요소를 이용해서 나타내어야 합니다. 예를 들어: 

<p>The saying <q>Everything should be made as simple as possible,
but not simpler</q> is often attributed to <cite>Albert
Einstein</cite>, but it is actually a paraphrasing of a quote which
is much less easy to understand.</p>

View source

약어

abbr 요소와 acronym 요소는 약어가 사용된 것을 나타내고, 문서의 흐름을 끊는 일 없이 그 약어의 확장을 제공할 목적으로 사용됩니다.

약어는 abbr 요소로 감싸고, 그 약어의 확장은 title 속성을 이용해서 나타냅니다:

<p>Styling is added to
<abbr title="Hypertext Markup Language">HTML</abbr> documents
using <abbr title="Cascading Style Sheets">CSS</abbr>.</p>

View source

두문자어acronym는 약어abbreviation의 한 형태이지만, 그 자체가 하나의 단어로서 읽혀지며 또한 받아들여진다는 점에서 다릅니다. 한가지 예를 들자면 스쿠버scuba인데, 이것은 원래 “self-contained underwater breathing apparatus”. 였습니다. HTML 4.01 명세에서는 abbr 요소와 acronym 요소 모두를 허용하고 있지만, 사실 이것을 정확하게 쓰기에는 다소 문제가 있습니다…

인터넷 익스플로러(7 버전 이전을 말합니다. 그리고 7 버전은 다른 브라우저들이 하는 것 처럼 약어 아래에 점선을 표시하지 않습니다)는 abbr 요소를 인식하지 못하며 acronym 만을 인식합니다. 불행하게도, acronym은 abbr의 일부분이며, HTML 같은 것을 acronym 요소를 사용해서 마크업하는 것은 잘못된 것입니다.

또한, HTML5 초안에서는 acronym 요소가 제외되었는데, 사실 모든 acronym은 abbr에 포함되는 것이므로 후자를 표준으로 하자는 것입니다. 2

최선의 방법은 acronym 요소를 사용하지 말고 abbr 만 사용하는 것입니다. 만약 abbr 요소에 뭔가 스타일을 적용할 필요가 있다면, 내부에 span 요소를 삽입하고 거기에 스타일을 적용하면 됩니다. 이렇게 하면 모든 브라우저에서 시각적인 스타일이 나타날 것입니다. 좀 더 자세한 것은 이후 “텍스트 스타일링” 글에서 다루어질 것입니다.

정의 부분

dfn 요소의 정확한 사용에는 혼동되는 점이 있습니다. HTML 명세에서는 이것을 “감싸인 단어를 정의하는 부분” 이라고 설명하고 있습니다. 이것은 dt 요소의 개념에 매우 가까운 것입니다.

다른 점은, dfn 요소는 단어와 정의의 목록에 포함되는 것이 아니며 일반적인 텍스트의 흐름에 포함된다는 것입니다. dfn 요소의 예제를 봅시다.

<p><dfn>HTML</dfn>: HTML stands for "HyperText Markup Language". This is
the language used to describe the contents of web documents.</p>

HTML 이라는 단어가 나타나고, 그것에 관한 정의가 즉시 따라옵니다. 따라서 이러한 경우가 dfn을 사용하기에 가장 적합한 경우입니다. 이 요소는 그 단어가 가장 처음 등장하는 곳에서 한번만 사용해야 하지만, 사실 단어는 단 한번 정의되는 것이니 이것이 어려운 일은 아닐 것입니다.

이것은 모두 괜찮아 보이지만, 만들어진 예제는 썩 현실적이지는 못합니다 – dfn 요소는 약어가 페이지에서 한 번 이상 등장할때 사용할 것을 권장합니다. 예를 들어, 이 시리즈의 초반에 있었던 HTML의 기초 글에서 HTML 이라는 단어는 40번 이상 사용되었습니다. 이때마다 “<abbr title=”HyperText Markup Language”>HTML</abbr>” 를 사용하는 것은 대역폭의 낭비이고, 시각적으로 산만해지며, 스크린 리더 사용자들은 그게 뭔지 이미 알고 있는데도 단어가 몇번이고 계속 확장되는 것을 들으면서 지쳐버릴 것입니다. 이렇게 하는 대신, 그 단어가 가장 처음으로 등장하는 곳에서만 사용하는 것입니다:

<p><dfn><abbr>HTML</abbr></dfn> ("HyperText Markup Language") is
a language to describe the contents of web documents.</p>

View source

그 다음부터는, HTML 이 나타나는 곳에서는 단순히 “<abbr>HTML</abbr>” 라고 마크업합니다. 이렇게 하면 사용자 에이전트는 그 약어의 정의를 가져오는 나름의 방법을 사용할 수 있을 것입니다. 하지만, 불행히도, 현재는 스크린 세이버를 포함하여 어떠한 사용자 에이전트도 그런 것을 구현하고 있지는 못합니다. 따라서, title 속성을 함께 사용해서 그 정보를 제공하면 좋을 것입니다.

<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> ("HyperText Markup Language") is a language to describe the contents of web documents.</p>

View source

HTML 이라는 약어를 2번 3 확장했는데, 불행히도 이러한 것은 스크린 리더 사용자에게 문제가 될 수 있습니다. 하지만 눈에 보이는 확장을 전혀 제공하지 않는 것은 거의 모든 상황에서 훨씬 큰 비중을 차지할 시력에 문제가 없는 사용자들에게 이 문서의 가치를 떨어뜨리는 일이 될 것입니다.

내 생각에는, 이러한 것은 받아들일만한 합의가 된다고 봅니다. 물론 이러한 것은 그러한 정의를 필요로 하는 단어가 한두개 정도일 경우이며, 많이 등장한다면 별도의 약어집 섹션이나 페이지를 제공해야 할 것입니다. 그러한 약어집에서는 정의 목록이 매우 적합할 것입니다. 이러한 것에 관해 매우 신경이 쓰인다면, 위의 예제를 다음과 같이 쓸 수도 있습니다:

<p><abbr title="HyperText Markup Language">HTML</abbr>
(<dfn>HyperText Markup Language</dfn>) is a language to
describe the contents of web documents.</p>

View source

하지만 여전히 사용자 에이전트는 정의와 단어를 연결하기 위한 방법을 가져야 합니다. 현재로서는 어떠한 브라우저도 dfn 요소에 대해 뭔가 유용한 것을 하지 못하고 있으며, 그저 CSS 규칙을 적용하고 있을 뿐입니다. 위에서 제안된 해결책이 현재 우리가 취할 수 있는 최선의 것입니다.

이러한 것은 명세가 요소가 어떻게 사용될 것으로 의도한 것인지 명확한 가이드라인을 제시하지 못했고, 그 요소의 실제 사용에 기초하지 않은 불행한 결과입니다. 그렇지 않았다면 단어와 그 정의 혹은 설명을 연결하는 명확한 방법이 있었을 것입니다. HTML 5 명세에서는 dfn 요소가 어떻게 쓰여야 하는지에 대해 훨씬 더 자세하게 들어가고 있지만 아직 초안 단계이고 현재 웹에서 쓰기에 적합하지는 않습니다.

위첨자와 아래첨자

텍스트의 일부를 위첨자, 혹은 아래첨자(다른 텍스트들보다 조금 위로, 혹은 올려진)로 쓰려면 sup, sub 요소를 사용합니다.

일부 언어에서는 이러한 요소를 약어로 사용하기도 하며, 수학 식의 일부분을 MathML(수학을 마크업하기 위해 특화된, 다소 무거운 마크업 언어입니다)을 사용하지 않고도 표현할 수 있습니다.

두가지 사용법의 예는:

<p>The chemical formula for water is H<sub>2</sub>O, and it
is also known as hydrogen hydroxide.</p>
<p>The famous formula for mass-energy equivalence as derived
by Albert Einstein is E=mc<sup>2</sup> — energy
is equal to the mass multiplied by the speed of light
squared.</p>

View source

줄바꿈

HTML에서 공백을 정의한 방법 때문에, 단순히 텍스트를 입력하는 중간에 엔터 키를 누른다고 해서 텍스트가 줄바꿈되게 – 우편 주소를 마크업하는 등, 여전히 하나의 문단이면서도 시각적인 표현은 줄바꿈이 되게끔 – 할 수는 없습니다.

문서에 줄바꿈을 넣으려면 br 요소를 사용하면 됩니다. 하지만 이러한 것은 필요할 때에만 사용해야 합니다. 문단 이외의 곳에서 세로 간격을 더 필요로 한다고 해서 이러한 것을 사용해서는 안됩니다. 그러한 목적으로는 CSS가 더 적합합니다.

이따금씩 br 요소를 삽입하는 것 보다는 pre 요소의 사용이 더 쉬운 경우가 있습니다. 또는, 텍스트의 일부가 별도의 한 줄이어야 하고 이러한 것이 단순히 스타일 목적이라면, span 요소를 사용하고 그것을 블럭 레벨 요소로 표시하게끔 하면 됩니다.

예를 들어 이 글의 처음에서 오페라 소프트웨어의 연락처를 마크업하면서 address 요소 내에 사용했었던 것을 다음과 같이 쓸 수 있습니다:

<p>Our company address: </p>
<address>
Opera Software ASA,<br>Waldemar Thranes gate 98,<br>
NO-0175 OSLO,<br>NORWAY
</address>

View source

물론, XHTML 문법을 사용한다면 이 요소는 스스로 닫혀야 합니다 – <br />.

가로 줄

HTML에서는 hr 요소를 이용해서 가로 줄을 만듭니다. 이것은 문서의 서로 다른 섹션 사이에 경계를 만들려는 용도로 사용하는 것입니다.

이 요소에는 아무런 의미도 없고 순수하게 시각적, 표현적인 효과만이 있다는 논의가 있기는 하지만, 실제로 문학에서 이러한 요소를 사용하고 있습니다. 한 장 내부에서, 가로 줄은 씬의 전환을 나타내기 위해 사용됩니다. 또한, 시에서도 서로 다른 시구를 분리하기 위해 사용할 수 있습니다.

그러한 사용법 중 어떠한 것도 새로운 제목 요소 – 문서의 섹션 사이에 경계를 만드는 방법으로 받아들여진 – 가 있어야 함을 암시하지 않습니다.

hr 요소는 별다른 속성을 갖고 있지 않으며, 기본값으로 표시되는 것이 적절하지 않다면 CSS를 통해 스타일을 변경할 수 있습니다.

또한 br 요소와 마찬가지로, XHTML 문법을 사용한다면 이 요소는 스스로 닫혀야 합니다 – <hr />.

문서의 수정(첨삭)

문서가 처음 출판된 이후로 변경된 점이 있다면, 방문자 혹은 자동화된 과정에게 그러한 사실이 있었음을, 그리고 언제 그렇게 되었는지 알릴 수 있습니다.

새로운 텍스트(첨가된) 것은 ins 요소로 둘러싸여야 합니다. 삭제된 텍스트는 del 요소로 감싸여야 합니다. 만약 삭제와 첨가가 동일한 지점에서 일어났다면, 권장하는 방식은 먼저 삭제되었던 텍스트가 보이고, 그 다음에 첨가된 텍스트가 보이게끔 하는 것입니다.

두 요소 모두 두가지 속성을 사용해서 편집에 관한 더 많은 정보를 가질 수 있습니다.

그렇게 편집한 이유가 페이지의 다른 부분, 혹은 웹 상의 다른 곳에 명시되어 있다면, 그러한 부분 혹은 문서로 cite 속성을 사용해서 링크해야 합니다. 이렇게 하는 것은 “이것 때문에 이렇게 바꾸었습니다” 라고 메모하는 것과 마찬가지입니다.

또한 언제 그렇게 바뀌었는지를 datetime 속성을 사용해서 나타낼 수 있습니다. 그 값은 ISO 표준 타임스탬프여야 하는데, 일반적으로 “YYYY-MM-DD HH:MM:SS ±HH:MM” 와 같이 씁니다. (위키피디어 에서 더 많은 정보를 볼 수 있습니다)

두 속성의 예제는:

<p>We should only solve problems that actually arise. As
  <cite><del datetime="2008-03-25 18:26:55 Z"
  cite="/changes.html#revision-4">Donald Knuth</del><ins
  datetime="2008-03-25 18:26:55 Z"
  cite="/changes.html#revision-4">C. A. R. Hoare</ins></cite>
  said: <q>premature optimization is the root of all
  evil</q>.</p>

View source

미래의 HTML 요소 몇가지

이 글과 다른 글에서 몇차례 언급되었던 바와 같이, 현재 HTML 5 버전 의 초안이 만들어져 있습니다. 이것은 HTML 에 대한 좀 더 논리적인 업데이트가 될 것입니다. 무엇이 유용할지에 관한 탁상공론 보다는 지금 현재 인터넷에서 HTML이 어떻게 사용되고 있는가를 연구한 것에 근거하였으므로, 현재의 빈약한 의미들을 강화하고 그것을 명세에 넣기 위한 좋은 기회가 되고 있습니다.

다음과 같은 몇가지 요소들이 HTML에 더해질 것인데, 이러한 것들은 현재 우리가 문서를 만들고 사용하는 방법을 크게 향상시킬 수 있을 것입니다:

  • header – 페이지의 헤더를 나타냅니다. 일반적으로 이러한 것에는 로고와 타이틀, 짧은 “about” 영역, 그리고 로그인/로그아웃/프로필 같은 사이트 전체에 공동인 내비게이션이 포함될 수 있습니다.
  • footer – 페이지의 푸터를 나타냅니다. 일반적으로 이러한 것에는 사이트 내부의 링크를 좀 더 자세히 표시하고, 저작권 및 기타 법적인 정보가 포함될 수 있습니다.
  • nav – 페이지의 주된 내비게이션 링크들을 포함합니다.
  • article – 주된 컨텐츠 영역을 포함합니다. 내비게이션, 헤더, 푸터 같은 것은 여기에 포함되지 않습니다.
  • aside – 주어진 영역에 대한 “사이드바” 성격의 정보들을 포함합니다. 또한 주된 컨텐츠에 대한 인용구나 노트 같은 것을 포함할 수도 있습니다.

더 많은 것들은 HTML 5 명세 에서 찾아볼 수 있습니다.

요약

이 글에서는 잘 알려지지 않은 HTML 요소들을 몇가지 설명했습니다. 다음 글에서는 HTML에서 의미적으로 중립인 두가지 요소, div와 span을 어떻게 사용하는지 좀 더 깊이 살펴볼 것입니다.

저자에 대해서

Mark Norman Francis는 웹이 발명되기 전부터 인터넷에서 일을 했었다. 그가 마지막으로 일했던 Yahoo!에서 세상에서 가장 큰 웹사이트를 위한 Front End Architect로, 최상의 방법을 정의하고, 국제적인 웹개발의 표준과 품질을 만들(Coding)었다.

Yahoo! 이전에 그는 Formula One Management에서 일했다, Purple Interactive와 City University에서 웹 개발에 포함되는 각종 규칙을 만들고, CGI 프로그래밍과 시스템 설계를 했다. 그는 블로그를 운영중이다.

  1. 역주: HTML 5 명세에서 cite 요소는 반드시 “제목” 을 마크업하는 용도로 사용해야 하며, 이 글에서 예를 든 것 처럼 사람 이름을 마크업하는데 사용해서는 안된다고 바뀌어 있습니다.
  2. 역주: 사실 acronym은 이미 약어가 아닙니다. 위에서 “그 자체가 하나의 단어로서 받아들여지는” 이라 하였고, 라디오를 약어라고 하는 사람은 많지 않습니다
  3. 역주: title 속성에서 한번, 괄호 안에서 한번
이 글과 비슷한 종류의 글은 'HTML' 카테고리에서 더 찾아볼 수 있습니다. 또한, , 태그로도 검색해 보실 수 있습니다. 북마크를 하시려면 퍼머 링크로 기억해 주세요.
이 글을 다 읽어주셨다면, 댓글을 남겨주세요. 좋았다라는 격려도 좋고, 잘못된 부분을 지적해 주시는 것도 좋습니다. 마음에 드셨다면 아래 Like 버튼을 눌러서 페이스북과 트위터로 소개해 주시면 더욱 좋겠습니다.