goongoguma's blog

Uncommon HTML tags that improve web semantics

단어는 중요합니다. 단어들은 뜻을 가지고 있으며 어떤 단어들은 함께 사용함으로써 다른 사람들에게 정보를 전달 할 수도 있습니다. 구두점(punctuation)도 마찬가지 입니다. 구두점이 잘 사용된 문장은 구두점 사용이 안된 문장보다 이해하기 훨씬 쉽습니다.

저는 문법과 구두점에 대해 관심을 갖기 시작했습니다. - 대략적인 용어로 “시멘틱(semantics)”라고도 하죠. 프론트엔드 개발자로서, 정보를 웹에 보여주는것 만큼 웹에서 사용되는 구두점에 대해서도 관심을 갖기 시작했습니다 - 즉, 올바른 테그를 사용하여 페이지를 마크업하는데 말이죠.

우리가 사용하는 웹페이지들은 문서(documents)입니다. 이러한 문서들은 h1</mark> 요소를 사용한 하나의 메인 타이틀을 가지고있습니다. 만약에 이러한 페이지 안에서 여러개의 항목이 존재한다면, 각각의 항목은 h2 요소를 사용할것이고, 더 나아가서 그 아래에 세부항목으로 더 나누어진다면, 각각의 세부 항목은 h3 요소를 사용해 타이틀은 설정할겁니다.

만약 웹사이트의 메인 네비게이션 부분을 본다면, ulnav 요소안에 위치할것이라고 예상할 수 있습니다. 사이드메뉴 는 아마도 aside 요소안에 위치하겠지요(그래도 모든 사람들이 이 요소를 사용하는데 있어 동의하지는 않습니다).

우리는 이런 일반적인 웹 시멘틱들을 알고있습니다. 하지만, 웹페이지를 마크업 하는데 있어 사용이 가능한 더 많은 HTML 요소들이 존재하며 이에 대해 아는것은 우리 모두에게 큰 도움이 될 것입니다. 모질라 MDN 웹문서에서 HTML 요소의 모든 리스트를 확인해 보실 수 있습니다.

Using HTML5 tags for SEO and accessibility

왜 이러한 태그들을 알아야 하는 것일까요? 만약 여러분이 접근성에 신경쓴다면(신경쓰시겠죠!), 여러분이 만든 페이지가 가능한 많은 사용자들이 최대한 이해할 수 있는 페이지가 되길 바랄겁니다. SEO를 신경쓴다면, 봇이 검색 엔진 결과 뿐만이 아니라 소셜 미디어 게시물(트위터와 같은)을 이해하고 색인을 만들어 여러분의 컨텐츠를 반환할수 있는지 확인하고 싶겠죠.

기본적으로, “시멘틱한 웹(사이트)”를 만든다는것은 팀 버너스 리에 따르면 “정보에 잘 정의가 된 의미가 부여되어 컴퓨터와 사람의 협력성을 높여주는것”이라고 할 수 있습니다.

시멘틱한 웹을 만드는데 도움을 주는, 잘 사용되지 않은 요소들을 한번 살펴보도록 하겠습니다.

Important HTML tags you should use

The address HTML tag

address 요소가 웹사이트에서 주소를 표시할 때만 사용한다고 생각할 수는 있습니다. 이 요소를 그렇게도 사용할 수 있지만, 더욱 상세하게 말하자면 가까운 부모태그인 article 태그 혹은 body 태그에서 “연락처 정보”를 제공하는데에도 사용될 수 있습니다.(저는 그러므로 contact태그로 불리워져야 한다고 생각합니다.) 아래의 예시를 보시죠:

블로그 포스트 작성자의 연락처 정보를 제공합니다. article 요소안에서 사용해야 한다는것을 꼭 기억하세요.

<address>
  Mark Conroy can be contacted at <a href="https://mark.ie/contact">his personal website</a>.<br>
  On social media you can contact him via <a href="https://twitter.com/markconroy">Twitter</a> and <a href="https://www.linkedin.com/in/conroymark/">LinkedIn</a>.
</address>

여러분의 비지니스 연락처 정보를 웹사이트의 footer안에 포함시킬 수도 있습니다.

<body>

  <header>
  Logo, Menu, Search, etc.
  <header>

  <main>
  The main body
  </main>

  <footer>
    <div>
      Probably some newsletter signup form, 
      and links to cookies and privacy policies
    </div>
    <address>
      Our Great Company<br>
      123 Main Street<br>
      New York.
    </address>
  </footer>

