mark 태그는 중요성과 강조를 고려하지 않는 단순 참고용 표시를 할 때 설정합니다.

mark 태그는 중요성과 강조를 고려하지 않는 단순 참고용 표시를 할 때 설정합니다.

Reference/HTML

mark 태그는 중요성과 강조를 고려하지 않는 단순 참고용 표시를 할 때 설정합니다.

by @webs 2022. 12. 28.

<mark>

<mark> 태그는 중요성과 강조를 고려하지 않는 단순 참고용 표시를 할 때 설정합니다.

<mark> 태그는 사용자가 중요하다고 생각하지 않을 수 있는 부분에 주의를 끌기 위해 표시를 사용할 수 있으며, 현재 맥락과 관련이 있거나 하이라이트 부분을 표시할 때 사용할 수 있습니다. 단순하게 노란색 배경을 위해 사용하지 않고, CSS의 background 사용을 권장합니다.

텍스트의 중요성을 강조하기 위해서는 strong 요소를 사용하고, 중요성을 전달하지 않고 주의를 끌기 위함이라면 b 요소를 사용합니다.

---

특징	설명
요소	인라인 요소(Inline Element)
닫는 태그	적용(<mark>~</mark>)
버전	HTML4
시각적 표현	노란색 배경
사용성	★★☆☆☆

정의(Definition)

• <mark> 태그는 중요성과 강조를 고려하지 않는 단순 참고용 표시를 할 때 설정합니다.
• <mark> 태그는 사용자가 중요하다고 생각하지 않을 수 있는 부분에 주의를 끌기 위해 표시를 사용할 수 있습니다.
• <mark> 태그는 현재 맥락과 관련이 있거나 하이라이트 부분을 표시할 때 사용할 수 있습니다.
• <mark> 태그는 인용문에서 사용자가 관심을 가질만한 텍스트에 표시할 때 사용할 수 있습니다.
• <mark> 태그는 검색 결과를 강조할 때 사용할 수 있습니다.
• <mark> 태그는 노란색 배경 효과를 위해 사용하지 않습니다. CSS background를 사용합니다.

텍스트와 관련된 태그

• <b> 태그는 중요성을 전달하지 않고, 주의를 끌기 위한 용도로 사용할 때 설정합니다.
• <em> 태그는 텍스트를 강조할 때 설정합니다.
• <strong> 태그는 내용에 대한 중요성, 심각성, 긴급성을 표현할 때 설정합니다.
• <mark> 태그는 중요성과 강조를 고려하지 않는 단순 참고용 표시를 할 때 설정합니다.
• <i> 태그는 주의 텍스트와 다른 의미의 텍스트로 구분할 때 설정합니다.

예제1(Sample)

텍스트와 관련된 예제입니다.

• <b> 태그는 중요성을 전달하지 않고, 주의를 끌기 위한 용도로 사용할 때 설정합니다.
• <em> 태그는 텍스트를 강조할 때 설정합니다.
• <strong> 태그는 내용에 대한 중요성, 심각성, 긴급성을 표현할 때 설정합니다.
• <mark> 태그는 중요성과 강조를 고려하지 않는 단순 참고용 표시를 할 때 설정합니다.
• <i> 태그는 주의 텍스트와 다른 의미의 텍스트로 구분할 때 설정합니다.

HTML

CSS

SCRIPT

<ul>    
    <li><b>b</b> 태그는 중요성을 전달하지 않고, 주의를 끌기 위한 용도로 사용할 때 설정합니다.</li>
    <li><em>em</em> 태그는 텍스트를 강조할 때 설정합니다.</li>
    <li><strong>strong</strong> 태그는 내용에 대한 중요성, 심각성, 긴급성을 표현할 때 설정합니다.</li>
    <li><mark>mark</mark> 태그는 중요성과 강조를 고려하지 않는 단순 참고용 표시를 할 때 설정합니다.</li>
    <li><i>i</i> 태그는 주의 텍스트와 다른 의미의 텍스트로 구분할 때 설정합니다.</li>
</ul>

.sampleView a,
.sampleView code,
.sampleView var,
.sampleView samp,
.sampleView kbd {
    color: #FF4B4C;
    border-bottom: 1px solid #FF4B4C;
}

//Javascript none

호환성(Compatibility)

						6	7	8	9	10	11
<mark>	○	○	○	○	○	○	○	○	○	○	○	○	○	○

참고(Reference)

• https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-mark-element

---