HTML 텍스트 서식 지정 완벽 가이드: 굵게, 기울임꼴, 밑줄

HTML에서는 중요한 내용에 독자의 시선을 끌기 위해 다양한 방식으로 텍스트 서식을 지정할 수 있습니다. 이 글에서는 HTML로 텍스트를 굵게, 기울임꼴, 그리고 밑줄로 표시하는 방법을 하나씩 살펴봅니다. 몇 분만 학습하면 여러분도 서식 지정 전문가가 될 수 있습니다!

굵게(Bold)

HTML5 이전에는 텍스트를 굵게 표시하려면 해당 텍스트를  태그로 감싸야 했습니다.

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
   <p>This text is <b>bold</b></p>
   <script src="script.js"></script>
 </body>
</html>

HTML5 표준이 발표된 이후에는  태그를 사용하는 방식이 권장됩니다.

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
   <p>This text is also <strong>bold</strong></p>
   <script src="script.js"></script>
 </body>
</html>

와  요소의 유일한 차이점은 바로 '의미론(semantics)'입니다. 스크린 리더는  태그를 만나면 해당 텍스트를 읽을 때 명확하게 더 강조하여 전달하지만,  태그에는 이러한 기능이 없습니다.

기울임꼴(Italics)

굵게 처리와 마찬가지로, 기울임꼴 텍스트를 만드는 두 가지 표준이 있습니다. HTML5 표준 이전에는 텍스트를  태그로 감싸 기울임꼴을 만들었습니다.

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
   <p>This text is in <i>italics</i></p>
   <script src="script.js"></script>
 </body>
</html>

HTML5가 표준으로 자리 잡으면서  태그는 더욱 의미론적인  태그로 대체되었습니다. 'em'은 emphasis(강조)의 약자입니다.  태그는 스크린 리더에게도 텍스트를 더 강조하라는 신호를 보내어, 사용자가 일반 텍스트와 강조된 텍스트를 쉽게 구분할 수 있도록 도와줍니다.

밑줄(Underline)

HTML에서 밑줄 텍스트는 주로 철자가 틀린 단어를 표시할 때 사용됩니다. 따라서 하이퍼링크로 오인될 수 있는 위치에서는 사용하지 않는 것이 좋습니다. 먼저 텍스트를  태그로 마크업한 뒤, CSS를 활용해 원하는 밑줄 스타일을 지정하는 방식이 권장됩니다.

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <style>
     p u {
       text-decoration: underline red wavy;
     }
   </style>
 </head>
 <body>
   <p>This is a <u>mispelled</u> word</p>
 </body>
</html>

위 예제처럼 CSS의 text-decoration 속성을 함께 사용하면 빨간색 물결 밑줄 등 다양한 스타일을 자유롭게 적용할 수 있습니다.

주요 태그 비교 정리

목적	HTML5 이전	HTML5 권장
굵게	<b>	<strong>
기울임꼴	<i>	<em>
밑줄	<u>	<u> + CSS 조합

결론

이번 글에서는 HTML의 대표적인 서식 태그들을 살펴보았습니다. 과 은 화면에서는 각각 굵게와 기울임꼴처럼 보이지만, 실제로는 해당 요소에 의미론을 부여하는 역할을 합니다. 덕분에 스크린 리더 환경에서도 이 단어들이 강조되어 전달됩니다. 또한  태그를 사용하면 텍스트에 밑줄을 표시할 수 있습니다. 이 세 가지 외에도 HTML에는 훨씬 더 많은 서식 옵션이 준비되어 있으니, 상황에 맞는 태그를 골라 접근성까지 고려한 웹 문서를 작성해 보세요.