[HTML] <strong>, <em> 태그 이해하기

 

 마크업 프로페셔널로 거듭나기 

tobyyun 님의 마크업 개발 레벨 테스트 질문을 통해 마크업 역량을 키워보자 ψ(｀∇´)ψ

 

 

마크업 개발 레벨 테스트 질문

 

 

 

---

 

 

질문

 

웹표준에 맞게 작업할 때 b, i 태그 대신 적합한 태그는 각각 무엇일까요?

 

 

---

 

답

 

 

초등학교 때 나모웹에디터 같은 프로그램으로 홈페이지를 만들 때 <b>를 많이 썼었다. 그런데 개발자가 되기 위해 다시 마크업을 공부하니 더이상 <b>는 쓰지 말고 <strong>을 쓰라고 했다.

 

 

 

 

 

1. <b>와 <i>는 원래 어떤 태그였을까?

 

<b>는 bold, <i>는 italic의 약자를 사용한 태그다. 

원래 단어의 뜻 대로 b는 글자를 굵게, i는 글자를 기울여서 표시했다.

 

 

1-1. 왜 글자 모양을 달리 표시했을까?

 

무의식 중에 굵게, 혹은 기울여서 글자의 모양을 달리 쓰고는 있지만 b와 i가 디자인적으로 혹은 의미를 표시하기 위해 글자를 꾸미는 것인지 아니면 어떤 의미를 가지고 있는 건지 알아보려면 '마크업' 이란 무엇인지 기본으로 돌아가 보아야 하겠다.

 

 

마크업 언어(markup 言語, markup language)는
태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다.
태그는 원래 텍스트와는 별도로 원고의 교정부호와 주석을 표현하기 위한 것이었으나
용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게 되었다. 

 

 

마크업 문서는 그야말로 문서의 구조를 표현하는 문서다.

나의 경우 일상글은 산문 형태의 줄글로 작성하는데 이런 기술 블로그에서는 가능한 구조적인 문서의 형태를 갖추려고 하고 있다. (문서의 구조화는 정말 쉽지 않다... 줄글 쓰던 버릇이 남아서...)

 

현재 글처럼 대주제를 잡고, 소주제를 제목으로 표시해서 <h1>, <h2>, <h3> 와 같은 제목 크기값(티스토리에서 정해준)을 사용해 한 눈에 작은 글씨의 주제가 어떤 것인지 표시한다.

이렇게 리스트 불릿bullet이나 순서 번호, 제목 표시 등 다양한 구조를 표시해 작성한 문서를 마크업 문서라고 한다.

 

그래서 HTML로 작성된 마크업 문서에서는 <b> 와 <i>의 역할이 분명히 존재했다.

 

바로 '강조' 이다.

<b> 태그는 내용을 강조하기 위해 글자를 굵게 표시하고, <i> 태그는 인명(사람 이름)이나 고유명사를 강조하기 위해 사용했다.

 

 

 

 

---

b 태그

광복절은 대한민국의 독립기념일 입니다.

i 태그

광복절 은 대한민국의 독립기념일입니다.

---

 

 

 

 

2. 왜 <b>와 <i> 대신 <strong> 과 <em>을 사용하라고 하는걸까?

 

HTML5가 시작되면서 시맨틱 Semantic 이라는 개념이 생기기 시작했다.

시맨틱은 "의미론적인" 이라는 뜻을 가지고 있는데 문서 제작자, 즉 개발자가 뜻한 내용을 사용자에게 그대로 전달할 수 있도록 의미가 있는 태그를 사용하는 것을 시맨틱 태그라고 한다. 

 

HTML5가 시작되면서 단순히 <div>로 나누던 구역들을 <article>이나 <section> 등을 사용해 나누기도 하고, 

<header>나 <footer>처럼 하나의 문서, 하나의 웹페이지를 구성하는 틀을 간단하게 정의할 수 있게 되기도 했다.

이런 시맨틱 태그는 HTML5에서 웹표준의 하나로 자리잡게 되었다.

 

 

 

시맨틱 태그 Semantic Tag 의 역할

 

1) 검색엔진이 하나의 페이지를 분석(SEO)하는데 용이하게 해줌 

    ex) 회사 로고는 <header> 태그 안에, 회사 전화번호는 <footer>에 주로 있기 때문에 인식하기가 편함

2) 접근성이 낮은 사용자들에게 페이지를 쉽게 인식할 수 있도록 해줌

    ex) <nav> 태그로 표시된 메뉴를 '메뉴' 로 빠르게 인식할 수 있음

3) 개발자의 코드 재사용성과 코드 가독성을 높여줌

    ex) 태그 자체가 구조화되어 시간이 지난 뒤 누가 태그를 보더라도 내용이 쉽게 이해될 수 있으며 <article>태그 등으로 분리된 구조들은 통째로 들고 다른 페이지에서 사용해도 되기 때문에 태그 재사용이 쉽다.

 

 

 

 

이러한 시맨틱 태그의 장점을 따라가기 위해 <b> 나 <i> 같은 단순히 '강조' 라는 의미로 묶여있던 text-decoration 태그를 '의미론적'으로 만든 것이 <strong>과 <em> 이다.

 

 

실제로 보이스 리더Voice Reader 등으로 페이지를 읽게 되었을 때 <strong> 태그는 소리를 조금 더 크게 읽는다고 한다.

따라서 <b>나 <i> 대신 <strong> 이나 <em>을 사용하는 것이 웹페이지 전반의 접근성을 높여줄 수 있다.

 

 

 

 

3. <strong>과 <em>

 

<strong> 태그는 strong, <em> 태그는 emphasized text의 줄임말이다.

<strong> 태그는 종전처럼 강조하고 싶은 부분에 사용하게 되고, em 태그는 구어체와 같은 문장의 일부분을 강조하는데 쓰인다.

 

 

 

 

---

strong 태그

대피경보 즉시 대피하세요!

em 태그

저기요! 지금 몇시에요?

---

 

 

 

 

 

HTML <b> 태그 - ofcourse

마크업 언어 - 위키백과, 우리 모두의 백과사전

html 이란? 속 시원한 HTML 뜻 풀이