0022 HTML로 글자의 형식 정하기
앞서부터 계속 스타일링은 CSS의 몫이라고 이야기해왔지만 HTML에서도 글자의 형식을 어느 정도 조작할 수 있다.
<b> - 굵게 처리한 텍스트
<strong> - 중요한 텍스트(굵게)
<i> - 이탤릭으로 처리한 텍스트
<em> - 강조 텍스트(이탤릭)
<mark> - 특별히 표시한 텍스트(하이라이트)
<small> - 작은 텍스트
<del> - 삭제된 텍스트(가운데 줄)
<ins> - 삽입된 텍스트(밑줄)
<sup> - 위에 첨부된 텍스트(위첨자)
<sub> - 아래에 첨부된 텍스트(아래첨자)
이제 
0022.html 파일을 다음과 같이 작성하여 실행해보자.
<!DOCTYPE html>
<html>
<head><title>HTML Formatting</title></head>
<body>
<p>
<b>b-굵게 처리한 텍스트</b><br />
<strong>strong-중요한 텍스트</strong><br />
<i>i-이탤릭으로 처리한 텍스트</i><br />
<em>em-강조 텍스트</em><br />
<mark>mark-특별히 표시한 텍스트</mark><br />
<small>small-작은 텍스트</small><br />
<del>del-삭제된 텍스트</del><br />
<ins>ins-삽입된 텍스트</ins><br />
위첨자<sup>sup-위에 첨부된 텍스트</sup><br />
아래첨자<sub>sub-아래에 첨부된 텍스트</sub>
</p>
</body>
</html>
크롬, 엣지, 파이어폭스 세가지 브라우저로 실행한 결과는 아래와 같이 나타난다.
지금부터는 이제 개발을 공부하기 시작하는 초보의 개인적인 이런 저런 생각이다.
최근의 실무에서는 CSS의 스타일시트로 글자를 꾸미고 있어 HTML의 글자 형식은 잘 사용하지 않는다고 들었다.
하지만 생각해보면 HTML의 마크업적인 측면은 내용을 구조화하는 것이다. 이는 화면에 디스플레이되는 측면보다는 검색엔진이 그 텍스트의 의미를 파악하기 위하여 어떤 요소가 사용되었는지 참조하는 측면이 더 중요하다. 그리고 그런 구조화는 영어권의 문서 작성 전통을 상당부분 수용하지 않을 수 없을 것이다. 가령, 영어권에서 이탤릭체를 사용하는 경우는 영화, 연극, 소설, 시 등의 제목을 인용하는 경우 단어 그 자체, 외국어, 고유명사 등등을 표시할 때 사용한다. 따라서 검색엔진은 <i> 요소로 감싼 텍스트를 어떤 작품의 제목, 고유명사, 하나의 단어나 인용구처럼 판단할 것이다. 이에 <em> 요소는 화면으로 보기에는 <i> 요소와 똑같이 이탤릭체로 강조되는 것으로 보이겠지만 검색엔진은 여기에 강조라는 가중치를 더할 것이다.
만일, 검색엔진이 ‘phantom’이라는 검색어로 검색을 한다고 해보자. 검색엔진은 ‘phantom'이라는 용어를 <strong>요소로 감싼 웹페이지의 주제가 'phantom'과 큰 관계가 있을 것이라고 판단하고 <b>라는 요소로 감쌌다면 적어도 웹페이지에서 'phantom'이라는 단어를 사람들이 놓치지 않길 바란다고 판단할 것이다.
또, <i> 요소로 감쌌다면 'phantom'이라는 단어가 "The Phantom of the Opera"와 같은 공연이나 작품과 관계있다고 판단할 것이고 더 나아가 <em> 요소로 감쌌다면 강조의 의미가 더해져 이 웹페이지가 "The Phantom of the Opera"와 같은 공연에 대한 이야기를 하는 웹페이지로 판단할 것이다.
따라서 이러한 점을 고려하여 단지, CSS의 스타일링으로 눈으로 보기에 예쁜 웹페이지를 만드는 것에서 멈추지 말고 웹페이지가 전달하고자 하는 정보를 검색엔진이 정확히 이해하고 다른 사람들에게 연결시켜줄 수 있도록 하려면 CSS로만 스타일링하지 말고 HTML 요소들도 적절히 잘 활용할 필요가 있다고 생각한다.
Anki 파일
아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다.
Ankilog 파일: 
0022 HTML로 글자의 형식 정하기.apkg
'Anki로 공부하기 > HTML공부' 카테고리의 다른 글
| 0024 블록(block) 요소와 인라인(inline) 요소 (0) | 2018.11.26 |
|---|---|
| 0023 HTML에서 인용하기(Quotation) (0) | 2018.11.25 |
| 0021 HyperText 링크를 제공하는 앵커(anchor)의 a요소 03 target 속성 (0) | 2018.11.22 |
| 0020 HyperText 링크를 제공하는 앵커(anchor)의 a요소 02 title 추가하기 (0) | 2018.11.21 |
| 0019 HyperText 링크를 제공하는 앵커(anchor)의 a요소 01 사용법 및 href 속성 (0) | 2018.11.20 |