표현 vs 구조

왜 <b>나 <i> 대신에 <strong>이나 <em>을 사용해야 하는가?

  • 표현법을 알려주는것이 아니라 의미와 구조를 설정하기 위해서다.
  • <em>은 emphasis 강조, <strong>은 strong 강한 강조: 이 둘을
    어떻게 표현하느냐는 브라우저에 달려있다. 보통은 <em>은 이탤릭체로, <strong>은 굵은 글씨로
    표현한다.
  • <b>와 <i>는 표현을 어떻게 할지 나타낼 뿐이다.

링크

  • 링크를 굵은 글씨나 이탤릭체로 표현하고 싶을 때는 CSS로 다음과 같이 설정한다. 표현과 관련된 것이니까…
#sidebar a {
font-weight: bold;
}

#sidebar a {
font-style: italic;
}

굵은 이탤릭체

  • 젤 먼저 얼마나 중요한지 선택하여 <em>이나 <strong> 둘 중 하나를 선택한다.
Building sites with web standards can be <em>fun</em>!

<span> 사용하기

Building sites with web standards can be <em><span>fun</span></em>!

em span {

font-weight: bold;

}
  • 구조와 관계없는 태그를 삽입하였기 때문에, 의미 구분을 제대로 하지 못했다.

class 사용하기

Building sites with web standards can be <em class="bold">fun</em>!

em.bold {

font-weight: bold;

}
  • 이와 반대로 <string> 태그에 italic을 CSS로 설정할 수도 있다.
Building sites with web standards can be <strong class="italic">fun</strong>!

strong.italic {

font-style: italic;

}

Extra Credit

<cite>

  • “<cite>: Contains a citation or a reference to other sources.”

<abbr> and <acronym>

  • <abbr>: Indicates an abbreviated form (e.g., WWW, HTTP, URI, Mass., etc.)
  • <acronym>: Indicates an acronym (e.g., WAC, radar, etc.)
  • 흠.. 두 개 차이가 뭐지..

<code>

  • XHTML 페이지에 소스코드를 적을 때 사용.

<samp>

  • 프로그램이나 스크립트의 예제 결과를 나타낼 때 사용.

<var>

  • <samp>와 비슷하게, <var>는 프로그램 파라미터나 변수를 나타낼 때 사용.

<kbd>

  • 사용자가 입력할 값을 표현할 때 사용.