본문으로 바로가기

Semantic Markup #1

category HTMLㆍ웹표준ㆍ 웹접근성 2016. 1. 6. 08:55

시맨틱(의미론적인) 마크업을 위한 접근법Ⅰ

웹 사이트를 만드는 일은 손으로 직접 웹페이지를 작성하는 기술도 포함하고 있으며, 이러한 기술 중 커다란 부분은 HTML에 포함된 마크업 툴들을 어떻게 사용하는지를 알아야 하는 것입니다. 

즉, HTML은 웹의 사소한 작업(web trifle)들의 기초이므로, 사소한 작업에 친숙해 져야 하는 일은 중요하다라는 의미일 것입니다. 

<video><canvas> 같은 시멘틱 요소들은 많은 주목을 받고 있지만, HTML5는 또한 약간의 추가 항목과 변화한 것들을 제공하고 있습니다. 

그다지 흥미롭게 들리진 않겠지만, 이러한 것들은 작업의 흐름을 순조롭게 만들어 줄 것이고 추가된 항목과 변화된 것들은 우리가 앞으로 항상 사용하게 될 요소들과 특정한 종류의 콘텐츠만을 위한 새로운 요소들을 포함하게 될 것입니다.



진화의 과정으로 HTML5 실정에 맞도록 변화된 HTML4 요소들은 발전하는 웹에 더 적합하도록 조정되었습니다. 

또한 어떤 매체를 사용하든지 간에 각 요소들은 똑같은 의미론적인 뜻을 반드시 전달한다는 미디어 독립이라는 근원적인 움직임도 있습니다. 

이러한 개념 정의가 약간 일반적이고 모호하게 들릴지 모르지만, 웹의 포괄성을 증대시키는 일은 대단히 중요하다고 할 수 있습니다. 

더 많은 사람들이 인터넷을 사용하고 또 더 다양한 기기에서 인터넷을 사용할 할수록 더 중요하게 될 것이기 때문입니다.


이 시간에는 수정되고 재정의된, 또는 쓸모없게 되어버리기까지 한 HTML4 요소들을 살펴보도록 하겠습니다. 

블록 레벨 링크들을 들여다보고, 몇몇의 새로운 텍스트 레벨 요소, 그리고 마이크로 포맷과 마이크로 데이타를 사용하여 HTML5를 확장시키는 방법에 대해서도 알아봅니다.



과거의 표현 요소들

많은 HTML4 요소들이 바뀌지 않은 채 기본 그대로 HTML5로 옮겨 졌지만, HTML4의 표현 요소(Presentational Elements)들은 쓸모 없게 되었거나, 새로운 의미론적인 뜻으로 갖추게 되었습니다. 이전의 표현 요소들이 가지고 있던 정의는 스크린에 어떻게 보여지느냐에 바탕을 두었고, 이것은 시력 장애를 가지고 있는 사람들과 같은 보조 기기 사용자에게 전혀 도움이 되지 않았기 때문입니다. 

그래서 HTML5가 이것을 바로 잡고 있는 것입니다.

먼저, 폰트 스타일 요소들을 간략히 살펴보고, 좀 더 의미론적인 뜻에 충실한 <em><strong> 을 비교해 봅니다.

  • <i> : 이것은 이태릭체로 표현되었고, 지금은 외국어로 된 말, 기술적 용어, 그리고 분류학적인 명칭과 같이 대체음성(Alternate Voice)으로 전달되는 텍스트에 사용된다.
  • <b> : 이것은 굵은체로 표현되었고, 지금은 키워드, 리뷰에 표시된 상표명, 또는 글의 첫 문장과 같은 문체상 오프셋 인쇄의 텍스트에 사용된다.
  • <em> : 이것은 강조 텍스트를 표현했고, 지금은 다르게 발음을 할 단어를 강조하는데 사용된다.
  • <strong> : 더 강한 강조 텍스트를 표현했고, 지금은 강한 중요성을 나타내는데 사용된다. 그러나 기본적으로는 같다.


미디어 독립적 의미론에 변화를 겪어 온 HTML5의 4가지 요소를 더 알아봅니다.

  • <small> : 작은 크기의 텍스트에 사용되었고, 지금은 작은 문자로 인쇄되는 세세한 항목과 사이드 코멘트에 사용된다.
  • <hr> : 가로선을 긋는데 사용되었고, 지금은 문단 수준의 테마 변화에 사용된다.
  • <s> : 어구에 선을 그어 지우는데 사용되었고, 지금은 더 이상 관련이 없거나 정확하지 않는 컨텐츠에 사용된다. (후에 <del><ins>를 비교해 봅니다.)
  • <u> : 텍스트에 밑줄을 긋는데 사용하였고, 지금은 명확하게는 보여지지만, 분명히 발음이 되지 않고 구조적이지 않는 각주로 구성된 텍스트 영역에 사용된다.


