HTML5, <b> <strong> <i> <em> 태그 알아 보기
- HTML/HTML 기초
- 2020. 8. 2.
1. <b>와 <strong> 태그
<b> 태그는 굵은 글꼴을 표현하고 싶을 때 사용하며, <strong> 태그는 굵은 글꼴을 표현하는 것 외에도 해당 글의 중요성을 강조하고자 하는 용도로 사용됩니다. W3C에서는 강조하기 위해 <em>이나 <strong>을 사용할 것을 권장하고 있습니다. 따라서, 결론적으로 HTML5 표준을 따른 다고 하면 <b> 태그보다는 <strong> 태그를, <i> 태그보다는 <em> 태그를 사용하는 것이 부합합니다.
b 태그와 strong 태그의 사용례는 아래와 같습니다.
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>mark{background-color:red}</style>
</head>
<body>
- b 태그의 <b>사용례</b> 입니다.
- strong 태그의 <strong>사용례</strong> 입니다.
</body>
</html>
위의 내용에서 body 부분만을 발췌한 모습은 아래와 같습니다.
- b 태그의 사용례 입니다.
- strong 태그의 사용례입니다.
위의 외관에서 보면 두 태그 사이에 차이점이 없어 보이지만 브라우저는 b태그나 i태그는 단순 색상의 변경 또는 형태로, strong 태그나 em 태그는 중요성이 강조된 단어로 인식합니다. 따라서, 스크린 리더와 같은 TTS 음성지원 앱이 작동하면 strong 태그나 em 태그 부분에서는 강한 억양을 사용하게 됩니다.
2. <i>와 <em> 태그
<i> 태그는 기울임 글꼴을 나타냅니다. HTML5에서는 전문 용어, 문단에서 다른 언어나 필체로 표기되어 있는 부분 등을 표현하기 위해 사용합니다. <em> 역시 같은 기울임 글꼴로 표현되지만 위에서 살펴본 바와 같이 강조의 의미를 지니고 있습니다.
i 태그와 em 태그의 사용례는 아래와 같습니다.
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>mark{background-color:red}</style>
</head>
<body>
- i 태그의 <i>사용례</i> 입니다.
- em 태그의 <em>사용례</em> 입니다.
</body>
</html>
위의 내용에서 body 부분을 발췌한 모습은 아래와 같습니다.
- i 태그의 사용례입니다.
- em 태그의 사용례입니다.
위에서 설명드린 대로 이 역시 외형상으로는 구별이 불가능하지만 em 태그에서는 강조의 의미를 포함하고 있습니다.
'HTML > HTML 기초' 카테고리의 다른 글
| HTML5, <ol> 태그에 <ol type=""> 형식으로 속성 지정하기 (0) | 2020.08.02 |
|---|---|
| HTML5, <ol> <ul> <li> 태그 알아 보기 (0) | 2020.08.02 |
| HTML5, <mark> 태그 알아 보기 (0) | 2020.08.02 |
| HTML5, <sup> <sub> 태그 알아 보기 (0) | 2020.08.02 |