표현 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>

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