HTML4에서 <i>와 <b>는 폰트 스타일 요소입니다. 그러나, 지금은 의미론적인 뜻을 가지고 있고, 물론 그 기본 스타일을 CSS를 통해 변화를 줄 수 있습니다. 

예를 들어, <b>는 굵은체로 보이지 않게 할 수 있어서, 나중에 스타일을 다시 쉽게 바꿀 수 있도록 뜻이 담겨 있는 의미있는 이름으로 된 CSS 클래스명을 태그에 추가하기를 권장합니다.



i 요소

전형적으로 이태릭체로 표현되는 것들은 lang=”” 속성을 사용하는 외국어 언어, 분류학과 기술 용어, 선박이름, 희곡대본에서의 일렬로 늘어선 지문, 기보법을 포함합니다. 

그리고 생각 또는 손글씨체를 포함하는 인라인 텍스트를 나타낼때의 것들 또한 포함하고 있습니다.

다음의 경우를 보겠습니다.

  • 다른 분위기로 전환되는 정보 또는 해설을 나타낸다. (Alternate mood) <i class="voiceover">  
  • 다른 문자로 옮겨진 산문체를 나타낸다.(일본어를 라틴문자로 옮긴 경우임.) <i lang="ja-latn"> 
  • 분류학적인 명칭에 쓰인 경우이다. <i class="taxonomy">


<i> 요소는 음성, 또는 다른 분위기가 대체되는 텍스트 영역을 나타내거나, 그렇지 않으면 텍스트의 다양성을 보여주는 방식으로 평범한 산문체와 구별되는 오프셋 인쇄로 된 텍스트 영역을 나타낸다.


<i>는 적절한 요소가 없을때만 사용하고, <em>는 발음을 강조하는 텍스트에 사용하며, <strong>은 의미론적인 중요성을 갖는 텍스트에 사용하여야 합니다. 

이에 덧붙여 <cite>는 인용문의 제목 또는 도서 제목에 사용되고, <dfn>는 정의된 용어를 표시할때 사용되며, <var>는 수학적 변수를 나타낼때 사용됩니다.


위의 경우처럼, 클래스 속성을 사용하는 것을 잊지 마시기 바랍니다. 

클래스 속성 사용은 왜 이 요소가 사용되고 있는지를 밝혀주며, 특정한 사용이 요구될시 쉽게 그 스타일을 변경할 수 있기 때문입니다. 

또한 CSS에서 속성 선택자(e.g. [lang=”ja-latn”])를 사용하여 lang 속성을 지정할 수도 있습니다. 

일반적으로 외국의 산문 전체를 사용할시 인용부호로 묶어야 하거나 <blockquote>요소를 사용하여야 하지, <i>를 사용해서는 안된다. 

대신 외국 산문을 포함하는 요소에 lang 속성을 추가하면 될 것입니다.



b 요소

<b> 텍스트는 그저 다르게 보여야 할 뿐입니다. font-weigth: bold;라고 CSS에서 따로 정의할 필요도 없습니다. 

그러나 둥근 사각형으로 된 배경을 만들고, 폰트 크기를 더 크게하고, 폰트 색상을 다르게 하며, 또 소대문자로 포멧팅하는 등 다른 스타일을 추가한다면 한 층 더 업그레이드 된 비주얼을 경험할 것입니다. 

또한 하나의 예로, 연극 대본에 <b class=”character”>를 사용함으로써, 누가 말을 하고, 누가 해설을 하는지 나타낼 수도 있을 것입니다.


<b> 요소는 공리적 목적으로 주의를 끄는 텍스트 영역을 나타낸다. 

이것은 전달되는 부가적인 어떠한 중요성도 없고, 대체되는 음성이나 분위기의 암시도 없다.


리뷰에 포함되어 있는 상품명에, 문서 초록에서 키워드에, 그리고 복잡하고 전통적으로 디자인된 페이지의 첫 글자에 b>를 사용할 수 있습니다.

  • e.g. <b class="opening-phrase">를 사용하여 첫 글자를 "versal(Drop Cap[각주:1])"로 만들 수 있다.