</body>

address 요소는 검색엔진 결과 페이지에서 여러분의 위치나 전화번호와 같은 정보를 사람들에게 제공하는데 좋습니다. 하지만 위험하다고 생각하시면 사용하지 않으셔도 됩니다.

Using

time 요소는 특정한 시간이나 지속되는 시간을 나타내기 위해 사용됩니다. 예를들어 아래와 같이 블로그 글이 언제 포스팅 되었는지 나타낼때 표시해줄때 사용될 수 있습니다.

<div>Published: <time>June 23, 2021 </time></div>

이 부분은 time 요소를 사용하는 가장 기본적인 예시입니다. 주로 time 요소는 시스템이 쉽게 읽을 수 있는 datetime 속성과 함께 쓰입니다. 해당 속성을 사용해서 유닉스(unix) 타임 스템프처럼 시스템이 쉽게 읽을 수 있는 모든 포멧을 사용할 수 있습니다.

<time datetime="1625572800">June 23, 2021 </time>

또한 블로그 포스트를 읽으려면 얼마의 시간이 걸리는지와 같은 지속시간을

<time datetime="PT7M">7m</time><span>Reading time</span>

time 요소를 사용해 다양한 방법으로 시스템에게 여러분의 의도를 전달할 수 있습니다. 프론트엔드 컨퍼런스가 다가오고 있다고 생각해보죠:

<p>LogRocketBlogConf will take place on <time datetime="2018-08-01">August 1</time> all fully online.</p>

<p>Talks will start at <time datetime="09:00">09:00</time> and every hour thereafter until <time datetime="17:00">17:30</time> giving you <time datetime="PT8H30M">8h 30m</time> of pure frontend bliss.</p>

Using for abbreviations

abbr 요소는 시스템에게 여러분이 말하고자 하는것이 어떤것에 대한 축약형인지 알려주기 위해 도움을 주지만, 개발에서 사용하는 축약어에 익숙하지 않은 사용자들에게 더욱 큰 도움을 줍니다.

만약 NASA나 USA와 같이 잘 알려진 축약어라면 abbr 태그를 사용할 필요는 없습니다. 하지만 그렇지 않다면, 해당 태그는 여러분의 친구가 되어줄겁니다. 더 나은점은 축약어의 전체 문장을 알려주는 선택적으로 사용할 수 있는 title 속성이 있다는 겁니다.

<p>I'm tired arguing about whether <abbr title="Hypertext Markup Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr> are programming languages. Let's move on from that.</p>

해당 요소는 다른 요소안에 인라인 텍스트로 사용해도 괜찮습니다. 이러한 경우에는, title 속성을 제외하고 아래와 같이 사용해야 합니다.

<p>JavaScript (<abbr>JS</abbr>) is the programming language of the web.</p>

The HTML tag

data 요소는 어떠한 특정 정보를 시스템이 읽을 수 있는 관계(MDN에서는 번역이라고 합니다)로 생성합니다. 예를 들어, 만약 여러분이 티셔츠 쇼핑몰을 운영하고 있고 3개의 다른 색의 3가지 다른 사이즈를 판매한다면 그것은 총 9가지의 경우의 수가 있는겁니다.

각각의 수는 각각의 재고 관리 코드(Stock keeping unit) 혹은 상품의 아이디를 가지고 있을겁니다. 다음과 같이 데이터 요소(데이터 속성이 아니라)를 나타낼 수 있습니다.

<ul>
  <li><data value="lr-gr-sm">Log Rocket T-shirt: Green, Small</data></li>
  <li><data value="lr-gr-med">Log Rocket T-shirt: Green, Medium</data></li>
  <li><data value="lr-gr-lrg">Log Rocket T-shirt: Green, Large</data></li>
  <li><data value="lr-bl-sm">Log Rocket T-shirt: Blue, Small</data></li>
  <li><data value="lr-bl-med">Log Rocket T-shirt: Blue, Medium</data></li>
  <li><data value="lr-bl-lrg">Log Rocket T-shirt: Blue, Large</data></li>
  <li><data value="lr-rd-sm">Log Rocket T-shirt: Red, Small</data></li>
  <li><data value="lr-rd-med">Log Rocket T-shirt: Red, Medium</data></li>
  <li><data value="lr-rd-lrg">Log Rocket T-shirt: Red, Large</data></li>
