여러 어휘 요소들

• 어휘 요소 활용 : <strong>, <em>, <d>, <i>

• 강조 : strong, em

• 표현 : d, i

강조(의미가 있는 요소)

• Semantic Elements - 강조의 의미를 부여하는 용도

<strong>

• 내용의 중요성, 심각성, 긴급성을 강조할 경우 사용

• [중요성] : 제목/캡션의 글자 중 일부를 더욱 강조하는데 사용

• [심각성] : 경고 또는 주의를 주고자 할 때 사용

• [긴급성] : 문서의 다른 부분보다 빨리 보아야 하는 내용을 나타내는데 사용

<em>

• 특정 내용의 스트레스 강조 - 문장 의미를 변경

표현(의미가 없는 요소)

• Non Semantic Elements - 다른 글자와 구분하기 위한 용도

<b>

• 단순히 다른 글자와 구분된 용도로 사용.

• 문서 요약의 주요 단어, 리뷰 제품 이름 등

• 아래 조건에 부합하지 않을 경우 최종적으로 b 요소 사용을 고려

• 제목은 h1 ~ h6 요소를 사용하고

• 강조는 em 요소를 사용해야 하며

• 중요도는 strong 요소로 표시 되어야 하고

• 표시 또는 강조 표시된 텍스트는 mark 요소를 사용

<i>

• 다른 글자와 구분된 용도로 사용.

• 기술적 용어, 다른 언어(목소리), 인물의 생각 등을 표현

예시

<b>굵은 글씨</b>
<strong>굵고 중요한 글씨</strong>
<i>기울어진 글씨</i>
<em>기울어지고 중요한 글씨</em>

<b>굵은 글씨</b>
<strong>굵고 중요한 글씨</strong>
<i>기울어진 글씨</i>
<em>기울어지고 중요한 글씨</em>
<q>짧은 인용문</q>
<blockquote>인용문</blockquote>
<small>조금 작은 글씨</small>
<mark>하이라이트</mark>
<del>삭제된 글씨</del> <!-- 글씨 중간에 줄 -->
<ins>밑줄 글씨</ins>
<sub>아래첨자</sub>
<sup>위첨자</sup>
<address>전화, 팩스, 주소</address>
<cite>작품 제목</cite>
<abbr title="맥도날드">맥날</abbr> <!-- 약어를 표현합니다. 태그 위에 마우스를 올리면 title 속성의 설명이 뜹니다. -->
<pre>
  <code>
    var <var>hello</var> = "world";
    var <var>html</var> = "wonderful";
  </code>
<pre> <!-- code 태그는 컴퓨터 코드를 표현합니다. pre 태그는 공백을 그대로 표현합니다. var 태그는 변수를 표현합니다 -->
<kbd>인풋</kbd>
<samp>아웃풋</samp>