가상요소 선택사 :first-letter를 사용해서 드롭캡(drop cap)을 만들 수도 있습니다. 

위의 경우 opening phrase는 단지 스타일을 주기 위한 이유로 사용된 것이고 의미론적으로 중요성을 가진다면 <strong>이나 다른 요소가 더 적절할 지도 모릅니다. 

<strong>은 의미론적인 중요성을 가진 텍스트를 위한 것이고, <em>는 어세를 높여서 발음하는 텍스트를 강조하기 위한 것이고, <h1>~<h6>는 제목을 위한 것이며, <mark>는 하이라이트 표시가 필요한 텍스트를 위한 것이므로,<b>는 보다 더 적절한 다른 요소가 없을 때만 사용하여야 합니다. 

또한 목록 리스트에 포함된 텍스트 데이타를 시각적으로 표현하고 싶다면 클래스를 사용하고, 전통적인 타이포 그래픽 효과를 만들려고 한다면, :first-letter:first-line와 같은 가상 요소 선택자를 대신 사용하도록 합니다. 

그리고 클래스 속성을 사용하는 것은 그 요소가 왜 사용되는지 밝혀 주기 때문이고, 특정한 경우에는 그 스타일을 다시 쉽게 변경할 수 있기 때문입니다.



em과 strong 요소

<em><strong>은 꽤 많이 보합세를 보이고 있지만, 그 의미 부분에서 약간 재조정되었습니다. 

HTML4에서 이 두 요소는 강조와 강한 강조를 의미했으나 지금은, 다르게 발음을 하는 단어에서 어세를 표현하는 <em>과 의미의 중요성을 표현하는 <strong>으로 각각 차별화하고 있습니다.


em 요소

<em> 요소는 다르게 발음이 되어지는 그 컨텐츠의 어세를 표현한다.

여기서 어세(“stress”)라는 표현은 언어학적으로 이해되어 집니다. 말을 할때, 문장의 뉘앙스를 바꿀 수 있는 단어에 발음을 강하게 할 것입니다. 

예를 들어, “당장 의사를 불러라!”라는 문장에서는 “의사”를 강조하고 있고 아마도 “이 여자가 목말라 하는것 같아요."는 동종 요법으로 의사를 불러야 하나요?”라고 묻고 있는 사람에게 하는 대답으로 하는 말로 인지할 것입니다. 

“당장 의사를 불러라!”와 비교하자면 여시기서는 “당장”이라는 단어를 강하게 발음하고 있고 이것은 “빨리 그렇게 하라”는 의미로 그 강조를 바꾼 것입니다.


strong 요소

중요성을 나타내려면 <strong>를 사용하고, 어떠한 강조도 암시하지 않은 채 이태릭체만 원할때는 <i>를 사용하도록 합니다. 

만약 이미 <em>으로 강조된 텍스트 안에 또 다른 <em> 요소를 필요로 한다면, 그 중첩의 수위는 강조의 상대적인 단계수준을 나타낼 것입니다.

<strong> 요소는 그 컨텐츠에 대한 강한 중요성을 나타낸다.

<strong> 요소를 사용하여 상대적인 중요성을 표현해라. 

그리고 어세를 높여서 발음되는 텍스트는 <em>을 쓰고, 중요성을 포함하지 않은 굵은체의 텍스트, 또는 문체상 오프셋 인쇄의 텍스트에는 <b>, 하이라이트 표시가 적절한 텍스트에는 <mark>를 사용하는 습관을 기르도록 합니다.




small 요소

<small>은 사이드 코멘트를 위한 것이고, 페이지의 주요 관심사가 아닌 컨텐츠를 위한 <aside>와 같은 요소에 해당합니다. 

흔한 예로는 페이지 풋터에 카피라이트, 법적 통보, 또는 라이센스 정보와 같은 법률 용어를 들 수 있습니다. 

이것은 <small class=”font-license”>와 같이 클래스 속성과 함께 사용되어 질 수도 있으며 <small class=”font-license”>라고 사용함으로써 폰트 특허 협약이라는 요건을 충족시킬 수 있습니다. 

참고로, 이것을 rel=”license” 속성이 있는 링크 요소를 감싸므로써 다음과 같이  다르게 사용할 수도 있습니다.

html
<small>
   <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution Share-alike license</a>
</small>