</ul>

Using mark for highlighting

mark 태그는 택스트를 강조표시 하는데 사용합니다. 해당 태그는 글의 원작자가 하지 않았다는 점에서 이탤릭이나 볼드체를 사용하는것과는 다릅니다. 이 요소는 여러분이 책을 읽을때 형광펜을 사용해서 책의 텍스트에 표시한다고 생각하시면 됩니다.

책의 원작자는 이렇게 형광펜을 사용해서 표시를 하지 않죠. 대신에, 텍스트에 대해 특별이 강조하고 싶은 부분이 있기에 여러분이 합니다.

저는 해당 요소가 웹페이지를 생성하고 페이지에 어떤것을 추가해야하는지 기억할때 유용한것을 발견했습니다. 그리므로 저는 나중에도 잊지를 않죠(이렇게 사용하도록 의도된 것은 아니지만, 저는 글의 저자이기 때문에 매우 유용하게 사용하고 있습니다). 블로그에 글을 쓸때, 저는 이렇게 사용합니다.

mark 태그를 사용하는 예제는 검색 결과 페이지에서 검색한 결과의 구문을 강조한데서 자주 볼 수 있습니다. 이 케이스에서 강조된 텍스트는 검색 컨텍스트에서만 중요합니다.

Using bdo and bdi for bi-directional text

문서에 양방향 텍스트를 사용한다면 bdo 태그를 사용하세요. 이 요소는 만약 왼쪽에서 오른쪽으로 작성되는 언어를 사용하다가 (아랍어와 같이) 오른쪽에서 왼쪽으로 사용되는 언어를 인용할때 유용합니다.

bdo 태그와 대응하는 다른 태그는 bdi입니다. 이 태그는 주변 텍스트로부터 분리되어야하는 양방향의 콘텐츠를 위한 태그입니다. 문서에 유동적으로 텍스트를 주입하지만 어떤 언어를 사용하게 될지는 모른다면 bdi를 사용하세요.

Using wbr for word breaks

URL과 같이 하나의 라인을 넘어가서 가로 스크롤이 생기는 긴 문자 텍스트를 만들어본 경험이 있으신가요? 그렇다면 wbr 태그를 사용하세요. 이 태그는 단어를 나누는데 적절한 장소를 제안합니다.

만약에, URL인 https://example.com/this/is/a/long/url 경우에는 (핸드폰과 같은데서 보게되면) 줄 하나로는 부족할 수도 있습니다, 그래서 어떤 포인트에서 브라우저에게 단어를 나누어 달라고 제안할 수 있죠.

아래와 같이 이렇게 할 수도 있습니다.

https://example.com/<wbr>this/is/a/long/url.

이제 페이지의 크기를 조절하면 텍스트의 문자열은 https://example.com/ 이렇게 됩니다.

i as idiomatic text

저는 왠지 여러분이 i 요소를 이미 사용해 보셨다는 느낌이 듭니다. 하지만 텍스트를 이탤릭체로 만드는것보다는 아이콘을 표시하기 위해 아래와 같이 사용하셨을것 같은 느낌도 들구요.

<i class="fa fa-facebook"></i>

이탤릭체는 예를 들어 여러분이 읽었던 책의 이름을 알려주기위해 사용할 수 있습니다.

<p>I enjoy <i>One Hundred Years of Solitude</i> by Gabriel Garcia Marquez.</p>

위의 예제는 아래와 같이 나올겁니다 I enjoy reading One Hundred Years of Solitude by Gabriel Garcia Marquez. 이 요소를 제대로 사용해서 사람들이 우리가 쓴 구절을 훔쳐가도록 하는것보다 스크린 리더가 우리의 의도를 이해할 수 있도록 사용해 봅시다.

Conclusion

제가 생각하기에 더 넓게 쓰이고 시멘틱한 웹을 만들고 더 나은 접근성에 도움을 주고 SEO를 향상시킬 수 있는 HTML의 요소들에 대해 잠깐 알아봤습니다. 사용 가능한 요소들에 더욱 친숙해 지기 위해 MDN 문서 읽어보시는걸 추천합니다.

원문 : Uncommon HTML tags that improve web semantics