HTML5 - 텍스트(강조태그) , , ,

2022. 2. 22. 10:27

▶ 와 태그 요소

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <p>처음 적용해 볼 태그는 b 태그 입니다. <b>적용이 된 글자 입니다.</b></p>
  <p>처음 적용해 볼 태그는 strong 태그 입니다. <strong>적용이 된 글자 입니다.</strong></p>
</body>
</html>

결과 화면

이 태그에 요약을 하자면  태그는 굵은 글자를 표시하기 위한 용도로 사용한다.

그 외의 중요도는 없고, 요약 키워드, 리뷰의 제품명 등,

특별한 중요성을 띄지 않은 글자에 굵게 표시할 부분에 태그를 사용한다.

<storng> 태그는 태그처럼 글자를 굵게 표현되는 건 같다.

하지만 의미가 다르다.

 태그는 중요성이 크지 않는 부분에 사용하는 한 편

 태그는 중요한 글을 굵게 표현할 때 사용한다.

이게 이 둘 태그의 차이점이다.

▶ 와 태그 요소

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <p>처음 적용해 볼 태그는 i 태그 입니다. <i>적용이 된 글자 입니다.</i></p>
  <p>처음 적용해 볼 태그는 em 태그 입니다. <em>적용이 된 글자 입니다.</em></p>
</body>
</html>

결과 화면

이 태그도 둘 다 결과 화면을 보면, 표현되는 것이 같다.

글자 기울임 꼴 인데 하지만 이 태그도 쓰이는 의미가 다르다.

단순  태그는 글자를 강조한다.

이것보다 더욱더 글을 강조하고 싶을 때는 태그를 사용하면 된다.

 이 태그는 학명, 과학적인 이름, 글자 중 다름을 표현할 때

또는 주변 글자와 다른 톤을 표현할 때 사용하면 된다.

이처럼 겉으로 표현돼서 보이는 건 같지만 의미가 다르기 때문에

각각의 상황에 맞춰서 태그를 적절히 사용하여 개발하는 게 바람직하다.

이전 글에도 말했다시피 각각의 쓰임새가 있는 태그들은 규칙에 맞게 쓰여야 하는 이유가

웹 접근성을 고려해서 만들어야 바람직한 콘텐츠이기 때문이다.

여기서 잠깐!

1. 난 단지 굵은 글자를 이용해서 텍스트를 꾸미고 싶다!

2. 기울임 글꼴이 이뻐서 내가 만들고자 페이지에 텍스트들은 전부 기울임 꼴 태그를 이용하여 만들 것이다!

이런 경우라면, 각 태그들은 의미와 쓰임새가 있기 때문에

이 태그(강조 태그)들로 사용하면 안 되고 CSS로 폰트 스타일을 이용하여 꾸미는 게 바람직하다.

'web 언어 > HTML5 & CSS & Javascript' 카테고리의 다른 글

HTML5 - 텍스트(본문 내에서 특수 처리를 위한 구문추가) <s>, <u>, <mark>, <wbr> (0)	2022.02.23
HTML5 - 텍스트(수정태그) <small>, <del>, <ins> (0)	2022.02.22
HTML5 - 텍스트(인용 구문 태그)<blockquote>, <q> (0)	2022.02.21
HTML5 - 텍스트(text 단락구분 태그) <p>, <hr>, <br> (0)	2022.02.21
웹 페이지(html 시멘틱) 구획 요소 태그 (tag) - 4 (0)	2022.02.20

열공의 기록