하지만, 문단이나 리스트 목록 등등 블럭 레벨 컨텐츠에 이 <small>요소를 사용말아야 합니다. 

이미 언급했듯이, 사이드 코멘트를 위한 요소이지 메인 컨텐츠에 사용되는 것이 아니기 때문입니다. 

즉, 블럭 레벨 컨텐츠에 사용되었다면, 적절한 요소가 아님에도 불구하고 메인 컨텐츠로 인식될 것입니다.

<small> 요소는 작은 문자로 인쇄되는 세세한 항목과 사이드 코멘트를 나타낸다.

<small> 요소는 주위의 텍스트보다 작게 보여질 필요가 없습니다. 단지 더 작게 보여지는 텍스트를 원한다면, CSS를 대신 사용하기 바랍니다. 

그리고 인라인 컨텐츠에 <small> 요소를 사용해야 하며 <em><strong>의 의미론에 어떠한 영향도 미치지 않는다는 점입니다.



hr 요소

문단 수준(paragraph-level)이라는 의미는 <p>나 <ul>와 같은 텍스트 블럭을 뜻하지 인라인 컨텐츠나 제목을 말하는 것은 아닙니다. 

<hr> 요소는 의미론적으로 <section>과 같습니다. 그래서 섹셔닝 요소 또는 제목 전후에 <hr>대신 CSS를 사용하는 것이 낫습니다. 

하지만 <p>를 사용하는 곳에 <hr> 요소를 사용할 수는 있습니다. 

재미없는 브라우저 기본 표현을 고려해서 근래에는 널리 사용되진 않지만, CSS를 통해 border를 없애고 margin과 배경 이미지를 추가해서 사용되어 지기도 합니다.


<hr> 요소는 문단 수준(paragraph-level)의 테마 변화를 표현한다.


IE7과 그 이하 버전은 무조건 이미지에 테두리가 표시되는 불편한 점이 있습니다. 

그러나, http://j.mp/hr-ir 에서 대안을 찾을 수 있을 것입니다.

그렇지 않으면, 조건부 주석을 이용하여 IE7과 그 이하 버전에서는 <hr>을 CSS로 숨기거나 웹 블로그의 코멘트처럼 테마 변경이 눈에 띄게 확실하다면, <hr> 요소의 사용은 적절하지 않을 것입니다. 

만약 의도적으로 사용했다면 그것은 시각적인 표현때문일 것이고 이런 경우는 주위의 다른 요소에 배경 이미지나 테두리를 CSS를 통해 추가하도록 합니다.



s 요소를 del과 ins와 비교

초창기 HTML5에서는 <s>는 쓸모가 없어 사라졌으나, 의미론적인 사용 사례가 나와, 최근의 명세에 다시 복귀되었습니다.


<s> 요소는 더 이상 정확하지 않거나 관련성이 없는 컨텐츠를 표현한다.


초창기에 이 요소의 기능은 <del> 요소로 대체되었습니다 

<del> 요소는 다음과 같이 정의할 수 있습니다.

<del> 요소는 문서에서 제거를 의미하며, 문단과 문단사이에 걸쳐져서는 안된다.

그러나, <s>와 <del> 사이의 그 의미론은 약간 다릅니다. <s>는 관련성이 없는 컨텐츠를 위한 것이고, <del>은 어떤 이유에서든지 간에 문서 편집의 한 부분으로서 문서에서 삭제로 표시되는 컨텐츠를 위한 것입니다. 

<del>은 글의 전후 맥락을 이해하는데 제공될 필요가 없으며, 심지어 독자에게 전달되거나 보여지지 않을 수도 있습니다. 

다음의 예는 더 이상 적용이 되지 않는 지난 가격 또는 매진된 이벤트 목록을 표시하는 <s> 요소의 적용 사례입니다.

html
<ol>
     <li><s>Early bird (4월 6일 종료) : ₩30,000</s></li>
     <li>Middle bird (4월 7일 ~ 5월 1일) : ₩20,000</li>
     <li>Late bird (5월 2일 ~ 5월 23) : ₩10,000</li>
</ol>


ins 요소

<ins> 요소는 문서에 추가되는 내용을 담는다. 이것 역시 문단과 문단사이에 걸쳐져서는 안된다.

<del>과 <ins>는 흔치 않은 요소이고, 표현 또는 흐름요소로서 사용되어질 수 있습니다. 

그래서 p 요소안에 들어갈 수도 있고, p요소를 담을 수도 있습니다. 

