HTML5 & lt; Mark & ​​gt; 텍스트를 강조하는 요소?

html5 <mark></mark> 요소로 텍스트를 강조 표시합니다

html5 <mark></mark> 요소는 텍스트를 강조 표시하도록 특별히 설계되었으며, 어떤 이유로 텍스트가 표시되거나 강조되었음을 나타냅니다. CSS를 사용하여 텍스트 색상을 변경하는 것과는 달리 의미 적으로 의미가 있습니다. 이를 사용하려면 개구부 및 <mark></mark> 태그 내에서 강조하려는 텍스트를 랩핑합니다. 예를 들어:

 <code class="html"><p>This is some text. <mark>This text is highlighted.</mark> This is more text.</p></code>

이렇게하면 일반적으로 사용자의 브라우저에서 적용되는 기본 노란색 배경 하이라이트로 "이 텍스트가 강조 표시됩니다"텍스트가 렌더링됩니다. 브라우저의 기본 스타일은 일반적으로 미묘한 노란 배경으로 강조 표시된 텍스트를 지나치게 산만하지 않고 쉽게 구별 할 수 있습니다. 이것은 컨텐츠의 전반적인 가독성을 방해하지 않고 명확한 시각적 큐를 제공하는 디자인의 주요 측면입니다. 당신은 그것을 작동시키기 위해 특별한 속성이나 JavaScript가 필요하지 않습니다. 텍스트를 강조하는 간단하고 의미적인 방법입니다.

<mark></mark> 요소에 대한 접근성 고려 사항

<mark></mark> 요소를 올바르게 사용하는 것은 접근성에 중요합니다. 주요 목적은 강조 표시된 텍스트가 검색 결과, 사용자가 선택한 텍스트 부분 또는 수정이기 때문에 어떤면에서 중요하다는 것을 나타내는 것입니다. 스크린 리더 및 기타 보조 기술은 그에 따라 <mark></mark> 요소를 해석하여 장애가있는 사용자에게 강조 표시된 텍스트의 중요성을 전달합니다.

그러나 충분한 맥락을 제공하는 것이 중요합니다. 설명없이 텍스트를 강조하는 것은 혼란 스러울 수 있습니다. 주변 텍스트에서 컨텍스트가 즉시 명백하지 않은 경우 aria-label 속성을 사용하여 보조 기술에 대한 추가 정보를 제공하는 것을 고려하십시오. 예를 들어:

 <code class="html"><p>The search term "HTML" yielded these results: <mark aria-label="Search result: HTML">HTML</mark> is a markup language.</p></code>

이것은 스크린 리더를위한 추가 정보 계층을 추가하여 강조 표시의 이유를 설명합니다. 과도한 강조 표시는 보조 기술 사용자를 포함하여 모든 사람에게 콘텐츠를 압도하고 이해하기 어려울 수 있으므로 <mark></mark> 를 피하십시오. 과용은 또한 하이라이트 자체의 의미를 희석 할 수 있습니다. 접근성과 명확한 의사 소통을 유지하기 위해 신중하고 의도적으로 사용하십시오.

스타일링 <mark></mark> 요소

브라우저는 <mark></mark> 요소에 대한 기본 스타일을 제공하지만 CSS를 사용하여 모양을 사용자 정의 할 수 있습니다. 이를 통해 웹 사이트의 디자인에 맞게 하이라이트를 조정하거나 시각 장애가있는 사용자에게 더 나은 대비를 제공 할 수 있습니다. 태그 이름을 사용하여 <mark></mark> 요소를 직접 타겟팅 할 수 있습니다.

 <code class="css">mark { background-color: #FFD700; /* Gold */ color: #000000; /* Black text */ padding: 0.2em; /* Add some padding */ }</code>

이 CSS 스 니펫은 배경색을 금으로 바꾸고 텍스트 색상을 검은 색으로 설정하여 더 나은 대비로 설정하며 더 나은 가독성을 위해 패딩을 추가합니다. 시각 장애가있는 사용자가 충분한 가시성을 보장하기 위해 색상 조영 비율을 고려해야합니다. 색상 대비 비율을 확인하는 데 도움이되는 도구는 온라인으로 제공됩니다. 가독성을 방해 할 수있는 지나치게 밝거나 산만 해지는 색상을 피하십시오. 웹 사이트의 일관된 스타일은 더 나은 사용자 경험에 기여합니다.

다른 텍스트 강조점과의 차이점

<mark></mark> 요소는 주로 의미 적 의미를 통해 다른 텍스트 강조 방법과 구별됩니다. 강조 표시를 위해 인라인 CSS 스타일과 함께 <span></span> 사용하는 것과 달리 <mark></mark> 특정 이유로 텍스트가 강조 표시되도록 명시 적으로 전달합니다. 이 의미 론적 차이는 접근성과 SEO에 중요합니다.

Bold ( <strong></strong> ) 또는 이탤릭체 ( <em></em> ) 태그 사용과 같은 다른 방법은 강조 또는 중요성을 전달하지만 반드시 강조하지는 않습니다. 이 태그는 텍스트의 중요성과 관련된 특정 의미의 의미를 가지고 있으며, 그것이 강조 된 사실이 아니라. 따라서 강조 표시를 위해 <mark></mark> 사용하는 것이 의미 적으로 더 정확하며 보조 기술 및 검색 엔진에 대한 더 나은 컨텍스트를 제공합니다. <mark></mark> 사용하면 프레젠테이션 (CSS 스타일)과 의미론 (HTML 구조) 간의 우려 분리를 유지하는 데 도움이됩니다.

위 내용은 HTML5 & lt; Mark & ​​gt; 텍스트를 강조하는 요소?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!