HTML mark 태그 완전 정리 – 의미 있는 형광펜 강조
웹 문서에서 특정 부분을 돋보이게 만들고 싶을 때 어떻게 하나요? 그냥 굵게만? 아니죠. 오늘은 독자의 시선을 사로잡는 비장의 무기, mark 태그를 제대로 살펴보겠습니다. 단순히 색칠하는 게 아니라, 의미 중심의 강조 태그라는 점에서 매우 유용합니다.
예제 1. 텍스트의 특정 부분 강조하기
중요한 문장이나 키워드를 강조할 때 mark 태그를 사용하면 눈에 확 띄는 효과를 줍니다. 독자의 주목이 필요한 부분에 적합하죠.
<p>오늘은 <mark>중요한 발표</mark>가 있습니다.</p>오늘은 중요한 발표가 있습니다.
예제 2. 검색 결과에서 키워드 강조
검색 기능을 구현할 때, 사용자가 입력한 키워드를 검색 결과에 mark로 강조하면 UX가 좋아집니다. 구글에서도 자주 쓰는 방식이에요.
<p>검색 결과: <mark>HTML</mark> 태그 배우기</p>검색 결과: HTML 태그 배우기
예제 3. 교육 자료에서 핵심 단어 강조
온라인 강의 자료나 설명 글에서 핵심 개념만 형광펜처럼 강조해줄 때 사용하면 집중도를 높일 수 있어요.
<p><mark>Semantics</mark>는 의미론적 구조를 의미합니다.</p>Semantics는 의미론적 구조를 의미합니다.
예제 4. 이메일이나 공지에서 주의사항 강조
공지문에서 날짜, 기한 같은 중요 정보를 강조할 때 mark는 톡톡한 역할을 합니다. 실무에서도 많이 쓰여요.
<p><mark>제출 마감: 5월 31일</mark>까지 입니다.</p>제출 마감: 5월 31일까지 입니다.
예제 5. 일반 문장에서 의도적 강조
단어 하나를 부각시켜 전달력을 높이고 싶을 때도 mark는 탁월합니다. 강조 방식에 따라 분위기도 바뀝니다.
<p>그건 정말 <mark>중요</mark>한 부분이에요.</p>그건 정말 중요한 부분이에요.
마무리하며
mark 태그는 단순한 장식이 아닙니다. 정보의 우선순위를 독자에게 자연스럽게 전달하는 HTML의 매너죠. 시선을 유도하고, 내용을 분명하게 구분해주기 때문에 실무에서도 자주 사용됩니다. 적재적소에 이 태그를 활용해보세요. HTML이 훨씬 말이 통하는 언어로 느껴질 거예요.