문단과 문단사이에 걸쳐져서는 안된다라는 경고는 말그대로 한 p요소 안에 del 또는 ins의 오픈닝 태그로 시작하여 인접한 다른 p요소 안에 del 또는 ins의 클로징 태그로 끝낼 수 없다는 의미입니다. 

즉, 명시적 p 요소를 사용하였을 경우 각 문단들의 내용들 중 삭제 및 추가를 원하는 내용들을 문단과 문단 사이를 걸쳐가며 한번의 del 또는 ins로 삭제 또는 추가할 수 없다 라고 이해하면 될 것입니다..

그 예는 아래와 같습니다.

html
1. <!-- 이렇게는 하지 마라! -->
   <p>ins와 del을 사용할시 주의하여라. <del>문단과 문단사이를 걸쳐서는 안된다.</p>
   <p>두가지 방법이 있다.</del> 각 블럭레벨 요소 안에 ins 또는 del을 사용하든지, 아니면 밖에서 ins 또는 del로 블럭레벨 요소 전체를 감싸든지 하여라.</p>

2. <!-- 대신 각각의 문단요소 안에서 ins와 del을 사용하라! -->
   <p>ins와 del을 사용할시 주의하여라. <del>문단과 문단사이를 걸쳐서는 안된다.</del></p>
   <p><del>두가지 방법이 있다.</del> 각 블럭레벨 요소 안에 ins 또는 del을 사용하든지, 아니면 밖에서 ins 또는 del로 블럭레벨 요소 전체를 감싸든지 하여라.</p>

3. <!-- 또는 밖에서 ins 또는 del로 한번에 문단요소들 전체를 감싸라! -->
   <del>
     <p>ins와 del을 사용할시 주의하여라. 문단과 문단사이를 걸쳐서는 안된다.</p>
     <p>두가지 방법이 있다. 각 블럭레벨 요소 안에 ins 또는 del을 사용하든지, 아니면 밖에서 ins 또는 del로 블럭레벨 요소 전체를 감싸든지 하여라.</p>
   </del>

   <ins>
     <p>ins와 del을 사용할시 주의하여라. 각 블럭레벨 요소 안에 ins 또는 del을 사용하든지, 아니면 밖에서 ins 또는 del로 블럭레벨 요소 전체를 감싸든지 하여라.</p>
   </ins>


또 리스트 목록이나 테이블 안에서 이 두 요소를 사용할 경우 주의해야 합니다. 

예를 들어, 목록요소의 li 안에 있는 컨텐츠를 감싸야 하는 것이지, li 자체를 감싸서는 안됩니다. 

del와 ins 두 요소는 두가지 선택 속성을 가지고 있습니다. 

더 많은 정보를 제공하는 페이지의 URL을 추가할 수 있는 cite 속성과 편집을 한 날짜와 시간을 기록할 수 있게 하는 datetime속성입니다. 

datetime의 포멧 형식은 다음과 같습니다.

year-month-date T hour:minute:second Timezone


다음은 cite와 datetime속성이 적용된 예입니다.

html
<del cite="/edits/r102.html">
<ins datetime="2014-08-21T14:16:00Z">



u 요소

<s>와 함께, <u>도 명세에 복귀되었으며 이 요소에 대한 정의는 다음과 같습니다.


<u> 요소는 분명히 발음이 되지 않지만 명확하게 보여지는 비문자의 각주로 구성된 텍스트 영역에 사용된다.


즉, 비문자 각주로 구성된 텍스트의 예는 중국 고유명사의 표시, 철자의 확인을 요하는 표시, 그리고 로마체로 쓰인 비 서양의 이름으로 된 성(family name)을 표시하는 것까지 포함합니다.

이 세가지 용도를 제외하고는 거의 확실하게 다른 요소가 사용하는 것이 적절하겠지만, 이러한 마크업 툴도 하나 더 있다는 것입니다. 

HTML 마크업 단계에서 의미론적인 뜻은 반드시 수반되어져야 한다는 것을 명심하도록 합니다

이러한 이용 사례가 다양하게 느껴질지 모르지만, 중요한 것은 독자의 관심을 얻기 위해서라도 텍스트는 표시되어져야 한다 라는 것입니다. 

그래야 문맥 속에서 텍스트의 내용을 이해할 수 있을 것입니다.




Jaehee's WebClub


  1. ※ Drop Cap이란 문단의 첫 줄에서 밑으로 약간 내려 크게 표시된 첫 글자를 말한다. [본문으로]